Color System
Our system utilizes OKLCH for perceptually uniform color scaling.
Primitive Palettes
Polar-night
50
100
200
300
400
500
600
700
800
900
950
Fiery-coral
50
100
200
300
400
500
600
700
800
900
950
Sandcastle
50
100
200
300
400
500
600
700
800
900
950
Petrified-wood
50
100
200
300
400
500
600
700
800
900
950
Black-bear
50
100
200
300
400
500
600
700
800
900
950
Gray
50
100
200
300
400
500
600
700
800
900
950
Blue
50
100
200
300
400
500
600
700
800
900
950
Green
50
100
200
300
400
500
600
700
800
900
950
Orange
50
100
200
300
400
500
600
700
800
900
950
Red
50
100
200
300
400
500
600
700
800
900
950
Purple
50
100
200
300
400
500
600
700
800
900
950
Pink
50
100
200
300
400
500
600
700
800
900
950
Yellow
50
100
200
300
400
500
600
700
800
900
950
Semantic Mapping
Backgrounds
Background Primary
var(--color-background-primary)
Background Secondary
var(--color-background-secondary)
Background Tertiary
var(--color-background-tertiary)
Background Inverse
var(--color-background-inverse)
Background Brand
var(--color-background-brand)
Background Danger
var(--color-background-danger)
Surfaces
Surface Primary
var(--color-surface-primary)
Surface Secondary
var(--color-surface-secondary)
Surface Raised
var(--color-surface-raised)
Surface Overlay
var(--color-surface-overlay)
Surface Brand
var(--color-surface-brand)
Surface Success
var(--color-surface-success)
Surface Warning
var(--color-surface-warning)
Surface Danger
var(--color-surface-danger)
Surface Info
var(--color-surface-info)
Texts
Text Primary
var(--color-text-primary)
Text Secondary
var(--color-text-secondary)
Text Tertiary
var(--color-text-tertiary)
Text Disabled
var(--color-text-disabled)
Text Inverse
var(--color-text-inverse)
Text On Solid
var(--color-text-on-solid)
Text Brand
var(--color-text-brand)
Text Success
var(--color-text-success)
Text Warning
var(--color-text-warning)
Text Danger
var(--color-text-danger)
Text Info
var(--color-text-info)
Borders
Border Primary
var(--color-border-primary)
Border Secondary
var(--color-border-secondary)
Border Focus
var(--color-border-focus)
Border Brand
var(--color-border-brand)
Border Success
var(--color-border-success)
Border Warning
var(--color-border-warning)
Border Danger
var(--color-border-danger)
Interactives
Interactive Primary
var(--color-interactive-primary)
Interactive Primary Hover
var(--color-interactive-primary-hover)
Interactive Primary Active
var(--color-interactive-primary-active)
Interactive Secondary
var(--color-interactive-secondary)
Interactive Secondary Hover
var(--color-interactive-secondary-hover)
Interactive Secondary Active
var(--color-interactive-secondary-active)
Interactive Success
var(--color-interactive-success)
Interactive Success Hover
var(--color-interactive-success-hover)
Interactive Warning
var(--color-interactive-warning)
Interactive Warning Hover
var(--color-interactive-warning-hover)
Interactive Danger
var(--color-interactive-danger)
Interactive Danger Hover
var(--color-interactive-danger-hover)
Interactive Hover
var(--color-interactive-hover)
Interactive Pressed
var(--color-interactive-pressed)
Interactive Focus
var(--color-interactive-focus)
Interactive Disabled
var(--color-interactive-disabled)
Status
Status Success
var(--color-status-success)
Status Warning
var(--color-status-warning)
Status Danger
var(--color-status-danger)
Status Info
var(--color-status-info)
Status Highlight
var(--color-status-highlight)
Others
Primary Base
var(--color-primary-base)
Primary Hover
var(--color-primary-hover)
Primary Active
var(--color-primary-active)
Primary Surface
var(--color-primary-surface)
Primary Text
var(--color-primary-text)
Secondary Base
var(--color-secondary-base)
Secondary Hover
var(--color-secondary-hover)
Secondary Active
var(--color-secondary-active)
Secondary Surface
var(--color-secondary-surface)
Secondary Text
var(--color-secondary-text)
Accent Hover
var(--color-accent-hover)
Accent Active
var(--color-accent-active)
Accent Surface
var(--color-accent-surface)
Accent Text
var(--color-accent-text)
Accent Highlight
var(--color-accent-highlight)
Neutral Base
var(--color-neutral-base)
Neutral Muted
var(--color-neutral-muted)
Neutral Subtle
var(--color-neutral-subtle)
Neutral On
var(--color-neutral-on)