Design tokens

Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex values for color or pixels for spacing) in order to maintain a scalable, consistent system for UI development.

Colour Palettes

Primary palette values. Accessed via map(colors, primary, <key>)

#f04
light
#c02
base
#601
dark

Secondary palette values. Accessed via map(colors, secondary, <key>)

#3be
light
#269
base
#257
dark

Neutral palette values. Accessed via map(colors, neutral, <key>)

#efeff0
lightest
#b9b9c0
lighter
#8c8c9c
light
#778
base
#636373
dark
#3f3f46
darker
#1f1f20
darkest

Borders

Width and radii tokens are used to style element borders. Accessed via map(borders, <key>).

Key Value
width-thin 1px
width-thick 2px
width-thicker 4px
width-thickest 8px
radius-small 0.125rem
radius-default 0.25rem
radius-circle 50%
## Breakpoints
Breakpoint tokens are used within @media queries. Accessed via map(breakpoints, <key>).
Key Value
min 280px
xsmall 360px
small 480px
medium 504px
large 800px
xlarge 960px
max 1280px
## Font families
Font family tokens are used for typographic styling. Accessed via map(fonts, <key>).
Key Value
family-sans 'Source Sans Pro', sans-serif
family-serif 'Source Serif Pro', serif
family-monospace 'Source Code Pro', monospace
family-system -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
## Layers
Layering tokens set the z-index layer value for elements. Accessed via map(layers, <key>).
Key Value
modal 9000
backdrop 8000
overlay 1000
default 1
underlay -1
## Sizes
Sizing tokens describe the dimensions of elements. Accessed via map(sizes, <key>).
Key Value
xsmall 0.25rem
small 0.75rem
medium 1.5rem
large 3rem
xlarge 4.5rem
## Spacing
Spacing tokens describe the distance between elements. Accessed via map(spaces, <key>).
Key Value
xsmall 0.25rem
small 0.5rem
medium 1rem
large 1.5rem
xlarge 3rem
xxlarge 4.5rem