# Design Language for tsundere.science ## Aesthetics and Tone A cottagecore lab-journal — a small herbalist's research notebook full of pressed-plant specimens, sharp-angled instrument diagrams, and typewriter-paced notes on plants you can almost smell. The aesthetic merges Beatrix Potter's "Journal" notebooks, the Kew Botanical archives' dried-specimen pages, the warm-grain palette of mid-century Olivetti documentation, and the precise hand-drawn diagrams of Ernst Haeckel's "Kunstformen der Natur." Approachable-casual in tone: the narrator is a friendly amateur scientist who is excited but unhurried, leaving margin notes and pressed petals on every page. The voice is gently nerdy and warm. "This one I picked at dawn — its leaves are sharp at the edges, like little triangles. I drew them three times before they settled." Conversational, curious, slightly self-deprecating. ## Layout Motifs and Structure Editorial-flow layout: the page reads as a continuous bound journal, with chapters flowing column-by-column rather than as discrete sections. The viewport hosts a single editorial spread at a time — left page is illustration/specimen, right page is typeset notes — and the spreads scroll vertically with a slight horizontal "binding crease" shadow down the center. Composition per spread: - Left page (60% width on desktop, full on mobile): a pressed botanical illustration with sharp-angled instrument diagrams overlaid in thin ink, plus hand-written marginalia in the outer margin. - Right page (40% width): a typeset chapter heading in baskerville-refined, a body column in serif at 17px, and a "typewriter-effect" specimen log at the bottom — short ALL-CAPS lines being typed out character-by-character as the spread enters the viewport. - Center crease: a 2px Faded Linen shadow gradient running vertically, suggesting the spine of the journal. Each spread is dated in the top-left corner (a small typewriter date stamp). Between spreads, the journal "page turns": a single horizontal swipe of cream paper crosses the screen for 280ms as the next spread appears. Decorative borders: a thin geometric-floral border (sharp triangular leaves) runs along the outer edge of every right page, broken in three places by pressed-flower SVGs that overlap the border. ## Typography and Palette - **Display headlines:** "Libre Baskerville" (Google Fonts), weight 700 — baskerville-refined for chapter titles at 44-60px, with classic italic accents. - **Sub-display:** "Libre Baskerville" (Google Fonts), weight 400 italic — for specimen names and Latin sub-titles, 22-28px. - **Body:** "Lora" (Google Fonts), weight 400 — at 17px line-height 1.7 for narrative journal copy. - **Typewriter log:** "Special Elite" (Google Fonts), weight 400 — for the bottom-right typewriter specimen logs, all caps, slight character irregularity. - **Marginalia:** "Caveat" (Google Fonts), weight 400 — for hand-written outer-margin notes in graphite tone. Palette — Warm cottagecore journal: - `#F5EBD9` Linen Cream — base paper background, with subtle paper-aged grain. - `#E8DAC0` Faded Linen — page-shadow tone for the binding crease and outer page edges. - `#7A5B36` Walnut Ink — primary ink for headlines and illustrations. - `#A5814D` Cinnamon Tea — secondary warm accent for italic Latin names and ornamental borders. - `#3D2E1F` Graphite Soft — body text color and pencil marginalia. - `#C4565C` Pressed Rose — micro-accent reserved for pressed-flower illustrations and specimen highlights. Warmth philosophy: every hue carries cream and walnut undertones. No cool grays, no electric saturations. ## Imagery and Motifs - **Botanical illustration imagery**: each spread carries 1-3 hand-drawn botanical illustrations rendered in Walnut Ink — 1.2px line work with delicate Cinnamon Tea fills at 0.22 alpha, plus a single Pressed Rose accent on the bloom or fruit. Style: Haeckel-precise, but with hand-jitter on the stroke. - **Sharp-angles motifs**: triangular geometric leaf-cuts, hexagonal magnifying-lens diagrams, sharp-angled compass-rose insets, and angular cross-section illustrations of stems. These sharp-angle motifs are deliberately set against the soft cottagecore palette — a precision tension. - **Pressed-specimen imagery**: SVG-rendered pressed-flower silhouettes with faint shadow halos, suggesting flowers physically pressed between journal pages. Each is captioned with a Latin name and a date. - **Instrument diagrams**: small SVG illustrations of magnifying lenses, dissection scissors, scale rulers, mortars, and beakers — drawn at 0.8px line-weight with measurement tick marks. Each instrument is annotated with hand-written labels. - **Pressed-flower scatter at page turns**: when the page turns, 3-5 small pressed petals drift across the screen and settle on the new spread, repositioning randomly. ## Prompts for Implementation - Build the spread layout with CSS Grid `grid-template-columns: 60% 40%` (desktop) and a centered `binding-crease` pseudo-element with vertical Faded Linen gradient. - Typewriter-effect: each specimen log line is initially `visibility: hidden` with `data-text` attribute. When the spread enters viewport, JS reveals characters one-at-a-time at 32-48ms intervals, randomized per character to feel like real typing. Cursor blinks at 1Hz. - Page-turn transition: a single `
` overlay slides horizontally from `translateX(100%)` to `translateX(-100%)` over 320ms cubic-bezier(.4,0,.6,1), with a 14px Walnut shadow on its leading edge. - Botanical illustrations are inline SVG (60-180KB each); precomputed, but with a subtle 1Hz "breathing" filter (feGaussianBlur stdDeviation 0 → 0.4 → 0) so the illustrations feel slightly alive. - Marginalia in Caveat font: positioned absolutely in the outer margin of the right page, slightly rotated (1-2deg jitter), at 14px Graphite Soft. Each marginalia note is short (4-12 words). - Bias toward narrative journal voice: each spread is a dated diary entry from an amateur herbalist. No CTAs, no pricing, no stat-grids — only specimens, notes, and pressed petals. - The page header is a single typewriter date stamp at top-left ("VOL. III · ENTRY 14 · MAY 12"). - Cursor becomes a small Walnut pen-nib cursor; on hover over an instrument or specimen, the cursor changes to a magnifying glass and the hovered item lifts (translateY -2px) with a soft 4px shadow. - Reduced motion: disable page-turn slide, replace with simple opacity fade; disable typewriter effect, reveal logs fully on enter. ## Uniqueness Notes - Differentiator 1: editorial-flow layout structured as a literal journal spread (left illustration / right notes / binding crease), not as a magazine grid. - Differentiator 2: typewriter-effect pattern paired with baskerville-refined typography — the typewriter sits alongside the elegant serif rather than dominating, an unusual register tension. - Differentiator 3: sharp-angles motifs (triangular leaves, hexagonal lenses) deliberately collided with cottagecore aesthetic — precision-against-coziness. - Differentiator 4: botanical-illustration imagery presented as pressed specimens with Latin names and pressed-petal scatter at page turns. - Differentiator 5: warm palette anchored by walnut/linen rather than the corpus's generic warm-gradient register. - Chosen seed: aesthetic: cottagecore, layout: editorial-flow, typography: baskerville-refined, palette: warm, patterns: typewriter-effect, imagery: botanical-illustration, motifs: sharp-angles, tone: approachable-casual. - Avoided patterns from frequency analysis: parallax (94% — replaced with page-turn editorial flow), card-grid (90% — replaced with spread layout), centered (94% — asymmetric 60/40 spread), photography (90% — replaced with hand-drawn botanical SVG), mono typography (81% — used only for typewriter logs), mysterious-moody tone (71% — replaced with approachable-casual).