Colors
Grays
black
gray4
gray3
gray2
gray1
white
Colors
blue-light
blue
blue-dark
red-light
red
red-dark
green-light
green
green-dark
yellow
Modifiers
The modifiers are semi transparent colours that can be used as a background to differentiate things.
tint
shade
Tokens
These colours change based on light and dark mode. They reference the colours detailed above.
bg
fg
bg-accent
fg-accent
bg-highlight
fg-highlight
pop
link
border
code
Accessibility
To aid accessibility, and to speed up design processes, any time a background colour is set a contrasting foreground colour (either black or white) will be set as well. This can be seen in the Gray and Colour swatches above. These colours can be overriden if desired.