Royal Tonal gives cohesion but no way for hero moments, data-viz, or diagram highlights to spike above the tonal register. This doc compares two candidate directions — Approach 2 (monochromatic + functional accent) and Approach 4 (analogous family) — against the locked Royal Tonal baseline.
Each scheme is shown on four surfaces: hero, case study card, build log ticker, and a diagram spot. Usage rules per scheme sit in the dark box underneath.
Single-hue 12-step scale. Everything derives from #3B5BDB. This is the control.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
Royal Tonal stays at ~90% of every surface. A single accent hue takes ~10%, scoped to exactly one job. The accent earns attention because it's rare.
The classic editorial pairing. Blue + gold reads as assured and considered — think Vanity Fair, Monocle, The Economist. Warm complementary creates the strongest possible contrast without feeling electric. Risk: leans traditional, can skew "finance" or "law firm" if overused.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
Tech-editorial, confident, awake. Chartreuse reads as "developer tools that know what they're doing" — Linear, Vercel, early GitHub. Sharper and more contemporary than amber. Risk: strongly signals "tech" — less versatile if you ever want the portfolio to read as strategic/product rather than engineering.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
Softer than amber, warmer than chartreuse. Coral reads as personable and approachable — more "product thinker with a human voice" than "serious engineer". Split-complementary (not pure opposite) which is why it feels easier on the eye. Risk: less distinct from designer portfolios — coral-on-dark is common.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
Not "base + accent" but "base + siblings". Adjacent hues on the wheel share royal blue's assurance while giving illustrations, data viz, and category differentiation more range. Each hue earns a functional role — not just "pop".
Shift one step along the wheel toward cyan. Same saturation band, same value range — they read as a family. Cyan gives diagrams a second stroke colour and data-viz a second series colour, without introducing temperature conflict. Editorial and modern, slightly "Stripe/Bloomberg" in feel.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
Shift one step the other way — toward violet. Reads richer and more "premium" than the cyan version. Closer to fashion/luxury magazine colour language. Works particularly well because the existing periwinkle (`royal-11` #A5B4FF) already bridges the two hues, making the family feel natural. Risk: edges toward "designer" aesthetic; slightly less tech-forward.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
The most ambitious option. Three hues spanning violet → royal → cyan give diagrams and data-viz a real colour vocabulary — enough to differentiate 3+ series without borrowing a fourth colour. Highest ceiling for illustration, lowest margin for error: if the three aren't used with discipline, the page can read as "3 brands fighting". Best if case studies lean heavily on diagrams and flow illustrations.
GTD planner with persistent SMS reminders. Migrated from Python/Railway to TypeScript/Cloudflare with single-choke-point spend protection.
Why 4B: the portfolio has three distinct content types (case studies, writing posts, build log + transcripts) and the style guide work in chunk 4a is explicitly trying to give them distinct voices. An analogous family lets you assign meaning per hue — royal for work, violet for thinking — in a way that a single accent can't. Periwinkle (royal-11) already sits between royal and violet, so the family will feel native rather than grafted on.
Why not 4C (triadic): three hues is the richest but most disciplined option. Unless diagrams dominate case study bodies (chunk 4d will tell us), the third hue adds complexity without proportional return. Promote 4B to 4C later if chunk 4d illustrations demand it.
Why 2A as backup: if the "two modes" framing doesn't hold up once case studies are written, amber + royal is the safer, more traditional choice — strong contrast, editorial legibility, and zero risk of category confusion. The accent is doing one thing and doing it loudly.
Against 2B (chartreuse) and 2C (coral): chartreuse is too "developer tools" for a product-thinking positioning; coral competes with a lot of designer portfolios and weakens the Royal Tonal identity rather than extending it.
Next step: pick between 4B and 2A, then extend the chosen option into a full token block (add `--violet-*` or `--amber-*` to `design.tokens.ts`) and rebuild the existing design explorer on it before committing to anything in `globals.css`.