# Design Language for penclo.com ## Aesthetics and Tone penclo.com is **a fountain-pen nib viewed at the exact instant a bead of ink lets go and meets paper** — the whole site is built around that one millisecond of surface tension breaking, slowed to the length of a held breath. Imagine the editorial design of a 1930s Mont Blanc catalogue crossed with the patience of a calligraphy master who has set aside an entire afternoon to write a single character. This is **luxury-premium restraint expressed through ink-as-medium**, where the brand is not "pens" but the *act* of laying down a line — the drag of tine on tooth, the feathering at the edge of a downstroke, the way wet ink is darker than dry ink for about ninety seconds and then quietly settles. The tone is **elegant-sophisticated, never opulent-loud**. There is no gold-leaf maximalism here; the gold is a single hairline, used the way a bookbinder uses gilt — one stroke on a spine, nothing more. The mood is hushed, expensive, and slightly antiquarian: the feeling of opening a wooden pen case lined with cream felt. Everything that moves should move the way ink moves — slowly, by capillary action, finding its own level, never snapping. If a competitor's site feels like a product launch, penclo.com should feel like a private viewing in a stationer's back room where the proprietor is showing you the nib under a loupe. ## Layout Motifs and Structure The composition follows **editorial-flow** (3% in the frequency analysis — nearly empty territory): the page reads like a finely-set monograph, not a landing page. Content runs as **a single justified column of generous measure (about 62 characters), centered on a wide cream margin**, the way a letterpress book leaves acres of paper around the type block. No card grid. No bento box. No full-bleed hero with an overlaid headline. The structure is **chapters, not sections** — each "chapter" is a spread, and the scroll between them behaves like turning a heavy page: a slow, weighted ease, never a flick. - **The Ruled Baseline.** A single faint horizontal hairline (#C9BFA8, 1px) runs across the viewport at the optical center — the "writing line." All headlines *sit* on this line as if written along it; body text descends below it like a paragraph continuing onto the next sheet. As you scroll, the line stays fixed while text rises through it, so every headline is briefly "being written" as it crosses. - **The Wide Margin.** Outer margins are deliberately enormous — on desktop the type column never exceeds 720px and is offset slightly *left of center* (the way recto pages are), leaving a tall right-hand margin where a single running marginal note or page-number sits in small caps. - **The Spread Break.** Between chapters, the screen briefly goes to full cream with nothing but a centered drop-cap-sized chapter numeral (I, II, III…) set in Cormorant — a "page turn" beat lasting one scroll-length. - **The Footnote Rail.** Pinned to the bottom-left, a thin column of marginalia in 11px small-caps mono: ink names, nib widths, the latitude where a particular ink was milled — scholarly apparatus that rewards close reading. No sidebar nav, no sticky header bar. Navigation is **minimal-navigation**: a single line of small-caps links at top, no logo lockup beyond the wordmark set in the running head. ## Typography and Palette **Fonts (Google Fonts only):** - **Display, wordmark, drop-caps — *Cormorant* (and *Cormorant Garamond* for body italics)** — chosen for its absurdly thin, high-contrast serifs that look exactly like a flexible nib's hairline upstroke. Set the wordmark "penclo" in Cormorant Light, letter-spaced +0.18em, all lowercase, at 64–120px. Drop-caps for each chapter opener are Cormorant at 7 lines tall, in the gold hairline color but *outlined only* — an unfilled letter, like a guide-letter waiting to be inked. - **Body text — *Spectral*** — a Prokopov serif with true book proportions, comfortable at 19–21px with 1.7 line-height, justified with hyphenation. Spectral's even color on the page reads like a well-printed novel. Italics (Spectral Italic) carry pull-quotes — lines of "handwriting" the site quotes back to itself. - **Marginalia, footnotes, captions, nav — *Spectral SC* (small caps)** at 11–13px, letter-spaced +0.08em, in warm grey. The small-caps face keeps the scholarly-apparatus voice without ever shouting. - **The single mono accent — *IBM Plex Mono*** at 11px, used *only* for hard data in the footnote rail (nib widths "EF / F / M / B", ink batch codes, milled-on dates) — a quiet reminder that craft is also measurement. **Palette — gold-black-luxury, reinterpreted as ink-on-laid-paper, never blingy:** - `#F6F2E7` — **Laid Paper.** The dominant ground. Warm, slightly toothy cream — the color of cotton-rag stationery, not white. - `#1B1814` — **Carbon Iron-Gall.** The primary text "ink" — not pure black; a near-black with a faint warm-brown undertone, the way iron-gall ink ages. Wet-ink state animates *from* `#0B0907` (freshly written, darker) settling to this. - `#3A4A3F` — **Cellar Green-Black.** A secondary ink for chapter numerals and pull-quotes — the deep bottle-green of vintage Pelikan 4001, almost black until light catches it. - `#7A3B2E` — **Sanguine Sienna.** A rare warm accent — the red-brown of "manuscript red," used for the *one* underline that draws under a key phrase per chapter, and for the corrections-in-the-margin glyphs. - `#B7975B` — **Gilt Hairline.** The only metallic — used exclusively as 1px rules, the unfilled drop-cap outline, and the nib-tip highlight. Never as a fill, never as a button. - `#C9BFA8` — **Faint Rule.** The fixed "writing line" and all secondary hairlines. - `#8A8170` — **Pencil Grey.** Marginalia and footnote text — soft graphite. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration.** Every visual is **line-illustration** rendered as live SVG, drawn with a single variable-width stroke as if by one continuous pen-pass — the imagery vocabulary is the act of writing itself. - **The Continuous Nib-Line.** A hero SVG path of a fountain-pen nib drawn in *one unbroken contour line* — slit, breather hole, shoulders, tip — that, on load, **draws itself** (path-draw-svg, 41% but rarely used as the *sole* hero device) from the feed up to the tip over 2.4 seconds, then a single ink-bead swells at the tip and falls. - **Flowing-curves as ink-flow.** Between paragraphs, hairline SVG flourishes — the practice-strokes of a copperplate exercise (ovals, spurred loops, the "Spencerian shade") — drawn in `#C9BFA8`, scrolling-revealed stroke by stroke. These are the only "decoration," and they read as someone warming up their hand. - **The Wet/Dry Ink Treatment.** Headlines and the active pull-quote render in `#0B0907` with a subtle, blurred 1px duplicate beneath (the "sheen" of wet ink) that fades over ~90 frames to the settled `#1B1814` — replicating how fresh ink looks darker and glossier before drying. - **Feathered Edges.** Large display letters get a barely-perceptible SVG turbulence filter on their edges only (feDisplacementMap, amplitude ≤ 0.6px) — the micro-feathering of ink wicking into laid paper. Subtle enough to feel like print, not glitch. - **Marginal Glyphs.** Tiny sanguine SVG marks in the right margin — the proofreader's caret, the "stet" dots, a manicule (☞ pointing hand) drawn as a hairline — pointing at lines worth pausing on. - **The Ruling Grid Ghost.** Behind chapter-opener spreads, a *very* faint full-page array of 1px horizontal rules (`#C9BFA8` at 6% opacity) — the ghost of a writing-practice sheet — visible only in the cream margins. - **No icons.** Where a UI affordance is needed (e.g., "continue"), it is a hand-drawn em-dash or a small drawn arrow that completes its own stroke on hover. ## Prompts for Implementation Build penclo.com as **a single-route, vertically scrolled monograph in roughly five chapters** — one HTML file, one CSS file, one JS module. Treat the entire page as a slow, expensive read: a ~70-second amble through a stationer's monograph on the act of writing. **There is no CTA, no pricing block, no stat grid, no testimonial row, no feature cards, no email capture, no contact form.** There is only the text, the writing-line, and the ink. **Storytelling structure (five chapters, "page-turn" transitions between):** 1. **The Frontispiece.** Cream void. The wordmark "penclo" in Cormorant Light fades up centered on the fixed writing-line. Below it, in Spectral Italic, a single line: *"the moment a line is laid down."* The continuous nib-line SVG draws itself to the right of the type; an ink-bead swells, falls, and lands on the writing-line — and *that landing* triggers the first scroll-hint (a hand-drawn descending em-dash that completes its stroke). 2. **Chapter I — The Tine.** As you scroll, the page turns (full-cream beat with outlined "I" drop-cap), then a justified column begins on the question of what a flexible nib *is*: tines, slit, capillary feed. Body text rises through the fixed writing-line; each headline is "written" as it crosses. Copperplate practice-flourishes draw themselves in the gutter. Footnote rail begins logging nib widths in Plex Mono. 3. **Chapter II — The Flow.** Spread on ink as a liquid that has *opinions* — surface tension, shading, the difference between wet and dry. Pull-quotes (Spectral Italic) render in wet-ink `#0B0907` and settle to `#1B1814` as they enter view. Flowing-curve flourishes get longer, more confident — the hand has warmed up. One key phrase gets the single sanguine underline that draws itself left-to-right. 4. **Chapter III — The Paper.** Spread on tooth, sizing, feathering. Here the feedered-edge SVG filter is most visible on the oversized Cormorant chapter title. The ghost ruling-grid shows faintly in the margins. Marginal proofreader glyphs (caret, manicule) appear in the right margin pointing at lines. 5. **The Colophon.** The page turns one last time to near-cream. Centered, in Spectral SC small caps: the "colophon" of the site itself — set in Cormorant & Spectral, ruled with a single Gilt Hairline, ink milled at [a latitude], typeset [a date]. The continuous nib-line redraws itself once, slowly, in reverse — un-writing — and the wordmark fades to a hairline. End on stillness, on cream, on the fixed writing-line alone. **Motion & interaction notes:** - **Everything eases like ink, never like UI.** Use long, heavy, water-finding cubic-beziers (e.g., `cubic-bezier(0.22, 1, 0.36, 1)` stretched over 1.2–2.4s). No springs, no bounce, no elastic, no magnetic cursor, no parallax-layer drift, no tilt-3d. The corpus is saturated with spring/magnetic/cursor-follow (82–89%); penclo.com pointedly uses *none* of them. - **Scroll = page-turn.** Snap softly between chapter spreads with a weighted ease; mid-chapter, free scroll but with the writing-line fixed so text always crosses it. - **path-draw-svg is the signature motion** — the nib outline, every flourish, every underline, the un-writing colophon. Stroke-dashoffset animations, eased slow. - **Wet-ink reveal** on every headline and active pull-quote: a brief darker+sheen state settling to the matte ink color over ~1.5s after entering viewport. - **Hover** is minimal and literal: nav links get a hairline underline that *draws* (left to right, ~400ms, in Gilt); the "continue" em-dash completes its own stroke. - **Cursor:** plain, default arrow. No custom cursor blob, no follower, no trail. (Restraint as a feature — cursor-follow is at 89% in the corpus.) - **Reduced-motion:** all draws snap to final state; wet-ink renders settled; page-turns become instant cuts. The monograph still reads perfectly as static print. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Ink-as-medium, not pens-as-product.** The site never shows a pen as an object to buy — it dramatizes the *act of writing* (tine, flow, paper, the wet-to-dry settle of fresh ink). Combined with the explicit ban on CTAs/pricing/stat-grids, this is an editorial monograph, not a storefront. 2. **editorial-flow layout claimed nearly empty.** editorial-flow sits at 3% and is almost never used as the *whole* structural conceit; here the entire page is a justified, wide-margin, single-column monograph with chapter "page-turns" — no card-grid (91%), no bento-box, no full-bleed hero with overlaid headline. 3. **Zero spring / magnetic / cursor-follow / parallax / tilt-3d.** The five most-saturated motion patterns in the corpus (each 82–91%) are *all* refused. Motion is exclusively slow ink-eases and path-draw-svg used as the sole signature device. 4. **The fixed "writing-line" mechanic.** A single hairline at optical center that text physically crosses, so every headline is briefly "being written" — a layout/scroll behavior not present elsewhere in the corpus. 5. **gold-black-luxury de-blinged.** gold-black-luxury (2%) and luxury-premium (1%) are both rare, and the rare instances lean opulent-grand; penclo.com uses gold *only* as 1px hairlines and an unfilled drop-cap outline — gilt-on-a-spine restraint, never a gold fill or button. 6. **The wet/dry ink color animation.** Headlines render fresh-and-glossy (`#0B0907` + 1px sheen) and *settle* to a matte iron-gall near-black over ~90 frames — a chromatic micro-narrative tied to real ink behavior, unseen in the corpus. Chosen seed/style: **classic serif revival book** — *aesthetic: luxury-premium, layout: editorial-flow, typography: baskerville-refined, palette: gold-black-luxury, patterns: path-draw-svg, imagery: line-illustration, motifs: flowing-curves, tone: elegant-sophisticated* Avoided overused patterns per frequency analysis: hand-drawn (96%), glassmorphism (80%), photography (98%), card-grid (91%), full-bleed (88%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (82%), stagger (71%), tilt-3d (29%), warm-gradient palettes (95%+) used as glow rather than as ink, mono typography as primary (94% — here mono is a single 11px footnote accent only).