Design tokens
Generated from packages/ui-tokens/src/theme.ts. The app follows this device's light or dark setting; the two panels below force each theme so they can be compared.
dark
Semantic colours
canvas
#0E0F12 · 1.0:1 on canvas
surface
#15171C · 1.1:1 on canvas
surface-raised
#1D2027 · 1.2:1 on canvas
fg
#F5F6F2 · 17.7:1 on canvas
fg-muted
#9AA1AD · 7.4:1 on canvas
fg-inverse
#0E0F12 · 1.0:1 on canvas
line
#2F343E · 1.5:1 on canvas
line-strong
#6B7280 · 4.0:1 on canvas
accent
#C7F000 · 14.5:1 on canvas
on-accent
#0E0F12 · 1.0:1 on canvas
accent-fg
#C7F000 · 14.5:1 on canvas
accent-line
#C7F000 · 14.5:1 on canvas
champion
#F5C542 · 11.8:1 on canvas
on-champion
#0E0F12 · 1.0:1 on canvas
champion-deep
#8C6A2F · 3.8:1 on canvas
on-champion-deep
#FFFFFF · 19.2:1 on canvas
champion-fg
#F5C542 · 11.8:1 on canvas
success
#3DDC84 · 10.7:1 on canvas
on-success
#0E0F12 · 1.0:1 on canvas
warning
#FFB020 · 10.5:1 on canvas
on-warning
#0E0F12 · 1.0:1 on canvas
danger
#FF6B6B · 6.9:1 on canvas
on-danger
#0E0F12 · 1.0:1 on canvas
info
#6CB4FF · 8.8:1 on canvas
on-info
#0E0F12 · 1.0:1 on canvas
In use
Week 6 check-in
Avg 157.4 lb, trend −0.7 lb/wk. Four sessions logged.
Accent as text
New PR · Squat 225 × 512-week streakOn trackTracking gapsPain reportedProgram ends in 10 days
light
Semantic colours
canvas
#F5F6F2 · 1.0:1 on canvas
surface
#FBFCF9 · 1.1:1 on canvas
surface-raised
#FFFFFF · 1.1:1 on canvas
fg
#0E0F12 · 17.7:1 on canvas
fg-muted
#4B5160 · 7.3:1 on canvas
fg-inverse
#F5F6F2 · 1.0:1 on canvas
line
#D5D8DE · 1.3:1 on canvas
line-strong
#6B7280 · 4.5:1 on canvas
accent
#C7F000 · 1.2:1 on canvas
on-accent
#0E0F12 · 17.7:1 on canvas
accent-fg
#4A5B00 · 6.9:1 on canvas
accent-line
#6F8700 · 3.8:1 on canvas
champion
#F5C542 · 1.5:1 on canvas
on-champion
#0E0F12 · 17.7:1 on canvas
champion-deep
#8C6A2F · 4.6:1 on canvas
on-champion-deep
#FFFFFF · 1.1:1 on canvas
champion-fg
#7A5A1E · 5.8:1 on canvas
success
#15803D · 4.6:1 on canvas
on-success
#FFFFFF · 1.1:1 on canvas
warning
#9A5B00 · 5.0:1 on canvas
on-warning
#FFFFFF · 1.1:1 on canvas
danger
#C62828 · 5.2:1 on canvas
on-danger
#FFFFFF · 1.1:1 on canvas
info
#1D5FD1 · 5.4:1 on canvas
on-info
#FFFFFF · 1.1:1 on canvas
In use
Week 6 check-in
Avg 157.4 lb, trend −0.7 lb/wk. Four sessions logged.
Accent as text
New PR · Squat 225 × 512-week streakOn trackTracking gapsPain reportedProgram ends in 10 days
Type scale
displayStronger every week48/52 · 700 · heading
h1Stronger every week36/40 · 700 · heading
h2Stronger every week28/32 · 600 · heading
h3Stronger every week22/28 · 600 · heading
titleStronger every week18/24 · 600 · body
bodyStronger every week16/24 · 400 · body
body-smStronger every week14/20 · 400 · body
labelStronger every week13/16 · 600 · body
captionStronger every week12/16 · 500 · body
Spacing, radii, elevation
0.5 · 2px
1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
20 · 80px
none · 0px
sm · 6px
md · 10px
lg · 16px
xl · 24px
full · full
level 1
level 2
level 3
Primitives
The raw scales. Components use the semantic tokens above.
neutral 0
neutral 50
neutral 75
neutral 100
neutral 200
neutral 300
neutral 400
neutral 500
neutral 600
neutral 700
neutral 800
neutral 850
neutral 900
neutral 950
volt 200
volt 300
volt 400
volt 500
volt 600
volt 700
volt 800