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
#FAFAFA
100
#F5F5F5
200
#E5E5E5
300
#D4D4D4
400
#A3A3A3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
950
#0A0A0A
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
#058550
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
#FAFAFA
bg-tertiary
#F5F5F5
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
#058550
bg-success-subtle
#ECFDF3
Foreground (text)
fg-primary
#171717
fg-secondary
#525252
fg-tertiary
#737373
fg-disabled
#A3A3A3
fg-brand
#2450EA
fg-on-brand
#FFFFFF
fg-error
#D92D20
fg-warning
#DC6803
fg-success
#058550
Borders
border-default
#E5E5E5
border-strong
#D4D4D4
border-brand
#2450EA
border-error
#D92D20
border-warning
#DC6803
border-success
#058550
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.