JavaScript required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Gallery
Base Design System
Share
Explore
Gallery
Base Design System
Base Design System
BASE
Patterns
Page patterns
Footer
Form patterns
Progressive disclosure patterns
Payment patterns
Service patterns
Components
Design tokens
Colours
Semantic
Typography
Components
Layout
Tone of voice
Change log
Design tokens
Semantic
These give our primitive design tokens meaning and usage within our design.
Our design system
respects user preferences
, so you’ll see both light and dark values for each token.
Backgrounds
Backgrounds
Design token name
Light
Primitive
Dark
Primative
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
Borders
Design token name
Light HEX
Light values
Dark HEX
Dark values
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
Text
Design token name
Light HEX
Light values
Dark HEX
Dark values
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
The following are pulled in via Airtable
Table that this table is a view of has been deleted. Click to delete the table.
Gallery
Share
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.