# Design Language for Shinpaisho.com ## Aesthetics and Tone Shinpaisho.com is the digital commonplace book of *the worrier* — 心配性 — a museum of small, beautiful anxieties. Imagine the diary of a turn-of-the-century botanical illustrator who could not sleep: pressed violets glued beside transcribed insomnia, marginalia in three languages, calligraphic ink bleeding through onion-skin paper. The aesthetic is **dark-academia** filtered through a slow **aurora-gradient** dawn — not the cold tungsten-and-leather library cliché, but the moment just before sunrise when the reading lamp is still on, the night's worries are dissolving into pre-dawn iris and grass-green, and the bookbinder's room smells of pressed flowers and old varnish. The tone is unmistakably **nostalgic-retro** — the nostalgia of someone who feels things too deeply about things that have not happened yet. Pages turn slowly. Headlines are set in a softly stressed variable serif that *breathes* on hover, as if the page itself were anxious. Floral motifs — pressed-and-mounted herbarium specimens of forget-me-not, blue salvia, dried hydrangea, fern frond — drift across a deep ink-violet ground while a low **aurora-gradient** of dawn-aurora-blue → herbarium-green → pressed-rose washes the periphery like the first grey light through a leaded window. This is a place to sit with worry until it becomes beautiful. Not therapy, not productivity — *contemplation*. The mood is that of the late Edwardian study: hand-bound notebook open, fountain pen still uncapped, a single moth at the lampshade, and outside the window an aurora the worrier almost did not notice. ## Layout Motifs and Structure The structural backbone is a **deep, irregular masonry grid** — not the Pinterest masonry of equal-width columns, but a *bookbinder's masonry* of mismatched specimen plates, each tile sized to its content the way a pressed-flower album makes room for the larger ferns. Five logical column units (148px, 220px, 312px, 220px, 148px) at 2560px viewport, collapsing through 4-3-2-1 break-points. Between tiles, a 38px gutter feels like the cream-paper margin between two glued-in clippings; horizontal gutters (52px) are deliberately larger than vertical (28px), giving the page the elongated proportion of an octavo notebook spine. Each masonry tile is a **specimen card** — a slightly-tilted (-1.4° to +1.8°, randomized per card) frame with a faint debossed inner border (1px inset of `#E9DFC9` at 30% opacity), the kind a museum technician would have ruled in pencil before writing the Latin name underneath. Tiles do not share alignment with their neighbors; they cascade like leaves pressed at different times. A persistent **left-margin annotation rail** (96px wide) runs the entire scroll length: handwritten dates in slanting italic, tiny pen-sketched moths and seedheads, and occasional translucent watermarks of pressed petals. The rail is the worrier's marginalia — never decorative filler, always quietly meaningful. There is no traditional hero. Instead, the document **opens on a single full-bleed specimen plate** (90vh) — one enormous pressed flower, ink-bleeding at the edges, with the page title hand-set in display serif *underneath* it the way a curator labels a herbarium sheet. As the reader scrolls, the masonry begins, but the first three rows are deliberately sparse — only two or three tiles per breakpoint — so the gaze drifts through *negative-space cloister* before the page densifies. Around scroll-progress 65%, the masonry dissolves into a **single calmer column** (a "diary spread") for long-form reflection, then re-blooms into a final dense **specimen wall** before the colophon. A sticky cursor-following **focus loupe** (the **zoom-focus** signature) hovers as a 220px circular magnifier with a faint brass-rim ring. Wherever the cursor rests on a specimen tile, the loupe enlarges that 220px region to 1.85× scale with a slight tilt-shift blur on the surrounding masonry, simulating the bookbinder's hand-loupe pressed against onion-skin — the worrier examining each small thing. ## Typography and Palette **Type stack — Google Fonts only, all loaded as variable where possible:** - **Display & headline face:** `Fraunces` (variable axes: opsz 9–144, wght 100–900, SOFT 0–100, WONK 0–1). Used at 88–164px for plate titles such as "I. SLEEPLESS / NIGHT-IRIS" and "VII. THE LATIN NAME FOR WORRY," with `font-variation-settings: "opsz" 144, "wght" 540, "SOFT" 65, "WONK" 1`. The wonky, almost-pressed-by-hand axis behaviour at high opsz reads as type that has been *embossed into damp paper* — the perfect dark-academia headline voice. On hover, headlines animate the SOFT axis from 65→18 over 480ms — a tiny held breath, the page's own anxiety made visible. - **Editorial & body serif:** `Cormorant Garamond` (Light 300 and Italic 300). Used at 19/30 for long-form reflection. The high-contrast, nearly-too-thin strokes feel like a fountain pen running out of ink — exactly the right voice for 3 a.m. journal entries. - **Marginalia & annotation italic:** `Caveat` for the left-rail handwritten dates, page numbers, and pen-sketched captions. Loaded at wght 400 and 600. This is the *only* hand-style font on the page, and it appears only in the annotation rail and as occasional inline scribbled-out corrections. - **Botanical Latin & taxonomic labels:** `IM Fell DW Pica` (regular + italic). Used at 13/22 SMALL CAPS for taxonomic labels under each specimen tile — *Myosotis sylvatica*, *Salvia farinacea*, *Dryopteris filix-mas*. The font's deliberate 17th-century-press irregularity is non-negotiable here; no clean modern serif gives the same printed-by-letterpress patina. - **Variable display accent:** `Bricolage Grotesque` (variable, opsz + wght). Used sparingly — only for the rotating section enumerators ("CARTA / I" through "CARTA / IX") and for the word **心配性** when set in romaji. On scroll, the wght axis interpolates with scroll-progress, so the page's chapter numerals visibly *thicken with worry* as the reader descends. This typography choice — variable Fraunces wonky-axis as primary display, Cormorant Garamond Light as body, plus letterpress IM Fell for botanical labels — is **expressive-variable** in the registry's sense: every weight and softness is a variation living on a continuous axis, not a fixed step. **Palette — eight curated tones, dawn-aurora through herbarium-violet:** - `#0E1230` — *Pre-Dawn Ink.* The page ground. Not black, not navy — the violet-blue of the sky four minutes before astronomical twilight. Carries 4–6% chroma of warm undertone so it never reads as cold. - `#1B254A` — *Reading-Lamp Shadow.* Card surfaces, sidebar, modal backdrops. A single step warmer/lighter than the ground, just enough to lift each specimen plate forward. - `#5E7AB8` — *Aurora Iris.* Mid-stop of the aurora gradient. The colour of the first hour of dawn through stained glass. Used for inline links, hover underlines, and the focus-loupe brass-rim ring's inner reflection. - `#7BB287` — *Herbarium Verdure.* Aurora gradient warm-side. Pressed-fern-leaf green, shifted slightly toward grey by age. Used for the second gradient stop, for the enamel-pin moths in the margin rail, and for pull-quote opening glyphs. - `#C8A9D3` — *Pressed-Violet Petal.* Aurora gradient cool-warm hinge. Lavender that has been kept between book pages for forty years. Specimen-tile accent borders, italic emphasis colour, and the watermark petals on the annotation rail. - `#E9DFC9` — *Onion-Skin Cream.* Body text on dark, paper-tone for inset diary spreads, debossed inner card borders. Warm cream, never white. - `#A86A3F` — *Tannin & Foxing.* Display headline accent on hover; the colour of an old book's foxed margin and tea-stained corner. Used as the hover-state colour for Fraunces headlines and as the underline-draw stroke on links. - `#3B0F2A` — *Dried-Rose Reservoir.* Deepest accent — the colour at the bottom of an antique inkwell. Used only for emphasized blockquotes, the colophon ground, and the closing 心配性 stamp. The aurora-gradient itself is a soft three-stop sweep — `#5E7AB8` → `#C8A9D3` → `#7BB287` — applied as a 1600px × 100vh `radial-gradient(ellipse at 18% 84%, …)` washed at 38% opacity over the Pre-Dawn Ink ground. It is never animated; it is the *room's atmospheric light*, and atmospheric light does not move. Above it, a 6% film-grain noise layer (a single 320×320 SVG `` baseFrequency 0.92, tiled) gives every section the patina of slightly-foxed paper. ## Imagery and Motifs This site refuses photography entirely. It is **mixed-media** in the bookbinder's sense — every image on the page is a layered composite of three rendering techniques, never a JPG of a real flower: 1. **SVG botanical line-drawings** of `Myosotis` (forget-me-not), `Salvia farinacea` (mealycup sage), `Hydrangea macrophylla`, `Dryopteris filix-mas` (male fern), `Papaver somniferum` (poppy), and *Bombyx mori* (silk moth). Each is hand-traced in 1.4px Tannin-and-Foxing strokes, ~280–620 path points, with the SVG's `stroke-dasharray` set to its own length so each illustration **draws itself in 2.6 seconds** when scrolled into the viewport. The drawing speed is deliberately uneven — ease-out cubic — so leaves complete before stems, exactly as a real botanist sketches. 2. **CSS-rendered "pressed-flower" diffusion shadows** beneath each SVG: a stack of three `filter: blur(7px) blur(14px) blur(28px)` Pressed-Violet ghosts, multiplied at 22% opacity, simulating the way a real pressed flower's pigment has bled into the album page beneath. These are the *only* element on the page rendered with multiplicative blend mode. 3. **Letterpress-style typographic specimen labels** beneath each illustration: an IM Fell DW Pica small-caps caption — *MYOSOTIS SYLVATICA · COLL. 1908 · LEAF NO. 14* — set on a tiny `#E9DFC9` cream rectangle that is debossed (inner box-shadow inset 1px) into the dark ground. Several labels include intentional letterpress imperfections: a missing serif, a slightly-too-inked counter, a barely-rotated letter — implemented as per-glyph SVG, never raster. **Floral-botanical motifs** layer through the entire experience without being twee: - **The marginalia moths.** Six `Bombyx mori` and *Saturniidae* silhouettes drift in the annotation rail at 8% opacity, 18–34px wide. They follow scroll position with a 1.2-second elastic lag, settling on different visual "lamps" (subtle bright spots in the page) as the reader scrolls — a quiet, nearly-subliminal reminder that something living is keeping the worrier company. - **The pressed-flower watermarks.** Roughly every 800vh, a single oversized (480px) faintly-coloured Pressed-Violet poppy or hydrangea sits at 6% opacity behind the masonry, its petals extending behind several specimen tiles. It is the page's quiet ground note; it never moves. - **The brass-rim loupe artifact.** The cursor-following zoom-focus loupe is rendered as a 220px circle with a 3px brass-rim ring (a `conic-gradient` of `#A86A3F` → `#E9DFC9` → `#7E3B1E` → `#A86A3F`) and a subtle 14% inner radial shadow that simulates the dome of curved glass. Beneath it, the magnified content has a 2px `filter: contrast(1.06) saturate(1.12)` lift — the way a real loupe sharpens what it looks at. - **The colophon stamp.** The page's final element is a single 心配性 hanko-style stamp in Dried-Rose Reservoir, hand-set as variable Bricolage at maximum weight, with a deliberately-uneven `filter: drop-shadow(0 0 0.3px #3B0F2A) drop-shadow(0.4px 0.6px 0 #5E1A40)` to simulate the bleed of red ink into rice paper. It is the only red on the entire page. - **The italic seedheads.** Inline among the body text, italic words of emphasis are preceded by a 6×8px SVG seedhead glyph in Pressed-Violet, drawn from the paths of *Papaver* dried-bulb capsules. The reader does not consciously notice them; they merely register that emphasis on this page is *gently sown*, not shouted. ## Prompts for Implementation Build Shinpaisho.com as a **single-route, scroll-driven specimen album** through nine "cartae" (folios), each a deeply-considered worry pressed and labeled like a flower. Bias every implementation choice toward atmosphere, slow reveal, and the feeling of *opening someone's private notebook just before dawn*. **CARTA I — Frontispiece (0–100vh).** Page opens silent on Pre-Dawn Ink ground. The aurora-gradient washes in over 1.4 seconds via opacity 0→0.38, then holds. Centered, a single 720×900px SVG poppy draws itself stem-up in 2.6s easing-out-cubic. Below it, the page-title 心配性 / SHINPAISHO appears with Fraunces variable SOFT axis interpolating from 100→65 over 900ms, as if the type is being pressed into the page by a hand. No scroll cue, no button — the reader scrolls when they are ready. Optionally: a single moth-silhouette traverses from upper-left to lower-right of the viewport over 14 seconds with elastic micro-jitter, then disappears off-edge. **CARTA II — The Opening Index (100–220vh).** Masonry begins sparsely — three specimen tiles only, far apart, each with hand-traced SVG and IM Fell taxonomic label. Tile entry is staggered (140ms between siblings) and uses a soft scale-up (0.94→1.0) plus a tiny rotation reset (initial random tilt animates from ±3.5° to its rest tilt of ±1.4°, simulating a card *settling* into the album page). Annotation rail begins drawing here: scroll-tied SVG `stroke-dasharray` reveals handwritten dates in Caveat as the reader passes them. **CARTA III–V — The Worry Plates (220–620vh).** Density rises. Tiles introduce mixed-content specimens: long-form Cormorant Garamond Light reflections, Fraunces pull-quotes set at 96px in Pressed-Violet, italic seedheads, and the first appearance of the **focus loupe**. The loupe is implemented as a fixed-position element following the cursor with a 90ms lerp, containing a `backdrop-filter: blur(0) contrast(1.06) saturate(1.12)` and a clip-path circle. Beneath it, surrounding tiles receive `filter: blur(0.6px) brightness(0.94)` while the loupe is hovering, then ease back over 240ms when the cursor leaves. **CARTA VI — The Diary Spread (620–820vh).** Masonry collapses into a single 720px-wide centered column of long-form prose set in Cormorant Garamond Light 19/30. The aurora gradient subtly intensifies (opacity 0.38→0.46) and the page ground warms by ~3% saturation. This is the calmest section: no masonry, no loupe (it fades out at 580vh), only the annotation rail and the slow drawing-itself of a single hydrangea at the chapter break. A pull-quote in Fraunces 124px / SOFT 22 sits centered with a Pressed-Violet seedhead opening glyph; the quote's first letter is a 168px drop-cap with a hand-drawn floral ornament curling around it. **CARTA VII — The Latin Names (820–1020vh).** Masonry returns, denser. This section is a **wall of specimen labels** — twenty-four tiles, each a single botanical specimen with full taxonomic hierarchy (Family / Genus / species / collector / date) in IM Fell DW Pica small caps. On hover, each tile reveals a longer hand-written reflection that fades up from beneath the label in Cormorant italic — the worrier's note about why *that* flower for *that* day. Use FLIP animation for the height shift; do not jump-cut. **CARTA VIII — The Aurora (1020–1180vh).** A near-empty section. The aurora-gradient swells to 0.62 opacity, the masonry holds only three large specimen tiles with sparse content, and a single oversized SVG silk moth (`Bombyx mori`, 540px wingspan) draws itself across the section from left to right over the section's scroll duration — its drawing tied directly to scroll-progress so the moth completes exactly when the section ends. This is the page's emotional crescendo and its quietest moment simultaneously. **CARTA IX — Colophon (1180–1300vh).** Masonry dissolves. Centered: the 心配性 hanko stamp in Dried-Rose Reservoir. Below it, an IM Fell DW Pica letterpress block with the colophon — *Set in Fraunces, Cormorant Garamond, Caveat, Bricolage Grotesque, and IM Fell DW Pica · Bound in Pre-Dawn Ink and Onion-Skin Cream · Pressed in the year of the worrier · 2026*. A final moth alights on the stamp with a 1.6s elastic settle, then holds. The aurora gradient slowly fades to 0.18 opacity; the page is going to sleep. **Animation principles, applied throughout:** - **Zoom-focus is sacred.** The cursor loupe is the page's only *active* interaction. Build it to feel like glass over paper, not like a UI overlay. Tilt-shift the surrounding content; brass-ring the focal aperture; keep the lerp at exactly 90ms (any faster reads as snappy/tech, any slower reads as broken). - **Scroll-tied SVG drawing.** Every botanical illustration draws itself only when ≥18% of its containing tile is in viewport. Use IntersectionObserver, not GSAP-only. Trigger once; do not redraw on re-entry. - **Annotation rail is scroll-tied.** The handwritten dates in Caveat are revealed by `stroke-dasharray` interpolation linked to scroll position, not to entry. The reader can scrub up and back to "rewrite" them. - **Variable axis breathing.** Fraunces SOFT axis on the page-title interpolates with the user's actual breath — or, if no microphone, a 4.2-second sinusoid (in 4 → hold 1 → out 5 → hold 1) that matches resting human breath. The page literally breathes anxiously. - **No CTAs. No pricing. No stat grids. No cards-with-buttons. No testimonial carousels. No newsletter modal.** This is a private album, not a landing page. If a call-to-action is unavoidable (e.g., a contact link in the colophon), set it as a single hand-drawn moth icon at the colophon's lower-right corner with no label, no button, no border. ## Uniqueness Notes This design's six distinct departures from the other 40 sites in the registry and from default web aesthetics: 1. **Dark-academia paired with aurora-gradient.** The registry shows dark-academia at only 7% and aurora-gradient palettes nowhere on the chart — the closest neighbours are *midnight-blue* (7%) and *jewel-tones* (5%). No other site in this batch lights a dark-academia space with a *cool-warm aurora* (iris-violet → herbarium-green → pressed-rose) instead of the genre's overworked tungsten/oxblood/leather defaults. Shinpaisho.com is reading-lamp dark academia at *dawn*, not at midnight. 2. **Bookbinder's masonry, not Pinterest masonry.** Of the 12% of sites in the registry using masonry, all use a near-equal-column Pinterest variant. Shinpaisho.com uses an irregular 5-column album-spread proportion (148-220-312-220-148px) with horizontal gutters deliberately twice the vertical, randomized per-tile tilt of ±1.4°–1.8°, and a persistent left-margin annotation rail — explicitly modeled on a herbarium album, not a content feed. 3. **Expressive-variable typography as emotional axis, not visual flair.** Variable type is at 5% in the registry, almost always used for kinetic display animation. Here, Fraunces' SOFT and WONK axes interpolate with **breath** (a 4.2-second sinusoid keyed to resting respiration) and Bricolage Grotesque's wght axis interpolates with **scroll progress**, so the typography is genuinely emotionally responsive — the page's chapter numerals visibly thicken with worry as the reader descends. No other site in the registry binds variable axes to an emotional/biometric metaphor. 4. **Mixed-media pressed-flower compositing — zero raster photography.** The registry shows photography at 95%; this site uses none. Every botanical motif is a layered composite of (a) hand-traced SVG paths, (b) CSS-only diffusion shadows simulating pigment-bleed-into-paper, and (c) per-glyph letterpress SVG labels. The result is a *rendered herbarium album*, not a stock-image grid. This is the only site in the batch combining `mixed-media` imagery with `botanical-illustration` execution. 5. **Zoom-focus loupe with brass-rim physicality.** Zoom-focus is at 7% in the registry, and where it appears it is typically a simple cursor blob. Here it is a 220px brass-rim glass loupe with conic-gradient metal ring, dome-shadow, contrast/saturate lift on focal content, and tilt-shift blur on surrounding masonry — explicitly the **bookbinder's hand-loupe pressed against onion-skin paper**, not a UI cursor. 6. **Nostalgic-retro tone interpreted as anachronistic-Edwardian, not 70s/80s/90s.** Nostalgic-retro is at 5% in the registry, and the existing instances skew vaporwave/Y2K/sepia-newspaper. Shinpaisho.com places its nostalgia in 1908 — a turn-of-the-century botanical illustrator's insomnia — through `IM Fell DW Pica` letterpress labels, hand-bound onion-skin cream paper-tones, and herbarium specimen taxonomy as primary metadata. The retro is **early-20th-century private archive**, a register no other site in the batch occupies. **Avoided patterns (from frequency analysis):** - AVOIDED: `parallax` (92%) — replaced with scroll-tied SVG drawing and breath-based variable-axis interpolation. - AVOIDED: `mono` typography (92%) — entire stack is variable serif + handwritten + letterpress; no monospace appears anywhere. - AVOIDED: `photography` (95%) — replaced entirely with hand-traced SVG botanical line-drawings + CSS pigment-bleed shadows. - AVOIDED: `full-bleed` (85%) — only the frontispiece is full-bleed; everything else is album-spread masonry with margin rail. - AVOIDED: `warm` palette (90%) and `gradient` palette (90%) — palette is dominantly cool ink-violet with surgically-placed warm Tannin & Foxing accents; the aurora gradient is atmospheric, not the palette's core. - AVOIDED: `hand-drawn` aesthetic (90%) — Caveat appears only in the marginalia rail; the rest is letterpress, variable serif, and specimen-album proportion. Hand-drawn is a *guest*, not the host. **Chosen seed (from assignment):** aesthetic: dark-academia, layout: masonry, typography: expressive-variable, palette: aurora-gradient, patterns: zoom-focus, imagery: mixed-media, motifs: floral-botanical, tone: nostalgic-retro.