Skip to content
Base Design System
  • Pages
    • 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
Base Design System
/
/
Semantic
Share
Explore

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
Design token name
Light
Primitive
Dark
Primative
color-background-primary
color-background-warning
color-background-success
color-background-error
color-background-neutral
color-background-weak
color-background-strong
color-background-highlight
color-background-disabled
color-background-link-active
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
⁠


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

Gallery
 
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.