# Design Language for recycle.studio ## Aesthetics and Tone recycle.studio is the field manual of a small **circular-materials atelier** — a workshop that takes spent objects (a cracked stoneware mug, a stripped bicycle gear, a delaminated skateboard deck, a dead lithium cell, a snapped umbrella rib) and re-renders them as **exploded isometric diagrams**: every fastener floated apart, every layer pulled out along a 30-degree axis, every fragment labelled with a leader line in the dry, generous voice of an old Haynes repair guide crossed with a Shaker tool inventory. The mood is **isometric-technical, grounded-earthy, and quietly optimistic** — not the glossy "sustainability" pastel-leaf cliché, but the satisfying clarity of an assembly drawing where you can finally see how a thing comes apart so it can come back together. Nothing is photographed; everything is *drawn*, in flat planes with a single soft cast-shadow, on a pulped-paper field the colour of recycled stock. The tone never preaches. It catalogues. It says *here is the seam, here is the part number, here is where this goes next* — and lets the diagram do the persuading. Think: ISO 128 technical-drawing conventions, IKEA wordless instructions, the worn manila of a parts-bin label, the honest matte of un-dyed pulp. ## Layout Motifs and Structure The site is a single vertical **drawing sheet** — one continuous A-series page that scrolls — divided into **six "plates"**, numbered PLATE 01 through PLATE 06 in the top-right corner of each viewport (the way a multi-sheet engineering drawing numbers its pages). The governing grid is a **true isometric lattice**: a faint 24px triangular grid (`background-image` of three crossed 1px lines at 0deg, 60deg, 120deg, opacity 0.06) underlies the whole document, and every diagrammed object, every label box, every leader line snaps to that lattice's vertices and axes. Layout is **layered-depth on an isometric stage**: each plate centres one exploded object, its components fanned out *up the page* along the iso-Y axis (heaviest part at the bottom, lightest floated highest), with a 1px **leader line** running from each component to a small left-aligned **call-out card** — a flat rectangle, no rounding, with a part number (e.g. `01·b`), a one-line name, and a one-line note on where the material goes in its next life. There is **no top navigation bar**: navigation is a slim vertical **"parts index"** pinned to the left edge — six tiny iso-cube glyphs, one per plate, that fill in solid as you pass them, like ticking off items on a packing list. No hamburger, no logo lockup, no footer band. The page ends on PLATE 06 with the six objects' silhouettes nested back together into one impossible composite assembly — a "re-assembly" that quietly closes the loop. Whitespace (paper-space) is deliberately generous: each plate gets at least 130vh so the explosion has room to breathe and the eye can follow every leader line. ## Typography and Palette **Type system (Google Fonts only):** - **Technical-mono primary:** `Spline Sans Mono` — used for all part numbers, call-out cards, plate numbers, the parts index, leader-line labels, dimension figures. A mono with humanist warmth, not a sterile coding font; it reads like a draughtsman's stencil that's been used a hundred times. Tracked `+0.04em` at small sizes, uppercase for part numbers. - **Display / plate titles:** `Archivo` (variable, weights 500–800, width axis pulled slightly condensed) — for the six plate titles ("PLATE 03 — THE STRIPPED GEAR") and the single opening line. Archivo's industrial squared-off terminals echo machine-shop signage and bin labels. - **Notes / body:** `Newsreader` (the optical-size serif, weight 400, italic for marginalia) — used sparingly for the longer "where it goes next" paragraphs on three of the plates, lending the dry catalogue a touch of a curator's hand-written aside. **Palette (the colour of pulp + the colour of the line):** - `#E8E2D4` — **recycled-stock cream**, the paper-space ground (a warm grey-beige, the colour of un-bleached pulp board). - `#F2EEE3` — **fresh-cut deckle**, a lighter paper tone for call-out cards and the inner faces of iso-cubes. - `#1C1A14` — **graphite line**, near-black warm charcoal, for all linework, leader lines, type at full strength. - `#5C5A50` — **pencil grey**, mid-tone for secondary labels, the iso grid at higher opacity, hairline rules. - `#B6451E` — **oxide red**, a rusted-iron accent — used only for the *active* part being highlighted, the filled-in parts-index cube, and the "→ next life" arrow. One signal colour, used like a stamp. - `#3E5A3A` — **moss green**, a deep, un-saturated olive — the *only* nod to "recycling green," reserved for the closing PLATE 06 composite and the loop-arrow glyph. Restrained on purpose. ## Imagery and Motifs **Everything is flat-shaded isometric vector — no photography, no gradients except a single 4%-opacity cast shadow per part.** - **The six exploded objects** (one per plate), each drawn as 6–12 stacked iso-components fanned up the page: 01 — **a cracked stoneware mug** (body, glaze-shell as a thin offset outline, handle, base-ring, the crack itself drawn as a jagged red leader). 02 — **a delaminated skateboard deck** (7 ply-layers floated apart like a flicked deck of cards, grip-tape sheet on top, 8 truck bolts orbiting). 03 — **a stripped bicycle gear cassette** (sprockets fanned by size, spacers between, the lockring spinning off the top). 04 — **a dead 18650 lithium cell** (steel can, jelly-roll spiral, cathode foil, anode foil, separator film, the cap assembly — drawn with clinical care, oxide-red hazard tick on the cap). 05 — **a snapped umbrella** (canopy panels as 8 triangular sails, ribs and stretchers as a radiating armature, the runner and ferrule below). 06 — **the composite**: faint ghosted silhouettes of all five above, nested into one impossible "re-assembled" object, in moss green linework, with a single closed-loop arrow circling it. - **Leader lines**: 1px graphite, always axis-aligned (horizontal, then a single 30° dog-leg), terminating in a 3px hollow circle at the part and squaring into the call-out card. - **Call-out cards**: hard-edged `#F2EEE3` rectangles, 1px graphite border, a thin oxide-red rule under the part number, mono text. They sit at fixed left-margin positions so all cards on a plate align into a tidy left column. - **The iso grid**: ever-present triangular lattice, almost invisible, but it makes every drawing feel *plotted*, not floated. - **Margin marks**: tiny crop-marks, a fake drawing-number block in the bottom-right of PLATE 01 (`SHT 1/6 · SCALE 1:1 · recycle.studio`), a "DO NOT SCALE FROM SCREEN" micro-note — the affectionate furniture of real technical drawings. - **Paper texture**: a single very subtle SVG turbulence/fractal-noise overlay at 3% opacity, multiply blend, to give the cream ground the tooth of pulp board. No grain on the linework itself. ## Prompts for Implementation Build recycle.studio as **one HTML page, one CSS file, one ES module** — no framework, no build step. It is a **scroll-driven walk down a six-plate engineering drawing** where each object explodes apart as you reach it and re-assembles into a single loop at the end. **Storytelling spine (six plates, vertical scroll):** 1. **Opening (top of PLATE 01).** The iso grid fades up first. Then one Archivo line types in, mono-stencil style: *"Everything comes apart. The studio draws the seams."* Below it, the cracked mug sits *whole* for a beat — then, as the user scrolls 200px, its parts spring apart up the page along the iso axes (each component on its own `spring` with staggered delay, heaviest part barely moving, glaze-shell drifting highest), and the leader lines `path-draw-svg` themselves outward to the call-out cards, which `fade-reveal` in sequence down the left column. The crack leader draws last, in oxide red. 2. **PLATES 02–05.** Same choreography, four more times, each a different object. The explosion is *scroll-scrubbed* (parts move proportionally to scroll progress through the plate, not on a fixed timeline) so the user can scroll back up and watch it *re-assemble* — the loop made literal at the interaction level. As each plate's last call-out lands, its parts-index iso-cube fills solid in oxide red on the left rail. 3. **PLATE 06 — re-assembly.** All five objects' ghost silhouettes converge from the edges of the viewport into one centred, impossible composite in moss-green linework. A single closed-loop arrow `path-draw-svg`s a full circle around it. The closing Archivo line resolves beneath: *"Drawn so it can be re-drawn."* The drawing-number block updates to `SHT 6/6`. **Interaction & motion:** - **Scroll-scrubbed explosions** are the centrepiece — bind each component's `translate` along its iso vector to that plate's scroll progress; ease with a soft `cubic-bezier`. No autoplay; the user *operates* the diagram. - **Hover a call-out card** → its leader line and target part go oxide red and the rest of that plate dims to 55% — `blur-focus`-lite, an isolation mode like highlighting one line in a parts list. (Click is a no-op; this is a reading experience, not an app.) - **Cursor** carries a tiny 12px iso-cube crosshair that snaps faintly toward the nearest grid vertex (`magnetic`, very low strength) — it feels like a draughting tool tracking the lattice. - **Parts-index rail**: clicking a cube smooth-scrolls to that plate; cubes `fade-reveal` their fill as plates pass. - **Leader lines** and **the loop arrow** all use `path-draw-svg`. Plate titles `fade-reveal` with a 30° upward iso-slide. Respect `prefers-reduced-motion`: parts appear already-exploded, no scrubbing, leaders pre-drawn. **Hard exclusions:** NO CTA buttons, NO "Get a quote", NO pricing or package tiers, NO stat-grid / counter-animate vanity numbers, NO testimonials, NO logo wall, NO contact form, NO newsletter capture, NO cookie banner, NO chatbot, NO hero-image carousel, NO photographs of leaves/hands/recycling-bins. The exploded diagrams *are* the content; the parts index *is* the navigation; the re-assembly *is* the conclusion. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Exploded isometric assembly-drawings as the entire content model.** No other site here builds its narrative on ISO-128-style exploded-view diagrams with leader lines and call-out cards. Isometric aesthetic is only ~13% in the corpus, and almost none use it as a *drawing-sheet* rather than as decorative 3D icons. The scroll-scrubbed "explode / re-assemble" interaction makes the recycling loop a literal mechanic, not a tagline. 2. **Anti-"sustainability-pastel" stance.** Where the corpus drowns in warm gradients (95% gradient palette, 98% warm) and botanical leaf motifs, recycle.studio is a flat, ungradiented, near-monochrome graphite-on-pulp drawing with exactly two signal colours (oxide red, restrained moss green) used like rubber stamps. No gradient mesh, no glassmorphism (82% of corpus — explicitly avoided), no hand-drawn wobble (95% of corpus — explicitly avoided; this is *plotted*, not sketched). 3. **The drawing-sheet UI furniture.** Plate numbers, a fake drawing-number block, crop marks, "DO NOT SCALE FROM SCREEN", a "parts index" instead of a nav bar, iso-cube checkboxes that fill as you read — the chrome itself comes from technical-drawing culture, a vocabulary unused elsewhere here. 4. **No CTA, no card-grid, no full-bleed hero, no dashboard** — it rejects the four most overused layouts in the corpus (card-grid 91%, full-bleed 88%, centered 82%, hero-dominant) in favour of a single continuous A-series sheet with a generous paper-space and a left-edge parts rail. **Chosen seed/style:** `isometric technical docs` — *aesthetic: isometric, layout: layered-depth, typography: tech-mono, palette: muted, patterns: path-draw-svg, imagery: vector-art, motifs: layered-depth, tone: grounded-earthy*. **Avoided patterns from frequency analysis:** hand-drawn (95%), glassmorphism (82%), photography (98% imagery), warm+gradient palettes (98%/95%), card-grid (91%), full-bleed (88%), cursor-follow-as-spectacle / parallax-everywhere — used here only as a faint magnetic crosshair and scroll-scrubbing, not flashy parallax.