# Design Language for tsundere.design ## Aesthetics and Tone tsundere.design presents itself as the print archive of a small academic society devoted to the contradictions of affection — a quarterly journal bound in dark cloth, read by candlelight in a faculty study after the library has closed. The aesthetic is editorial and scholarly-intellectual: long-form essays set in disciplined columns, footnotes that travel in the margin, plates of evidence interleaved between sections, and the residual warmth of an oil lamp settling onto vellum that has already weathered several winters. Nothing here shouts. The voice is that of a meticulous editor explaining, with patient amusement, why the surface refusal in chapter three actually constitutes the most sincere admission in the entire correspondence. The mood sits at the precise hour when a deep harbour goes black under a moonless sky and a single brass candleholder is the only light strong enough to read by — ink-blue depths, the slow oxidation of paper, a faint smell of beeswax and salt. There is reverence without solemnity: this is a discipline that takes its absurd subject completely seriously, citing Heian diaries beside contemporary chat logs in the same footnote. The reader should feel they have been admitted to a small, civil, slightly conspiratorial readership — handed a numbered offprint and a glass of something dark. Animation is rare and deliberate: a candle flame's exhalation in the corner, a footnote number that lifts itself a hair when its anchor is read, a counter that ticks *backward* through a register of past misreadings as you scroll. The motion is the breath of a quiet room, never the choreography of a stage. ## Layout Motifs and Structure The structural motif is **z-pattern**, used in its strict editorial sense: the eye is led along two diagonal traversals that cross the page from upper-left to lower-right, with deliberate counterweights at the second and third corners. This is uncommon enough on the web (z-pattern is at 1% across the corpus) that it carries the page's argument by itself — and it is exactly the right grammar for a journal frontispiece, where masthead, plate, abstract, and colophon must each occupy a visual quadrant in known order. The page is rendered on a **two-leaf folio**: a 16-column grid divided 7 / 1 / 8, where the wide left leaf (cols 1–7) carries the running text, the narrow center gutter (col 8) is the binding shadow, and the right leaf (cols 9–16) carries plates, marginalia, footnotes, and the small running counters. At desktop widths the two leaves sit side-by-side as a true codex spread; on narrow viewports the binding closes and the leaves stack with the gutter rendered as a horizontal hairline rule (`border-top: 1px solid #d8c8a4`). All sections share this folio so that scrolling feels like turning consecutive page-pairs in a single bound volume. The z-pattern is enforced section by section, each section spanning one folio (`min-height: 100vh` at `lg` breakpoints): - **Top-left quadrant (Q1)**: section title set in slab-serif, an issue number, and a small woodcut-style ornament. The eye begins here. - **Top-right quadrant (Q2)**: the *plate* — a single illustrated figure, captioned in italic, numbered (Plate I, Plate II…). The eye crosses from Q1 to Q2 along the upper edge. - **Bottom-left quadrant (Q3)**: the *abstract* or pull-quote, set 12% larger than body, with a hanging dropped capital. The eye descends diagonally from Q2 down across the page to land here. - **Bottom-right quadrant (Q4)**: the *footer apparatus* — footnotes, a thin counter, and a fine rule. The eye finishes its second horizontal traversal here, ready to turn the page. The counter-animate motif lives almost entirely in Q4: a small typographic register reads `Folio I — page 1 of 7` and `Misreadings logged: 0142`, where the second figure decrements as the reader scrolls (the journal claims, in its colophon, that each careful reading repairs one previous misreading). This inverse counter is the page's only persistent kinetic element. The text column itself is set ragged-right at 64ch, never justified, with widows and orphans actively prevented via `text-wrap: pretty`. Footnote markers are superscript Arabic; their corresponding notes appear in the right leaf at the same vertical offset as their anchor, joined by a hairline tie that draws itself only when the anchor enters the viewport. ## Typography and Palette **Typography (Google Fonts only):** - **Display & section titles — slab-serif:** *Roboto Slab* at weight 700 for H1 (`clamp(2.4rem, 5.6vw, 4.5rem)`, tracking `-0.012em`) and weight 500 for H2 (`clamp(1.6rem, 2.6vw, 2.4rem)`). Roboto Slab gives the page its scholarly thickness without tipping into Victorian display; its slabs read as pressed lead even at small sizes, which the hairline ornaments need to push against. Section numerals are set in *Roboto Slab* small caps with `letter-spacing: 0.18em` and rendered in deep harbour ink (`#0c2233`). - **Long-form body — old-style serif:** *EB Garamond* at 400 / italic 400 / 700, body size `19px / line-height 1.62 / tracking 0`. Garamond carries the article voice; its italic is genuinely cursive (not merely slanted) so footnote numbers, plate captions, and emphatic phrases like *not without affection* visibly belong to a different register. The dropped capitals in Q3 are *EB Garamond* at 5.4em, weight 700, sitting two lines deep. - **Marginalia, counters, plate captions — humanist mono:** *JetBrains Mono* at weight 400, 13px, tracking `0.04em`. Mono is reserved exclusively for things the journal treats as instruments — page numbers, the inverse misreadings counter, plate dimensions, dates in ISO form. It must never appear in flowing prose. **Palette — ocean-deep, paper-aged, with a single candle warmth:** - `#08182a` — *abyssal ink* (deep harbour at midnight). Primary text on light leaves, primary background under the masthead. - `#0c2233` — *atlas blue*. Section numerals, hairline rules on the dark plate, secondary headings. - `#1d3a55` — *cold-water indigo*. Used only for footnote ties, the binding-gutter shadow on dark mode, and the underline on hover. - `#f3e7c8` — *parchment*. Primary page field on light mode (the leaf paper). Slightly warm yellow, never pure cream. - `#d8c8a4` — *aged-paper edge*. Hairline rules, marginalia background, foxing along the outer trim. - `#b58b3a` — *brass candleholder*. The single warm accent — used for the candle flame SVG, the dropped capital fill, and the underline that draws under a hovered footnote anchor. Limited to ≤ 2% of the painted surface at all times. - `#7c1f1f` — *seal-wax red*. One element only: the issue seal in the colophon and the rubric letter at the start of each Plate's caption (`Plate I.`). Never elsewhere. The page reverses cleanly: at `prefers-color-scheme: dark` the parchment becomes `#08182a`, the body text becomes `#f3e7c8`, and the candle accent stays `#b58b3a` — the ocean simply rises over the room and the candle is now the only light source. ## Imagery and Motifs The dominant imagery system is **paper-aged** (0% in the corpus): every surface is treated as a sheet of laid paper that has outlasted several winters in a slightly damp study. The texture is constructed in pure CSS — no raster — so the whole site stays under 80kb. The recipe: 1. A base parchment field in `#f3e7c8`. 2. A `repeating-linear-gradient` of laid-paper chain-lines: 1px lines of `rgba(8, 24, 42, 0.04)` repeated every 26px, rotated 0.4° to suggest hand-laid pulp. 3. A second `repeating-linear-gradient` for wove tooth — 0.5px lines at 92% opacity, every 1.5px, rotated -89.6°. This is what gives the leaf its faint cross-hatch under raking light. 4. Three SVG `` foxing patches per folio: irregular ovals (`feTurbulence baseFrequency=0.02 numOctaves=3` → `feDisplacementMap`) tinted `#d8c8a4` at 0.35 opacity, randomly placed at the trim edges. Foxing positions are deterministic per section so the same folio ages identically on every visit. 5. A 1px outer trim line in `#d8c8a4` with `border-image` corner ornaments — small fleurons drawn as four 14px SVGs that mark the folio corners like a printer's mark. The motif system is **candle-atmospheric** (1% in the corpus): exactly one candle exists on the page. It sits in the upper-right of the masthead folio as a 64×120px inline SVG — a brass candleholder in `#b58b3a` with a flame painted as two stacked teardrops (`#fff4d6` outer, `#ffd28a` inner core). The flame breathes via a 3.4s ease-in-out animation that scales the inner core between `1.0` and `1.06` and shifts its `y` by `-0.6px`, while a subtle `filter: blur(0.4px)` keeps the edge soft. The flame casts a CSS radial-gradient *aura* across the upper-right of the page (`radial-gradient(ellipse 480px 360px at 92% 8%, rgba(181, 139, 58, 0.10), transparent 70%)`) which is the *only* warm element on the otherwise cold parchment-and-ink composition. As the reader scrolls past the masthead, the aura fades to zero opacity over 200vh — the candle is left behind in the first room. Plates are inline SVG line-illustrations done in 1px strokes of `#08182a`, never filled. The vocabulary is strictly five objects, each appearing once: a brass candlestick, a folded letter with an unbroken wax seal, a feather pen at rest, a barometer at low pressure, and a single open hand turned palm-down on a page (the hand is the only figurative human element in the entire site). Each plate is captioned in italic Garamond with a rubric initial in seal-wax red. Marginalia ornaments — fleurons, manicules (☞), and the section ornament under each H1 — are drawn from the *Noto Sans Symbols 2* glyph range, set in a single 18px line and tinted `#1d3a55`. They are sparse: at most one ornament per folio. ## Prompts for Implementation 1. **Stack:** Single static HTML file plus one CSS file plus one ~6kb JS module. No framework, no build step. All paper texture is CSS gradients; all plates are inline SVG; the candle and counter are the only JS-driven elements. 2. **Document skeleton:** `` is a vertical sequence of `
` elements, each one a full-viewport spread. The first folio is the *frontispiece* (masthead + abstract). The next five folios are essays, each titled like a real journal article (e.g., `On the Affirmative Power of Refusal — Three Cases`). The final folio is the colophon. 3. **Folio layout (CSS Grid):** ``` .folio { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: auto auto 1fr auto; min-height: 100vh; padding: clamp(2rem, 5vw, 4rem); gap: 0 1.25rem; } ``` The Q1/Q2/Q3/Q4 quadrants are placed via explicit `grid-column` / `grid-row` assignments — Q1 spans cols 1–7 row 1, Q2 spans cols 9–16 row 1, Q3 spans cols 1–7 row 3, Q4 spans cols 9–16 row 4. Cols 8 and the bottom of row 2 hold the binding gutter and the cross-folio rule. 4. **Z-pattern enforcement:** Each folio includes two CSS-only diagonal hairlines drawn as 1px gradients from Q1→Q2 (top edge) and Q2→Q3 (descending diagonal). They are barely perceptible (`rgba(29, 58, 85, 0.15)`) but train the eye. Disable on `prefers-reduced-motion`. 5. **Counter-animate:** A small JS module subscribes to `IntersectionObserver` on each folio and, as the section enters viewport, *decrements* a global `misreadings` counter (`0142 → 0141 → … → 0136`) using `requestAnimationFrame`. The decrement is rendered with a `font-variant-numeric: tabular-nums` register and a 280ms ease-out fade between digits. The counter is the page's persistent rhythm. Pause on `prefers-reduced-motion`. 6. **Candle:** SVG with two teardrops; CSS `@keyframes breathe` runs the inner flame's transform; a sibling `
` carries the radial-gradient and is opacity-faded to 0 by scrollY > 100vh. 7. **Footnote ties:** Each footnote anchor in Q1/Q3 is matched to a footnote in Q4 by `aria-describedby`. When the anchor enters viewport, JS sets a CSS custom property `--tie-progress: 1` and a hairline SVG path between anchor and note draws itself via `stroke-dashoffset`. Plate caption rubric letters are set as a `::first-letter` rule with `color: #7c1f1f`. 8. **Type detail:** Use `font-feature-settings: "liga", "onum", "smcp"` on body; old-style figures everywhere except the mono counters; quotation marks rendered as proper sets (`"" ''`); en-dashes for ranges, em-dashes for parenthetical asides — the typography must read as *typeset*, not as web text. 9. **Storytelling:** The five essay folios are real long-form excerpts (300–450 words each), not placeholder filler. Their topics: refusal as affirmation, the etymology of the word *tsun*, a comparative reading of a Heian poem and a contemporary message thread, the brass candle as instrument of patience, and a closing meditation on the journal's own naming. The site is a single issue of a journal that does not exist; it must read that way. 10. **AVOID:** No CTAs, no signup forms, no pricing block, no stat grid, no hero photograph, no testimonial cards, no "as featured in" rail. The colophon mentions a print run of 200 numbered copies and gives an address that is a postbox in a port city — that is the entire commercial surface. ## Uniqueness Notes 1. **z-pattern (1%) executed as a strict editorial four-quadrant folio rather than a marketing eye-flow.** Almost no site in the corpus uses the literal Q1/Q2/Q3/Q4 z-traversal as a binding structural grid; it is overwhelmingly used as a vague hand-wave in landing-page wireframes. Here it is enforced section-by-section with explicit grid placement and visible (faint) diagonal hairlines, making the page legible as a journal frontispiece and not a homepage. 2. **paper-aged (0%) constructed entirely from CSS gradients and SVG turbulence — no raster textures.** The combination of laid chain-lines, wove tooth, deterministic foxing patches, and printer's-mark fleurons is unique among the existing tsundere sites and the broader corpus, and the entire texture stays under 8kb of source. 3. **counter-animate (3%) used in reverse — a *decrementing* register of "misreadings logged" that ticks down as the reader progresses.** Most counter-animate uses across the web (and the corpus) are forward-counting stat blocks; reading this page literally repairs the count, which makes the animation a narrative device, not a vanity metric. 4. **candle-atmospheric (1%) reduced to exactly one SVG candle and one radial aura, fading after the first folio.** The motif is normally used as ambient particle systems or full-page glow; here it is a single object that exists in a single room, and the rest of the page exists outside the room's light. Only ≤ 2% of the painted surface ever carries the warm hue. 5. **ocean-deep (2%) paired with paper-aged warmth via the seal-wax red and brass candle accent — a palette pairing not present elsewhere in the corpus.** Ocean-deep is almost always used with chrome / cyan / ethereal-blue cooling agents; pairing it with parchment, foxing, and a single sealing-wax red yields a *codex-at-night* register that no other tsundere site occupies. 6. **slab-serif (2%) for display + EB Garamond (humanist serif) for body, against a JetBrains-Mono apparatus.** This three-register typographic stack (slab title, old-style body, mono instrument) is rare in the corpus, where mono dominates at 79% and slab-serif sits at 2%. It is exactly the stack a real small-press journal would set, and it differentiates the page from the mono-heavy default of the rest of the tsundere domains. 7. **scholarly-intellectual tone (12%) committed all the way to a fictional journal — no marketing voice anywhere.** The page contains no first-person address, no CTA, no pricing, no signup. The reader is a footnote-following member of a tiny society, not a customer. The frequency of the tone label is mid-pack, but the *fidelity* of its execution (real essay prose, plate captions, colophon, print run) is uncommon. **Chosen seed (from assignment):** aesthetic: editorial, layout: z-pattern, typography: slab-serif, palette: ocean-deep, patterns: counter-animate, imagery: paper-aged, motifs: candle-atmospheric, tone: scholarly-intellectual. **Avoided patterns from frequency analysis:** photography (82%), warm palette (84%), gradient palette (60%), scroll-triggered (33%), parallax (27%), mono typography (79%) as a body face, mysterious-moody tone (26%), tech motif (20%), bento-box / hero-dominant / split-screen layouts. None of these appear in the design.