Color
Design system color palette and token names.
Overview
Tokens can be accessed by using var
. For example $accent-green-primary
would be color: var(--accent-green-primary)
.
Color type values
type TextColors =
'primary' |
'secondary' |
'tertiary' |
'disabled' |
'destructive' |
'link' |
'inverse' |
'white' |
'black';
type AccentColors =
'green' |
'orange' |
'red' |
'yellow' |
'pink' |
'dark-blue' |
'blue';
Base Palette
![](/ui/_next/static/media/base-tokens.885fc1f7.png)
Light color tokens
![](/ui/_next/static/media/light-tokens.6aea413c.png)
Dark color tokens
![](/ui/_next/static/media/dark-tokens.c525394b.png)