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
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.
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.
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.