# Design Language for tsundere.science ## Aesthetics and Tone **The Postmodern Science Fair Pamphlet, 1986** — picture an oversized creamy-pastel folded brochure handed to you by a teenage volunteer at a regional science fair held in a sun-flooded community gymnasium. The pamphlet has been printed on warm bone-cream cardstock with three-color risograph offset registration drift, and somebody — clearly a graphic-design student crushing on the lead presenter — has annotated the margins with squiggly border doodles, dotted ovals, zig-zag terrazzo confetti, and tiny line-art beakers. The whole document is unmistakably **Memphis Group postmodern**: Ettore Sottsass and Nathalie du Pasquier filtered through the optimistic, slightly-clumsy diagrams of a mid-1980s middle-school physics textbook. The mood is **warm-inviting** — not sterile lab-coat science, but the kind of science you do at a kitchen table with construction paper, mason jars, and a deeply-embarrassed crush you refuse to acknowledge. The tsundere conceit is structural: the **content** is rigorous, peer-reviewed, footnoted research methodology — abstracts, methods, results, citations — but the **presentation** is bashful, doodled, soft-pastel, and frequently betrayed by squiggle-borders that pulse faintly when you hover, as if the pamphlet itself is blushing. Headings declare "Don't get the wrong idea, this is just a control experiment" while the body text underneath is a deadpan three-paragraph treatment of statistical significance under a null hypothesis. The aesthetic is therefore **loud-shapes-soft-feelings**: the geometry shouts in postmodern primary-pastel slabs, the typography whispers in earnest condensed grotesque, and the squiggle-borders animate like an embarrassed pencil tracing over a confession. There is no irony hipster filter here — the warmth is genuine, the Memphis is sincere, the science is real. ## Layout Motifs and Structure **Five vertically stacked full-viewport parallax sections, each one a separate pamphlet panel, scrolled as a depth-layered Memphis collage.** No single-column linear flow. No bento. No dashboard. Each section is `min-height: 100vh; position: relative; overflow: hidden;` and contains **three distinct parallax depth-strata** scrolling at different `translate3d` rates as the user descends: 1. **Background stratum (rate 0.2)** — a tiled Memphis pattern field: scattered black-on-cream squiggles, dotted ovals, and zig-zag terrazzo confetti rendered as repeating SVG `background-image`. This layer drifts upward at 20% scroll velocity. 2. **Mid stratum (rate 0.55)** — large geometric pastel slabs (irregular trapezoids, elongated pill-shapes, half-circles) sized from `clamp(180px, 28vw, 460px)`, positioned with absolute coordinates that look hand-placed but follow a hidden 12-column rhythm. These are the postmodern furniture: a peach trapezoid pinned to lower-left, a butter-cream half-disc bleeding off the top edge, a powder-mint zig-zag bar slicing diagonal across the right margin. 3. **Foreground stratum (rate 1.0)** — the actual content card: a slightly off-center bone-cream paper rectangle with a `border-animate` squiggle outline, content typeset inside in condensed grotesque, with line-illustration figures in the margins. The five sections, in order of descent: **(I) Cover Page** — domain wordmark in oversized condensed display, three Memphis squiggles orbiting it, a tiny line-illustration of an embarrassed beaker. **(II) The Hypothesis** — the tsundere thesis, formatted as a 1980s-textbook "What We're Studying Today" panel. **(III) The Experiment** — methodology laid out as numbered diagrams with line-art apparatus illustrations and Memphis pattern callouts. **(IV) The Results** — a hand-drawn data display, results table set in a crooked dotted-border frame, marginalia confessing to "an unexpected emotional confounding variable." **(V) The Conclusion** — a closing panel with a hand-lettered footnote that the entire study was, in fact, an excuse, set in an animated wobbling squiggle border. Sticky on the right edge: a thin terrazzo-confetti strip indicating section position, behaving as a pamphlet "fold-thumbtab" rather than a navigation bar. Within each foreground card, content uses a **broken three-column rhythm** where the middle column is wider than the outer two by a factor of `1.618`, columns are separated by hand-drawn squiggle-rule SVG dividers (not vertical lines), and figures bleed irregularly from one column into the next so no two cards have identical layouts. ## Typography and Palette **Three Google Fonts, deliberately period-correct to mid-1980s Memphis publishing:** - **Oswald** (700, 600, 500) — the **condensed display workhorse**. Used for all section headings, cover wordmark, callout slabs. Set at `clamp(2.6rem, 7.5vw, 6.4rem)` for primary headings, `letter-spacing: -0.02em`, weight 700, leading-tight. Oswald's tall narrow letterforms echo 1980s science-textbook chapter titles. Headings are typeset all-caps with a slight `transform: rotate(-1deg)` to suggest hand-pasted typography. - **DM Mono** (500, 400) — used for *footnote-style* captions, section numbering ("EXPERIMENT 03"), figure-callouts, and the "tsundere annotation" marginalia. Set at `0.78rem` with `letter-spacing: +0.06em`, uppercase. Provides the textbook-rigor counterpoint to the playful display. - **Caveat** (700, 500) — the **handwritten margin-doodler**. Used exclusively for the tsundere-blush annotations: "(don't read into this)", "this means nothing", little arrows pointing at footnotes. Pulled `5deg` askew with `transform: rotate(-4deg)`, color `--cherry-blush`. Caveat carries the embarrassed-pencil energy. Body text is **Karla** (500, 400) at `1.06rem`, line-height `1.62`, optimized for the earnest body-paragraph rhythm of a science abstract. Karla's slightly-warm humanist contours keep the body warm-inviting rather than corporate. **Palette — the creamy-pastel postmodern science set, eight tokens:** - `--paper-cream: #fbf3e2` — primary page ground, a warm bone-cream cardstock. - `--paper-shadow: #f1e3c8` — second-tier ground, used inside cards. - `--ink-cocoa: #3b2a1c` — primary text and squiggle-border ink, a warm cocoa-bistre never quite black. - `--peach-trapezoid: #f6b89c` — Memphis slab #1, the warmest pink-peach. - `--butter-disc: #f4d784` — Memphis slab #2, a soft butter-mustard yellow. - `--mint-zigzag: #b8d8b9` — Memphis slab #3, powder-mint cool counterpoint. - `--lilac-confetti: #c8b6dd` — Memphis slab #4, lavender-pastel for terrazzo. - `--cherry-blush: #d96f6a` — exclusively for tsundere-annotation Caveat marginalia and `border-animate` accent strokes. The palette is a **strict no-pure-white, no-pure-black** rule: `#fbf3e2` is the lightest token, `#3b2a1c` is the darkest. Every Memphis slab is desaturated relative to the neon-Memphis original — these are pastels, not primaries — keeping the ground warm-inviting. ## Imagery and Motifs **A four-layer Memphis-pattern + line-illustration imagery system, all SVG-native, all hand-drawn-feeling:** 1. **Pattern field tiles (background stratum)** — three repeating 320x320px SVG tiles, mixed and offset across sections: (a) **Squiggle-rule tile**: hand-drawn cocoa squiggles at 1.5px stroke, scattered at irregular angles, density ~4 per tile. (b) **Dotted-oval tile**: open ovals of varying sizes, 1.25px stroke, no fill, in cocoa-on-cream. (c) **Zig-zag terrazzo tile**: three to five short zig-zag dashes in alternating peach/butter/mint, plus a few scattered solid-pastel confetti dots. Tiles are blended via `mix-blend-mode: multiply` so they sit *on* the cream paper rather than over it, preserving the warmth. 2. **Memphis-slab geometric furniture (mid stratum)** — five irregular geometric primitives drawn as inline `` with no stroke, only fill: an asymmetric trapezoid in `--peach-trapezoid`, a half-disc in `--butter-disc`, a long zig-zag bar in `--mint-zigzag`, a vertical pill in `--lilac-confetti`, and a small cluster of three dots-and-a-squiggle. These rotate at parallax rates `0.4`-`0.7`, creating depth. 3. **Line-illustration scientific apparatus (foreground stratum)** — every section contains 2-3 inline-SVG line drawings of laboratory glassware drawn with a deliberately *wobbly* hand: a beaker with a flushed-pink condensation droplet, a graduated cylinder labeled "Embarrassment Reservoir (mL)", a stylized retort stand whose clamp holds a folded note, an oscilloscope readout shaped like a heartbeat, a test-tube rack where one tube is conspicuously rotated 8deg out of alignment. All strokes are `--ink-cocoa` at 1.5px, no fills, leaving the paper-cream visible through the glassware. The illustrations are **proudly imperfect** — endpoints don't perfectly meet, parallel lines drift, ellipses are slightly egg-shaped — to reinforce the "kitchen-table science" warmth. 4. **Border-animate squiggle frames** — every foreground content card is wrapped in a custom CSS-animated SVG path that draws a continuous hand-drawn squiggle border around the card. The path uses `stroke-dasharray` and `stroke-dashoffset` keyframes to gently *crawl* counter-clockwise at 24-second loop, with a faint pulse on hover (`stroke-width: 1.5px → 2.25px` over 240ms) to simulate the pamphlet "blushing" when read. A second border-animate variant is the "confession-reveal": squiggle frames around marginalia that draw on first-viewport-intersection using `path-draw-svg` over 1.4s. No raster photography anywhere. No emoji. No icon fonts. No clip-art. Every visual is hand-drawn SVG that could plausibly have been inked by the same person in 1986. ## Prompts for Implementation Build this as **a single long-scroll vertical pamphlet** rendered as five `
` elements stacked vertically, each a 100vh stage. The implementation must lean on `scroll-snap-type: y proximity` on the `
` so each panel "pages" softly without imprisoning the scroll. There is no nav bar, no hero-CTA, no pricing tier, no testimonials, no stats grid, no logo wall, no footer link farm — this is a research pamphlet, not a SaaS landing. **Skeleton.** `
` containing five `
` panels with classes `cover`, `hypothesis`, `experiment`, `results`, `conclusion`. Inside each, three `
` strata: `.bg-pattern` (the tiled SVG field, `position: absolute; inset: 0; will-change: transform`), `.mid-furniture` (the Memphis geometric slabs, also absolute-positioned), and `.fg-card` (the foreground bone-cream paper rectangle with the squiggle-border, holding all readable content). On the right margin, sticky `position: fixed; right: 18px; top: 50%; transform: translateY(-50%)` is `.fold-tab` — a vertical terrazzo-confetti strip whose colored segments brighten as the corresponding section enters the viewport. **Parallax mechanics.** Use a single `requestAnimationFrame` loop reading `window.scrollY`. For each panel, query `.bg-pattern` and apply `translate3d(0, ${scrollY * 0.2}px, 0)`, `.mid-furniture` at `0.55`, `.fg-card` at `1.0` (no offset, default flow). Avoid IntersectionObserver for parallax — the rAF loop with simple math is smoother. Cap the parallax to within each panel's bounds so background tiles don't drift forever. **Border-animate squiggle.** Implement the card border as an inline `` containing a `` traced as a hand-drawn rounded rectangle with intentional wobble (use 12-16 control points with slight randomized perturbations on each render). Animate the path via `@keyframes squiggle-crawl { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -1200 } }` running `24s linear infinite`. On `:hover`, transition `stroke-width` from `1.5` to `2.25` over 240ms with a `cherry-blush` color shift on the second of two stacked paths. **Tsundere annotation reveals.** Marginalia in Caveat are wrapped in `