Primitives
Five brand ramps from 50 to 900.
Terracotta --terra-*
50
100
200
300
400
500
600
700
800
900
Gold --gold-*
50
100
200
300
400
500
600
700
800
900
Forest --forest-*
50
100
200
300
400
500
600
700
800
900
Stone --stone-*
50
100
200
300
400
500
600
700
800
900
Obsidian --obs-*
50
100
200
300
400
500
600
700
800
900
Status ramps
red 50
red 100
red 200
red 400
red 500
red 600
red 700
amber 50
amber 100
amber 200
amber 400
amber 500
amber 600
amber 700
blue 50
blue 100
blue 200
blue 400
blue 500
blue 600
blue 700
Background
Light value → Dark value.
bg/base--color-bg-basestone/50 · obs/900
bg/surface--color-bg-surfacewhite · obs/800
bg/elevated--color-bg-elevatedwhite · obs/700
bg/sunken--color-bg-sunkenstone/100 · obs/700
bg/overlay--color-bg-overlaystone/200 · obs/900
bg/inverse--color-bg-inversestone/900 · stone/50
Text
Light value → Dark value.
text/primary--color-text-primarystone/900 · stone/50
text/secondary--color-text-secondarystone/700 · stone/300
text/tertiary--color-text-tertiarystone/600 · stone/400
text/disabled--color-text-disabledstone/500 · obs/400
text/link--color-text-linkterra/700 · gold/400
text/on-accent--color-text-on-accentwhite · obs/900
Accent
Light value → Dark value.
accent/default--color-accent-defaultterra/600 · gold/500
accent/hover--color-accent-hoverterra/700 · gold/600
accent/pressed--color-accent-pressedterra/800 · gold/700
accent/subtle--color-accent-subtleterra/50 · obs/700
accent/border--color-accent-borderterra/300 · gold/700
accent/text--color-accent-textterra/700 · gold/300
Secondary
Light value → Dark value.
secondary/default--color-secondary-defaultforest/500 · forest/300
secondary/hover--color-secondary-hoverforest/600 · forest/200
secondary/subtle--color-secondary-subtleforest/50 · forest/900
secondary/text--color-secondary-textforest/700 · forest/200
Border
Light value → Dark value.
border/default--color-border-defaultstone/200 · obs/700
border/strong--color-border-strongstone/300 · obs/600
border/focus--color-border-focusterra/500 · gold/500
border/error--color-border-errorred/600 · red/400
Status
Light value → Dark value.
status/success--color-status-successforest/500 · forest/300
status/warning--color-status-warningamber/500 · amber/400
status/error--color-status-errorred/600 · red/400
status/info--color-status-infoblue/600 · blue/400