Color System
Every color is a psychological safety decision. No red on primary surfaces. No pure black. No bright yellow. Colors must signal safety, ground the user, and communicate urgency without panic.
Rapida Blue — Trust Anchor
Deep, desaturated blue. Primary brand, navigation, headers, focus rings.
Ground Green — Stability & Success
Muted forest green. Success, confirmation, submitted states only — never decorative.
Alert Amber — Caution Without Alarm
Warm amber. Partial damage classification, offline warnings. Never for errors.
Crisis Rose — Calm Urgency
Desaturated warm coral. Complete damage classification. This is not red — it must never become red.
Neutrals
Near-black through off-white. Body text, borders, backgrounds, disabled states.
Semantic Color Mapping
All code references semantic tokens — never raw hex. One change updates every surface.
| Token | Role | Source | Swatch |
|---|---|---|---|
| surface-page | Page backgrounds | rapida-blue-50 | |
| surface-form | Form backgrounds | neutral-50 | |
| surface-nav | Navigation bar | rapida-blue-900 | |
| text-primary | All body text | grey-900 | |
| text-secondary | Labels, helper text | grey-700 | |
| color-primary | Brand, interactive | rapida-blue-900 | |
| color-success | Success states | ground-green-900 | |
| color-warning | Warning states | alert-amber-500 | |
| color-critical | Critical states | crisis-rose-400 | |
| damage-minimal | No/minimal damage | ground-green-800 | |
| damage-partial | Partial damage | alert-amber-500 | |
| damage-complete | Complete damage | crisis-rose-400 |
Calm Gradients
Subtle, directional, perceptually smooth. Max 2 stops, 160-180 degrees. Never on interactive elements.
Damage Classification
The 3-level system used on badges, map pins, report cards, and the confirmation screen.
Structurally sound, cosmetic or no visible damage
Repairable, remains usable with caution
Structurally unsafe or destroyed
WCAG Contrast Ratios
All text/background combinations verified against WCAG 2.1 AA (4.5:1 normal, 3:1 large text).
| Combination | Ratio | Grade |
|---|---|---|
| grey-900 on neutral-50 | 12.6:1 | AAA |
| grey-900 on white | 13.9:1 | AAA |
| rapida-blue-50 on rapida-blue-900 | 9.8:1 | AAA |
| ground-green-900 on ground-green-50 | 8.4:1 | AAA |
| white on ground-green-800 | 5.1:1 | AA |
| alert-amber-900 on alert-amber-50 | 9.1:1 | AAA |
| white on alert-amber-500 | 3.2:1 | AA Large |
| crisis-rose-900 on crisis-rose-50 | 10.2:1 | AAA |
| white on crisis-rose-400 | 3.6:1 | AA Large |
Absolute Color Rules
- Never use red (#ff0000 or similar saturated reds) — triggers physiological stress in trauma-sensitised users
- Never use pure black (#000000) — harsh contrast increases eye strain on low-quality screens
- Never use bright yellow for warnings — high-saturation yellow is anxiety-inducing at scale
- Crisis Rose must never be made more saturated — increased saturation shifts it toward red
- Ground Green is for success/submitted states only — decorative use dilutes the success signal
- Alert Amber is for functional states only — do not use as decorative accent
- All page backgrounds must use -50 scale tokens — pure white feels clinical; off-whites feel safe