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>)

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

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

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