Skip to content
HeyOz
Foundations234 tokens

Colour

Six 12-step ramps and the semantic tokens built on them: surfaces, fills, borders and content.

Source
tokens/colors.json
Figma
Collections Primitives + Color (Dark)
In code
var(--surface-primary)

Scale

Every ramp has the same 12 steps. A step has the same lightness in every ramp and the same job. Orange 9 is the brand colour, #FF3D01.

1App bg2Subtle bg3Element4Hover5Active6Subtle border7Border8Strong border9Solid10Solid hover11Text low12Text highgray
orange
green
amber
red
blue

Lightness per step: 0.12 · 0.155 · 0.19 · 0.225 · 0.26 · 0.295 · 0.33 · 0.365 · 0.6536 · 0.7 · 0.8 · 0.95. Plus white (#FFFFFF).

Surfaces

12 tokens. The ladder, nested the way it is used: background → elevated, gray 1 → 5.

background→ gray/1 · L 0.12
surface/primary→ gray/2 · L 0.155 · +0.035
surface/secondary→ gray/3 · L 0.19 · +0.035
surface/tertiary→ gray/4 · L 0.225 · +0.035
surface/elevated→ gray/5 · L 0.26 · +0.035

Other surfaces

surface/inverse→ gray/12 · #F1EEEC
surface/fixed→ white · #FFFFFF
surface/brand→ orange/3 · #250A05
surface/success→ green/3 · #07180D
surface/warning→ amber/3 · #1B1206
surface/critical→ red/3 · #250A09
surface/info→ blue/3 · #0A1424

Fills

62 tokens. Backgrounds of interactive things. Neutral: hover +1 step, active +2, disabled −1. Solid colour: 9 · hover 10 · active 8.

Role
rest
hover
active
disabled
fill/primary
→ gray/2
→ gray/3
→ gray/4
→ gray/1
fill/secondary
→ gray/3
→ gray/4
→ gray/5
→ gray/2
fill/tertiary
→ gray/4
→ gray/5
→ gray/6
→ gray/3
fill/elevated
→ gray/5
→ gray/6
→ gray/7
→ gray/4
fill/inverse
→ gray/12
→ white
→ gray/11
→ gray/9
fill/brand
→ orange/9
→ orange/10
→ orange/8
→ gray/4
fill/success
→ green/9
→ green/10
→ green/8
→ gray/4
fill/warning
→ amber/9
→ amber/10
→ amber/8
→ gray/4
fill/critical
→ red/9
→ red/10
→ red/8
→ gray/4
fill/info
→ blue/9
→ blue/10
→ blue/8
→ gray/4
fill/brand-secondary
→ orange/3
→ orange/4
→ orange/5
→ orange/2
fill/success-secondary
→ green/3
→ green/4
→ green/5
→ green/2
fill/warning-secondary
→ amber/3
→ amber/4
→ amber/5
→ amber/2
fill/critical-secondary
→ red/3
→ red/4
→ red/5
→ red/2
fill/info-secondary
→ blue/3
→ blue/4
→ blue/5
→ blue/2
fill/fixed
→ white
—
—
→ gray/9

Borders

34 tokens. border/X sits 2 steps above surface/X. Hover +1, disabled −1.

Role
rest
hover
active
disabled
border/primary
→ gray/4
→ gray/5
—
→ gray/3
border/secondary
→ gray/5
→ gray/6
—
→ gray/4
border/tertiary
→ gray/6
→ gray/7
—
→ gray/5
border/elevated
→ gray/7
→ gray/8
—
→ gray/6
border/inverse
→ gray/12
→ white
—
→ gray/9
border/brand
→ orange/9
→ orange/10
—
→ orange/7
border/success
→ green/9
→ green/10
—
→ green/7
border/warning
→ amber/9
→ amber/10
—
→ amber/7
border/critical
→ red/9
→ red/10
—
→ red/7
border/info
→ blue/9
→ blue/10
—
→ blue/7
border/focus
→ orange/10
—
—
—
border/focus-inverse
→ gray/1
—
—
—
border/brand-secondary
→ orange/6
—
—
—
border/selected
→ orange/10
—
—
—

Content

53 tokens. Text and icons, each shown on the background it is meant for. Colour text: 10 · hover 11 · active 9 · disabled 7.

Role
rest
hover
active
disabled
content/primary
Aa
→ gray/12
—
—
Aa
→ gray/8
content/secondary
Aa
→ gray/11
—
—
Aa
→ gray/8
content/tertiary
Aa
→ gray/9
—
—
Aa
→ gray/8
content/link
Aa
→ orange/10
Aa
→ orange/11
—
—
content/selected
Aa
→ orange/10
—
—
—
content/inverse-primary
Aa
→ gray/1
—
—
Aa
→ gray/9
content/inverse-secondary
Aa
→ gray/4
—
—
Aa
→ gray/9
content/fixed-primary
Aa
→ gray/1
—
—
Aa
→ gray/9
content/fixed-inverse
Aa
→ white
—
—
Aa
→ gray/9
content/brand
Aa
→ orange/10
Aa
→ orange/11
Aa
→ orange/9
Aa
→ orange/7
content/success
Aa
→ green/10
Aa
→ green/11
Aa
→ green/9
Aa
→ green/7
content/warning
Aa
→ amber/10
Aa
→ amber/11
Aa
→ amber/9
Aa
→ amber/7
content/critical
Aa
→ red/10
Aa
→ red/11
Aa
→ red/9
Aa
→ red/7
content/info
Aa
→ blue/10
Aa
→ blue/11
Aa
→ blue/9
Aa
→ blue/7
content/brand-inverse
Aa
→ orange/8
—
—
—
content/success-inverse
Aa
→ green/8
—
—
—
content/warning-inverse
Aa
→ amber/8
—
—
—
content/critical-inverse
Aa
→ red/8
—
—
—
content/info-inverse
Aa
→ blue/8
—
—
—
content/on-brand
Aa
→ white
—
—
Aa
→ gray/9
content/on-success
Aa
→ white
—
—
Aa
→ gray/9
content/on-warning
Aa
→ white
—
—
Aa
→ gray/9
content/on-critical
Aa
→ white
—
—
Aa
→ gray/9
content/on-info
Aa
→ white
—
—
Aa
→ gray/9
content/on-inverse
Aa
→ gray/1
—
—
—