# Topic-Derived Theming

The explicit mandate: an explainer about ocean currents and an explainer about Rust lifetimes must NOT look like siblings. The theme is derived from the topic's world, then disciplined by taste-core rules (single desaturated accent, no AI-purple, typography rules, AI-tells ban).

## Derivation procedure

1. **Name the topic's native visual world in 3 words.** ("deep water, drift, bioluminescence" / "ledger paper, ink, stamps" / "silicon, traces, switching").
2. **Palette**: 1 base (usually near-neutral, tinted toward the world), 1 desaturated accent from the world, 1 semantic pair if needed (success/danger — only if the topic has real success/danger states). Dark base only if the world is dark (space, deep sea, terminals, night ecology) — not as a default cool look.
3. **Type register** (pick by domain, load from Google Fonts / Fontshare):
   - Precision-technical: grotesk (Space Grotesk, Archivo) + JetBrains Mono for values
   - Scientific-organic: humanist sans (Source Sans 3, Albert Sans) + serif display accent (Fraunces, Newsreader)
   - Historical/civic: transitional serif display (Playfair, Libre Caslon) + quiet sans body
   - Financial/legal: restrained serif or grotesk, tabular numerals mandatory
   - Playful/everyday-life topics: rounded sans (Nunito Sans) — sparingly, only when register truly is light
4. **Motion vocabulary from the domain's physics** — the strongest bespoke signal:
   - fluids/biology → slow ease-in-out, drift, organic bezier `cubic-bezier(0.4, 0, 0.2, 1)` and slower
   - electronics/computing → snap transitions, steps() easing, instant state flips with brief flash
   - mechanics/engineering → spring physics, overshoot, mass
   - finance/data → precise linear tweens, no bounce ever
   - space/scale → very slow, majestic, long durations
5. **One texture/motif maximum**: grid paper for math, scanlines for retro-computing, paper grain for history, caustics gradient for water. Applied to background at low intensity; it must never compete with content.
6. **Run taste-core §9 (AI-tells)** against the result. If the derived theme accidentally lands on an LLM default (purple gradient hero, glassmorphism everywhere), re-derive.

## Worked examples

| Topic | Base | Accent | Type | Motion | Motif |
|---|---|---|---|---|---|
| How DNS works | warm off-white | desaturated amber | Space Grotesk + JetBrains Mono | snap + relay | dotted route lines |
| Monsoon dynamics | pale sky-grey | muted teal | Albert Sans + Fraunces accent | slow fluid drift | isobar contours |
| Compound interest | ledger cream | oxidized green | grotesk, tabular nums | linear precise | faint ledger rules |
| How mRNA vaccines work | clinical white, warm tint | desaturated coral | Source Sans 3 | organic ease, gentle | cell-membrane curve |
| CPU branch prediction | near-black | phosphor green (desat) | mono-forward | steps() switching | scanline, faint |
| The 2008 crisis | newsprint | oxblood (sparingly) | Libre Caslon + sans body | restrained, no bounce | column rules |

## Emotional register overrides (win over domain aesthetics)

**Anxiety-adjacent** (medical diagnoses, debt/credit, legal trouble, job loss, safety):
- Calm neutral base regardless of domain; whitespace +1 density step airier
- MOTION dial −2; nothing pulses, nothing counts down
- Red only for semantically-required danger, never for emphasis
- Uncertainty rendered honestly: ranges, "varies by case", confidence labels — vagueness disguised as reassurance is a trust violation
- Zero gamification, zero playful loading copy, zero mascots
- Recap includes "questions worth asking a professional" instead of rabbit holes

**High-stakes decision** (should I take X): explainer teaches the decision *landscape* — tradeoff visuals, synced comparisons — and explicitly does not render a verdict.

**Kids / teen audience**: brighter accent allowed, larger type, shorter chunks (≤45s), more play — but the same coherence discipline; sugar is not a substitute for clarity.

## Mobile discipline

Assume 380px first. Side-by-side becomes stacked-with-sticky-controls; hover interactions get tap equivalents; scrub targets ≥44px; type ≥17px body. An explainer that only teaches on desktop fails half its readers.