# Design Language for storiographer.net ## Aesthetics and Tone storiographer.net is **a private commonplace book left open on a writing desk at the blue hour** — the half-light just before a lamp is lit, when a manuscript still holds the warmth of the hand that wrote it. The site is not a "blog platform" and not a "writing tool landing page"; it is a *scriptorium in repose*. Imagine a 1930s journalist's annotated proof sheet, a marginalia-thick paperback from a secondhand shop, and a single ink-stained galley — fused into one quiet, scrolling object. The governing tone is **soft-serif editorial, hushed and confiding** — the register of a footnote that trusts you, an erratum slip pasted in by the author, a dedication page. Nothing shouts. Type does the emotional labor; color stays in the background like aged paper and dried ink. The mood is the moment a sentence is *almost* right and the writer reads it aloud once more before deciding. Anti-references (what this is NOT): no SaaS hero with a product screenshot, no neon, no glassmorphism, no card-grid of "features," no pricing tiers, no testimonial carousel, no stat counters, no signup band. If a section feels like it belongs in a pitch deck, it does not belong here. ## Layout Motifs and Structure The page is a **single vertical scroll built as a sequence of magazine-spread "leaves"** — each section a recto/verso pair, with a faint center-line gutter shadow where a real bound book would crease. Within each leaf, content sits on a **classic editorial three-column measure**: a narrow outer margin reserved for *running marginalia* (date stamps, folio numbers, small hand-set notes set rotated 90°), a wide primary text column (max 62ch — true book measure), and an occasional pull-quote that breaks the grid by hanging slightly into the margin (an "outdent"). Composition rules: - **Asymmetric leaves.** Odd leaves weight text to the left two-thirds; even leaves mirror. The eye zig-zags down the page the way it travels across a real spread. - **The gutter is sacred.** A 1–2px warm shadow runs down the vertical center of full-bleed leaves, with a barely-visible page-curl gradient at the inner edges. Content never sits dead-center across the gutter. - **Folio furniture.** Top outer corner of every leaf carries a small folio number ("— vii —"), and the bottom carries a catchword (the first word of the next leaf, printed small in the corner — a real bookbinding device). These are functional wayfinding *and* decoration. - **No nav bar.** Navigation is a thin **table-of-contents ribbon** that lives along the left edge as a vertical list of leaf titles in small caps; the current leaf's entry is underlined with a hand-drawn rule. - **Footnote drawer.** Inline footnote markers (¹ ² ³) expand a footnote *in place* below the paragraph, ruled off with a short horizontal line, exactly as a printed page would set them — not a tooltip, not a modal. ## Typography and Palette **Typography** (all Google Fonts): - **Display / leaf titles:** *Cormorant Garamond* — high-contrast, slightly literary, set large (clamp ~2.6rem–4.4rem), italic for the wordmark "storiographer". - **Body / primary measure:** *Spectral* — a serif designed *for screens* with genuine book color on the page; regular 18–20px, generous 1.7 line-height, true small-caps for section labels. - **Marginalia / folios / catchwords / footnote labels:** *IBM Plex Mono* at 11–12px, letter-spaced, lowercase — the "editor's pencil" voice, deliberately mechanical against the warm serif. - **Drop caps:** First leaf opens with a 4-line versal set in Cormorant Garamond, ink-colored, with the rest of the first line in true small-caps (classic chapter-opening convention). **Palette** — aged paper, dried ink, and a single bound-edge accent: - `#F4ECDD` — *foolscap*: the base paper, a warm unbleached cream (page background). - `#E7DAC2` — *deckle*: slightly darker paper tone for alternating leaves and the gutter shadow's warm side. - `#1F1B16` — *iron-gall*: near-black brown-ink for primary type (never pure #000). - `#5C4A36` — *sepia-note*: marginalia, folios, secondary text — looks like faded pencil. - `#7A1E1E` — *binding-garnet*: the one true accent — used ONLY for rules under the active TOC entry, footnote markers, the hand-drawn underline, and the wordmark's tittle/flourish. Used sparingly, like a bookbinder's headband. - `#B9A77E` — *guard-leaf*: hairline rules, gutter line, the page-curl gradient stops. Optional dark companion (lamp lit, after the blue hour): paper → `#221E18`, ink → `#E9DEC8`, garnet stays `#9A3A33`. Triggered only by `prefers-color-scheme: dark`. ## Imagery and Motifs This is a **type-and-paper world** — almost no photography. Decoration comes from print culture: - **Paper grain**: a very subtle SVG/feTurbulence fibre texture and a faint vignette at leaf edges; no heavy noise. - **Hand-drawn rules**: section dividers are slightly wobbly SVG strokes (a hand with a ruler, not a CAD line) that *draw themselves* on scroll. - **Marginal glyphs**: tiny mono-set manicules (☞), asterisms (⁂), pilcrows (¶), and folio brackets used as ornaments — never icon-set UI icons. - **Ink behaviors**: pull-quotes get a faint "press" — a 1px darker halo around the glyphs as if the type bit into damp paper. The drop cap has a hairline ink-bleed shadow. - **Catchword corners** and **printer's flowers** (a single ❧ as a leaf-end ornament). - **A migrating cursor companion**: a small monospace caret "▍" that trails the pointer with a soft spring and *blinks like a text cursor* — the only "modern" gesture, and a wink at the act of writing. - No stock photos, no 3D renders, no gradient meshes. If an image is ever needed, it is a duotone (foolscap × iron-gall) scan of handwriting or a galley proof. ## Prompts for Implementation Build storiographer.net as **one HTML file, one CSS file, one small JS module** — a roughly 70–90 second downward read through seven bound "leaves." It is a *narrative experience about the craft of telling*, not a marketing page. There is no CTA button, no pricing block, no stat grid, no testimonial row, no email-capture band, no contact form. There is only the manuscript and its furniture. **The seven leaves (vertical scroll, each a magazine-spread with gutter):** 1. **Frontispiece.** Cream page, immense italic *storiographer* in Cormorant Garamond, a binding-garnet flourish on the final letter, a one-line epigraph in small-caps Spectral ("a place to keep the stories before they keep you"), folio "— i —" in the corner, catchword whispering the next leaf. The mono caret idles, blinking, just after the wordmark. 2. **The Margin.** On the act of noticing — text left, true marginalia notes rotated in the outer column, a hand-drawn rule that draws itself as you arrive. 3. **The Measure.** On rhythm and the sentence — a wide pull-quote that outdents into the margin with the "ink press" halo; a footnote marker that, when activated, expands a real ruled-off footnote below the paragraph in place. 4. **The Gutter.** Mirror leaf (text right) — about the space between drafts; the center page-curl gradient is most visible here; an asterism ⁂ divider. 5. **The Folio.** On keeping and ordering — a vertical list styled like a hand-numbered index; folio numbers count up the column; the TOC ribbon's active entry slides here. 6. **The Catchword.** On continuity — short, the catchword device explained by being used three times in a row down the page, each one handing off to the next paragraph. 7. **The Colophon.** True printer's colophon: the fonts named in their own faces, the palette listed as ink names, a single ❧, the year set in Roman numerals, and one closing line. End. No footer links beyond a quiet text-only line. **Motion & interaction (favor restraint):** - **Scroll-triggered fade + slight rise** for each leaf's text block (stagger lines by ~40ms), respecting `prefers-reduced-motion` (then everything is simply present). - **Path-draw SVG** for every hand-drawn rule and the flourish on the wordmark — stroke-dashoffset animated on intersection. - **Footnote drawer**: height auto-animates, a short garnet rule slides in above it; marker rotates the ¹ slightly. No JS framework — vanilla. - **Cursor caret companion**: requestAnimationFrame lerp toward the pointer; CSS blink; hidden on touch / reduced-motion. - **TOC ribbon**: IntersectionObserver updates which leaf title carries the hand-drawn underline; clicking scrolls smoothly. - **Page-curl & gutter shadow**: pure CSS gradients, no images. - Performance/accessibility tuning is out of scope here — bias toward the immersive, full-screen *reading* feeling. **Voice for any copy you generate:** confiding, literary, second-person occasionally, never salesy. Think dedication pages and errata slips, not headlines. ## Uniqueness Notes Differentiators from the rest of the corpus: 1. **The bookbinding apparatus is the UI.** Folio numbers, *catchwords*, a center gutter shadow, page-curl, printer's flowers, true in-place ruled footnotes, and a colophon-as-closing-section — nobody navigates with a nav bar; they turn leaves. No other site in the batch builds its chrome from physical-book conventions this literally. 2. **One-accent discipline (binding-garnet only).** Against a corpus that is 94% gradient and 98% warm-but-busy, this design has a single saturated color used like a bookbinder's headband — every other surface is paper and ink. Restraint as the differentiator. 3. **Type carries the entire emotional load** — Cormorant Garamond + Spectral + IBM Plex Mono, with true small-caps, a 4-line drop cap, outdented pull-quotes with an "ink press" halo. No photography, no 3D, no gradient mesh, no glassmorphism, no card-grid. 4. **The mono caret cursor companion** reframes "cursor-follow" (used in 89% of the corpus as a glow/blob) as a *blinking text insertion point* — thematically welded to the site's subject (writing), not bolted on. 5. **Magazine-spread leaves with a true 62ch measure and rotated marginalia column** — an actual editorial grid, not the generic "centered + card-grid + full-bleed" stack that dominates the frequency analysis. Chosen seed/style: **soft serif editorial blog** (seeds.json; 0 prior uses in the corpus) — aesthetic: editorial (+ a wabi-sabi/paper-aged undertone), layout: magazine-spread + single-column 62ch measure (avoiding the overused card-grid 92% / centered 80% / full-bleed 85% triad), typography: serif-revival (Cormorant Garamond + Spectral) with tech-mono marginalia (IBM Plex Mono), palette: sepia-nostalgic + honeyed-neutral with a lone deep-burgundy accent (avoiding the near-universal gradient 94%), patterns: path-draw-svg + fade-reveal + scroll-triggered + a recontextualized cursor-follow (used sparingly, no parallax/tilt-3d/magnetic), imagery: paper-aged + line-illustration + hand-drawn rules (no photography — bucking the 98% photography norm), motifs: book-scholarly + leaf-organic-as-printers-flower, tone: scholarly-intellectual ↔ pastoral-romantic, confiding. Deliberately avoided overused patterns flagged by frequency analysis: glassmorphism (84%), hand-drawn-as-aesthetic (94%), gradient palette (94%), card-grid (92%), full-bleed default (85%), parallax (89%), magnetic (78%), tilt-3d (31%).