# Design Language for recycle.reviews ## Aesthetics and Tone recycle.reviews is built as **a kintsugi conservator's logbook** — the working notebook of someone who repairs broken ceramics with gold-dusted lacquer and, in the margins, files quiet verdicts on whether the *thing* deserved to be saved at all. The domain is read as a double pun the whole site leans into: every product, package, and material that comes through gets *recycled* (given a second life) and *reviewed* (judged, scored, eulogized). The conceit unifies both halves — this is a **repair bench, not a landfill ticker**. No spinning-globe carbon counters, no "we saved 4,201 bottles" odometer. Instead: a worn cedar workbench seen from above, a tray of fragments waiting to be reassembled, a brush, a pot of *urushi* lacquer, and a verdict card pinned beside each piece. The emotional register is **wabi-sabi** in its strict sense — *not* "rustic farmhouse," *not* "distressed Etsy," but the Japanese aesthetic triad of **imperfection (fukinsei), impermanence (mujō), and incompleteness (the unglazed edge left bare)**. Things here are asymmetric on purpose. Seams show. The gold doesn't hide the crack — it *celebrates* it. The tone is **zen-contemplative crossed with grounded-earthy**: slow, deliberate, faintly melancholic, but never precious about it. A repaired teabowl is more interesting than a pristine one. A product that *can* be repaired scores higher than one that's merely "recyclable in theory." Reference touchstones: Sōetsu Yanagi's *The Unknown Craftsman*; the Freer Gallery's kintsugi vitrines; Naoto Fukasawa's "without thought" object photography; the dry-brush ink washes of Sesshū; the way a conservation lab photographs an artifact — raking light, neutral card, scale bar, no drama. ## Layout Motifs and Structure The governing layout is **ma-negative-space** driven and **broken-grid** in execution — the opposite of a card-grid. Think of the page as a **tatami-proportioned bench surface** (the classic 2:1 module) onto which objects are placed *off-center, never aligned to each other*. Each "object" — a reviewed material, a repair case study, a verdict — occupies its own irregular footprint with generous empty bench-wood around it. Whitespace is not breathing room; it is **the unfinished part of the bowl**, structurally meaningful emptiness. Structural plan — one long vertical scroll, ~640vh, organized as **seven "trays"** rather than sections: 1. **Tray 0 — The Bench.** Full-bleed top-down view of the cedar workbench, lit by a single raking light from the left. The domain name appears *hand-brushed* in the lower-right quadrant, not centered, not large — as if written in a margin. A scatter of unassembled fragments drifts in slowly. 2. **Tray 1 — The Premise.** A single column of brushed-ink prose, set in a column only 38ch wide, *indented from the left third*, the right two-thirds left as bare wood. Explains the dual reading of the name. 3. **Tray 2 — The Verdict Card.** One representative review, rendered as a **pinned index card** sitting at a 2.5° rotation. Material name, a five-mark "kintsugi score" (gold seams, not stars — one to five repaired cracks), a short eulogy, and a "second life" note. The card casts a soft, slightly-too-far shadow (object lifted off the surface). 4. **Tray 3 — The Repair Sequence.** A horizontal-scroll filmstrip of *one bowl being repaired*: shattered → sorted → lacquered → gold-dusted → whole-but-seamed. Scroll-linked. The gold seams **draw themselves** along SVG paths as you scrub. 5. **Tray 4 — The Drawer of Materials.** A loose, masonry-ish scatter of small object-tiles — glass, HDPE, polycoat carton, "compostable" bioplastic, aluminum — each tile rotated a few degrees, each a different size, none in a row. Hovering one *lifts* it and reveals its verdict. 6. **Tray 5 — The Margin.** Genuinely a margin: a tall, narrow strip of handwritten-feeling annotations down the left edge, with the bench's wood grain dominating the rest of the frame. Aphorisms about reuse, repair, and judgment. 7. **Tray 6 — The Last Fragment.** The page ends not with a CTA but with a single ceramic shard, gold-edged, resting alone on the bench, and one line of brushed text. The site does not link out. It closes like a notebook. No sticky nav. A single thin **gold seam runs down the left edge of the viewport** as a progress indicator — it "fills with lacquer" as you scroll. Sections are separated not by rules but by **expanses of empty bench**. ## Typography and Palette **Three Google Fonts, used with conservator's restraint.** - **Shippori Mincho** (display + headings) — a Japanese-designed mincho/serif with the slightly irregular, brush-derived stroke modulation and the small triangular *uroko* serifs of woodblock-printed text. Carries every tray title and the domain wordmark. Set large and *loose* — 64–84px, line-height 1.15, letter-spacing +0.02em — but always placed off-center. It should feel *inked*, not typeset. - **Zen Kaku Gothic New** (body + UI) — a calm, humanist Japanese sans with generous counters and an unhurried rhythm; reads beautifully in Latin too. All running prose, verdict-card text, captions. Body at 18px / line-height 1.85, max 38ch per column. Generous, slow, never cramped. - **Caveat** (annotations only) — a fluid handwritten script. Used *exclusively* for the margin notes, the corrections scrawled on verdict cards, and the scale-bar labels. Never for headings, never for body. It is the conservator's pen, and it appears sparingly — three or four times on the whole page. **Palette — "aged cedar, raw clay, and a single thread of gold."** A muted, warm-earthy ground with exactly one luminous accent. - `#1F1A14` — *Sumi black-brown*. Brushed-ink text, the darkest grain shadows. Never pure black. - `#3A2E22` — *Burnt cedar*. The deep tone of the workbench wood in shadow. - `#6B5640` — *Worn oak*. Mid-tone bench surface, secondary text, hairlines. - `#A98E6F` — *Raw clay*. The unglazed bisque of a teabowl; used for tile backgrounds and the "incomplete edge." - `#D8C7AC` — *Bench light*. The lit plane of cedar under the raking lamp; large empty areas, the page ground itself. - `#F2EAD9` — *Rice paper*. Verdict cards, index cards — the only near-white, and it's warm. - `#C9A227` → `#E8C547` — *Urushi gold* (a gradient, dark-to-bright). The kintsugi seams, the score marks, the progress thread, the wordmark's brushstroke highlight. **This is the only saturated color on the entire site** and it appears only along *cracks* — never as a fill, never as a button. - `#8C9B6E` (used at ~30% opacity, once) — *Faded matcha*. A single cool note in Tray 4's "compostable bioplastic" tile, deliberately the dullest, least-flattering swatch — a quiet visual editorial. High-contrast is achieved through **gold-on-dark-cedar**, not black-on-white. The whole page sits in the warm midtones; the gold *cuts* through it like the lacquer cuts through the clay. ## Imagery and Motifs **Motif family one — the crack as hero.** Every divider, every emphasis, every progress cue is a **kintsugi seam**: an irregular, branching gold line with the characteristic *thick-then-thin* taper and the occasional small "pool" where two cracks meet. These are hand-drawn SVG paths, never straight, never symmetric. A reviewed product's score *is* a row of one-to-five such seams, each one a little different. **Motif family two — the conservation document.** Index cards at slight rotations; a thin **scale bar** (1cm, ticked) tucked beside hero objects; raking-light shadows that are soft, long, and warm-grey, falling consistently to the lower-right; a pinned-corner curl on each card. Photography is *staged like an artifact shoot*: top-down or low-raking-angle, neutral cedar ground, the object isolated, slightly imperfect, never glossy. Grain-overlay throughout — a fine paper/wood-fiber noise at ~6% opacity over everything, so nothing looks vector-clean. **Motif family three — the unglazed edge.** Tiles, cards, and image frames are *not fully styled* — one corner or one side is deliberately left "bisque": a rougher, lighter `#A98E6F` band with no shadow, no border, as if that part of the object was never finished. This is the wabi-sabi *incompleteness* principle made literal in CSS. Decorative scatter: a few **ceramic fragments** (irregular polygons in clay tones with gold-leaf edges) drift slowly across the bench in Tray 0 and rest, settled, in Tray 6. A faint **circular tea-stain ring** appears once, behind the verdict card, off-center. Wood-grain is a real, subtle SVG turbulence pattern — never a tiled photo. No icons in the conventional UI sense. The closest thing to an "icon" is a tiny brushed-ink *enso*-like incomplete circle used as a list bullet. ## Prompts for Implementation Build recycle.reviews as **one HTML document, one CSS file, one small ES module — no framework, no router, no build step beyond a single esbuild/minify pass.** It is a single ~640vh vertical scroll, seven trays, read once, top to bottom. There is no second page and no outbound link; it ends like a closed notebook. **Storytelling is the spine, not navigation.** The narrative is: *a broken thing arrives → it is judged → it is repaired → the repair is celebrated → other things are weighed against that standard → the conservator reflects → one last shard is set down.* Every interaction should feel like handling an object on a bench, not clicking a UI. Concrete implementation notes: - **The bench is the canvas.** A full-viewport CSS layer with a procedurally-generated wood-grain (`feTurbulence` + `feDisplacementMap` over warm-cedar gradients) and one CSS `radial-gradient` "lamp" hotspot upper-left. A `mix-blend-mode: multiply` grain-overlay div sits on top of *everything*. - **Kintsugi seams draw on scroll.** Each section divider and the left-edge progress thread is an inline SVG `` with `stroke-dasharray`/`stroke-dashoffset` animated by scroll position (IntersectionObserver + `scroll`-linked, or a tiny `requestAnimationFrame` loop). The stroke uses a `linearGradient` from `#C9A227` to `#E8C547`. Vary `stroke-width` along the path by stacking 2–3 slightly-offset paths of different widths — fake the brush taper. Add a soft `drop-shadow(0 1px 2px rgba(201,162,39,.35))` so the gold sits *proud* of the surface like real raised lacquer. - **Tray 3 is the centerpiece.** A `position: sticky` viewport-pinned section where vertical scroll drives a horizontal "filmstrip" of five staged photo-plates of one bowl, AND simultaneously scrubs the gold-seam path-draw on the final plate. Use `transform: translateX()` keyed to scroll progress; ease with a spring-ish cubic-bezier. The shards should *converge* (translate + rotate toward zero) across the strip. - **Object tiles (Tray 4).** Absolutely-positioned in a broken-grid — each tile gets a small random rotation (`-4deg`..`4deg`), a slightly different size, and lands via a staggered `fade-reveal` + tiny settle-bounce when scrolled into view. On hover: `transform: translateZ` lift (or scale 1.04) + a longer warm shadow + the verdict text fades in *beneath* the lifted tile. The "compostable bioplastic" tile alone uses the dull `#8C9B6E` and its verdict copy is the most damning — a visual editorial gag. - **Verdict cards.** `#F2EAD9` rice-paper rectangles, rotated ~2.5°, with one corner's `border-radius` larger than the others (the unglazed edge), a `clip-path` notch or rough band on one side, and a CSS-drawn "pin" (small dark circle + tiny highlight) at the top. Soft, slightly-exaggerated `box-shadow` so the card floats. The score row: 1–5 inline mini-SVG gold seams, each a different hand-drawn squiggle. - **Typography in motion.** Tray titles in Shippori Mincho do a slow `clip-path` "ink-spreading" reveal (wipe left-to-right with a soft edge) rather than a fade. Margin notes in Caveat use a gentle `path`-following or simple character-stagger to feel hand-written. Body text just appears, calmly, with a 400ms `fade-reveal` — no flourish. - **Cursor.** A faint, soft warm-grey dot trails the cursor with spring lag, like the shadow of a brush hovering over the bench. Over a hoverable object-tile it becomes a tiny gold dot. - **Easing & timing everywhere:** slow. 600–900ms transitions, generous ease-out. Nothing snappy. Respect that this is a contemplative space. `prefers-reduced-motion`: drop the scroll-scrub and shard-drift, keep static gold seams already "drawn." - **AVOID:** CTA buttons, pricing tiers, stat-grids, carbon-saved odometers, hero-with-signup, card-grid-of-features, testimonials carousel, footer mega-menu. There is nothing to convert here. The visitor reads, contemplates, and leaves. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other site in the cohort: 1. **Strict-sense kintsugi as the *entire* visual system, not a texture.** Wabi-sabi sits at 8% in the frequency analysis and is almost always rendered as "rustic farmhouse" or "distressed paper." This design uses the *real* aesthetic — fukinsei/mujō/incompleteness — and makes the **crack the hero**: every divider, score, and progress cue is a hand-drawn gold seam, and tiles literally have an "unglazed edge." The gold appears *only along cracks*, never as a fill or button. That discipline is the signature. 2. **The dual pun is load-bearing.** "Recycle" + "reviews" = *give a second life AND pass judgment*. The whole site is framed as a conservator's logbook that both repairs objects and files verdicts on whether they deserved saving — including a deliberately damning swatch for "compostable bioplastic." No other site is a repair-bench-that-also-reviews. 3. **Anti-dashboard, anti-counter recycling site.** Recycling/eco sites overwhelmingly reach for spinning globes, animated "X bottles saved" odometers, green gradients, and stat-grids. This one has *zero* of that. It's warm-earthy midtones, ma-negative-space, a single thread of gold, and a slow seven-tray scroll that ends like a closed notebook. 4. **Three Japanese-design typefaces (Shippori Mincho / Zen Kaku Gothic New / Caveat) used with conservator's restraint** — display always off-center and "inked," script used three or four times on the whole page, body slow and 38ch-narrow. Against a cohort that's 94% mono and 45% generic-humanist, this typographic posture is distinct. 5. **The "unglazed edge" CSS principle** — every tile and card is deliberately left partly unstyled (one rough bisque corner, no shadow there) as a literal expression of wabi-sabi incompleteness. A constructive imperfection baked into the component system rather than a global "grunge" overlay. Chosen seed/style: **"wabi-sabi imperfect ceramic"** (from seeds.json). Avoided overused patterns from frequency analysis: no glassmorphism (82%), no hand-drawn-cartoon aesthetic (95%), no card-grid (91%), no photography-led hero in the generic sense (98%) — photography here is artifact-shoot staging only, no centered hero-dominant CTA layout, no stat-grid, no cursor-follow gimmick beyond a single soft brush-shadow dot, no pastoral-romantic farmhouse cliché despite the warm palette.