Colour token → UI component mapping rules · Generated November 11, 2026
| Token | Example (Spectrum Realty) | Primary Role |
|---|---|---|
| C1 — Darkest | #231F20 | Navbar bg, section headers, primary button bg, active tabs, headings text |
| C2 — Accent / Mid | #E6412D | Button highlights, icon color, inactive tab text, muted text, links, progress bar fill |
| C3 — Lightest tint | Light red tint | Chip/tag bg, nav active bg, border colors, progress track, card hover border, skeleton shimmer |
| C4 — Always White | #FFFFFF | Page bg, card bg, tab bar bg, input bg, dropdown menus — never changes |
| Component | Background | Text | Border / Accent |
|---|---|---|---|
| Sticky Navbar | C1 | White (auto-contrast) | C2 bottom 2px |
| Section Headers | C1 (dark) | White (auto-contrast) | — |
| Primary Button | C1 | White | — |
| Secondary Button | C4 (white) | C1 | C1 |
| Ghost Button | Transparent | C2 | C2 (faint) |
| Active Tab | C4 | C1 | C1 (bottom underline) |
| Inactive Tab | C4 | C2 | Transparent |
| Selected Pill / Nav item | C1 | White | — |
| Unselected Pill | White | C2 | C3 |
| Chip / Feature Tag | C3 | C1 | C3 slightly darker |
| Stat Pills | White | C1 (value) · C2 (label) | C3 |
| Input Fields | C4 | C1 | C3 → C1 on focus |
| Input Focus Ring | — | — | C1 + 20% opacity glow |
| Cards | White | C1 (heading) · C2 (body) | C3 |
| Progress Bar Track | C3 | — | — |
| Progress Bar Fill | C2 | — | — |
| Dropdown Menus | C4 | C1 | C3 |
| Skeleton Shimmer | C4 → C3 → C4 gradient | — | — |
| Footer | White | C1 (name) · C3 (muted) | C2 top 3px |
| Score / Rating Bars | C3 (track) | Semantic color | — |
| # | Rule |
|---|---|
| 1 | C4 is always white — large surfaces (pages, cards, modals) never take brand colors. |
| 2 | Text on C1 is always white, or auto-contrasted via bestTextColor() for accessibility. |
| 3 | Text on C3 is always C1 (dark on light) — never C2 on C3 which may fail WCAG. |
| 4 | Semantic error colors are never overridden by the palette — errors stay red (#FCEBEB / #791F1F). |
| 5 | C3 is the "safe fill" — any background that needs to feel branded-but-not-heavy uses C3. |
| 6 | Brand color type hints (dark, accent, light) directly map to C1, C2, C3 — no guessing. |
| 7 | White (#FFFFFF) from the brand lookup is assigned to C4 only — never to C1/C2/C3. |
| Brand color type | Maps to | Fallback if missing |
|---|---|---|
| "dark" / "darkVibrant" | C1 | Darkest hex by luminance |
| "accent" / "vibrant" | C2 | Second hex by luminance |
| "light" / "lightVibrant" / "muted" | C3 (if luminance > 0.50) | lightenHex(C2, 70%) |
| "light" with luminance < 0.50 | Ignored → C3 auto-generated | lightenHex(C2, 75%) |
| "light" = #FFFFFF (white) | Assigned to C4 slot only | C4 always = white |
Use your browser's "Save as PDF" option in the print dialog.