# Design Language for tsundere.review
## Aesthetics and Tone
tsundere.review is **The Quiet Constellation Review** — an imagined late-night zine printed on slightly grainy recycled cardstock and read under a UV-purple desk lamp at 2am. The aesthetic is **grainy-textured calm** married to **neon-electric warmth**: a still, contemplative reading room where the only motion is the slow drift of paper-cut stars across an off-white field, and the only loud thing is the occasional electric-violet underline glowing softly beneath a quoted phrase. The mood is the inverse of the corpus's loud-aggressive playful default — it is **serene, slow-tempo, almost meditative**, but never sterile. Every surface carries visible paper grain (procedural noise, never photographic) so the page feels held in the hand rather than displayed on glass.
The site reviews things — books, albums, software, small acts of kindness — through the lens of a fictional editorial collective called **The Quiet Constellation**, whose conceit is that every review is a star, every issue is a constellation, and every constellation can be traced through scroll position. Reviews are not scored 1–10; they are placed on a celestial chart where altitude = recommendation and azimuth = personality. There is **no rating bar, no star-out-of-five icon, no thumbs-up, no fire emoji**. Stars in this design are spatial coordinates, not unit measurements.
The tone borrows from late-period Brian Eno liner notes, Olafur Eliasson exhibition pamphlets, and the typesetting of *The Whole Earth Catalog* in its quietest moments. Color does the heavy emotional lifting: a warm-cream base (`#f3eedf`), the neon-electric accent (`#7d3cff`) used only for **active reading positions** — never for "buy" or "subscribe" — and a soft cyan-glow (`#5beaff`) reserved for in-flight quotes. Visitors should leave feeling they were *let into* a small reading room, not *sold to*.
## Layout Motifs and Structure
**Organic-flow single-scroll, four currents.** The page is one continuous vertical scroll divided into four "currents" — `#dusk-arrival`, `#observation-deck`, `#field-notes`, `#colophon-aurora` — that bleed into each other via softly noised gradient seams (no hard section dividers, no `
`). Currents are not equal-width columns: each one is laid out on a **liquid 16-column grid where the active column count drifts with scroll**. At `#dusk-arrival` content occupies columns 4–13 (centered, contemplative); at `#observation-deck` the chart spreads columns 2–15 (panoramic); at `#field-notes` review entries staircase across columns 3–9 then 7–14 alternately (a reading rhythm that walks the eye left-right-left); at `#colophon-aurora` the colophon collapses to columns 6–11 (intimate close).
**The Constellation Chart (signature layout element).** The `#observation-deck` current contains a single full-bleed SVG chart — 1400×900 viewBox — that is the page's structural centerpiece. It is a **night-sky polar coordinate plot** where each star is one review. Stars are placed by `cx`/`cy` according to the review's altitude (recommendation strength: 0 at horizon, 90 at zenith) and azimuth (a categorical dimension hash: 0=quiet, 90=technical, 180=warm, 270=strange). On hover, each star expands from 4px to 14px radius with a 320ms `cubic-bezier(.22,1,.36,1)` ease, and a Frutiger-clean caption arcs out beneath it on a tangent path (drawn as SVG `` along an invisible arc), reading the review's title and one-line essence. Stars are connected by **faint hairline arcs (1px, opacity 0.18)** drawn between reviews that share an editorial through-line — these are the "constellations" the brand is named for. There are exactly **seven named constellations** rendered with subtle annotation labels in low-opacity violet.
**Bounce-enter as the page's only entrance pattern.** Every text block, every star, every review excerpt enters the viewport via the **bounce-enter** animation: `translateY(28px)` and `opacity 0` → `translateY(-4px)` → `translateY(0)`, with a 540ms timing using `cubic-bezier(.34,1.56,.64,1)` (the slight overshoot is the "bounce"). The bounce is **gentle, never bouncy-cartoon** — overshoot capped at 4px, and damped by `prefers-reduced-motion` to a flat fade. Critically, the bounce **fires once per element, top-to-bottom**, scroll-anchored via `IntersectionObserver` at threshold 0.25. There is no scroll-jacking, no parallax-on-everything; the bounce is the page's pulse, used everywhere, and that consistency is the design.
**No grids of cards.** Reviews are not displayed as a 3-up or 4-up card grid. Instead, the `#field-notes` current renders reviews as **staircased prose blocks** — each review is a 460–680 word block of Frutiger-clean prose with a single inset SVG collage (see Imagery below) floated to the gutter. Blocks alternate left-anchor and right-anchor, never side-by-side, separated by ~140px of vertical breathing room. The visual rhythm is *reading*, not *scanning*.
**No header navigation, no footer link soup, no sidebar.** A single slim masthead at top reads "The Quiet Constellation Review · Vol. III · Constellation 7" in Frutiger-clean small caps; the colophon at the bottom names the four imagined editors and their reading dates. There is **no menu, no search bar, no login, no newsletter modal, no cookie banner**. Navigation is *pure scroll*.
## Typography and Palette
**Typefaces (all from Google Fonts):**
- **Display & body:** `Hanken Grotesk` (variable weight, axes 300–800) — the Frutiger-clean cornerstone. Used for everything: masthead small caps at weight 600 letter-spacing 0.18em, review titles at weight 700 size 32px line-height 1.15, body prose at weight 400 size 18px line-height 1.7.
- **Italic accent:** `Newsreader` italic (weight 400, optical-size axis at 18) — used **only** for in-line quoted phrases inside reviews, set in the cyan-glow color, with a 1px dotted underline.
- **Numerals & coordinates:** `JetBrains Mono` weight 400 size 13px — used **only** for the Constellation Chart's altitude/azimuth coordinate annotations and the issue/volume metadata.
No serif headlines. No condensed display fonts. No script. The Frutiger-clean discipline (humanist sans, generous x-height, slightly open apertures) is the typographic spine of the entire experience.
**Palette (8 colors, all locked):**
- `#f3eedf` — **paper cream** (page background, ~88% of pixels)
- `#1d1c2a` — **deep ink violet** (body text, ~9% of pixels; not pure black)
- `#7d3cff` — **neon electric** (active reading position, current-section spine, hover glow on stars; ~1.5% of pixels — reserved)
- `#5beaff` — **cyan glow** (in-flight quote accent only, ~0.3% of pixels — heavily reserved)
- `#f8b3d6` — **dawn pink** (constellation arc highlights, one motif fill; ~0.5% of pixels)
- `#cab59a` — **dust beige** (collage paper-substrate tone in imagery)
- `#5d5a6e` — **slate quiet** (metadata, captions, low-emphasis text)
- `#fff7ea` — **warm highlight** (the only "lit" surface — applied behind quoted passages as a soft 12% rectangle)
**Forbidden in this palette:** pure black `#000`, pure white `#fff`, any saturated red, any green, any orange. The neon-electric does not pair with secondary neons; it stands alone.
## Imagery and Motifs
**Star-celestial motif system (the visual signature).** Stars are drawn as **hand-authored 5-point asymmetric polygons** — not the perfect geometric pentagram. Each star is one of seven authored variants (`star-01.svg` through `star-07.svg`) with slightly different point-length asymmetries (one elongated point, like a meteor-tailed mark). Stars are **never filled with gradient**; they use flat `#1d1c2a` with a 1.5px `#7d3cff` outer glow filter (`` → ``). Sizes: 4px on the chart at rest, 9px in body prose as a `` ornament, 22px as section headers, 64px in collages.
**Collage imagery (handmade, never stock).** The signature decorative element in `#field-notes` is a **collage figure per review** — a 320×400px SVG composition combining: (a) one torn-paper rectangle in dust beige (`#cab59a`) with a deliberately ragged edge drawn as a Bezier path (12–18 control points, slight randomization), (b) one or two stars from the celestial vocabulary, (c) a pasted-on rectangular fragment of Frutiger-clean text rendered at 8px (representing a "clipping" from another publication, with realistic typeset noise), (d) a single cyan-glow underline drifting diagonally beneath a clipped phrase. The collage feels like a Joseph Cornell box flattened to two dimensions. **No photography. No icons from libraries. No emoji. No 3D renders.** All collages are hand-authored SVGs committed to the repo.
**Grainy-textured surfaces.** The page background carries a procedural grain via SVG turbulence filter: `` mixed at opacity 0.06 in `multiply` blend mode. The grain is *fine* (visible at 1× zoom only on retina displays as a dust haze), never coarse. **Cards do not have grain.** Only the page substrate carries it. Borders, where they exist, are 0.75px hairline `#5d5a6e` at 30% opacity — barely-there pencil rules.
**The Aurora seam.** Between `#observation-deck` and `#field-notes`, a single 220px-tall horizontal band carries a **soft animated aurora**: three radial gradients (violet, cyan, dawn-pink) drifting horizontally on a 40-second loop, opacity capped at 0.22, set to `mix-blend-mode: soft-light` over the cream background. This is the page's only ambient motion. It is **paused** when the document is not visible (visibility API) and **disabled entirely** under `prefers-reduced-motion`.
**Marginalia stars.** In long prose blocks, occasional stars appear in the right margin (column 14 of the 16-col grid) as **reading anchors** — they mark passages the editor wants to highlight. Hovering the star reveals a Newsreader-italic editor's note in the gutter. There are **no callout boxes, no pull-quotes set in display type, no sidebars** — only marginalia stars do this work.
## Prompts for Implementation
Build tsundere.review as **a single full-screen scroll narrative** — one HTML page, no router, no tabs, no modals, no overlay popups, no client-side framework required (vanilla HTML/CSS/JS is sufficient and preferred). The page reads top-to-bottom as a quiet, paper-grained zine: dusk arrival → observation deck (constellation chart) → field notes (review prose) → colophon aurora. There must be **no pricing block, no CTA bar, no stat-grid, no logo soup, no feature comparison table, no testimonial carousel, no "Get Started" hero button, no newsletter signup form, no cookie banner, no rating bar, no thumbs-up icons, no star-out-of-five widget**. The page's only interactive affordances are: (a) **bounce-enter** on every text block and chart star as it crosses 25% viewport (the page's signature pattern, used everywhere consistently); (b) **hover-glow expansion** on chart stars (4px→14px, 320ms ease-out-back, neon-violet glow intensifies); (c) **margin-star reveal** — hovering a marginalia star fades in an editor's italic note in the gutter (240ms); (d) the **aurora seam** drifts on a 40s loop, paused under `prefers-reduced-motion`.
**HTML structure:** semantic `