# Design Language for storiographer.com ## Aesthetics and Tone Storiographer is the craft of charting a life the way a cartographer charts a coastline — every cove, every storm, every quiet harbor rendered in ink. The site should feel like opening a hand-bound memoir whose pages happen to be made of light. Tone: literary, intimate, faintly nautical-archival, the hush of a reading room at dusk. Think of the marginalia in an old explorer's journal, the foxed edge of a 1920s letterpress book, a fountain pen paused mid-sentence. The mood is *unhurried gravitas* — confident enough to leave whole screens nearly empty, warm enough that the emptiness feels like breathing room, not absence. Nothing slick, nothing "SaaS." This is a place that believes a person's story deserves the same care a bookbinder gives a spine. Inspirations: Edward Gorey endpapers, the typography of New Directions paperbacks, antique nautical charts with their compass roses and sounding numbers, the slow horizontal pan of a documentary film over a single photograph. ## Layout Motifs and Structure The spine of the site is a **single continuous vertical scroll that behaves like a long ribbon of parchment unrolling** — a parallax storytelling journey, not a stack of marketing sections. Content lives in a generous off-center column (roughly 58% width, anchored left on a 12-column field) so the right margin can carry floating ephemera: a date written sideways, a small ink-drawn flourish, a page number in the corner. Sections are separated not by hard bands but by *changes in paper tone* — the background warms or cools by a few degrees as you pass each chapter, like light moving across a desk through an afternoon. Key structural motifs: - **Chapter dividers** rendered as hand-ruled horizontal lines with a tiny centered ornament (a fleuron / printer's flower), the line drawing itself on scroll via SVG path animation. - **A persistent left gutter rail**: a thin vertical hairline with small tick marks, like the deckle edge of a measuring chart, that fills in as you progress — the reader's "you are here" on the map of the page. - **Pull-quotes set as full-bleed interludes**: oversized serif text on a darkened paper field, the surrounding world dimming so a single sentence holds the screen. - **Editorial flow over grid**: text wraps around small inset illustrations; captions hang in the margin rather than beneath images. No card grids. No bento boxes. If multiple items must be listed (e.g. what the service includes), they appear as a hand-numbered list in the margin column, never as boxes. - Footer is a **colophon**: set like the last page of a printed book — typeface credits, a printer's mark, the year in roman numerals. ## Typography and Palette **Typefaces (all Google Fonts):** - Display / chapter titles: **"Cormorant Garamond"** — high-contrast, slightly literary, set very large (clamp up to ~6rem) with tight leading and a touch of letterspacing on small caps. - Body / long-form reading: **"Spectral"** — a serif designed for screens, warm and steady at 19–21px, generous line-height (1.7). - Marginalia, page numbers, captions, the gutter ticks: **"IBM Plex Mono"** at small sizes (12–13px), letterspaced, lowercase — the only "technical" note, like an archivist's pencil annotation. - Occasional handwritten accent (a signature, a margin note "see ch. 3"): **"Caveat"**, used sparingly, in the ink-blue. **Palette:** - `#F4EFE4` — *aged paper* (primary background, warm cream) - `#EDE4D2` — *deeper leaf* (alternating chapter background, slightly toasted) - `#1C1B17` — *iron gall ink* (primary text — near-black with a brown undertone, never pure #000) - `#2C3A4A` — *nautical indigo* (links, the gutter rail, handwritten accents, the dimmed-interlude background) - `#9A4A2E` — *vermilion seal* (single accent — used only for the printer's flower, drop caps, the active tick mark; appears maybe three times per screen at most) - `#7A7259` — *faded sepia* (captions, secondary marginalia, hairlines) ## Imagery and Motifs - **Photography appears as if pasted into a journal**: slight rotation (±1.5°), a faint paper-grain overlay, a thin sepia hairline border, and a soft drop shadow as though the print is lifting at one corner. Duotone toward the indigo/sepia for cohesion. - **Compass rose** as a recurring quiet motif — a delicate 16-point line drawing that appears once, large and pale, behind the opening title, and again tiny in the colophon. - **Sounding numbers / depth marks**: scattered small italic numerals in the margins (like the depth readings on a sea chart) used decoratively to "measure" the narrative. - **Printer's flowers (fleurons)** as section ornaments — Unicode ❧ ☙ or custom SVG, in vermilion. - **Drop caps**: the first letter of each chapter set in Cormorant, three lines tall, in iron-gall ink with a hairline vermilion underline. - **Ink-bleed texture** at the very edges of full-bleed interludes — as if the indigo were soaking into paper fibers. - A subtle, ever-present **paper grain** (very low-opacity noise) on the background so no surface is perfectly flat. ## Prompts for Implementation - Build it as a **scroll-driven narrative**, not a landing page. The hero is a near-empty cream screen: the pale compass rose, the word *storiographer* in huge Cormorant small caps, and a single line of Spectral italic beneath — "we chart the life you've lived." A faint mono cue at the bottom ("scroll to begin the first chapter") with a slow up-down drift. - **On scroll**: chapter-divider hairlines draw themselves left-to-right via `stroke-dashoffset`; drop caps fade and rise with a gentle `stagger`; pasted-in photos settle into place with a tiny `spring` rotation as they enter view; the left gutter rail's tick marks light up (vermilion) one by one as their section reaches center. - **Parallax**, used with restraint: margin ephemera (sideways dates, sounding numbers, the flourishes) drift at ~0.85× scroll speed; background photos in interludes at ~1.1×. Never gratuitous — it should feel like depth in a diorama, not a carousel. - **Pull-quote interludes**: as the section enters, the surrounding sections dim to ~25% opacity and blur slightly (`blur-focus`), the background eases to nautical indigo, and one Spectral sentence scales up to fill the column. Releasing the scroll restores the world. - **Cursor**: a faint sepia ring that, when hovering a link, morphs into a small underline-draw beneath the word (`underline-draw`) in indigo. No magnetic buttons, no tilt-3d cards. - **Typography animation**: on the opening title, set the small caps to reveal letter-by-letter with a very soft fade — like ink appearing on a page, not a typewriter clatter. - Respect `prefers-reduced-motion`: everything still renders, just statically composed. - **AVOID**: hero CTAs, pricing tables, stat counters, testimonial card carousels, feature-icon grids, "trusted by" logo strips. If a contact prompt is needed, it is a single line in the colophon: "to begin your volume, write to us — " followed by a mono email, with a hand-drawn arrow. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **No mono body, no humanist sans, no hand-drawn-illustration aesthetic** — the dominant 94%/84%/94% patterns (hand-drawn, glassmorphism, mono typography as primary) are deliberately rejected. This is a Spectral + Cormorant Garamond serif-revival editorial piece; mono appears *only* as tiny archivist marginalia. 2. **Paper-tone chaptering instead of sectioned bands or card grids** — the page is one unrolling parchment whose background warms/cools between chapters; there is not a single card, bento box, or stat grid anywhere (card-grid 92% and full-bleed-band layouts avoided). 3. **The "sea chart of a life" conceit** — gutter measuring rail, sounding numbers, compass rose, colophon footer — a sustained nautical-archival metaphor rather than generic "warm gradient" decoration (gradient palette 94% avoided; the palette here is flat aged paper + iron-gall ink, zero gradients). 4. **Restraint as the headline gesture**: vermilion accent used three-times-per-screen maximum; whole screens left nearly empty; the opposite of dopamine/maximalist trends. 5. Animation is **ink-and-paper physics** (stroke-draw hairlines, settling rotations, dimming interludes) rather than the ubiquitous magnetic/tilt-3d/cursor-follow-blob vocabulary. Chosen seed/style: **parallax storytelling journey** (with serif-revival editorial typography and a nautical-archival motif system). Referenced frequency analysis — avoided overused patterns: hand-drawn aesthetic (94%), glassmorphism (84%), mono primary typography (94%), card-grid layout (92%), warm-gradient palette (94%), cursor-follow/magnetic/spring-everywhere (89/78%). Leaned into underused: editorial (26%), serif-revival (17%), immersive-scroll (15%), path-draw-svg used purposefully (48% but here as ink-ruling, not decoration), sepia-nostalgic palette (3%), book-scholarly motif (3%).