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