arkaos 4.29.0 → 4.30.0

package/departments/brand/skills/design-system/references/themes/lumen.md

@@ -0,0 +1,480 @@
+# Theme — Lumen
+
+> Source: verbatim port of `references/themes/lumen.md` from the **hallmark** skill repo (MIT — see `hallmark.LICENSE` one directory up, in the references root). Sanitized for ArkaOS: diversification-log path under `.arka/design/`, design stamps rendered as `[arka:design-dna]`, exemplar-list cleanup. Upstream cross-references (`site/css/tokens.css`, `site/examples/*`, `custom-theme.md`, `layout-and-space.md`, slop-test gate numbers) name hallmark repo files that are not bundled here and travel as plain text.
+
+Premium AI-tool register, built around a **hand-engineered apparatus** rather than a glowing orb. One precision SVG/CSS object per page, with leader-line callouts in mono micro-type, set against dead space alongside a **lowercase classical-serif headline** and a technical mono eyebrow. Three font families. Two palette drops (Night Foundry / Day Foundry) with different physics — Night emits, Day refracts — and entirely different visual languages, not the same shape in two colours.
+
+Lumen runs a strict **two-register typography system**: all prose is **lowercase** (hero titles, section titles, lede, body, buttons, nav, brand, footer copy — even acronyms when they appear in body text); all mono labels are **UPPERCASE** (eyebrows, callouts, meter labels, stat labels). The contrast between quiet lowercase prose and loud UPPERCASE machine-readout is the typographic signature.
+
+Loaded eagerly by the design-system skill whenever the catalog pick is `lumen`. Palettes + font stack live in `site/css/tokens.css` (upstream hallmark repo — not bundled here) under `[data-theme="lumen"]` (Night, default) and `[data-theme="lumen"][data-drop="day"]` (Day). This file carries the drops + apparatus family + signature moves + motion + anti-patterns.
+
+## Axes (diversification)
+
+- **Paper band** — Night: dark cool-violet (`L 13%, H 265`). Day: light cool bone with violet pull (`L 97%, H 265`). The 265° hue is deliberate — sits 25° from Midnight's 250 and 65° from Aurora's 200, so a Lumen page is not confusable with either neighbour at a glance.
+- **Display style** — **classical-serif-lowercase** (Instrument Serif 400, upright, **all-lowercase**, with verb landmark via accent colour + draw-in underline). No italic anywhere. Distinct from italic-serif (Specimen/Studio/Atelier ship italic as default) and from roman-serif (Newsprint uses sentence case). Lumen is the catalog's only lowercase-headline theme.
+- **Accent hue** — Night: **molten brass** (`H 50`, not amber). Day: **deep indigo with violet tilt** (`H 268`). Coral chord (`H 18`) sits behind both as the secondary chromatic.
+
+## Reference register
+
+Modal · Anthropic (Claude product surfaces) · ElevenLabs · Cluely · Adept · Granola · Cohere · Inflection · Linear (premium pricing pages) · Vercel (design guidelines, frontier-AI sections) · Cursor (high-fidelity product mockup heroes).
+
+The aesthetic to match: a single hand-engineered artefact in dead space; a lowercase classical-serif headline with one accent-coloured verb; mono UPPERCASE technical labels that read as if pulled from an internal docs site; tabular numerals everywhere a number appears. The combination is what AI-tool defaults do not ship — and exactly the combination that breaks every default the model was trained on.
+
+**Patron-saint reference (internal):** *Modal homepage rate sheet* (the receipt is the artwork) + *an annotated hero apparatus diagram* (leader lines + labelled callouts) + *Anthropic Claude landing typography* (transitional serif + humanist sans). When in doubt about restraint, ask "would Modal ship this much chrome?" If yes, you've gone too far.
+
+## Palette drops
+
+A Lumen drop is a named palette + apparatus-physics pair. The structural signature (italic-pivot headline + mono eyebrow + apparatus + leader callouts + meter strip + blueprint grid + hairline cards + three-stat row) is constant; the drop rotates the canvas, the accent, and what the apparatus *does*.
+
+### Drop 01 · Night Foundry *(default · canonical)*
+
+Cool-violet near-black canvas. Molten-brass accent that *emits*. The apparatus is an instrument — a filament-in-chamber, a circuit topology, a precision indicator — and it generates the light. Halos and inner-emit washes use `--color-glow` at 42% opacity.
+
+- `--color-paper: oklch(13% 0.014 265)` — late-night studio, violet tilt
+- `--color-ink: oklch(96% 0.006 262)` — near-white headlines
+- `--color-accent: oklch(76% 0.17 50)` — molten brass
+- `--color-accent-2: oklch(68% 0.16 18)` — coral chord
+- `--color-glow: oklch(80% 0.16 50 / 0.42)` — dense halo
+- `--color-paper-emit: oklch(76% 0.17 50 / 0.04)` — inner-emit canvas wash
+- `--rule-blueprint: oklch(96% 0.006 262 / 0.04)` — grid hairline
+
+**Apparatus physics — emission.** The focal element is a built object (filament, circuit, indicator dial, layered lens stack) that *contains* the light source. Subtle pulse animation (`--dur-pulse: 4s`) suggests the instrument is *running*. Card shadows are soft depth (`0 24px 60px -28px oklch(0% 0 0 / 0.55)`), not glows — the apparatus is the only thing that emits.
+
+**When to pick:** inference platforms · serverless GPU · model APIs · AI coding agents · voice synthesis · agentic tools · developer infra · anything that wants to feel "after hours" and "instrument-grade." Default.
+
+### Drop 02 · Day Foundry
+
+Cool-bone canvas with a violet pull. Deep indigo accent that *refracts*. The apparatus is a transparent prism / lens stack / chromatic dispersion element — light passes through and is *separated*, not generated. Spectrum exit-fan + measurement annotations + scale bar give it the feel of a calibrated optical instrument, not a vibey gradient.
+
+- `--color-paper: oklch(97% 0.008 265)` — cool bone, violet pull
+- `--color-ink: oklch(18% 0.014 265)` — near-black, cool
+- `--color-accent: oklch(46% 0.24 268)` — deep violet-indigo
+- `--color-accent-2: oklch(68% 0.16 18)` — coral chord (red end of spectrum)
+- `--color-glow: oklch(58% 0.22 268 / 0.28)` — indigo halo through prism
+- `--color-paper-emit: oklch(46% 0.24 268 / 0.03)` — canvas wash, faint
+
+**Apparatus physics — refraction.** The focal element is *static at rest* with a 320ms reveal on first paint (the prism appears, the spectrum fans, both settle). No perpetual motion. The light is captured, not generated. Annotations carry mono micro-labels: `λ = 612 nm`, `θ_out = 38°`, etc. — the prism reads as a *measurement instrument*, not decoration.
+
+**When to pick:** AI for science · climate / research labs · document AI · typography / design tools · daytime productivity · briefs that want "considered" and "clear" rather than "after-dark and intense."
+
+### Drop rotation rule
+
+The diversification log records `"theme": "lumen", "drop": "night"` (or `"day"`). Two consecutive Lumen builds must use different drops unless the brief contains a strong drop signal.
+
+### Why two drops, not five
+
+Lumen's identity is the apparatus, not the palette. Adding more drops would dilute what makes the theme legible. Two drops with *different physics* (emission vs refraction) carry more variety than five drops with the same artefact in different colours.
+
+## The apparatus family
+
+Lumen's central commitment: **never a generic glowing orb**. The orb is the most overworked AI-tool tell of 2024–2025; every inference platform ships one. Lumen builds a *specific* hand-engineered object per page, chosen to reflect what the product *does*.
+
+The canonical family (pick one per build, in the order of preference for the brief):
+
+### Apparatus type · Filament chamber *(Night Foundry, instrument-grade)*
+
+A vertical glowing rod inside a rounded-rect cylindrical chamber, crossed by 3–4 horizontal hairline "electrodes." Subtle pulse on the filament (3% intensity oscillation, 4s period). References vacuum tubes, Tesla coils, fusion experiments, mass spectrometers. Reads as a *machine*.
+
+**When to pick:** inference, runtime, model serving, anything that *produces* output. Brand verbs: think, run, generate, infer, render, execute.
+
+**SVG/CSS skeleton:**
+
+```html
+<figure class="apparatus apparatus--filament" aria-hidden="true">
+  <div class="chamber">
+    <span class="chamber__wall"></span>
+    <span class="chamber__electrode" style="--y: 22%"></span>
+    <span class="chamber__electrode" style="--y: 42%"></span>
+    <span class="chamber__electrode" style="--y: 62%"></span>
+    <span class="chamber__electrode" style="--y: 82%"></span>
+    <span class="chamber__filament"></span>
+    <span class="chamber__glow"></span>
+    <span class="chamber__stencil">RX-04</span>
+  </div>
+  <ul class="callouts">
+    <li class="callout" style="--side: left; --y: 18%"><span>P50 · 28 ms</span></li>
+    <li class="callout" style="--side: right; --y: 36%"><span>cold-start · 0.4 s</span></li>
+    <li class="callout" style="--side: left; --y: 62%"><span>rps · 12 k</span></li>
+    <li class="callout" style="--side: right; --y: 80%"><span>RX-04 · h100 80gb</span></li>
+  </ul>
+</figure>
+```
+
+```css
+.chamber {
+  position: relative; width: clamp(180px, 22vw, 280px); aspect-ratio: 0.55;
+  border: 1px solid var(--color-rule-2);
+  border-radius: 999px;
+  background: oklch(17% 0.016 265 / 0.8);
+  overflow: hidden;
+}
+.chamber__filament {
+  position: absolute; top: 8%; bottom: 8%; left: 50%;
+  width: 2px; margin-left: -1px;
+  background: linear-gradient(to bottom,
+    oklch(96% 0.05 50) 0%,
+    oklch(80% 0.17 50) 50%,
+    oklch(96% 0.05 50) 100%);
+  box-shadow:
+    0 0 16px 4px var(--color-glow),
+    0 0 48px 12px oklch(80% 0.16 50 / 0.22);
+  animation: filament-pulse var(--dur-pulse) ease-in-out infinite;
+}
+.chamber__electrode {
+  position: absolute; left: 0; right: 0; top: var(--y);
+  height: 1px; background: var(--color-rule-2);
+}
+.chamber__glow {
+  position: absolute; inset: 0;
+  background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--color-glow-2) 0%, transparent 70%);
+  pointer-events: none;
+}
+@keyframes filament-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.86; }
+}
+.callout {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: var(--tracking-micro);
+  text-transform: uppercase;
+  color: var(--color-muted);
+  position: absolute;
+  /* leader-line drawn as ::before pseudo */
+}
+.callout::before {
+  content: ""; position: absolute;
+  top: 50%; height: 1px;
+  background: var(--color-rule-2);
+}
+```
+
+### Apparatus type · Codebase graph / topology *(Night Foundry)*
+
+An annotated SVG graph: one central node + 5–7 satellite nodes connected by hairlines, each satellite labelled with a mono filename or symbol. Light "flows" along the connecting lines at a slow walk (subtle gradient dot moving along each path). References CAD schematics, dependency graphs, electrical circuits, knowledge graphs.
+
+**When to pick:** AI coding agents, knowledge tools, anything that *traverses* a structured space. Brand verbs: read, trace, explore, connect.
+
+### Apparatus type · Indicator dial / spectrum *(either drop)*
+
+A circular dial (Night) or a horizontal spectrum bar with annotated wavelength labels (Day). Includes scale ticks at known increments, a moving needle or active band, and mono callouts at boundaries. References analogue gauges, oscilloscopes, audio meters.
+
+**When to pick:** voice synthesis, audio AI, anything measuring a continuous quantity. Brand verbs: tune, measure, listen.
+
+### Apparatus type · Prism + measurement *(Day Foundry canonical)*
+
+A clip-path triangle (the prism) + an incoming beam from the left + a chromatic spectrum fan emerging from the right edge + leader-line annotations with wavelength labels and exit-angle measurements. References optical-bench experiments, atmospheric refraction diagrams, the cover of Pink Floyd's *Dark Side of the Moon* re-read as a calibrated instrument.
+
+**When to pick:** Day Foundry default. AI for science, climate, research, document AI.
+
+### Building rules across the family
+
+- **Pure CSS + SVG.** Never `<img>`, never icon fonts, never SVG paths copied from Figma. The apparatus is *constructed*, not *placed*.
+- **One per page.** Never two apparatus objects on a single Lumen build.
+- **Leader-line callouts.** Every apparatus carries 3–5 mono micro-type annotations (`P50 · 28 ms`, `λ = 612 nm`, `→ refunds.ts`) on horizontal leader lines. The callouts MUST contain real values from the brief — never `LOREM · 000`.
+- **Size.** 240–480 px max dimension on desktop. Scales down to ~180 px on mobile but never disappears.
+- **Pulse, not rotation.** Night apparatus *pulses* (3% intensity oscillation, 4s period). It does *not* rotate. Rotation was the orb's signature; the apparatus's signature is that it's clearly machined.
+- **Day Foundry: no perpetual motion.** Day apparatus reveals once on first paint (320ms) and stays static. The light is captured.
+- **`prefers-reduced-motion: reduce`:** all pulses freeze at maximum intensity, all reveals collapse to final state.
+
+## The seven signature moves
+
+A Lumen build must exhibit **all seven**. Skipping any single one is what makes the page slip back into generic-dark-AI territory.
+
+### 1. Hand-built apparatus (no orb)
+
+See § The apparatus family above. The single most important move.
+
+### 2. Lowercase headline with verb-landmark (no italics)
+
+Classical Instrument Serif at `--text-display`, **all-lowercase, upright**, with **exactly one word** rendered in `--color-accent-2` (coral chord) — and that word is the verb. A 1px underline in the same accent draws in over 320ms on first paint and stays. **No `font-style: italic` is used anywhere** in Lumen — the verb landmark is built from colour + line, not from a glyph variation.
+
+```html
+<h1 class="hero__title">built to&nbsp;<em>think</em>&nbsp;in real time.</h1>
+```
+
+```css
+.hero__title {
+  text-transform: lowercase;  /* defensive — also applied at the prose level */
+}
+.hero__title em {
+  font-style: normal;          /* explicit — em is repurposed as the verb landmark */
+  color: var(--color-accent-2);
+  position: relative;
+  white-space: nowrap;
+}
+.hero__title em::after {
+  content: ""; position: absolute;
+  left: 0.05em; right: 0.05em; bottom: 0.04em;
+  height: 1px;
+  background: var(--color-accent-2);
+  transform-origin: left;
+  animation: pivot-underline 320ms var(--ease-soft) 900ms backwards;
+}
+@keyframes pivot-underline {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero__title em::after { animation: none; }
+}
+```
+
+**Rules:** the coloured word is the verb, never a noun. One word per headline, never two. The underline is the persistent landmark — once drawn, never animates again. `<em>` is repurposed semantically (still emphasis), but renders without italic.
+
+### 3. Mono eyebrow above every section
+
+`01 · INFERENCE` style — JetBrains Mono, uppercase, 11px, tracking `0.10em`, half-opacity. Numbered roman ordinal (01, 02, 03), middle-dot separator, then the section role. Sits directly above the heading on its own line. Cap at 6 per page.
+
+### 4. Blueprint grid background (4% opacity)
+
+The hero `<section>` and the meter strip both carry a **ruled grid background** at 4% opacity — 32px or 48px square cells, single hairline in `--rule-blueprint`. This is the "engineered, not vibed" signal. Aurora has blooms; Lumen has the grid. The grid sits beneath `--color-paper-emit` so the canvas appears to emit *through* the grid lines.
+
+```css
+.hero {
+  background:
+    linear-gradient(var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
+    linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
+    radial-gradient(60% 50% at 78% 30%, var(--color-paper-emit) 0%, transparent 65%),
+    var(--color-paper);
+}
+```
+
+### 5. Meter strip (below the hero)
+
+A full-bleed 32–48px band beneath the hero showing 60–80 thin vertical ticks (1px wide, varying height/opacity). Mono labels at each end name the readout (`SIGNAL · 12.4 KHZ` left, `DRIFT · 0.04 σ` right). Reads as spectrum analyser / oscilloscope output. The values match the brief — never invented.
+
+```html
+<aside class="meter" aria-label="Signal readout">
+  <p class="meter__label meter__label--left">SIGNAL · 12.4 KHZ</p>
+  <div class="meter__bars">
+    <!-- 64 spans, height + opacity per index -->
+  </div>
+  <p class="meter__label meter__label--right">DRIFT · 0.04 σ</p>
+</aside>
+```
+
+```css
+.meter {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1.5rem;
+  align-items: center;
+  padding: 0.75rem var(--page-gutter);
+  border-block: 1px solid var(--color-rule);
+  font-family: var(--font-mono);
+}
+.meter__bars { display: flex; gap: 2px; align-items: end; height: 28px; }
+.meter__bars > span {
+  flex: 1; min-width: 1px;
+  background: var(--color-accent);
+  border-radius: 0.5px;
+}
+```
+
+The meter MUST be procedurally varied — never a flat row of equal ticks. Heights drawn from a clean envelope (sine, gaussian, log) so the strip reads as a *measurement*, not a decorative pattern.
+
+### 6. Hairline cards with inner emission
+
+Cards carry a 1px hairline border in `--color-rule` and an inner radial gradient at 4–6% accent opacity — they feel **lit from within**, not dropped. On hover, inner glow brightens to 10–12% and the card lifts 4px. Never drop-shadow cards (the shadow Lumen uses is for elevated chrome only).
+
+### 7. Three-stat row with Instrument Serif numerals + tabular-nums
+
+Stats display in Instrument Serif at large size (`clamp(2.5rem, 4vw + 1rem, 4.5rem)`), `font-variant-numeric: tabular-nums`, label in mono uppercase 11px. Hairline vertical dividers. **Always three cells** — never two (reads as comparison), never four (reads as bento). If the brief has fewer than three honest numbers, skip the row entirely.
+
+## Motion direction
+
+Lumen's motion stack is **lighter than Hum, heavier than Coral**.
+
+| Element | Motion |
+|---|---|
+| Apparatus (Night) | Pulse: 3% intensity oscillation, 4s period. **Never rotates.** |
+| Apparatus (Day) | 320ms reveal on first paint, static thereafter. |
+| Verb landmark | Color set permanently to accent-2; 1px underline draws in 320ms `delay: 900ms`. No font-style change. |
+| Cards | `translateY(-4px)` + inner-glow brighten on hover, 220ms `--ease-soft`. |
+| Section heads | Opacity 0→1 + translateY 12px→0 on view enter, 600ms, 60ms stagger. |
+| Meter strip | Static. No "live" animation — the strip is a printed readout, not a streaming feed. |
+| Scroll | Lenis optional (`duration: 0.7, lerp: 0.08`). |
+
+**No magnetic cursors. No bento tile flips. No flashy parallax. No particle systems. No rotating orbs.** If you reach for any of these, you've drifted out of Lumen.
+
+`prefers-reduced-motion: reduce` collapses all animations to instant final state.
+
+## Required dependencies
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+```
+
+Three families, three weights each at most. No fourth family.
+
+## Macrostructure affinity
+
+**Lumen loves these.**
+
+- **Marquee Hero** — canonical: apparatus at hero-right, italic-pivot headline at hero-left, meter strip below
+- **Workbench** — when the page has live product UI to show (used with annotated codebase graph)
+- **Stat-Led** — numbers carry the story (latency, throughput)
+- **Long Document** — technical narrative with the apparatus at hero (Day Foundry canonical)
+- **Specimen** — only when typography is the subject
+
+## Macrostructure rejection
+
+**Lumen refuses these.**
+
+- **Bento Grid** — too playful; Lumen is one apparatus, not a tile collage
+- **Quote-Led** — too literary
+- **Conversational FAQ** — too soft
+- **Photographic** — Lumen is pure-code; no photographic anchor
+- **Catalogue** — one apparatus, not a grid of products
+
+## Voice fixtures
+
+Lumen voice is **direct, technical, slightly aphoristic**. Verbs over nouns. Mono labels read as if from internal docs. No marketing-ese.
+
+Headlines — **all lowercase**, with one verb in accent-2 colour (underlined):
+
+- "built to **think** in real time."
+- "inference, **rendered**."
+- "a new way to **ship** models."
+- "built for the people who **read** the docs."
+- "models for a **moving** atmosphere."
+- "code that **knows** the codebase."
+
+Body patterns — also lowercase, including acronyms:
+
+- "p50 latency at 28 ms. p99 at 84. the numbers hold under load."
+- "one primitive. scales down to zero. scales up to a thousand replicas."
+- "three engineers built this in fourteen weeks."
+
+Mono eyebrows — UPPERCASE (these are tags, not language):
+
+- `00 · INFERENCE`
+- `01 · RUNTIME`
+- `02 · PRICING`
+- `03 · CHANGELOG`
+
+Leader-line callouts (real values only) — UPPERCASE:
+
+- `P50 · 28 MS`
+- `Λ = 612 NM`
+- `θ_OUT = 38°`
+- `RX-04 · H100 80GB`
+- `INDEXED · 412 FILES`
+
+Brand wordmarks — lowercase: `cinder`, `wright`, `stratum`. Legal entity names and person names in fine print also lowercase (`cinder labs, inc.`, `maya okonkwo`). The lowercase commitment is total — only mono labels break it.
+
+**Never any of:** experience, journey, elevate, curate, transform, holistic, mindful, ecosystem, platform, leverage, unlock, supercharge, revolutionize, ai-powered, intelligent.
+
+## Anti-patterns (theme-specific)
+
+- **NEVER a glowing CSS orb / sphere / ring.** The single most reliable AI-tool tell of 2024–2025. Lumen explicitly refuses it. Pick from the apparatus family or build a new precision object — never a generic ball of light.
+- **NEVER `<img>` for the apparatus.** Pure CSS + SVG. Figma-exported SVG paths fail this — the apparatus is constructed in code.
+- **NEVER sentence-case or title-case prose.** All headlines, lede, body, buttons, nav, captions, brand wordmarks, footer copy, person names, place names, and legal-entity names are lowercase. Mono labels are the ONLY uppercase surface (eyebrows, callouts, meter labels, stat labels). This two-register split is non-negotiable.
+- **NEVER `font-style: italic` anywhere.** The previous italic-pivot signature is retired. The verb landmark is built from colour + a 1px underline, not from a glyph variation. Italic body emphasis, italic founder signatures, italic captions — all banned. `<em>` is repurposed as the verb landmark and renders upright.
+- **Never colour-emphasise a noun.** The verb landmark is the verb. Always.
+- **Never more than one accent-coloured word per headline.** Two is a marketing landing page; one is a design move.
+- **Never invent stats.** If the brief has no real numbers, skip the three-stat row entirely.
+- **Never re-draw browser chrome.** Real screenshots only (design-review slop gate — upstream hallmark gate 47).
+- **Never two apparatus objects on one page.** One per build.
+- **Never a system font for the display.** Instrument Serif or the documented fallback chain (`"Tiempos Headline", ui-serif, Georgia, serif`).
+- **Never rotate the apparatus.** Night apparatus pulses; Day apparatus is static.
+- **Never accent on display text outside the verb landmark.** Headlines are ink colour with one accent-coloured verb.
+- **Never emoji icons in eyebrows.** The mono ordinal + middle-dot + role label IS the eyebrow.
+- **Never two-cell stat rows.** Three only.
+- **Never atmospheric blooms larger than the apparatus.** The grid is the background discipline.
+- **Never blank leader-callouts.** Every annotation carries a real value from the brief.
+
+## Macrostructure pitfalls
+
+1. **Apparatus + embedded chrome on the same side → both fight for the focal point.** Pick one per side. Default: apparatus at hero-right, chrome (if any) in a later section.
+2. **Italic-pivot word at a line break → the verb hangs alone.** Force `&nbsp;` before and after so it stays mid-line.
+3. **Stats with two cells → reads as comparison.** Three only.
+4. **Apparatus glow bleeds into next section → page background looks washed.** Wrap in `overflow: clip` so the halo stays inside the hero.
+5. **Meter strip with uniform ticks → reads as decorative pattern.** Drive heights from a real envelope (sine, gaussian, log) so the strip looks measured.
+6. **Card inner-radial > 8% accent opacity → cards read as accent-tinted, not lit.** Cap at 6% rest / 12% hover.
+
+## How Lumen differs from neighbouring themes
+
+| vs | difference |
+|---|---|
+| **Midnight** (atmospheric, closest) | Midnight is geometric Geist on cool dark (`H 250`), no apparatus, no italic pivot, no grid. Lumen sits 25° hue away (`H 265`) with classical Instrument Serif, hand-built apparatus + leader callouts, blueprint grid, meter strip. The differentiation is large at every signature axis. |
+| **Aurora** (atmospheric) | Aurora is cool cyan blooms on dark, Sentient serif body. Lumen is brass-on-violet apparatus + Instrument Serif headline. Different temperature, different focal-element philosophy (Aurora: ambient blooms; Lumen: built apparatus). |
+| **Bloom** (atmospheric) | Bloom is warm cream paper, expressive content (Suno/Runway). Lumen is dark or cool-bone, technical content (Modal/Anthropic). Different register entirely. |
+| **Atelier** (editorial) | Atelier is Playfair Display Didone on warm cream — luxury fashion. Lumen's Instrument Serif is a 1960s technical-journal serif. Atelier sells perfume; Lumen sells inference. |
+
+## Test brief expectations
+
+Lumen should be a candidate when the brief mentions:
+
+- *inference · model · LLM · AI tool · agent · coding agent · voice · synthesis · API · platform · GPU · serverless · runtime · developer experience · DX · the docs · the console · pricing · research lab · atmospheric model · weather · climate*
+- product categories: *AI infrastructure · ML platform · model API · AI dev tool · voice / audio AI · research AI · climate / science AI · agentic coding*
+- emotional tone: *engineered · premium · technical · instrument · after-hours · considered · post-Modal*
+
+Briefs that say *bakery / café / atelier / fashion / podcast / record label / hot sauce / agency portfolio* never route to Lumen.
+
+## Build hint
+
+The first 22 lines of CSS should establish Lumen's anchor moves:
+
+```css
+body {
+  background: var(--color-paper); color: var(--color-ink-2);
+  font-family: var(--font-body);
+  font-variant-numeric: tabular-nums;
+  text-transform: lowercase;            /* prose default — the two-register foundation */
+}
+
+.eyebrow, .callout, .meter__label, .stat__label, .card__eyebrow {
+  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.10em;
+  text-transform: uppercase;            /* mono labels are the only uppercase surface */
+  color: var(--color-ink); opacity: 0.55;
+}
+
+.hero__title {
+  font-family: var(--font-display); font-weight: 400;
+  font-size: var(--text-display); line-height: 1.02;
+  letter-spacing: -0.032em; max-width: 16ch;
+}
+.hero__title em {
+  font-style: normal;                   /* italic is RETIRED in Lumen */
+  color: var(--color-accent-2);
+  position: relative; white-space: nowrap;
+}
+
+.hero {
+  background:
+    linear-gradient(var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
+    linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
+    radial-gradient(60% 50% at 78% 30%, var(--color-paper-emit) 0%, transparent 65%),
+    var(--color-paper);
+}
+```
+
+The `text-transform: lowercase` on `<body>` + selective `text-transform: uppercase` on label classes is the typographic foundation. Write your HTML in normal case for accessibility (screen readers); let CSS render the lowercase. Mono labels override back to UPPERCASE.
+
+## What Lumen refuses (restated)
+
+Disqualifiers — if any appears in a Lumen build, the build is not Lumen:
+
+- No glowing orb / sphere / ring of any kind.
+- No `font-style: italic` anywhere on the page.
+- No sentence-case or title-case prose — headlines, lede, body, buttons, nav, brand are all lowercase.
+- No lowercase mono labels — eyebrows, callouts, meter labels are all UPPERCASE.
+- No bento grids.
+- No glassmorphism / `backdrop-filter` blur.
+- No "trusted by" logo cloud as a full-width band.
+- No three-feature-card row with icon tops.
+- No emoji icons in eyebrows.
+- No invented metrics.
+- No re-drawn browser chrome.
+- No more than one apparatus per page.
+- No more than one accent-coloured word per headline.
+- No system-font fallback for the display.
+- No rotating apparatus (pulse only on Night; static on Day).
+- No accent-coloured display text outside the verb landmark.
+- No two-cell stat rows.
+- No atmospheric blooms larger than the apparatus.
+- No blank leader-line callouts.