# Design Language for foryou.reviews ## Aesthetics and Tone foryou.reviews exists in the liminal space between a handwritten note and a morning fog — it is a **muji-inflected editorial reverie**, the feeling of opening a plain-cover notebook that someone has been filling with slow, careful impressions of things they love. The aesthetic is **dreamy-ethereal muji**: maximum restraint in object, maximum presence in space. White is not empty — it breathes. Black is not stark — it hums. Every element floats in a field of deliberate negative space, not anchored but *hovering*, as if the page itself is exhaling. The domain `foryou.reviews` carries a quiet intimacy — these are reviews written *for* someone, a gift of attention, an act of care. The mood is neither commercial nor clinical. It is a friend handing you a folded piece of paper that says "you should experience this." The site's tone is **whispering reverence**: unhurried, contemplative, slightly dreamlike. There is no urgency. No conversion pressure. The visitor is invited to linger. Muji principles applied strictly: - Every color earns its place or is removed - Every element carries its weight through *presence*, not decoration - Imperfection is permitted — a slightly uneven margin, a letter arriving one frame late — because perfection would shatter the dream - The page is made of air and ink, nothing else The typewriter-effect is not nostalgia — it is the *sensation of thought forming*, words arriving one character at a time the way a review is actually written: hesitantly, genuinely, revised quietly. The typewriter cursor blinks in the white field like a heartbeat. ## Layout Motifs and Structure The layout is **editorial-flow**: a single long-form reading axis that descends like a journal being read cover to cover. No grid. No cards. No dashboard. The corpus uses centered (92%) and full-bleed (78%) almost everywhere — this design refuses both defaults in favor of something rarer: a **left-anchored, generously margined editorial column** where text breathes at 680px max-width but floats slightly off-center at 58% from the left at large viewports, the way a manuscript page is held in the hand. **Macro structure (top to bottom):** 1. **The Salutation (`100svh`).** Full viewport. Pure off-white (`#F7F5F0`). A single typewriter-effect phrase assembles letter by letter at the center: `for you.` — then pauses — then the cursor blinks twice and is absorbed. Below it, a one-line pen-drawn illustration of an envelope unsealing. Nothing else. No navigation yet. Scroll indicator: a single hairline `↓` that breathes opacity 0.3 → 0.8 → 0.3. 2. **The Editorial River.** Below the fold, the column arrives and flows. Reviews appear as **floating editorial cards** — not boxed cards with borders, but *floating* typographic blocks: a headline, a body paragraph, and a hand-drawn motif, each separated by 4–8rem of white breath. Cards do not touch each other. They drift down the page at slightly variable left margins (± 12px from column axis), as if placed by hand. No border, no shadow, no background fill. The card *is* the typography. 3. **The Interstitials.** Between review clusters (every 3–4 reviews), a full-width interstitial: a single pen-drawn illustration centered in the viewport with 6rem of vertical padding above and below. No text. Just the illustration floating in white. 4. **The Colophon.** The page ends not with a footer but with a colophon: a small ink-line circle, a date, and the words `written for you` in light italic. No links. No social icons. No copyright block. **Navigation:** None initially. A minimal sticky dot-navigation appears after first scroll — three or four hollow circles on the right edge, 8px diameter each, positioned vertically, spaced 24px apart. Hover reveals a whispered label (italic, 12px, fade in). Active dot fills with ink. Dots are the only persistent UI chrome. **Spacing system:** Base unit 8px. Major sections: 12rem gaps. Within sections: 4rem gaps. Inline spacing: 1.5× body line-height. ## Typography and Palette **Typography — eclectic-hybrid, all from Google Fonts:** The typographic combination is intentionally unusual: a refined Japanese-influenced editorial serif paired with an almost-invisible sans and a single expressive display typeface that appears only in the typewriter sequences. - **Display / Typewriter Text:** [`Noto Serif`](https://fonts.google.com/specimen/Noto+Serif) — weight 300 for the typewriter-effect sequences, including the hero salutation and any pull-quote that assembles by character. Noto Serif's extreme opticals feel like thoughts being typed quietly. No italics in display use. Set at clamp(2.8rem, 5.5vw, 6rem) for the salutation, clamp(1.6rem, 2.8vw, 2.4rem) for pull-quotes. - **Body / Review Text:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond) — weight 400 for body, weight 400 italic for reviewers' voice asides and subheadings. EB Garamond is the quietest classic revival — it reads like ink settling into paper. Body size: clamp(1.05rem, 1.4vw, 1.2rem), line-height: 1.9 (unusually open — essential for the airy muji feel). Measure: 58–65ch. - **UI / Labels / Navigation:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans) — weight 300 only. Used only for navigation labels (dot hover text), timestamps, and the colophon date. Never used for headlines. Size: 0.75rem. Tracking: 0.08em. This face is nearly invisible by design — it is the site's infrastructure, not its voice. - **Typewriter cursor:** 2px × 1.2em, color `#1A1A18`, opacity 1 when blinking, positioned immediately after the last assembled character. Blinks at 1.1s interval (slightly irregular — 1.1s on, 0.9s off — to feel human, not mechanical). **Palette — monochrome with two whisper accents:** The palette is almost entirely achromatic. Color is used as scent, not paint — a trace. - **Paper (`#F7F5F0`):** The page background. Slightly warm off-white, the color of good writing paper that has been stored near light. Not pure white — pure white would feel digital and cold. - **Ink (`#1A1A18`):** The primary text and all SVG illustration strokes. Near-black with the faintest warm brown undertone — ink, not screen pixel. - **Mist (`#D4CFC6`):** The dots navigation, horizontal rules, and the typewriter cursor in its rest state. Also used for timestamps and metadata. A gray that feels like November morning fog. - **Ghost White (`#FAFAF8`):** Used for the interstitial backgrounds and the colophon zone. Barely distinguishable from Paper in normal light — visible only as a very slight depth change. - **Whisper Rose (`#C8B8A8`):** The single warm-toned accent — used for hovered navigation dots and the typewriter cursor when actively typing. Not pink, not orange — the color of a pressed flower found in an old book. Applied to nothing else. No gradients. No box shadows. No glows. Borders (when they occur) are 0.5px `Mist`, never solid black. ## Imagery and Motifs **All imagery is custom-illustration** — inline SVG, single stroke color (`Ink #1A1A18`), uniform 1px stroke weight, no fills except `Paper` as background where needed. No photography. No stock illustrations. No icon fonts. **The floating-elements system:** Illustrations are not anchored to text — they float in the white field between editorial blocks, positioned slightly off their natural reading axis as if placed by a careful hand that then second-guessed itself. Each illustration drifts on a 40-second sinusoidal Y-axis — 6px amplitude, ease-in-out — barely perceptible, like objects on still water. **The illustration vocabulary (pen-drawn, all SVG):** - **The Envelope Unsealing** — the hero motif, placed in the salutation. An envelope with a curved flap in mid-open, a single folded note inside. Drawn as a continuous line with one deliberate hand-imperfection in the bottom-left corner (a slight wobble). Used once, never repeated. - **The Cup** — a plain ceramic mug with no handle-detail, filled with implied steam (two fine curved ascending lines). Appears after the first review cluster. Implies: this review was written in the morning, slowly, by a real person. - **The Leaf** — a single ginkgo leaf, botanical but minimal: 8 lines radiating from the stem. Appears at the mid-point interstitial. The ginkgo is chosen because its leaves arrive individually, one at a time — the way reviews do. - **The Pencil Mark** — not a pencil, but its evidence: a soft smear arc, like the side of a pencil lead dragged across paper. Used as a hover-accent under review headlines — appears on hover, fades out on mouse-leave, 0.6s ease. - **The Window Square** — a plain four-pane window with interior light implied by slight inner-offset strokes. The colophon's companion illustration. Suggests: these reviews were written somewhere quiet, with light coming in. - **Floating Dots** — not decorative: three dots (`· · ·`) in `Mist` color appear between individual reviews within a cluster, drawn as SVG circles at 3px radius each with 24px spacing. They float at 0.4 opacity, 8px above the natural baseline, suggesting continuation rather than pause. **Typewriter cursor** — the only animated element outside of floating drift: a solid 2×18px rectangle in `Ink` color positioned after typewriter text during assembly, then dismissed (opacity 0, 0.4s fade) when assembly completes. **Motif grammar:** - Illustrations appear one per interstitial section: never inline, never repeated - Floating drift animation is uniform across all illustration elements (same timing, same amplitude) - All illustrations are contained in 96×96px viewBox (desktop) / 72×72px viewBox (mobile) - No color in any illustration — Ink only ## Prompts for Implementation Build foryou.reviews as a **single descending journal** — a reading experience, not a browsing experience. The visitor arrives, watches a phrase form for them in the white field, then follows it down through a sequence of gentle impressions. There are no calls to action, no pricing, no stats, no testimonials grids. Storytelling, quietude, and the sensation of being given something carefully written. **Macro sequence:** 1. **Salutation scene (`100svh`, position: relative, overflow: hidden).** Background `Paper`. The viewport is white silence. After a 0.8s initial delay, the typewriter-effect begins: `for you.` assembles character-by-character at 80ms intervals using `Noto Serif` 300 weight. The period takes an extra 160ms. After the last character, the cursor blinks exactly twice (1.1s + 0.9s) then fades to opacity 0 over 0.6s. The envelope SVG illustration fades in below the phrase at opacity 0 → 0.7 over 1.2s, beginning 0.4s after the cursor disappears. The scroll indicator (`↓` in `Mist`) appears at bottom-center at the same moment. No other elements. 2. **Editorial River (below fold, no set height).** The column establishes itself: `max-width: 680px`, margin-left positioned at 58% of viewport width minus column-width/2 on desktop (creating the slightly-off-center floating quality), centered below 900px. Reviews enter the viewport via `IntersectionObserver`: as each editorial block crosses 30% of viewport height, it transitions from `opacity: 0, translateY: 24px` to `opacity: 1, translateY: 0` over 0.7s ease-out. Stagger is 0.15s between elements within a block (headline → body → motif). Reviews do NOT animate simultaneously — they breathe one by one. 3. **Interstitials.** Full-width `
` elements, `padding: 6rem 0`, background `Ghost White`. The illustration SVG is centered in this field, its floating drift animation running. No text. These sections break the editorial column's rhythm intentionally — the visitor is made to pause, look, continue. 4. **Dot Navigation.** Appears after `window.scrollY > window.innerHeight * 0.9`. Positioned `fixed`, right edge 2rem from viewport right, vertically centered in the viewport. Three or four `