# Design Language for cherrypop.xyz ## Aesthetics and Tone cherrypop.xyz is **a thirty-eight-minute 16mm film about a single maraschino cherry, projected onto the inside cover of a 1962 university library's reserve-shelf reading room** — the soundtrack only the soft mechanical click of the projector's shutter and somewhere in the building, three floors up, a graduate student turning the page of a clothbound translation of *The Tale of Genji*. The "pop" is **not** an event in this design. The pop is what the **whole site is recovering from** — the slow, blue-cinematic exhale that follows the small confectionary detonation, held across an entire vertical scroll. Where cherrypop.bar (its sibling) was art-deco rooftop midtown circa 1933, cherrypop.xyz is the **opposite axis of memory**: it is the cherry remembered by a quiet rural Vermont scholar in winter, written about in a thin journal beside a mug of black tea, lit by a single north-facing window whose sky has gone the colour of skim milk over a saucer of indigo ink. The aesthetic is **cinematic** (only 6% in the registry — and almost never coupled with pastoral material) tempered by **book-scholarly** motifs (only 3% — bibliographic apparatus, marginalia, end-papers, library checkout cards) and washed entirely in **ethereal-blue** (only 3%, almost always reserved for sci-fi and almost never granted to the warm romance of pastoral imagery). The tone the site must live inside is **pastoral-romantic** as a low candle-flame, never as a sigh — the visitor reads the page the way one reads a letter folded inside the back cover of a book that was checked out of a small-town library in 1971 and never returned. The hush is not melancholy; it is **observational, slightly amused, and tender**. The cherry, in this telling, is a private joke between two people who long ago parted on good terms and now correspond only at the solstices. Inspirations stack across an unlikely shelf: Andrei Tarkovsky's *Mirror* (the slow blue-grey domestic interiors with sudden blooms of warmth), Wong Kar-wai's *In the Mood for Love* (the cinematographic patience to hold a single object for fifteen seconds without comment), the Faber & Faber clothbound poetry editions of 1961–1968 (cream end-papers, deckled edges, two-colour title pages in cinnabar and ink), the *Whole Earth Catalog*'s margin notation style, the watery Maxfield Parrish skies of New Hampshire summers, Sebastião Salgado's monochrome agrarian photography reinterpreted into a pale aquamarine duotone, and the specific mood of a village postmistress alone with a Smith-Corona at 4:11 PM in late January. The visitor must finish the page **calmer than they started it** — slightly pleased to have remembered something they were not quite sure they had. ## Layout Motifs and Structure The structure is **stacked-sections** (only 3% in the registry — meaningfully underused) organised as a **vertical film reel of seven cinematic "frames"**, each frame a near-full-viewport panel that snaps softly into focus as the visitor scrolls. The page is **explicitly a chapter of a printed book** crossed with **a contact sheet of seven lantern-slide stills** — page numbers float in the gutters, footnote glyphs sit in true superscript at the right margin, signatures (gathered-leaf indicators like "B-iv") sit pale in the bottom outer corner of each panel, and the running head at the top of every frame names the panel: *I. The Coupe*, *II. The Hand*, *III. The Pop*, *IV. The Sky After*, *V. The Library*, *VI. The Letter*, *VII. The Cherry, Stilled*. The grid is **a 12-column letterpress measure** (max width 1180px) with generous **2.6em book-leading**. Inside each stacked section the composition is **strictly cinematic 2.39:1** — every panel is letterboxed top and bottom with thin ivory bars (#F2EBDD) so the eye is forced to read the central band like a CinemaScope still. Within those letterbox bands sit the running head, the page number, and a single hairline wave-rule (a 1px serpentine line) that subtly differentiates each section. Crucially, the layout **rejects card grids** (overused at 73%), **rejects bento-box** (12% but tired), and **rejects asymmetric chaos** (53%) — instead it leans into honest, calm vertical stacking, the way a reading room shelves quartos. A specific layout invention: **the card-flip pattern** (only 11% — and almost never used for narrative purposes) is repurposed here as **"folio-turn"**. Every other stacked section features a single hero "folio" — a clothbound rectangular panel that, on a slow horizontal hover-drag (or scroll-past on touch), turns over its own spine like the page of a quarto, revealing on its verso side a marginal annotation in fountain-pen blue. The flip is not decorative novelty: it is the **grammar of the entire site**. Each folio's recto is the cinematic image; each folio's verso is the scholarly footnote. The visitor is invited to flip half the folios on the page — never all seven, intentionally — and is left wondering what the unturned pages would have said. (The unread always outnumbers the read in any honest library.) Navigation is a **left-margin rule** holding seven small circular signatures, each numbered i–vii in true Roman numerals, joined by a hand-drawn vertical pen-line that fills downward as the visitor descends. There is **no top navigation bar**. There is **no sticky CTA**. There is **no pricing block, no statistics-grid, no testimonials carousel** — the page is a chapter, not a brochure. The footer is a single colophon paragraph in 11pt italic, recording the date the page was set, the typeface used, and an entirely fabricated press name (*Coupe & Cinder Press, Northfield, Vermont*). ## Typography and Palette The typographic system is **playful-rounded** (only 2% in the registry — almost untouched) **deliberately disciplined into a scholarly setting**, which produces the unique visual signature of the site: a roundness that reads as **kindness rather than cuteness**, set with the gravity of a university press. - **Display & Running Heads:** *Fraunces* (Google Fonts) — a high-contrast, soft-edged "old-style with a sense of humour" serif, set at optical size 144 with SOFT axis at 100. Used for the seven panel titles ("I. The Coupe", etc.) at 56–84px, and for the article title at 96px with a –0.01em tracking and a 0.92 line-height. - **Body:** *Newsreader* (Google Fonts) — a literary serif drawn explicitly for long reading on screen, set at 18–19px with 1.65 line-height. Italic Newsreader carries the marginalia. - **Marginalia & Footnotes:** *Quattrocento Sans* (Google Fonts) at 13.5px with letter-spacing +0.02em. The footnote glyphs themselves use *Cormorant Garamond* italic in superscript, dropped 0.18em above the baseline. - **Folio Verso (handwritten annotation):** *Caveat* (Google Fonts) at 22px slate-blue, set ragged-right inside a 64% measure to feel like genuine fountain-pen notation, never like a font masquerading as one — broken with deliberate inkblots and one strikethrough per folio. - **Numerals & Signatures:** *Sorts Mill Goudy* (Google Fonts) old-style figures only — never tabular — for page numbers and Roman numerals. - **Colophon:** *EB Garamond* italic (Google Fonts), 11pt, in dusk-blue. The palette is **ethereal-blue** raised on **paper-cream** with two small acts of warmth — the cherry's stain and the candlelit interior of the library frame. - `#0E1B2C` — *Library Midnight* (deep navy ink, used only for headings and the pen-line) - `#1F3A5F` — *Vellum Indigo* (body text and section rules) - `#5E83A8` — *Lake at Dawn* (marginalia, links, secondary type) - `#9DBCD9` — *Ether* (the dominant atmospheric blue — used for skies, washes, the long letterbox gradient) - `#C8DDEC` — *Skim-Sky* (large background tints, panel washes) - `#F2EBDD` — *End-paper Ivory* (the body-paper colour of the entire site) - `#FBF7EE` — *Reading-Room Cream* (top-most paper, behind the largest type) - `#7B1F2C` — *Cinnabar* (the cherry's single droplet — used **once per panel maximum**, never for buttons, never for accents in series) - `#D89494` — *Pop-Pink* (a single soft halo that radiates out from each cherry, used only inside the III. The Pop panel) - `#3A4A3D` — *Library Moss* (the leather binding of the imagined book, used in the colophon and as a single thin frame around each folio) The site is **unapologetically light-on-paper** — there is no dark mode, no toggle, no concession to "preference". A book printed in 1962 does not have a dark mode. The scholar reading at the north window does not need one. ## Imagery and Motifs The visual world is built almost entirely from **grain-overlay** (only 11%, the underused texture of the registry) layered over **soft duotone aquamarine washes**, set inside **book-scholarly** apparatus — and never from photography. There is **no stock photo, no hero photograph, no human face** anywhere on the page. The cherry itself appears once, in panel VII, as a single hand-rendered SVG drop with a 6% noise-overlay and a slow 14-second drift. Every other "image" on the page is **a constructed object pretending to be a photograph that has been pasted into a book** — vignetted at the corners, foxed at the edges, with a faint grid of perforated stamp-edges where it has been removed from a postage album. Specific visual motifs: 1. **The Coupe (I)** — an SVG line-drawn champagne coupe, glass walls slightly elliptical from refraction, holding a single liquid plane that shimmers at 3 cycles per minute. The shimmer is *Ether* on *Skim-Sky* with a subtle parallax of the room reflected backwards in its bowl. 2. **The Hand (II)** — a watercolour-style wash of a hand reaching from the right margin (rendered entirely in CSS as overlapping radial gradients with a noise texture), holding the cherry by its stem, the stem rendered as a 2px *Cinnabar* curve. 3. **The Pop (III)** — the only "kinetic" panel. A single concentric ripple of *Pop-Pink* expands outward from a still-point, and the entire layout's grain-overlay momentarily intensifies (from 4% opacity to 9%) before exhaling back. The ripple is generated in WebGL at 60fps, but the effect is engineered to feel like a 24fps film projector's soft gate-shimmer, not like a digital animation. 4. **The Sky After (IV)** — a four-second loop of slow blue cumulus, rendered as layered noise+gradient at the canvas level, never as video. The sky drifts upward at 2px per second. 5. **The Library (V)** — an isometric SVG of a small reading room, drawn in single-weight ink lines on cream, with one window casting a warm rectangle of light. Books on the shelves render their actual spines in tiny *Sorts Mill Goudy* with hand-set call numbers (PR 6045 .O72, etc.). On hover, individual books slide forward 4px and reveal a one-line description in the margin. 6. **The Letter (VI)** — a folio that, when flipped, reveals a typed letter on cream paper with a single typewriter-error correction and a date-stamp from "Northfield, VT — Jan 22, 1971". 7. **The Cherry, Stilled (VII)** — a single SVG cherry on its stem, perfectly centred, held without animation for the entire footer space. The visitor scrolls past it slowly, into the colophon, into nothing. Recurring decorative apparatus, lifted directly from book-scholarly tradition: - **Marginal manicules** (the printed pointing-hand) appear three times on the page, hand-drawn, in *Vellum Indigo*, each marking a sentence the imagined editor especially loved. - **Ornamental pilcrows** (¶) in *Cinnabar* mark the start of every paragraph in panels II, IV, and VI. - **Fleurons** (❦) at the end of every section, hand-drawn, off-centre, slightly trembling. - **Library checkout card** in the footer — actually clickable, with seven imaginary borrowers' names hand-stamped in slowly fading purple ink. - **A 4% grain-overlay** (procedural noise SVG, baked into the body background) is applied across the *entire* viewport at all times. This is the load-bearing texture of the design. ## Prompts for Implementation Implement the page as **a single long-form vertical film-reel-as-chapter** using semantic HTML, system-rendered SVG, and a small amount of WebGL only for the III. The Pop panel. Bias every implementation choice toward **storytelling, immersive cinematic patience, and the texture of paper** — never toward conversion, never toward UI density, never toward "engagement metrics". - **Document**: One `
` with seven `
` children, each section letterboxed at exactly 2.39:1 with `aspect-ratio: 2.39 / 1; min-height: 78vh;` and a 6vh `padding-block` inside the letterbox. - **Scroll snapping**: Soft snap (`scroll-snap-type: y proximity`), never mandatory — the visitor must always be able to drift between panels. - **Folio-turn (card-flip reinterpretation)**: Use CSS `transform: rotateY(...)` with `transform-style: preserve-3d` on alternate folios (II, IV, VI). The verso must be the *back* of the same paper, lit from the left, with the marginal annotation handwritten in *Caveat*. Trigger on slow click-and-drag (≥120ms), never on simple click — the gesture should feel like turning a real page, not flipping a card. On touch, the gesture is a horizontal swipe with a 240ms transition and a soft `cubic-bezier(0.45, 0, 0.15, 1.0)` easing. Add a 1.5px ivory shadow on the spine during rotation. - **Grain overlay**: A 240×240 SVG noise tile, baked into a CSS `background-image` on ``, at 4% opacity. During panel III the opacity is animated from 4% → 9% → 4% over 1.4 seconds via `prefers-reduced-motion`-respecting CSS variables. - **Pen-line nav**: An `