Design system

Color

Color token values are defined by their context. There are two contexts "light" and "dark" context. Toggle the sun/moon in the top right of the site to see each context.

Table of contents

Theme and semantic tokens

Theme tokens are alias tokens that map a color token to intention. When possible, always use a theme token. Read more about using theme and semantic tokens on our color documentation.

When using color tokens in code, you can access them using theme.colors[tokenName]

Color tokens

Static color tokens

Static color tokens hold their value regardless of the current context. To use a static token apply a -static prefix to the color token.