A sky-blue brand scale for primary actions, slate neutrals for the canvas, semantic feedback for status, and a calibrated hail-intensity ramp for radar overlays. Every color is a token; no raw hex in product code.
Brand · Sky
11-step scale. sky-700 is primary brand.sky-600 is the default interactive primary (links, primary buttons in motion). Use 50–200 for soft surfaces and badges; 800–950 for dark-mode primaries and contrast type.
sky-50
#f0f9ff
sky-100
#e0f2fe
sky-200
#bae6fd
sky-300
#7dd3fc
sky-400
#38bdf8
sky-500
#0ea5e9
sky-600
#0284c7
sky-700
#0369a1
sky-800
#075985
sky-900
#0c4a6e
sky-950
#082f49
Neutrals · Slate
Cool slate reads as technical and modern alongside sky. Use 50–200 for muted backgrounds, 300–400 for borders, 500–600 for muted text, 700–950 for body and high-contrast type.
slate-50
#f8fafc
slate-100
#f1f5f9
slate-200
#e2e8f0
slate-300
#cbd5e1
slate-400
#94a3b8
slate-500
#64748b
slate-600
#475569
slate-700
#334155
slate-800
#1e293b
slate-900
#0f172a
slate-950
#020617
Semantic · Feedback
Three-token sets (50/500/700) for each state. Use 50 for soft backgrounds, 500 for icons and accents, 700 for text on soft backgrounds.
success
Approved supplements, completed inspections
success-50/500/700
warning
Pending reviews, missing fields
warning-50/500/700
danger
Rejected claims, out-of-scope citations
danger-50/500/700
info
Neutral system messaging
info-50/500/700
Domain · Hail intensity
A 5-step ramp calibrated for radar overlays and storm event severity. Reads accurately on satellite/topographic underlays. Always paired with a numeric size legend — color alone is insufficient evidence.
trace< 0.5"
0.75"pea
1.25"quarter
1.75"golf ball
2.0"+tennis ball
Semantic tokens · Light
What product code references. Tokens map to scale steps; if you need a new shade, add it to the scale and assign a token.
TokenValueUsage
--bg
slate-0
Page background
--bg-muted
slate-50
Sidebars, muted surfaces
--bg-subtle
slate-100
Hover states, subtle fills
--bg-inverse
slate-900
Inverted surfaces
--fg
slate-900
Body text
--fg-muted
slate-600
Secondary text
--fg-subtle
slate-500
Tertiary, captions
--border
slate-200
Default border
--border-strong
slate-300
Inputs, emphasized borders
--primary
sky-700
Primary actions, brand
--primary-hover
sky-800
Primary hover
--primary-soft
sky-50
Soft primary surfaces
--primary-soft-fg
sky-800
Text on primary-soft
CRM job hub tokens
Layout aliases for authenticated CRM job pages. These tokens preserve the approved Property tab shape: floating outline rail, center command stack, right action rail, and a real interactive map with predictable responsive height.
TokenValueUsage
--sc-job-hub-outline-width
290px
Floating property outline rail on authenticated job pages
--sc-job-hub-action-rail-width
340px
Right-side action rail for packets, recommendations, and recent activity
--sc-job-hub-panel-gap
22px
Three-column CRM workspace gutter
--sc-job-hub-map-height
360px
Interactive property command-center map height
--sc-job-hub-map-height-compact
300px
Compact map height before the mobile stack
Accessibility
All token pairings used for text meet WCAG AA at minimum. Body text on bg achieves AAA. Primary on white passes AA Large; primary-soft-fg on primary-soft passes AA at all sizes.
Do
Use sky-700 on white for primary CTAs. Use sky-50 + sky-800 for soft pills and tags.
Don't
Use sky-400 or sky-500 for body text on white — both fail AA. Reserve them for fills, icons, and dark-theme primary.