# Design Language for foryou.reviews ## Aesthetics and Tone foryou.reviews is **a midnight observatory cultivating an electric herbarium of personal recommendations** — a botanical conservatory rebuilt at the orbit of a forgotten satellite, where each "review" is not a star-rating widget but a *living specimen pinned beneath glass*, photographed in the cold blue of an emergency strobe and then catalogued by an algorithm that is half-gardener, half-cartographer, half-failing-CRT. The thesis is small but sharp: **"for you" is not personalisation — it is dedication.** The site reads as a private *florilegium* prepared by a future-archivist for a single named reader: each recommendation is a hand-cut botanical plate, its veins traced in cyan filament, floating motionless in a chamber of indigo nitrogen, dated and signed but never numbered, never ranked, never starred. The tone is **futuristic-cutting-edge at 6% in the registry — claimed as the load-bearing voice of the entire site rather than as a marketing veneer**, and held against a botanical aesthetic at 24% to produce a deliberate genre-collision: not "tech-with-plants-in-the-margins," but a true *botanical futurism* in which the speciation of opinion is a serious scientific endeavour, conducted in a cold lab by someone who plainly loves the things they are cataloguing. There is no gloss, no founder photo, no testimonial reel, no pricing table. Instead the visitor walks through a darkened conservatory of suspended specimens — each one trembling at a frequency just below visibility — and receives a recommendation the way one might receive a pressed cornflower from a friend's letter: with surprise, with the small electric thrill of being *seen*, and with the feeling that the curator stayed up much too late preparing it. The mood is **mysterious-moody at 4% borrowed and grafted onto futuristic-cutting-edge** — the site is dim, the cyan accents are sparse, the motion is slow, and the typography is so geometrically clean it reads as the work of a very precise hand wearing very thick gloves. The visitor should feel the way one feels in a planetarium ten minutes before the show begins: surrounded by quiet machinery, surrounded by quiet plants, alone, expectant, addressed. ## Layout Motifs and Structure The structural commitment is **organic-flow at 5% in the registry — claimed and made load-bearing.** This is not a card-grid (82%), not a centered hero (82%), not a full-bleed (93%). The viewport is treated as **a single continuous chamber through which botanical specimens drift along curved isotherms**, and every "section" of the document is in fact a *station* — a position on a slow vertical river where the reader's scroll-position causes specimens to enter from the periphery, hover at viewport-centre for the duration of their reading, and depart down-and-outward toward the next station. The geometry is governed by a hand-tuned cubic Bezier — `path-flow.svg` is a single 1980px-tall SVG path that is *not rendered visually* but is sampled by an `IntersectionObserver` ladder to position thirteen specimen-cards at thirteen anchor-points along the curve. Specimens never align to a grid; they align to the curve. The curve sweeps: - from upper-left at scroll-progress 0.00 (the title-specimen, *Recommendation primaria*), - through a long left-leaning arc between 0.05 and 0.32 (six specimens, all leaning toward the gutter), - across the meridian at 0.50 (a single specimen, centred, which serves as the *axis bloom* — the visual fulcrum of the entire conservatory), - back through a right-leaning arc between 0.55 and 0.85 (six more specimens, mirror-imaged), - and out at lower-right at 1.00 (the closing colophon-specimen, *Recommendation finalis*). There is **no horizontal navigation, no hamburger, no sticky header**. The only fixed element is a thin 1px cyan filament running vertically at the left margin, which renders the reader's scroll-position as a slowly-advancing point of light — a *seismograph stylus*, drawing in real-time the trace of the visit. The trace persists between sessions (localStorage) and is shown faintly behind the live stylus on the second visit, so the returning reader sees their previous path through the conservatory as a ghost-line. Specimens are not equal-sized. Their vertical extent is determined by the length of the recommendation text, which is set in a soft right-rag with a maximum measure of 47ch and a minimum of 23ch — the curve narrows where the text narrows. The reader scrolls slowly because every specimen is its own micro-essay, three paragraphs at most, each paragraph a single cultivated sentence. **The site therefore explicitly refuses CTA-density, refuses pricing, refuses stat-grids, refuses card-tile testimonial walls.** The only "interaction" is reading. The full-bleed claim from the registry is *deliberately surrendered*. The chamber has visible margins — a 6vw indigo gutter on every side — because the conservatory is a *bounded* space, not an infinite scroll. The walls of the chamber are part of the design. ## Typography and Palette **Typefaces — Google Fonts only, every face confirmed available:** - **`Jost`** (weights 300, 400, 500, 600, 700; italic at 400 and 500). This is the principal display face, claiming **typography: futura-geometric at 3% in the registry — claimed**. Jost is Owen Earl's 2018 open-source reinterpretation of Paul Renner's 1927 *Futura* — a perfect-circle geometric sans with a humanist pulse in its lowercase apertures, drawn explicitly to be the Futura of the open-source web. Used here at very large display sizes (clamp(64px, 12vw, 192px)) for specimen names — set in lowercase, letterspaced at -0.02em, with the descender of the lowercase *g* extended by a custom OpenType call so it appears to root downward into the soil-line of each card. Jost is the *taxonomic name-plate font* of the conservatory; it is never mixed with another display face. - **`DM Mono`** (weights 300, 400, 500). This is the secondary face, claiming the underused **mono** territory deliberately *against* the 95%-saturated mono baseline by using DM Mono — a softer, slightly humanist mono drawn by Colophon for Deepmind, with a famously rounded zero and a friendly italic. Used at 13px for specimen-metadata: collection-date in ISO-8601, latitude/longitude of where the recommendation was first observed, the curator's two-letter sigil. DM Mono is the *field-tag font*; every plant in the conservatory wears one. - **`Fraunces`** (weights 300, 400, 500, 600; italic at 400). The third face — used sparingly, only for a single italicised pull-quote per specimen, set at 22px in italic 400 with optical-size axis at 14. Fraunces is David Jonathan Ross's 2020 *soft-serif revival* with a strong nineteenth-century botanical-monograph feel; it claims **typography: serif-revival at 3%** as a quiet supporting voice. The pull-quote is the *living tissue* of each specimen — the one sentence the curator wants to whisper into the reader's ear before letting the specimen drift away. The three-face stack is held strictly: no fourth face, no system-font fallback drift, no decorative one-off. Every glyph the reader sees is one of these three. **Palette — midnight-blue at 7% in the registry — claimed and committed:** - `#050818` — *Nitrogen Indigo*. The chamber wall. The deepest non-black on the site. Used as the global background; printed nowhere else. - `#0E1530` — *Glass Plate*. The substrate of every specimen card. A single 8px lift above the chamber wall, carrying a 1px stroke at `#1F2A55` and a 32px-radius `box-shadow` of pure cyan filament glow at 8% opacity. - `#1F2A55` — *Velvet Berlin*. Specimen card stroke and the colour of all secondary type. The midnight-blue family's middle voice. - `#3F5BD1` — *Cobalt Pulse*. The accent blue. Used for the seismograph stylus, the active link underline, and the leading edge of every specimen as it crosses the meridian. - `#7DE3FF` — *Cyan Filament*. The single live colour. Used for: the vein-tracing of the botanical illustrations, the live-cursor highlight, the focused-state outline (3px, 2px offset, fully visible), and the brief glitch-flash when a new specimen enters the viewport. Cyan filament is rationed: it must never cover more than 6% of any viewport at any moment. - `#F0F4FF` — *Frost Vellum*. The body-text colour. Off-white with a 4° blue cast — the colour of cold paper held under a fluorescent lamp. - `#C1A8E8` — *Aurora Mauve*. A single grace note. Used only on the italic pull-quote in Fraunces, and on the specimen *Recommendation primaria* (the title) as a single letter — the opening *F* in `for you`. Mauve is not used elsewhere on the site. The palette is therefore one wall, three blues, one cyan, one vellum, one mauve. Seven hexes. No gradient (the registry's 97% gradient saturation is pointedly refused — every fill is flat). No warm tones at all (the registry's 97% warm saturation is also refused — this is a cold site, photographically and emotionally). ## Imagery and Motifs **Imagery substrate: geometric-abstract at 5% in the registry — claimed and committed.** Every specimen on foryou.reviews is rendered as a **hand-composed inline-SVG botanical plate built from pure geometric primitives**: circles, regular polygons, golden-ratio rectangles, equilateral triangles, and Bezier curves whose control-points are computed from a Fibonacci sequence. There are no photographs anywhere on this site (the registry's 98% photography saturation is *fully* refused). There are no hand-drawn illustrations (96% saturation refused). Every visual is *geometry that has decided to behave like a plant*. The plate library: - **The *Cornflower of Compute*** — a five-petalled bloom built from five identical ellipses rotated at 72° intervals around a central decagon, with the stamen rendered as a vertical column of seven shrinking circles whose radii follow `r_n = r_0 * φ^(-n)`. The bloom's vein-system is a single SVG path of 23 line segments, each segment drawn at 0.7px and animated to *write itself* on intersection-observer entry over 1.4 seconds with a custom `cubic-bezier(0.16, 1, 0.3, 1)` easing. - **The *Compass Fern*** — a frond rendered as an Archimedean spiral sampled at 64 points, with each leaflet a regular pentagon scaled along the spiral by a `1/n` law. The fern unfurls on hover, in 800ms, by progressively revealing the spiral from origin outward (`stroke-dashoffset` from 100% to 0%). - **The *Lattice Lily*** — a six-petalled lily built entirely from intersecting golden-ratio rectangles, with each rectangle's diagonal drawn as a faint cyan ghostline. The lily is the largest plate on the site — it appears once, at scroll-progress 0.50, as the *axis bloom* — and occupies a 720px-square viewport-centred panel during its station. - **The *Hexagonal Moss*** — a ground-cover of 144 hexagons, packed in honeycomb arrangement, each hex rotated by a small noise-driven angle (`±2.4°`) and assigned a midnight-blue fill from the palette's three-blue stack. Hexagonal moss fills the negative space at the bottom of every specimen-card — never as background, always as *visible substrate*. - **The *Comet-tail Wisteria*** — a vertical falling-vine of 18 ellipses connected by a Catmull-Rom spline, animated to drift downward with a 0.25Hz noise modulation in horizontal position. Wisteria appears only on the closing colophon-specimen. Every plate is monochromatic — drawn entirely in `#3F5BD1` Cobalt Pulse on the specimen-card substrate, with veins rendered in `#7DE3FF` Cyan Filament at 0.7px stroke. No fills are coloured. The palette restraint is total. **Motif: floating-elements at 5% — claimed and committed.** Every specimen-plate floats. The card has no `position: absolute` siblings, no shadow underneath; it has *parallax-decoupled inner layers*. Each card's plate is split into three z-depth strata: foreground (the leading flower-head), midground (the vein system and the geometric body), and background (the hexagonal moss substrate). Mouse-position drives a `transform: translate3d(...)` on each stratum at depth-respective velocities (foreground 12px max, midground 6px, background 2px), so the plate visibly *floats above its card* and parallaxes against the cursor. The effect is small, slow, and deliberate. It is never animated on touch devices — on mobile the parallax becomes a faint device-tilt offset using `DeviceOrientationEvent` (when permission granted, never prompted aggressively). **Pattern motif: glitch — claimed at the underused-by-vocabulary level (the registry shows glitch-art at 4% imagery; here it is the *transition primitive*, not a decorative texture).** When a specimen enters the viewport, it does not fade in. Instead it executes a **180ms three-stage glitch-emergence**: 1. Frame 0–60ms: The specimen-card is rendered with a 3-channel chromatic aberration — the cyan-channel offset by `+4px, -2px`, the blue-channel offset by `-4px, +2px`, and the vellum-channel held at zero. The card appears torn, doubled, photographed-through-water. 2. Frame 60–120ms: A horizontal scan-band of 14px height sweeps from top to bottom of the card at 1100px/s, displacing pixels horizontally by ±6px in a sinusoidal pattern as it passes. The scan-band carries a brief flash of `#7DE3FF` Cyan Filament at 24% opacity. 3. Frame 120–180ms: Channels recombine, the scan-band exits, and the card resolves to its final composed state. The vein-writing animation begins immediately on resolution. This glitch-emergence is the only animation that is both fast and aggressive on the site. Everything else is slow. The glitch is the *moment of arrival* — the specimen *materialising into the conservatory* — and it must feel slightly violent, slightly thrilling, slightly broken, the way a strong recommendation always does. A subtler glitch is permanently active on the site title `for you` in the upper-left: every 11 seconds, on a randomised offset, the title executes a 60ms version of the chromatic-aberration step. The site is *always becoming* foryou.reviews, never having become it. ## Prompts for Implementation Build foryou.reviews as **one HTML document, one CSS file, one ES module, no framework, no build step.** The asset budget is specific and finite: - `path-flow.svg` (the master cubic-Bezier curve sampled by the IntersectionObserver ladder; never rendered visually; <2kb) - `plates.svg` (a single sprite-sheet ``-library containing the five master plates — Cornflower, Compass Fern, Lattice Lily, Hexagonal Moss, Comet-tail Wisteria — referenced 13 times by `` calls with parameter-overrides for stroke-width, rotation, and seed; ~38kb) - `glyphs.svg` (the curator's two-letter sigil set, 26 monogrammed pairs, ~6kb) - `noise-mask.png` (a single 256×256 blue-noise mask for the chamber-wall lighting gradient, ~12kb, stretched and tiled) - `paths.css` (variable-definitions for the seven hex colours, the three font stacks, and the cubic-bezier easing tokens, ~3kb) - `flow.js` (the IntersectionObserver, the parallax loop, the glitch-emergence orchestrator, the seismograph trace; ~14kb minified) Total weight under 80kb of static assets, plus the three Google Fonts subsets (Jost latin, DM Mono latin, Fraunces latin-italic). The site loads in under 600ms on a cold cable connection and renders the first specimen in under 1100ms. **Storytelling beats — the visit is a thirteen-station traverse:** 1. **Cold open.** Black chamber. Title `for you` materialises with the standing chromatic-aberration glitch. A single line in DM Mono below: `est. 2026 · midnight conservatory · cur. ⌬⌬`. 2. **The first specimen.** *Recommendation primaria.* The Cornflower of Compute writes itself in 1.4s. The italic Fraunces pull-quote arrives at 1.8s. The reader has not yet scrolled. 3. **The descent.** The reader scrolls. The seismograph stylus begins to draw. The second specimen enters from upper-left with a 180ms glitch. 4. **Six specimens of left-arc.** Each is a different flower from the plate library, parameterised differently. Each carries one recommendation: a book, a film, a city, a recipe, an idea, a person. The reader reads slowly because the site is slow. 5. **The axis bloom.** At scroll-progress 0.50, the Lattice Lily fills a 720px-square panel viewport-centre. There is no recommendation text — only the lily, and a single sentence in Fraunces italic: *"The remaining plates are for you alone."* 6. **Six specimens of right-arc.** Mirror-image of the descent. The recommendations on this side are softer, more personal — letters, songs, weather, small kindnesses. 7. **The colophon-specimen.** *Recommendation finalis.* The Comet-tail Wisteria drifts downward indefinitely; the curator's sigil appears at lower-right; the date of last update appears in DM Mono. There is no footer, no social-icons row, no newsletter capture, no contact form. The page ends. 8. **The seismograph closes.** As the reader leaves the page, the seismograph trace is committed to localStorage — a serialized array of (scroll-progress, timestamp) tuples. On the next visit, the ghost-trace will appear behind the live stylus. **Animation principles, holding firm against the registry's saturated patterns:** - **No parallax-of-the-page** (registry parallax is at 95%; the site uses parallax *only* on intra-card stratum-decoupling). - **No cursor-follow** in the conventional spot-light/comet-tail sense (registry at 83%); cursor input is read by the parallax-stratum system but never rendered as a visible cursor-overlay. - **No spring/elastic eases on macro-motion** (registries at 81%/17%); the site uses one custom easing — `cubic-bezier(0.16, 1, 0.3, 1)` — for every reveal, and pure linear for the glitch-band sweep. Nothing bounces. - **No magnetic hover** (registry at 75%); links underline-draw on hover (claimed at 17% — accepted) but do not pull the cursor. - **No stagger-grids of cards** (registry at 76%); specimens enter sequentially and individually as the reader's scroll brings each to viewport-centre. - **The glitch-emergence is the only "loud" animation.** Everything else — the vein-writing, the unfurling fern, the seismograph stylus, the parallax stratum — is slow, quiet, and indifferent to the reader's hurry. **Accessibility compromises** (per the design rules of this project, accessibility is not a focus, but cyan-filament focus rings are still drawn at 3px because they are aesthetically load-bearing). **No CTAs. No pricing. No stat-grid. No testimonial-wall. No "trusted by" logo-belt. No email capture. No social proof. No download. No demo button. No "get started." No "sign up." No "log in."** The site is one chamber, thirteen specimens, one curator, one reader, midnight. ## Uniqueness Notes This design commits to differentiators chosen explicitly to avoid duplication with other CMassC sites and to lean into the underused patterns surfaced by the frequency analysis. The full Planned Seed is **`aesthetic: botanical, layout: organic-flow, typography: futura-geometric, palette: midnight-blue, patterns: glitch, imagery: geometric-abstract, motifs: floating-elements, tone: futuristic-cutting-edge`** — a deliberate genre-collision in which seven of the eight axes sit in the registry's underused half, and the one axis (botanical at 24%) that sits closer to the median is fundamentally re-cast against type. 1. **Botanical-futurism, not botanical-pastoral.** The registry's 24% botanical saturation overwhelmingly pairs with pastoral-romantic tone (34%), warm-inviting tone (28%), watercolor imagery (11%), and warm gradient palette (97%/97%). foryou.reviews refuses every one of these companions. It pairs botanical with futuristic-cutting-edge tone (6%), midnight-blue palette (7%), geometric-abstract imagery (5%), and zero gradients, zero warm tones. The botanical specimens are *built from circles and Fibonacci rectangles*, photographed in *cold blue strobe*, catalogued by an *algorithmic curator*. There is no precedent in the registry for this pairing. 2. **Organic-flow at 5% as the load-bearing layout, not a flourish.** The registry's organic-flow uses cluster around fluid-blob backgrounds and curved section-dividers in otherwise gridded layouts. foryou.reviews treats organic-flow as the *only* layout — a single mathematical Bezier curve that determines the position of every meaningful element on the page, with no backup grid, no card-tile alternative, no fallback. The reader's path through the site is literally the curve itself, and the seismograph trace is the receipt of that traversal. 3. **Futura-geometric at 3% as the principal display, via Jost.** The registry contains exactly three explicit futura-geometric claims; this one chooses Jost specifically (the open-source Futura reinterpretation), holds it in lowercase with -0.02em letterspacing at clamp(64px, 12vw, 192px), and refuses to mix it with any second display face. The result is a typographic identity that is immediately distinguishable from every Inter-and-Space-Grotesk pairing in the rest of the registry. 4. **Glitch-emergence as the materialisation primitive, not a decorative texture.** The registry's glitch (12% aesthetic, 4% glitch-art imagery) is overwhelmingly used as *static visual texture* — chromatic-aberration treatments on hero photos, scanline overlays on page backgrounds. foryou.reviews uses glitch *temporally*, as a 180ms three-stage emergence that fires once per specimen-arrival, and otherwise leaves the page free of glitch texture entirely. The glitch is the *moment of arrival of a recommendation*, and so it must feel like a recommendation: brief, electric, definite. 5. **Midnight-blue at 7% as a seven-hex committed palette, not a "dark mode."** Midnight-blue in the registry is typically a single accent in a larger gradient palette. foryou.reviews uses seven hand-picked hexes from the midnight-blue family (one chamber-wall, three blue gradations, one cyan filament, one vellum, one rationed mauve grace-note) and forbids gradient interpolation between them. The palette is *six-cold-and-one-warm* in the strict accounting, but the warmth is mauve, not amber — a borrowing that itself reads as cold under the cyan-filament lighting of the chamber. 6. **Geometric-abstract imagery at 5%, rendered as *botanical* primitives.** This is the genre-collision in microcosm: every plant on the site is built from pure circles, regular polygons, and Fibonacci rectangles. There are no organic-blob shapes (8% in the registry), no hand-drawn linework (96%), no custom illustration (2%). The visual vocabulary is *Euclid-doing-botany*, and each plate is therefore reproducible by a script on a different machine — the conservatory is *generative, not painterly*, but the generation rules are tuned to produce things that *recognisably want to be plants*. 7. **Floating-elements at 5% via z-depth-decoupled parallax strata, not via `position: absolute` overlays.** The registry's floating-elements typically refers to UI-card stacks with shadow-and-translate-on-hover. foryou.reviews implements floating literally, as a three-stratum parallax inside each specimen-card, decoupled by mouse-position into foreground/midground/background depth bands at 12px/6px/2px max excursion. The plates float because the *substrate beneath them is moving*, not because the plates are themselves elevated. 8. **Refusal of the registry's saturated patterns.** This site explicitly does not use: the 95% parallax-of-page, the 83% cursor-follow, the 81% spring, the 76% stagger, the 75% magnetic, the 97% gradient palette, the 97% warm palette, the 98% photography imagery, the 96% hand-drawn aesthetic, the 93% full-bleed layout, the 82% card-grid, the 82% centered. By refusing twelve of the registry's most-saturated patterns simultaneously and committing to seven underused ones, the site achieves a high probability of unique visual identity within the CMassC corpus. 9. **Zero CTA-density, zero commerce signaling.** The site has no pricing, no sign-up, no testimonial-wall, no stat-grid, no logo-belt, no contact form, no newsletter capture, no demo button, no download. The recommendation *is* the artefact — there is nothing to convert toward, nothing to upsell, nothing to capture. The reader receives the recommendations and leaves; the seismograph trace persists silently for the next visit. 10. **Persistent seismograph trace as quiet personalisation.** The site's only "for you" surface is invisible until you have visited twice: the second visit shows your previous scroll-trace as a ghost-line behind the live stylus. The "for you" of the domain name is therefore not a personalisation algorithm; it is the small fact that the site *remembers how you walked through the conservatory last time*. This is the warmest gesture on a deliberately cold site, and it is rendered in a single 1px cyan filament, never explained.