Edo Theme Studio

Bristlenose · design tool
Start from:

Onboarding friction

Cool ink on warm paper — judged on real chrome, not swatches.

What people said

“I got completely stuck on the import step — I didn't realise the folder had to sit inside the project first.”

frustrationonboarding— P07, 02:14

“Once it clicked it was genuinely fast. I'd happily run every interview through this.”

delight— P03, 11:48

Body text at reading size: the quick brown fox jumps over the lazy dog. In clear sunlight you may notice the ink is not quite black — a very dark, classy blue.

Ink is locked; only accent (and paper, below) change.
Paper
#fdfbf7
i. Now — masstone #1e3a5f
sampled off aged print — dull
iii. Midpoint #164e80
deeper, but lifts
ii. Vivid — undertone #0f5c9e ✓ your pick
the pigment's undertone
iv. Electric #2a7ac0
cerulean drift — loudest
Left→right = Now → Midpoint → Vivid → Electric (dull to bright). Ink held at #1b2230/#e8e3d6. Active-item & selection washes are auto-mixed from each panel's accent and the paper, so both flow through. The Paper bar drives the light-mode background across all four panels. Panel i's dark accent is today's verdigris #7ba8a0; ii–iv keep Prussian blue in dark. Electric #2a7ac0 is ~4:1 on paper — fine for icons, borderline for body-size links.

What this is

A durable design tool for the Edo colour theme. Two workspaces: the Theme Picker (dial in every semantic token against a live report preview, then Copy CSS) and the Accent & Paper Lab (compare accent vividness and light-mode paper). Self-contained — no build, works from file://. Lives in docs/mockups/ so it survives session archiving and is auto-discovered by bristlenose serve --dev (About → Design).

Current decisions

Accent Vivid Prussian #0f5c9e light / #4d9fe0 dark — the pigment's undertone, not the dull masstone. Committed to palette-edo.css (v1).
Paper (bg) Paper White #fdfbf7 — bright near-white, chosen over warmer washi papers. Committed (v1).
Body ink Passport navy #1b2230 (light) / paper-white #e8e3d6 (dark) — near-black with a whisper of indigo.

The story behind the accent

Prussian blue (bero-ai) has an unusually wide masstone → undertone range: near-black when thick, brilliant azure when thinned. #1e3a5f was sampled off dark, aged, camera-dulled print areas — the masstone. For links, sidebar icons, and selection we use its brilliant undertone instead. Full provenance (first synthetic pigment, the Great Wave, aizuri-e) is in docs/mockups/edo-colour-palette.html.

Where the real palette lives

Production source of truth: bristlenose/theme/colors/palette-edo.css. This studio is for deciding; paste its Copy-CSS output there. Design rationale and the takeover architecture: docs/design-theme-divergence.md and the handoff at docs/private/handoffs/edo-theme-system.md.