# Design Language for tsundere.monster ## Aesthetics and Tone tsundere.monster is rendered as **"The Field-Station Logbook of Volume IX, Spring 1962"** — a single-page facsimile of a fictional Mid-Century alpine wildlife journal kept by a small (and mildly grumpy) two-person research outpost dedicated to the cataloguing of *Tsundere monsters*: shy, prickly creatures who pretend they hate visitors and then leave wildflowers on their doorsteps. The page presents itself as a printed-on-newsprint, double-stapled bulletin from the post-war American mountain-graphics era — the moment when National Park Service brochures, Eames-office pamphlets, Saul Bass film titles, and Charley Harper bird posters all coexisted on the same coffee tables. Surfaces are warm cream paper with a faint halftone speckle; rules are 1.25pt burnt-orange; corners of every panel are cut at a 6° "matchbook" chamfer rather than rounded. The mood is **nostalgic-retro**: confident, hand-set, slightly self-deprecating, the visual equivalent of a researcher saying "it's not like I made you a sandwich, idiot — there were just leftovers." Nothing glows, nothing parallaxes dramatically, nothing screams CTA. The page rewards lingering — every panel has a margin gloss, a hand-numbered reference, or a tiny pencilled correction in the gutter. The overall feeling is *quiet, illustrated, observational, kind* — the warmth of an old field-guide read in a wood-panelled library on a slightly rainy afternoon, where the next page is always one mountain further in. ## Layout Motifs and Structure The page is built as a **rigid bento-box of seven hand-cut printed panels** arranged on a 12-column × 9-row CSS grid spanning `min(1280px, 100vw) × auto`, with `gap: 18px` interior alleys printed in a slightly darker cream so the gutters read as paper rather than empty space. The seven panels are deliberately mismatched in size — there is no symmetry — and each carries a printed Roman numeral (I–VII) in the top-left corner like a chapbook plate number: - **Panel I — "The Specimen Card"** (cols 1–6, rows 1–4): the large hero slab. Holds the primary line illustration (a Tsundere monster crouched behind a bristlecone pine, half-hidden, with one ear still showing) plus the masthead `tsundere.monster — Field Station IX`. - **Panel II — "Today's Sightings"** (cols 7–12, rows 1–3): a stamped index card listing four observation entries with timestamps, each entry a single italic sentence ("17:42 — left a pinecone, ran away, came back, took it back"). - **Panel III — "Range Map"** (cols 7–12, rows 4–6): a square plate containing a hand-drawn topographic map of the surrounding range with three hatched habitat zones labelled in dotted leaders. - **Panel IV — "Field Notes"** (cols 1–4, rows 5–7): a tall narrow column of two-column-set body copy in the style of a printed monograph. - **Panel V — "Disposition Wheel"** (cols 5–8, rows 5–7): a circular taxonomic chart, six pie-segments labelled `aloof / bashful / huffy / sweet / curious / sulking`, each segment cross-hatched at a different angle. - **Panel VI — "Correspondence"** (cols 9–12, rows 7–9): the contact panel, styled as a stamped envelope with a postage-mark border. - **Panel VII — "Colophon & Issue Number"** (cols 1–8, rows 8–9): the footer plate, baseline-aligned, containing the issue number, paper-stock note, and a single hand-set line of Latin-printers'-style copy that is actually the site's purpose statement. Within each panel the inner composition follows mid-century printers' habits: 8pt baseline grid, asymmetric flush-left typography, generous top-margin, a single accent rule, and **never** centered text. The panels themselves do **not** scale on hover; they are *printed objects*. The only motion is **skeleton-loading shimmer**: on first paint each panel renders as a stack of pale burnt-orange placeholder bars with a 1200ms diagonal sweep — explicitly framed as "the press still drying" — and once content swaps in, the shimmer is *gone for good*. There is no infinite scroll, no carousel, no modal. The page ends at Panel VII the way a bulletin ends. ## Typography and Palette **Fonts (Google Fonts, verified):** - **Display / masthead / panel numerals — `"Fraunces"`** (variable, Google Fonts). Set at `wght 600`, `opsz 144`, `SOFT 80`, `WONK 1`, with the optical-size axis pushed to its max so the masthead `tsundere.monster` reads with the soft, slightly bouncy serif terminals that are the entire point of choosing a "playful-rounded" display face. Letter-spacing `-0.02em` at display sizes; size `clamp(2.4rem, 4.6vw, 4.4rem)`. - **Friendly headings & panel titles — `"Quicksand"`** (Google Fonts). The literal embodiment of "playful-rounded": a geometric sans whose terminals are perfectly circular. Used at `wght 600`, `letter-spacing: 0.04em`, `text-transform: uppercase` for panel titles, `0.78rem` size — so the rounded forms feel like rubber-stamped chapter labels. - **Body / Field Notes / index copy — `"Vollkorn"`** (Google Fonts). A warm bookish serif designed for body text on cream paper. Size `0.96rem`, `line-height: 1.6`, hyphenation enabled, two-column-set inside Panel IV with a `column-rule: 0.5pt solid #c69a78`. - **Marginalia & timestamps — `"Caveat"`** (Google Fonts). A pencilled handwriting face used only at `0.84rem` for hand-pencilled corrections, `[ref. 14b]` notes, and the `17:42 —` timestamp prefixes inside Panel II. Set with a subtle `transform: rotate(-1.4deg)` so it reads as an after-the-fact margin annotation. **Palette — burnt-orange anchored, six values, all on warm cream paper:** - `#f4ead6` — Cream paper field (page background; faint halftone speckle overlaid via `radial-gradient` noise) - `#c44a1a` — **Burnt orange (signature ink)** — used for masthead, rules, panel numerals, accent strokes - `#e88a4a` — Toasted apricot (secondary accent, hatching, map zones) - `#8a4a2a` — Cocoa-brown (body type, sober counterpoint to burnt orange) - `#3b5b4a` — Muted forest-pine (mountain illustration shadow, sole non-warm hue, ~6% of inked area) - `#1f1410` — Deep sepia-black (rare, only used for the issue-number block and Caveat margin notes) The palette is deliberately a **warm-only** scheme apart from the single forest-pine pull — that one cool hue is what keeps the page from collapsing into pure orange-brown monotone, and it appears only in the mountain motifs. ## Imagery and Motifs Every illustration on the page is **hand-feeling line work** in `#c44a1a` burnt-orange, drawn at 1.25pt stroke-width with `stroke-linejoin: round` and `stroke-linecap: round` and a deliberate 0.5pt outer-stroke wobble approximated via `filter: url(#paper-jitter)` — a tiny SVG turbulence filter that gives every line a hair of paper-shake without becoming a "hand-drawn" gimmick. Five recurring motifs: 1. **Mountain-landscape (the dominant motif)** — three concentric ridgelines drawn in flat single-stroke contour (no fill, no gradient, no texture other than the outer 0.5pt jitter), with the furthest ridge in muted forest-pine and the nearest two in burnt-orange. Mountains appear in Panel I (background of the specimen scene), Panel III (the topographic plate, with hatched elevation bands), the Disposition Wheel (six tiny mountain icons as section keys), and as a 22px standalone glyph in the masthead replacing the dot above the `i` in `tsundere`. **This is the load-bearing imagery — the entire site is mountain-shaped.** 2. **The Tsundere monster itself** — a single recurring line-illustration: a roundish, slightly bear-shaped creature with two oversized ears, three whisker-strokes, and a tail that always points the *opposite* direction from where it's looking. Drawn in seven slightly different poses across the page (one per panel) — never animated, just *posed*. 3. **Bristlecone pine** — a single stylized pine in the Charley Harper register: trunk = one stroke, branches = three diagonal strokes, needles = a cluster of dots. Used as scale reference in Panel I and III. 4. **Postage-mark border** — Panel VI's envelope is bounded by a printed `repeating-linear-gradient` at 45° that mimics the perforated edge of a stamp. 5. **Topographic hatch fills** — diagonal cross-hatching at three densities (4lpi / 8lpi / 16lpi via `repeating-linear-gradient`) used as the only fill mechanism on the entire page. No gradients (other than the page-noise), no shadows, no glows. There are **no photographs**, no icons-from-an-icon-pack, no emoji, no logos, no avatars. Every visual element is one of the five motifs above, drawn in burnt-orange line. ## Prompts for Implementation Treat the build as if you are typesetting **a printed bulletin**, not a web app. Lead with HTML semantics: a single `
` containing seven `
` panels (one per bento cell), each opening with a `
` carrying the Roman numeral and panel title. Use CSS Grid (`grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(9, minmax(60px, auto))`) for the bento; let panels span explicitly with `grid-area`. Inline every line illustration as SVG so the burnt-orange `currentColor` flows correctly and the paper-jitter `feTurbulence` filter applies uniformly. Set `body { background: #f4ead6; color: #8a4a2a; }` and ship a 0.5KB tiled SVG halftone-noise as a `background-image` on `
` for the speckle. The narrative is **the field journal itself** — the seven panels read in sequence as a complete observation entry, opening with the specimen card, walking through sightings → range → notes → disposition → correspondence → colophon. Body copy across the panels should sustain a single voice: a slightly-too-formal field researcher who lets the dry tone slip into affection at unexpected moments. Write actual journal text — never filler, never generic placeholder copy. The Field Notes panel deserves at least three full paragraphs of in-character monograph prose explaining how Tsundere monsters communicate via "passive-affectionate object exchange." For motion, **resist almost everything**. Implement exactly two animated behaviours and nothing else: (1) the **skeleton-loading shimmer** on initial paint — each panel begins as 3–5 pale burnt-orange placeholder bars (`background: linear-gradient(90deg, #f1ddc4 0%, #e88a4a33 50%, #f1ddc4 100%); background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite;`) for ~1100ms before the real content swaps in via a 240ms `opacity` cross-fade, after which the shimmer is removed from the DOM and never returns; (2) a **single 220ms `transform: translateY(-1px)`** on `` and `