Color System
Baby Blue is the hue that carries the brand. Pure neutrals carry text and chrome. Twelve accents sit in reserve for data, status, and tiles.
Baby Blue 500
The single hue that carries our brand. Use 500 as the anchor, 600 for press states, 100–200 for hover backgrounds.
01 · Primary scale
19 shades of Baby Blue
Every cell below is clickable — tap to copy its hex value to your clipboard.
02 · Neutrals
Pure grays, zero chroma
A comprehensive gray scale for text, backgrounds, borders, and subtle UI elements. Body text lives at 700, muted at 500, hairlines at 200.
03 · Accents
Twelve supporting colors
Accents decorate tiles and status states. Primary carries the brand — don't let accents steal the backbone. Each accent ships with light, base, and dark variants.
04 · Semantics
Meaning over hue
Always reach for semantic tokens in product code. The hue can evolve; the meaning shouldn't.
--color-success "Changes saved."
--color-warning "Check before you send."
--color-error "Something went wrong. Please try again."
--color-info "We've queued your export."
05 · In-product reference
How semantic tokens render today
Live snapshot of how each semantic role resolves across text, background and status treatments.
Text
Backgrounds
Status