# Design Language for tsundere.download ## Aesthetics and Tone A **scholarly-intellectual** archival reading room reimagined as a luxury digital repository — the visual atmosphere of a private rare-manuscript library housed in a Beaux-Arts university wing, where each "download" is presented as a curated specimen rather than a file. The aesthetic is unapologetically **luxury-premium**: the restraint of a peer-reviewed quarterly, the spatial generosity of a museum vitrine, and the typographic gravitas of a 19th-century revival serif printed on hand-laid paper. Cool, overcast light filters through tall windows; brushed pewter shelving holds catalogued volumes; an animated reading lamp casts a slow, breathing glow over a single open folio. The tone is hushed, disciplined, and quietly confident — never loud, never playful, never decorative for its own sake. The domain "tsundere" is reinterpreted not as anime cuteness but as the *scholarly austerity that warms upon close reading*: the page initially appears coolly indifferent (gray on gray, all margin and silence), and only as the reader engages do subtle line-illustrations, lottie-animated annotations, and grid-rule warmth emerge. The mood draws from MIT Press monographs, Cooper-Hewitt exhibition catalogues, the Aldine Press, and the editorial pages of *The Paris Review*. ## Layout Motifs and Structure **Hero-dominant single-folio composition.** The first viewport is a full-bleed digital folio occupying 100vh — there is no above-the-fold competition, no nav bar fighting for attention, no pricing card, no CTA cluster. A single hero motif commands the screen: the domain name set in serif-revival display type, centered on a cool pewter-gray field (#3a3f47), with a thin grid-rule armature surrounding it like the engraved border of a bookplate. **Three-Column Grid Armature (Editorial):** Below the hero, content unfolds in a strict 12-column grid that visibly *shows its rules* — 1px hairlines in #5a606a are drawn at every 4th column boundary, faintly visible like the printer's marks on a proof sheet. The center 6 columns hold body text; outer columns hold marginalia (line-illustration glyphs, footnote-style annotations, lottie micro-animations triggered on scroll). **Plinth Sections:** Each major content block sits on an invisible "plinth" — 80vh minimum height with `padding-top: 18vh` and `padding-bottom: 22vh`, so every section feels like a single curated specimen rather than a stacked card. Sections are separated by a single horizontal grid-rule (1px, #4a4f57) that spans 60% of viewport width and is centered. **No card-grid, no stat-grid, no pricing-tile, no testimonial-carousel.** The page is read top-to-bottom as a single bound document. A thin progress-rule fixed at the left edge (3px wide, full viewport height, #5a606a) fills upward in #c8ccd2 as the reader scrolls — a discreet ribbon bookmark. **Folio Numbering:** Section headings are prefixed with Roman numerals (I, II, III, IV) in a smaller weight — this is the only visible navigation. There is no menu. ## Typography and Palette **Display Serif (Revival):** "Cormorant Garamond" from Google Fonts — a contemporary revival of Claude Garamond's 16th-century romans, drawn by Christian Thalmann. Weight 500 (medium) for the hero domain name at `clamp(3.5rem, 9vw, 7.5rem)`, with `letter-spacing: -0.015em` and `line-height: 0.95`. Italic weight 500 for pull-quotes and Roman numeral folio markers. **Secondary Serif (Body):** "Spectral" from Google Fonts — a screen-optimized Renaissance-revival serif by Production Type. Weight 300 (light) at `1.0625rem / 1.75` for sustained reading passages. Used for any prose longer than two lines. **Tertiary Sans (Marginalia & Captions):** "Inter" from Google Fonts at weight 400, size `0.75rem`, letter-spacing `0.08em`, all-caps, for column headers, footnote markers, and the lottie animation captions. This is the *only* sans-serif allowed and it appears sparingly, like a librarian's stamp. **Cool-Gray Palette (six values, no warmth):** - `#1c1f24` — Ink (deep charcoal, near-black with a blue undertone, used for primary text) - `#3a3f47` — Pewter (mid-gray, hero background and primary surface) - `#5a606a` — Slate (rule lines, grid armature, secondary text) - `#8a909a` — Mist (tertiary text, hover states, line-illustration strokes) - `#c8ccd2` — Bone (body background, paper-stock equivalent) - `#eef0f3` — Vellum (alternating section background, subtle stripe) A single restrained accent: `#7a8595` — Iris-Gray, a dusty blue-gray used *only* for active link underlines and the lottie animation key-line. No gold. No burgundy. No warm ochre. The discipline is total. ## Imagery and Motifs **Hand-Drawn Line-Illustration Specimens:** A small library of 6–8 SVG line-illustrations rendered in a single 1.25px stroke at #5a606a, no fill, no shading. Each is an iconographic "specimen" relevant to the archive metaphor: a bound codex, a magnifying loupe over a folio, a fountain-pen nib, a cabinet-card frame, a herbarium-pressed leaf, a wax-seal escutcheon, a brass card-catalogue drawer, a quill resting in a glass inkwell. Drawn in the style of 19th-century natural-history engravings (Audubon, Haeckel) but vastly simplified to pure outline. They appear in the marginalia columns, never in the main text flow. **Grid-Lines as Structural Motif:** The 12-column grid is *visible* — not as a debug overlay, but as faint engraved rules that read as part of the page's craft. Vertical hairlines (#5a606a at 0.4 opacity) divide major column groups; horizontal rules separate sections. Where vertical and horizontal rules cross, a tiny 4px × 4px hollow square ornament (#5a606a, 1px stroke, no fill) marks the intersection — like a printer's register mark. **Lottie Animations (3 micro-pieces, scholarly subject matter):** 1. **The Breathing Lamp** — a green banker's-style desk lamp re-skinned in pewter, drawn in line-illustration style, with the lampshade's glow softly pulsing (8-second loop, opacity 0.2 ↔ 0.5). Lives in the hero, lower-right marginalia. 2. **The Turning Folio** — a single page of an open codex slowly turning (12-second loop, plays once on scroll-into-view, freezes on the next page). Marks the transition between Section II and Section III. 3. **The Settling Dust** — a fine-particle drift of three 1px dots descending across a 200px area, looping every 14 seconds, suggesting an old volume just opened. Bottom of the page, near the colophon. All lottie files are line-art only, exported with stroke-width matching the static SVG illustrations (1.25px) so they are indistinguishable from hand drawings except in their slow, deliberate motion. **Engraved-Border Hero Frame:** The hero text is wrapped in a rectangular border built entirely from CSS — four 1px lines in #5a606a with the four corner intersections each carrying a tiny line-illustration corner-flourish (an SVG comma-curl, 16px). This frame inset is `clamp(4rem, 10vw, 8rem)` from each viewport edge. It evokes the title-page rule of an Aldine octavo. **Watermark Roman Numeral:** Each section background carries a single enormous, low-opacity Roman numeral (`I`, `II`, `III`, ...) set in Cormorant Garamond at 60vh, color `#5a606a`, opacity `0.06`, positioned absolutely at the right edge bleeding off-screen by 30%. A ghosted folio number, like the watermark in laid paper held to light. ## Prompts for Implementation Build as a **single long-form document**, not an app. The site is a *folio*, not a dashboard. Treat the HTML as if it were the printed proof of a quarterly journal — every element must justify itself against the question "would a fine-press editor approve?" Implement the hero with `min-height: 100vh; display: grid; place-items: center;` and the engraved border as a child element with `position: absolute; inset: clamp(4rem, 10vw, 8rem); border: 1px solid #5a606a;` plus four corner pseudo-elements positioned at each intersection with inline SVG comma-curls. The 12-column grid rules are drawn with a single `
` containing 13 absolutely-positioned 1px-wide divs at the column boundaries; visibility is controlled by `opacity: 0.4` on every 4th rule and `opacity: 0.15` on the others. This element spans the full document height with `position: absolute; top: 0; bottom: 0;`. Lottie integration uses the lightweight `lottie-web` library (`