How to use design tokens in CSS

We can use design tokens in JS fils by importing


But how can I access these predefined tokens in a CSS file as variables. Is there a CSS pack ADS has released which I can use.

Thank you

Hi @YohanEdiriweera, you can use CSS variables as shown here:

// CSS variables, Sass, Less
.bg-surface {
  background: var(--ds-surface-raised, #eeeeee);

source: Migrate to tokens - Tokens - Atlassian Design System

You can find the list of the tokens here:

To see the CSS variables you need to switch the “JavaScript syntax” dropdown to “CSS syntax”.

More information:

Maciej Adamczak
Atlassian Developer