# CYDM — Design System > **Constraint: blue and orange only.** Every institution customises within that frame, never outside it. --- ## 0. The brand colours are sampled, not chosen Both hues come from the CYDM logo itself, read pixel-by-pixel rather than eyeballed: | | Hex | OKLCH | Where it comes from | |---|---|---|---| | **Blue** | `#1800AC` | `oklch(0.344 0.228 268.6)` | The "CYDM" letterforms | | **Orange** | `#FF741F` | `oklch(0.715 0.190 46.0)` | The swoosh | Two consequences worth knowing: **The blue is an indigo, not a mid-blue.** At hue 268.6 it sits outside the 220–260 range this document originally called "the blue family" — that range would have rejected the actual brand mark. The permitted range is therefore **240–285** for blue and **30–60** for orange. When a validator disagrees with the brand, the validator is what's wrong. **It is dark — L = 0.344.** That is excellent for a primary button (roughly 13:1 against white, far past AA) and nearly invisible against a dark background. It is the concrete reason the dark palette is re-derived rather than inverted: dark mode lifts the primary to `L = 0.62` while holding hue and dropping chroma slightly. Assets are generated from the master logo by `scripts/build-brand-assets.php` — trimmed wordmark, square mark, favicon set. Re-run it if the logo changes. --- ## 1. Why the palette is locked Most white-label platforms let tenants pick any colour. That produces two failures: institutions choose combinations that fail contrast requirements, and the product stops looking like one product. CYDM fixes the hues and lets tenants vary lightness, chroma and radius within them. - **Blue** carries trust and stability — the universal language of banking. It is the primary: navigation, primary actions, focus rings, links. - **Orange** carries warmth and energy — the community half of community finance. It is the accent, used sparingly: highlights, secondary emphasis, empty-state illustration. - The pair is **safe for deuteranopia and protanopia**, the common forms of colour blindness. Red/green would not be, which matters when status is being communicated. - Locking hues means every contrast pairing can be verified once, centrally, rather than trusted to each tenant. **Orange is an accent, not a co-primary.** Roughly 10% of coloured surface area. When everything is emphasised, nothing is. --- ## 2. Tokens Colours are authored in **OKLCH**, not hex. OKLCH is perceptually uniform: equal lightness numbers look equally light across hues, so a tenant sliding lightness cannot accidentally destroy contrast the way hex manipulation does. Format: `L C H` — Lightness (0–1), Chroma (0–0.4), Hue (0–360). ```css /* resources/css/app.css */ :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); /* PRIMARY — blue. Trust, finance, navigation, primary action. */ --primary: oklch(0.344 0.228 268.6); --primary-foreground: oklch(0.985 0 0); /* ACCENT — orange. Warmth, community, sparing emphasis. */ --accent: oklch(0.715 0.19 46); --accent-foreground: oklch(0.145 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: var(--primary); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); /* Lifted for dark backgrounds — the light-mode blue reads as muddy on dark. */ --primary: oklch(0.62 0.21 268.6); --primary-foreground: oklch(0.145 0 0); --accent: oklch(0.76 0.18 46); --accent-foreground: oklch(0.145 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: var(--primary); } ``` Dark mode is **not** an inversion. Lightness values are re-chosen per token so that contrast holds in both directions. --- ## 3. Financial status colours Loan classification is regulated and appears throughout the product. It needs its own scale — and it must never rely on colour alone, because status drives decisions and some users cannot distinguish the hues. Buckets and thresholds are per **GN 679 Reg 45(1)–(2)** — see [COMPLIANCE.md](COMPLIANCE.md) and [features/03-loans.md](features/03-loans.md). | Classification | Days past due | Provision | Token | Also signalled by | |---|---|---|---|---| | Current | 0–5 | 1% | `--status-current` (green) | ✓ icon, text label | | Especially Mentioned | 6–30 | 5% | `--status-mentioned` (amber) | ⚠ icon, text label | | Substandard | 31–60 | 25% | `--status-substandard` (orange) | ▲ icon, text label | | Doubtful | 61–90 | 50% | `--status-doubtful` (deep orange) | ▲ icon, text label | | Loss | over 90 | 100% | `--status-loss` (red) | ✕ icon, text label | Housing microfinance uses the separate Reg 45(3)–(4) schedule (91–180 / 180–360 / 361+) with the same five tokens. **Every status badge carries an icon and a written label.** Colour is reinforcement, never the sole carrier of meaning. --- ## 4. Per-tenant customisation Tenants pick from curated palettes, not a free colour picker. ```ts const BLUE_PALETTES = [ { name: 'CYDM Indigo', primary: '0.344 0.228 268.6' }, // DEFAULT — the brand mark { name: 'Deep Trust', primary: '0.30 0.19 265' }, // conservative { name: 'Bright Confidence', primary: '0.48 0.22 264' }, // digital-first { name: 'Navy Authority', primary: '0.32 0.15 258' }, // traditional ]; const ORANGE_PALETTES = [ { name: 'CYDM Orange', accent: '0.715 0.19 46' }, // DEFAULT — the swoosh { name: 'Warm Community', accent: '0.68 0.16 42' }, { name: 'Amber Warmth', accent: '0.72 0.15 38' }, { name: 'Sunrise Energy', accent: '0.78 0.18 55' }, ]; ``` The CYDM defaults are first in each list because they are the sampled brand values; the alternatives are variations around them, all inside the permitted hue ranges. Server-side validation rejects anything outside the permitted hue ranges (blue 240–285, orange 30–60) — the UI offers presets, but the API is the actual boundary, since branding can also be set through it. ### Avoiding the flash of default theme Applying tenant colours from a `useEffect` means the first paint uses CYDM defaults and then visibly snaps to the tenant's — cheap-looking, and worse on slow connections common in the field. Instead, middleware injects the tenant's variables as an inline `