Foundations
Color
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.
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.
Semantic · Feedback
Full 11-step ramps for each state. Tier 50/100 for soft backgrounds, 500 for icons and accents, 700 for text on soft backgrounds, 800/900 for deep accents and badges, 950 for elevated dark surfaces. Intermediate stops fill chart gradients and hover states.
Success — emerald
Approved supplements, completed inspections, green-light indicators.
Warning — amber
Pending reviews, missing fields, attention-required states.
Danger — red
Rejected submissions, out-of-scope citations, destructive actions.
Info — blue
Neutral system messaging, informational notices, in-progress states.
Domain · Hail intensity
Calibrated for radar overlays and storm event severity. The 5 named bins (100/300/500/700/900) align with MESH hail-size tiers and ship with a size legend below — color alone is insufficient evidence. The full 11-step ramp fills gradient interpolation in heat-map overlays.
Bin legend (5 named tiers)
Full ramp (11 stops for gradient interpolation)
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.
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.