Colors
Primitive color scales and the semantic tokens components actually bind to.
Two layers, always. Primitives are raw 50–950 scales; the semantic layer
(bg-*, fg-*, border-*) is what components reference. Never hardcode a
primitive hex inside a component — bind to the semantic token so light/dark
theming and re-branding stay a token remap, not a component edit.
Primitive scales
Brand
True blue. brand/600 is the primary brand color.
50
#EFF4FF
100
#DBE5FE
200
#BFD0FE
300
#93B0FD
400
#6187F9
500
#3B63F5
600
#2450EA
700
#1C3FD1
800
#1E37A9
900
#1E3485
950
#172152
Gray
Neutral scale with a slight cool bias to harmonize with brand blue.
50
#F9FAFB
100
#F2F4F7
200
#E4E7EC
300
#D0D5DD
400
#98A2B3
500
#667085
600
#475467
700
#344054
800
#1D2939
900
#101828
950
#0C111D
Error
Red scale for destructive actions, errors, and critical alerts.
50
#FEF3F2
100
#FEE4E2
200
#FECDCA
300
#FDA29B
400
#F97066
500
#F04438
600
#D92D20
700
#B42318
800
#912018
900
#7A271A
950
#55160C
Warning
Amber scale for cautionary states and non-blocking alerts.
50
#FFFAEB
100
#FEF0C7
200
#FEDF89
300
#FEC84B
400
#FDB022
500
#F79009
600
#DC6803
700
#B54708
800
#93370D
900
#7A2E0E
950
#4E1D09
Success
Green scale for confirmation, completion, and positive feedback.
50
#ECFDF3
100
#D1FADF
200
#A6F4C5
300
#6CE9A6
400
#32D583
500
#12B76A
600
#079455
700
#067647
800
#085D3A
900
#074D31
950
#053321
Semantic tokens
Each semantic token maps to a primitive step, and that mapping flips between light and dark mode — the token name never changes, only what it points to.
Backgrounds
bg-primary
#FFFFFF
bg-secondary
#F9FAFB
bg-tertiary
#F2F4F7
bg-brand-solid
#2450EA
bg-brand-subtle
#EFF4FF
bg-error-solid
#D92D20
bg-error-subtle
#FEF3F2
bg-warning-solid
#DC6803
bg-warning-subtle
#FFFAEB
bg-success-solid
#079455
bg-success-subtle
#ECFDF3
Foreground (text)
fg-primary
#101828
fg-secondary
#475467
fg-tertiary
#667085
fg-disabled
#98A2B3
fg-brand
#2450EA
fg-on-brand
#FFFFFF
fg-error
#D92D20
fg-warning
#DC6803
fg-success
#079455
Borders
border-default
#E4E7EC
border-strong
#D0D5DD
border-brand
#2450EA
border-error
#D92D20
border-warning
#DC6803
border-success
#079455
Focus ring
The signature glow-focus ring used on every interactive component's focus
state — brand-500 at 24% opacity, 4px spread, zero blur or offset. Not a
hard outline.
Full 50–950 steps for every scale live in tokens.css at the repo root —
the values above are the semantic aliases components actually use.