Pages
Design tokens
Semantic
These give our primitive design tokens meaning and usage within our design.
Our design system , so you’ll see both light and dark values for each token.
Backgrounds
Design token name
Light
Primitive
Dark
Primative
color-background-primary
primary-50
Neutral-100
color-background-warning
Warning-100
Acc3-200
color-background-success
Success-100
Acc3-200
color-background-error
Error-100
Acc3-200
color-background-neutral
Neutral-100
Acc3-200
color-background-weak
Prim-100
Acc3-200
color-background-strong
Neutral-400
Acc3-200
color-background-highlight
Prim-100
Acc3-200
color-background-disabled
Neutral-200
Acc3-200
color-background-link-active
Prim-200
Acc3-200
There are no rows in this table
Borders
Design token name
Light HEX
Light values
Dark HEX
Dark values
color-border-default
#65635b
TBC
color-border-neutral
#e7e5dd
TBC
color-border-focus
#fcea60
TBC
color-border-focus-outside
#333018
TBC
color-border-warning
#ffe0a2
TBC
color-border-error
#fddcdc
TBC
color-border-success
#eeffec
TBC
color-border-highlight
#b1bdbe
TBC
color-border-strong
#a1a093
TBC
There are no rows in this table
Text
Design token name
Light HEX
Light values
Dark HEX
Dark values
color-text-body
#2e2d25
TBC
color-text-headline
#2e2d25
TBC
color-text-warning
#da942c
TBC
color-text-success
#204814
TBC
color-text-error
#862120
TBC
color-text-strong
#2e2d25
TBC
color-text-highlight
#506061
TBC
color-text-disabled
#a1a093
TBC
color-text-required
#2e2d25
TBC
color-text-placeholder
#a1a093
TBC
color-text-info
#cccbc1
TBC
color-text-link
#607172
TBC
color-text-link-visited
TBC
TBC
There are no rows in this table
The following are pulled in via Airtable
Table that this table is a view of has been deleted. Click to delete the table.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.