` are the only things that hit full
+`--ink` / `--moon`, so the eye walks the page along those rails. The
+narrow column (640 / 540 in the Tufte layout) and generous leading
+(1.7–1.75 on prose) make this comfortable for long reads.
+
+**Where the accent shows up.**
+- Focus ring (replaces the previous blue-600 / blue-400)
+- Hovered prose link — text and underline color both flip to accent
+- `` chip backdrop — `accent-soft` (the accent at ≈9% / 13% alpha)
+- Current-page underline in the header nav
+- Marker color in numbered footnotes / sidenotes (subtle, on hover)
+
+**Where the accent does *not* show up.** Filled buttons, banners,
+gradients, illustrations. The system has none of those.
+
+### Alternate theme (planned, for one specific essay)
+
+A forthcoming essay draws an analogy between AI and artificial light
+and will lean heavily on color-theory illustrations (spectrograms,
+high-vs-low CRI samples, single-wavelength examples). The plum-on-indigo
+Twilight palette would fight with those figures. The **Steel** palette
+from `explorations/05-colors.html` is held as the per-article alternate:
+
+| Token | Steel light | Steel dark |
+| --- | --- | --- |
+| `--bg` | `#f1f2f4` | `#1c2026` |
+| `--fg-strong` | `#1c2026` | `#eef0f3` |
+| `--accent` | `#5a1e4a` (aubergine) | `#b78097` |
+
+Not wired into the live site yet. When the essay is closer, we'll add a
+`theme: "steel"` frontmatter field that swaps a class on the article
+root, leaving the rest of the site on Twilight.
+
+### Typography
+
+| Use | Family | Weight |
+| --- | --- | --- |
+| Headings, nav, UI | **Inter** | 600 (semibold) |
+| Prose body (``, `
` inside ``) | **Source Serif 4** | 400 / 400 italic *(variable; whole range available)* |
+| Code (inline + blocks) | Monospace (Expressive Code default) | 400/500 |
+
+Inter loads at 400 + 600. Source Serif 4 ships locally as two variable
+font files (regular + italic) and is loaded via `@font-face` from
+`fonts/`. **No third family** is used. JetBrains Mono is included here
+as a reasonable code stand-in for static mocks.
+
+> **Heads up: this is a change from the live site.** The Astro template
+> ships Lora as the prose serif; the uploaded font files replace it with
+> Source Serif 4. The two have meaningfully different feels — Source
+> Serif 4 is taller, more spacious, and slightly more "editorial /
+> scholarly"; Lora is rounder and a bit more contemporary. If you want
+> the live site to follow this design system, you'll need to update the
+> Astro project to load Source Serif 4 instead of `@fontsource/lora`.
+
+The serif-for-prose / sans-for-everything-else split is the strongest
+typographic move on the site. It's worth preserving in any new direction —
+it makes long-form posts feel like a quiet book, not a SaaS landing page.
+
+### Spacing & shape
+
+- Container: **640px** (`max-w-screen-sm`). Single column, centered.
+- Header: fixed top, `py-5`, frosted glass via `backdrop-blur-sm` over an
+ opaque-ish veil (`--bg-frost`: paper at 75% light / night at 68% dark). No
+ `saturate()` — an earlier `saturate-200` amplified saturated content scrolling
+ behind the bar (e.g. a list title mid-hover flipping to plum) into a flash.
+- Main content: `py-32` — *very* generous top/bottom padding.
+- Cards: `rounded-lg` (8px), thin border, no shadow.
+- Buttons: `rounded` (6px) or `rounded-full` for icon buttons.
+- **No shadow system** on the live site. None. Elevation is communicated
+ with the frosted header backdrop only.
+
+### Background, imagery & illustration
+
+The site has **no decorative illustrations, no full-bleed photography, no
+gradients, no repeating patterns, no textures.** The body is a flat single
+cool-paper or indigo-night-sky surface — *except* for one piece of brand
+imagery, the OG image.
+
+**`assets/og-image.{svg,png}`** — the brand image and Open Graph card.
+A monochrome ink drawing of a starry sky in the engraving tradition:
+dense plum-ink stippling (Bold tier, ~21k dots on a 280×155 grid) on
+the cool `--paper` surface, with stars left as **reserves** where the
+paper shows through. Density falls off linearly from ~100% at the top
+edge to ~0% at the horizon (78% of the way down), so the bottom of the
+frame matches the rest of the brand's flat-paper feel. Wordmark sits
+on the lower-left in Inter Semibold with the tagline in Source Serif 4
+italic — typography is *inside* the SVG, so it travels with any export.
+
+A bare variant without the wordmark (`assets/og-image-bare.svg/.png`)
+is available for use as a recurring background motif on essay landings.
+
+A dark-mode OG variant lives at **`assets/og-image-dark.svg/.png`**
+(and `-dark-bare.svg/.png`) — same plum-300 ink stippling on the
+indigo `--night` surface, identical geometry. It ships as a brand
+asset but isn't wired into the page metadata: `og:image:dark` is not
+part of the Open Graph protocol and no major platform honors it, so
+social cards use the single light `og-image.png` until a supported
+mechanism exists.
+
+### Favicon
+
+Same engraving family, tuned for tiny rendering. `assets/favicon.svg`
+is the canonical adaptive favicon — it embeds a `prefers-color-scheme`
+media query inside the SVG, so a single file flips between modes.
+
+Specific PNG sizes are also shipped because (a) some browsers ignore
+SVG color-scheme switching and (b) at small sizes a downsampled SVG
+goes muddy. Each PNG is rendered **natively** at its target size with
+disproportionately larger dots and added jaggedness — at 16px the dot
+radius is **7×** the canonical 144 size, the grid is **1.5× denser**,
+and the density floor is raised by **+0.45** so the image stays
+saturated. Roughly **10% of dots in the top band flip to moon color**
+(`#f0eafa` on dark, `#3a0e30` on light) as "bright stars" — these
+break up the monotone field and survive aggressive downscaling.
+
+Files in `assets/`:
+- `favicon.svg` — adaptive primary
+- `favicon-light-{16,32,48,180,192}.png` and `favicon-dark-*` — raster fallbacks
+- `apple-touch-icon.png` — light variant at 180px (iOS rarely honors dark)
+- `android-chrome-192.png` — light variant at 192px
+
+The previous icy-water photo was retained for one revision; it has now
+been removed.
+
+### Motion
+
+Interaction feedback only. No entrance animation, no decorative motion.
+
+- **Hover transitions.** Color, background, border, and text-decoration
+ changes are **300ms ease-in-out** (`--dur-base` / `--ease-in-out`).
+ Everything is on a transition; nothing snaps.
+- **No page-load fade-up.** Content paints immediately. The legacy
+ `.animate` / `.show` pattern, its 700ms timing, and the 150ms index
+ stagger have all been removed. `` in the UI kit is now a
+ no-op passthrough kept only so old call sites compile.
+- **No arrow-draw choreography.** The `ContentCard` right-chevron and
+ `BackToPrev` left-chevron are now static glyphs — visible at rest,
+ no transform on hover. The arrow still indicates affordance; it just
+ doesn't perform.
+- **No bounces, no springs, no rotation, no scale-on-press.**
+- **Reduced motion respected.** A `@media (prefers-reduced-motion: reduce)`
+ block collapses every transition/animation to ~one frame, so users who
+ ask their OS to reduce motion get instant state changes, not missing
+ feedback. Lives in `colors_and_type.css` (and mirrored in the blog kit's
+ `styles.css`).
+- **Theme toggle disables all transitions** for one frame (a `
+
+
+
+
+
+ light · plum on paper
+
+
+
+ dark · plum-300 on night
+
+
+
+
+
+
+