Color
CAIRL color system — primary palette, extended colors, semantic tokens, dark mode, and accessibility compliance.
Color
CAIRL uses a constrained color palette anchored by Trust Blue. Every color has a defined role, and no arbitrary hex values are permitted.
Primary palette
| Name | Hex | HSL | Role |
|---|---|---|---|
| Privacy Black | #0F1729 | 222 47% 11% | Body text, dark surfaces |
| Foundation Blue | #102A5C | 218 71% 21% | Hero surfaces, authority contexts |
| Trust Blue | #1E40AF | 226 71% 40% | Interactive elements — buttons, links, favicon |
| Clean Slate | #64748B | 215 14% 47% | Secondary text, borders, muted UI |
| Protocol White | #F8FAFC | 210 40% 98% | Page backgrounds, light surfaces |
| Pure Black | #000000 | — | Wordmark only |
| Pure White | #FFFFFF | — | Wordmark only |
Surface vs interactive
Trust Blue is the interactive color — buttons, links, and active states. Foundation Blue is the surface color — hero sections, corporate backgrounds, and authority contexts. Do not swap their roles.
Extended palette
| Name | Hex | HSL | Role |
|---|---|---|---|
| Erroneous Red | #DC2828 | 0 74% 51% | Error states, destructive actions |
| Gated Green | #10B77F | 160 84% 39% | Success states, certified tier indicator |
| Credential Gold | #F59F0A | 38 92% 50% | Warning states, authenticated tier indicator |
Verification code color mapping
| Code | Color |
|---|---|
| A-0 | Clean Slate |
| A-I | Trust Blue |
| A-II, A-III+ | Gated Green |
| S-I, S-II, S-III+ | Credential Gold |
Semantic tokens
All colors are applied through CSS custom properties — approximately 40 tokens mapped in both light and dark modes. Key mappings:
Light mode (:root):
| Token | Maps to |
|---|---|
--background | Protocol White |
--foreground | Privacy Black |
--primary | Trust Blue |
--card | Pure White |
--muted | Protocol White derivative |
Dark mode (.dark):
| Token | Maps to |
|---|---|
--background | Privacy Black |
--foreground | Protocol White |
--primary | Trust Blue derivative (#3C83F6) |
--card | Privacy Black +3% lightness |
--muted | Privacy Black +5% lightness |
Dark mode
Dark mode inverts the surface hierarchy while preserving visual depth. Key adjustments:
- Trust Blue lightens to #3C83F6 for visibility on dark surfaces (still referred to as "Trust Blue" in brand terms)
- Semantic colors shift: Red becomes #BA2C2C, Green becomes #29BC86, Gold becomes #FBBD2D
- Foundation Blue remains unchanged in both modes
- Mode transitions are immediate — no animations on switch
Accessibility
Target: AA minimum for all text, AAA preferred for body copy.
Audit results:
- Light mode: 62% of text pairings meet AAA
- Dark mode: 68% of text pairings meet AAA
Key constraints:
- Clean Slate on Protocol White requires careful sizing (meets AA at text-sm and above)
- Gated Green requires contrast testing on both light and dark surfaces
- Credential Gold is never used as text — only as background accents and badges