Gallery
Base Design System
Share
Explore
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
1
color-background-primary
primary-50
Neutral-100
2
color-background-warning
Warning-100
Acc3-200
3
color-background-success
Success-100
Acc3-200
4
color-background-error
Error-100
Acc3-200
5
color-background-neutral
Neutral-100
Acc3-200
6
color-background-weak
Prim-100
Acc3-200
7
color-background-strong
Neutral-400
Acc3-200
8
color-background-highlight
Prim-100
Acc3-200
9
color-background-disabled
Neutral-200
Acc3-200
10
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
1
color-border-default
#65635b
TBC
2
color-border-neutral
#e7e5dd
TBC
3
color-border-focus
#fcea60
TBC
4
color-border-focus-outside
#333018
TBC
5
color-border-warning
#ffe0a2
TBC
6
color-border-error
#fddcdc
TBC
7
color-border-success
#eeffec
TBC
8
color-border-highlight
#b1bdbe
TBC
9
color-border-strong
#a1a093
TBC
There are no rows in this table
Text
Design token name
Light HEX
Light values
Dark HEX
Dark values
1
color-text-body
#2e2d25
TBC
2
color-text-headline
#2e2d25
TBC
3
color-text-warning
#da942c
TBC
4
color-text-success
#204814
TBC
5
color-text-error
#862120
TBC
6
color-text-strong
#2e2d25
TBC
7
color-text-highlight
#506061
TBC
8
color-text-disabled
#a1a093
TBC
9
color-text-required
#2e2d25
TBC
10
color-text-placeholder
#a1a093
TBC
11
color-text-info
#cccbc1
TBC
12
color-text-link
#607172
TBC
13
color-text-link-visited
TBC
TBC
There are no rows in this table


info
The following are pulled in via Airtable
Table that this table is a view of has been deleted. Click to delete the table.

Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.