# Design Language for kanojo.name ## Aesthetics and Tone kanojo.name is a **neubrutalist literary review reborn as a hand-drawn manuscript** -- imagine if a 19th-century gentleman's print journal were redesigned by an Instagram brutalist with a stash of fountain pens and burgundy ink. The site reads like a long-form essay magazine: thick chunky borders, drop-shadowed slabs, but with editorial sophistication -- generous margins, refined serif typography, ornate hand-drawn marginalia spilling into the gutters. The tone is *authoritative* -- a confident essayist publishing irrefutable observations about names, identity, and the women they belong to. The mood is *quiet thunder*: pages are loud (chunky borders, heavy shadow offsets) but the *voice* is composed -- like a stern librarian who happens to bench-press 300 pounds. Each "name entry" is treated as a Baskerville essay with a 4px black border, an 8px hard shadow, a hand-drawn portrait, and an authoritative paragraph of speculation. Inspirational anchors: Gloss Magazine layouts from the 1980s, The New Yorker's chunky-bordered Talk-of-the-Town blocks, neubrutalism's revival on Dribbble, William Morris's printed marginalia, Edward Tufte's spread compositions, and the hand-drawn endpapers of Penguin Classics. ## Layout Motifs and Structure An **editorial-flow** composition that mimics a long-form print magazine read top-to-bottom. Wide measure, elegant rule-driven sections, but every block is rendered as a chunky neubrutalist slab -- thick black borders, hard offset shadows, no rounded corners except in playful contrast. **Structural anatomy:** - **Masthead (full-width, 220px tall):** A single Baskerville wordmark "kanojo.name" set at 96px, framed below by a single 4px ink rule that extends edge-to-edge. To the right of the wordmark: an "Issue No. XII" cartouche slab with 4px border and 6px hard burgundy shadow. - **Editor's note (single column, 720px wide, centered):** The opening paragraph in 18px Baskerville italic, generous 1.78 line-height, with a hand-drawn flourish ornament at the top and a small initial drop-cap (4 lines tall, in a contrasting burgundy). - **Name entries (alternating L/R bias, 92% column width):** Each entry is a Brutalist Slab -- a cream-colored card with a 4px black border, an 8px-offset burgundy hard shadow (no blur), housing a hand-drawn portrait sketch on one side and 280 words of essayistic copy on the other. Entries alternate flush-left / flush-right, with the unused 8% column reserved for marginalia. - **Marginalia gutter:** A 64px-wide strip on the unused side of each entry, hosting hand-drawn doodles, footnote symbols (asterisks rendered as flowing florals), citation pulls in tiny Baskerville italic, and looping line ornaments that meander down the gutter. - **Section breaks:** Triple flourish ornaments rendered as SVG hand-drawn arabesques, centered between major name-entries. - **Endnote slab (full-width, mid-cream):** A horizontal brutalist slab at the bottom with the "Colophon" set in tight Baskerville, listing print history, type sizes, and ornament credits like a real magazine endnote. Spatial rhythm: stately. Long passages, generous breathing room, broken occasionally by a *hard slab* with chunky shadow. The contrast between elegant typography and brutalist framing is the entire point. ## Typography and Palette **Fonts (all Google Fonts):** - **Primary serif (Baskerville refined):** "Libre Baskerville" 400/400i/700 -- a refined revival of the classic Baskerville. Used at 18-19px for body, 1.78 line-height, italic for emphasis and pull-quotes. The italics carry the manuscript feel. - **Display / wordmark:** "Libre Baskerville" 700 at clamp(64px, 9vw, 124px), letter-spacing -0.02em. Subheads at 36-44px. - **Marginalia / footnotes:** "Cormorant Garamond" 400i at 12-14px, generously letterspaced (0.08em) for a hand-set look. - **Slab labels (issue numbers, cartouches):** "Archivo Black" 700 at 12-14px, all caps, letter-spacing 0.22em -- the *only* sans-serif on the page, used sparingly for brutalist contrast on labels. - **Hand-lettered annotations (SVG-traced):** Marginalia phrases drawn as SVG paths that animate on-scroll (path-draw effect), simulating ink being applied. **Palette (burgundy-cream):** - `#FBF6EC` -- Vellum Cream (primary page background, the "paper") - `#5E0F1A` -- Burgundy Ink (hard shadows, accents, drop-caps) - `#1A0F0D` -- Coffee Ink (body type, slab borders) - `#8B6F4E` -- Dust Sienna (marginalia line-work, faded hand-drawn) - `#E8DDC6` -- Tea-Stain (alternate card fills, slight aging) - `#C9302C` -- Cinnabar (rare accent for highlighted phrases, the "anger ink") - `#F2E5C9` -- Buff Cream (slab inner fills, brighter cream variant) Paper-texture: a subtle SVG turbulence (feTurbulence + small displacement) applied at 6% opacity over the page background, giving the field a slightly mottled, aged-paper grain. ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn portraits:** Each name entry features an ink-line sketch portrait of an imagined "kanojo," rendered as SVG with deliberately uneven strokes (using stroke-dasharray jitter). Approximately 280px tall, in Coffee Ink with Burgundy highlights for hair/clothing accents. - **Flowing-curve ornaments:** Section-break flourishes shaped like elaborate arabesques -- looping S-curves with terminal florets -- drawn as SVG paths. Three flourishes per break, arranged symmetrically. - **Hand-drawn marginalia:** Looping vine-doodles, asterisks-as-florals, arrows-as-feathers, citation marks rendered as tiny suns -- all hand-drawn SVG snippets distributed through the marginalia gutters. - **Brutalist drop-shadow stamps:** Every slab has an 8px hard shadow offset in Burgundy Ink (X+8, Y+8, no blur), making each block feel pressed into the page. - **Cartouche labels:** Issue numbers and section labels framed in hand-drawn rectangular cartouches with curling corner flourishes. **Decorative patterns:** - A repeating background pattern of faint, hand-drawn dots (8px spacing, 4% alpha) for an aged endpaper feel. - Marginalia paths are drawn with `stroke-linecap: round` and slightly varied stroke-widths (1.4px - 2.2px) per path to feel hand-applied. ## Prompts for Implementation **Open as if turning a page.** First 900ms: the entire viewport begins with a slight cream-to-vellum gradient sweeping in from left, like a hand revealing the page. The "kanojo.name" wordmark fades in at 0.0 -> 1.0 opacity over 600ms (no movement), while the 4px ink rule beneath it *draws itself* left-to-right with a `stroke-dashoffset` animation (1200ms, ease-out). The first marginalia flourish in the right gutter draws itself with a 1600ms path-draw. **Elastic patterns (featured pattern):** - Slabs have a subtle elastic enter animation: when each name-entry slab scrolls into view, it overshoots its destination by 6px on the X-axis and 4px on the Y-axis, then settles with cubic-bezier(0.34, 1.56, 0.64, 1) over 720ms. The hard burgundy shadow follows with a 80ms delay, creating a brief "shadow lag" that's deliciously brutalist. - Marginalia doodles have an elastic spring on hover -- they bounce 2px-3px in a random direction and return. - The drop-cap on the editor's note has a one-shot elastic *grow* (scale 0.85 -> 1.06 -> 1.0) over 800ms when it enters the viewport. **Path-draw marginalia:** As the user scrolls down, marginalia SVG paths progressively reveal themselves via `stroke-dashoffset: ` -> `0`. Each gutter path is tied to the entry beside it -- as you read the entry, ink "is being applied" to the margin. Use IntersectionObserver to trigger. **Flowing-curve hover:** The arabesque flourishes between entries gently "breathe" -- their stroke widens (1.4px -> 1.8px) and contracts on a 4.2s ease-in-out loop. On hover, they accelerate and bloom (scale 1.0 -> 1.04) for 600ms. **Brutalist hard-shadow choreography:** On hover of any slab, the burgundy hard shadow snaps from (+8px, +8px) to (+2px, +2px) over 120ms (a tiny press-in motion), then snaps back when the cursor leaves. No ease -- linear, brutalist, abrupt. **Storytelling beats (long-form, no CTAs, no pricing, no stat-grid):** 1. Wordmark + ink rule reveal. 2. Editor's note (one long italic paragraph with drop-cap). 3. Name-Entry I, flush-left, marginalia in right gutter. 4. Triple-flourish break. 5. Name-Entry II, flush-right, marginalia in left gutter. 6. Triple-flourish break. 7. Continue alternating for 7-9 entries, each a 280-word essay. 8. Colophon endnote slab. **Anti-patterns to avoid:** No pricing tiers, no feature trios, no testimonial sliders, no signup CTAs, no stat counters. This is a quarterly review, not a SaaS landing page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Neubrutalist + Baskerville editorial fusion:** Neubrutalism is rare in the collection (1%), and pairing it with refined Baskerville serif typography rather than sans-serif is the inversion of the typical neubrutalism vocabulary. No other design treats hand-drawn marginalia + brutalist hard-shadow slabs as a single language. 2. **Hand-drawn marginalia as a structural element (not just decoration):** The 64px marginalia gutter is *load-bearing* -- it's where every entry's footnotes, citations, and visual ornaments live. This treats the page as a real manuscript rather than a layout slot for icons. 3. **Elastic pattern as primary motion vocabulary (6% used):** Most designs reach for parallax (95%) or stagger (37%); this one centers elastic overshoot on slab entries -- a more tactile, mechanical motion that suits the brutalist + editorial mood. 4. **Burgundy-cream palette anchored by hand-drawn imagery (rare combo):** Most burgundy-cream designs (3% of the collection) lean photographic; this one uses zero photography -- only hand-drawn line work. The all-illustrated approach is distinctive. 5. **Authoritative tone via composition rather than aggression:** Many authoritative-tone designs in the collection use dark palettes or stark contrast. This one is authoritative through compositional confidence (long measure, generous margins, weighty rules) on a warm cream paper -- a more literary kind of authority. **Chosen seed/style:** aesthetic=neubrutalism, layout=editorial-flow, typography=baskerville-refined, palette=burgundy-cream, patterns=elastic, imagery=hand-drawn, motifs=flowing-curves, tone=authoritative. **Avoided overused patterns:** Avoided parallax-as-primary (95%), refused mono typography (81%), declined the centered/card-grid default (95%/91%), and rejected mysterious-moody tone (71%) in favor of a literary-authoritative voice.