Design Tokens

Design tokens are values associated with names, allowing styles to be applied consistently across your product in both, design and code.

Using design tokens instead of hardcoded values allows you to make sweeping changes in your product and automatically support global features, like dark mode.

Using tokens

In Arcade we provide design tokens as CSS variables. They are used in Arcade components and you can use them in your custom components as you start building custom components on top of Arcade. All css variables start with an --arcade prefix to avoid conflicts with external variables. Arcade color tokens support dark mode automatically, so you won't need to tweak components behavior for every component.

To get access to the token values, first you need to wrap your application with Arcade provider and pass theme and mode you would like to use. In the following example, we're using a default theme provided by the Arcade package, however you can also create your own theme and use it the same way.

Using in Javascript

Since all variables are defined in CSS, you don't have to call any utilities or hooks to get access to the tokens. Instead, you can use them directly even in your inline styles or css-in-js code.