Brand (Navy)
The core brand palette. Navy is the single primary accent — used for CTAs, active states, focus rings, and links.
Navy /10
Active nav bg, subtle tinted surfaces
Navy 300
Illustrated elements, light accents
Navy 400
Secondary brand shade, hover on light surfaces
Navy 500
Primary CTA, active states, focus borders
Navy 600
Hover state on primary actions
Navy 900
Deep brand, pressed state
Neutral (Gray)
Surface, border, and text hierarchy. Neutral tones carry no brand meaning — they structure the layout.
White
Card backgrounds, inputs, modals
Gray 50
Page background, table row stripes
Gray 100
Input fills, secondary surfaces
Gray 200
Borders, dividers, separator lines
Gray 400
Placeholder text, muted icons
Gray 600
Secondary body text, subtitles
Gray 900
Headings, primary labels
Semantic
Color reserved exclusively for state meaning. Never apply these decoratively — each hue maps to one intent.
Success
Completed, approved, active, live
Warning
Pending, expiring, draft, scheduled
Error
Failed, rejected, destructive actions
Info
Processing, open, informational
Purple
Admin badge, beta, special roles
Status Surfaces
Chip and badge backgrounds. Always pair with the matching semantic text color — never use alone.
Success bg
Completed · Approved · Active chip bg
Warning bg
Pending · Expiring · Draft chip bg
Error bg
Failed · Rejected · Blocked chip bg
Info bg
Processing · Open · Info chip bg
Purple bg
Admin · Beta · Special role chip bg
Neutral bg
Archived · Closed · Inactive chip bg