# Design Language for tsundere.boo ## Aesthetics and Tone tsundere.boo is a **field notebook recovered from a Nordic peat bog and held up to a kiln-bright window** — a site that performs the central tsundere paradox (cold-on-the-surface / warm-underneath) as a literal material study. The aesthetic is **Scandinavian** in its discipline (acres of paper-white air, one ink, one ochre, no decoration without a reason) but the discipline is forced into an **energetic** register: type slams in at speed, kiln-fired ochres crack open in the negative space, and crystalline shards of mica-coloured glass shiver across the page like the contents of a shaken specimen tray. Imagine an 1890s Danish naturalist's quarto — buff handmade rag, tan calf-binding, copperplate plates of cross-sectioned geodes — interleaved with torn polaroids, half-burnt onion-skin, a pressed birch leaf, and a single magnetic-tape scrap with handwritten kanji on the label. That collision *is* the site: archival restraint as the cathedral, mixed-media chaos as the relic inside it. The tone is **energetic-but-curated** — fast like a confession, slow like a museum drawer. The site is openly affectionate. It is not ironic. The "boo" in tsundere.boo is the moment after the cold front breaks: the site lets the user see the warmth, but only after they have walked through three rooms of what looks like indifference. The interaction grammar is **withdraw, then offer** — pull-back transitions before reveals, hover-quiet before hover-warm. ## Layout Motifs and Structure The page is a **single vertical column of ma-negative-space chambers**, each chamber occupying 100vw × ~140vh, separated by 60vh of intentional emptiness in which only one tiny artefact floats (a paper-clipped corner, a single line of marginalia, a 24px thumbnail of a pressed leaf). Vertical scroll is **not** intercepted — the native scrollbar is preserved and styled as a thin ochre rule, because Scandinavian honesty refuses to hide the scaffolding. Within each chamber, content obeys the **9-column buff-rag grid** — but only 3 to 5 columns are ever occupied at once. The remaining 4–6 columns are deliberately empty. This is the site's central spatial law: **negative space is the loudest element**. A headline at column 2–4 with columns 5–9 empty is more emphatic here than the same headline centred. Ma is treated as a positive material, not absence. Three layout devices recur, each used at most twice site-wide so they keep their meaning: - **The torn-edge intrusion** — a mixed-media collage piece (polaroid corner, onion-skin scrap, mica shard) breaks across two chambers, anchored to the layout-grid's column 6 but bleeding 80px into both the chamber above and below. This is the only element permitted to violate chamber boundaries. - **The cold-warm diptych** — paired chambers where the left page is set in monochrome at 92% white and the right page reveals the same content with one ochre word, one warm-toned mixed-media artefact, and a 4° rotation. The user must have already passed the cold version to earn the warm one; reverse-scrolling re-locks it. - **The marginalia stair** — running down the left 80px gutter of every third chamber, a vertical strip of dated handwritten notes in Caveat, climbing one note per scroll-event, like a naturalist's running tally in the margin of a folio. The notes are short, dry, affectionate, and sometimes contradict the body copy. Parallax is used **once and only once** — on the geode cross-section illustration in the third chamber, where the inner crystalline lattice drifts at 0.6× scroll while the outer ochre rim drifts at 1.0×, opening a 40px depth gap. This deliberate scarcity is a refusal of the field's parallax-everywhere reflex. ## Typography and Palette **Typefaces (all Google Fonts):** - *Display:* **Cormorant Garamond** at 600 italic for the chamber titles — a high-contrast classical serif with knife-thin hairlines; set at clamp(56px, 7vw, 112px), tracked at -0.015em, line-height 1.05. Used italic to lean the chamber forward into the empty space below it. The classical serif anchors the "naturalist quarto" reference and refuses any sans-serif minimalism reflex. - *Body display:* **EB Garamond** at 400 regular for paragraph leads — same Garamond family in roman, kept honest at 21px / 1.55 line-height / +0.005em tracking. The two Garamonds together are the site's "calm voice." - *Marginalia:* **Caveat** at 400, 17px, line-height 1.4, slate-ink only. Caveat is the only handwriting font on site and is reserved for the left-gutter stair and three torn-paper labels. - *Specimen labels:* **IBM Plex Mono** at 11px uppercase, tracked +0.18em, used for the cataloguer's metadata under each mixed-media artefact ("PLATE.III · BIRCH · 2026.05"). Mono is the cold voice that lets the warmth of Caveat read warm. No fourth typeface is permitted. Headings are never in mono; metadata is never in serif. **Earth-tones palette (six swatches, sampled from a peat bog and a kiln):** - `#F4EDDC` — Bog Vellum (page background, never pure white) - `#1F1A14` — Peat Ink (body type, never pure black) - `#B5662A` — Kiln Ochre (the singular accent — used at most six times per chamber) - `#7A4A2B` — Walnut Bark (secondary type, marginalia rules, frame edges) - `#C8B58F` — Lichen Linen (mid-tone for paper textures, calf-binding ground) - `#5E6E5A` — Bog Moss (used exclusively for the three "warm-reveal" moments, never for anything else) The Kiln Ochre and Bog Moss are the site's two emotional levers. Ochre is the cold-front breaking; Moss is the warmth visible underneath. They are never adjacent — at least 240px of Bog Vellum must separate them so the reveal stays earned. ## Imagery and Motifs **Mixed-media as the site's core medium.** Every imagery piece is a layered composite, never a single photograph. The compositional recipe is fixed and visible: 1. A **buff-rag paper substrate** (CSS noise filter at opacity 0.06 over Bog Vellum), with intentional torn edges made via a 24-vertex SVG clip-path. Each torn edge is unique — no two pieces share a clip-path. 2. A **botanical or mineral specimen** — pressed birch leaf, sectioned moss agate, bog-iron crystal, tide-bleached driftwood — rendered as a 1-bit etching in Walnut Bark over the rag substrate. Etchings are SVG, not raster, so the hairlines stay knife-thin at any zoom. 3. A **polaroid or onion-skin scrap** rotated between -7° and +9° (never 0°, never ±8°), pinned with a single 6px Kiln Ochre dot meant to read as a brass eyelet. 4. A **crystalline shard overlay** — a mica-translucent triangle, 60px–280px on the long edge, with a hand-drawn 0.5px stroke and a 12% opacity fill in either Bog Moss or Walnut Bark. Each chamber has exactly three shards. Their positions are not random; they are placed at the three corners of an implied isosceles triangle, scaled per chamber, rotating 13° clockwise from chamber to chamber site-wide. 5. A **handwritten label** in Caveat, set inside or beside the composite, never longer than seven words, always dated. **Recurring motifs (each used a fixed number of times, no more):** - **The geode cross-section** (×3): a circular SVG illustration showing concentric Walnut Bark rings around a Kiln Ochre core, with a crystalline lattice of Bog Moss fragments. Used as the site's emblem in the masthead, as the parallax centrepiece in chamber three, and as a 36px favicon-scale punctuation at the foot of the page. - **The bog-line** (sitewide): a single hairline rule in Walnut Bark, 0.5px, broken every 240px by a 6px gap that contains a tiny crystalline shard glyph (▲ rotated, varying angle). The bog-line is the site's only horizontal rule and replaces every `
`. - **The paper-clip corner** (×4): a 28px SVG paperclip in Walnut Bark, anchored to the upper-left of any chamber that quotes external material, holding down a folded onion-skin corner that flutters on hover (a 2.4s cubic-bezier oscillation with a 6° amplitude). - **The brass eyelet dot** (×∞ but always 6px Kiln Ochre): the only "button-shaped" element on the site. Used as link markers, as polaroid pins, and as the marginalia bullet. No stock photography. No icons from icon libraries. No emoji. Every visual element is hand-composed in SVG or CSS. ## Prompts for Implementation Build tsundere.boo as a **slow-walked specimen quarto**, not a marketing site. The reader should feel they are turning pages in a bog-recovered notebook that is alive with quiet warmth. Prefer narrative continuity over modular blocks. Refuse every reflex toward CTA-stacks, pricing tables, stat-grids, testimonial carousels, and feature-3-column rows. **Concrete implementation moves:** - Use `
` for each chamber, `