# Design Language for recycle.wiki ## Aesthetics and Tone recycle.wiki is built as a **walk-through cutaway of a working Materials Recovery Facility (MRF)** — rendered entirely in flat **isometric technical-illustration** style, the kind you'd find in a 1970s civil-engineering handbook re-drawn with crisp vector edges. The whole site reads like an exploded axonometric diagram you can stroll around inside: conveyor belts angled at the canonical 30°, baling presses with their guts shown, sorting drums sliced open, a glass cullet hopper mid-pour. Nothing photographic, nothing glassy, nothing hand-sketched — every surface is a faceted plane with a single light source coming from the upper-left, the way a draftsman would shade it. The tone is **calm, technical, quietly authoritative** — a knowledgeable plant engineer giving you the tour, not an eco-marketer guilt-tripping you. No "save the planet" slogans, no spinning globes, no leaf icons made of arrows. The information is the hero: material streams, contamination thresholds, recovery rates, polymer codes. Recycling here is treated as **infrastructure and craft**, a logistics problem with elegant mechanical solutions, documented the way you'd document a subway system. Warmth comes from the act of careful explanation, not from saccharine copy. The mood word is **legible** — every panel should feel like it could be peeled off the wall and pinned in a maintenance bay. ## Layout Motifs and Structure The governing system is an **isometric stage on a fixed axonometric grid**: a single `transform` context (`rotateX(54.7deg) rotateZ(45deg)` for true isometric, or a faked 30°/150° skew for performance) holds every structural block. The page is not a vertical scroll of cards — it is a **diorama you pan across**. Sections are "stations" on a continuous conveyor line that runs left-to-right across the artboard: 1. **Intake bay** (hero) — a tipping floor where mixed material spills in; the wiki's table-of-contents is the pile, each item a labelled chunk. 2. **Trommel screen** — rotating drum that sorts entries by size/category; this is the search + index station. 3. **Optical sorter row** — near-infrared "scanners" that fan material into bins by polymer code (the polymer-codes article cluster). 4. **Eddy-current & magnet station** — metals separation (the metals cluster). 5. **Baler & bunker** — finished bales stacked in an isometric bunker grid (the "outbound markets / what happens next" cluster). A **minimal-navigation** rail sits as a thin catwalk along the top edge of the diorama — five station markers, no labels until hover, mimicking plant signage. There is **no footer in the usual sense**; the diorama simply ends at the loading dock with a single small plate of credits stamped like an equipment nameplate. Content panels are **isometric "clipboards"** that hover ~24px above the machinery they annotate, connected by thin leader lines with arrowhead ticks — exactly like an engineering callout. The grid is **layered-depth**: foreground machinery, mid-ground panels, a faint blueprint underlay grid behind everything. Asymmetry is deliberate — the eye is led along the belt, never centered. ## Typography and Palette **Type system (Google Fonts only):** - **Primary technical face — `IBM Plex Sans`** (weights 400/500/600): the body and UI voice. Plex Sans is an engineering-house typeface — slightly mechanical, generous x-height, unfussy — perfect for plant-manual prose. Body set at 17px, line-height 1.62, measure capped at 64ch on the clipboards. - **Mono face — `IBM Plex Mono`** (weights 400/500): used for every datum — recovery percentages, polymer code numbers (`♷ 1 PET`), bale weights, contamination ppm, stream IDs. Mono honours the 94%-prevalent mono-typography convention but routes it strictly through *measured data*, never decoration. Tabular numerals on. - **Display / station labels — `Oswald`** (weight 500/600, condensed): used ONLY for the big stamped station names along the catwalk and the equipment nameplates — uppercase, letter-spacing 0.08em, the look of stencilled industrial signage. **Palette — "facility daylight":** muted, slightly desaturated, the colour of a clean plant under sodium-corrected skylights. Not warm-gradient (the 95%/98% conventions) — flat fills, no gradients except a single 4%-opacity vignette. - `#15201D` — **graphite green-black**, primary ink, machinery outlines, body text - `#F3EFE6` — **manila paper**, the artboard / clipboard surface - `#E0DACB` — **drafting buff**, secondary panel fill, blueprint underlay lines - `#2F6D5B` — **deep recovery green**, the one branded accent — used for "recovered" flows, active station, key links - `#C2552E` — **rust orange**, contamination / "reject" stream, warnings, the eddy-current arc - `#3E5C8A` — **engineer blue**, the optical-sorter beams, metadata, leader-line ink on the blueprint layer - `#A8A38C` — **dust grey**, disabled states, the faint grid, shadow planes Shadows are **single hard-edged isometric facets** at ~22% black multiply — never blurred, never soft. Faces of solids get a flat top-tone, a 12%-darker left face, a 24%-darker right face. That three-tone faceting is the entire lighting model. ## Imagery and Motifs Everything is **purpose-drawn isometric SVG** — no stock photos, no AI renders, no doodles. Core motif vocabulary: - **The conveyor belt** — a repeating chevron-tread pattern that literally animates (treads scroll) and physically connects every section; the belt IS the layout spine. - **Polymer-code medallions** — the seven resin-identification triangles redrawn as crisp isometric coins, each face getting the three-tone facet treatment; they tumble down the optical-sorter chutes. - **Material chunks** — abstracted isometric solids: a crushed can (faceted cylinder), a flattened HDPE bottle (extruded blob with a clean edge), a glass cullet shard cluster, a cardboard cube with visible flutes, a wad of film plastic (the "villain" — always tinted rust). Each is a reusable component dropped onto belts. - **Machinery cutaways** — trommel drum (perforated cylinder, half-sliced), baler (a box press with a piston and a finished bale ejecting), drum magnet, NIR sorter hood with a fan of dotted "scan" rays. - **Blueprint underlay** — a faint 32px isometric grid plus dimension lines with arrow ticks and tiny mono callout numbers, behind the whole diorama. - **Equipment nameplates** — small riveted-corner metal plates (drawn, not skeuomorphic-shiny) used for credits, version, "last reviewed" dates — Oswald uppercase, engraved look via a 1px inset shadow only. - **Leader lines** — every content clipboard tethers to its machine with a thin engineer-blue line ending in a draftsman's arrow-tick; on hover the line draws itself (path-draw). Decorative restraint is the rule: if an element isn't a machine, a material, a callout, or the belt, it doesn't exist. ## Prompts for Implementation Build recycle.wiki as **one HTML page, one CSS file, one ES module** — no framework, no build step. The experience is a **single horizontally-flowing isometric diorama** that the visitor pans across; vertical scroll is repurposed into a gentle horizontal/diagonal "dolly along the conveyor line." - **The isometric stage:** wrap the whole scene in a parent with `transform-style: preserve-3d` and the isometric transform; place stations as absolutely-positioned children at known grid coordinates. Provide a no-3D fallback (CSS `skew`) for reduced-motion / older engines. Everything snaps to a 32px isometric module. - **Pan, don't scroll:** map wheel/scroll/drag to translating the stage along the belt axis. Add subtle parallax-by-depth — blueprint underlay moves slowest, machinery mid, floating clipboards fastest — using a depth attribute per layer. Spring-eased (the 84%/80% spring+magnetic conventions) but understated; this is a plant tour, not a theme-park ride. - **The belt animates continuously:** an SVG chevron-tread pattern with an infinite linear keyframe; material chunks ride it via `offset-path` along the belt curve, getting sorted into bins as they pass each station (stagger-revealed). - **Callout choreography:** as a station enters the comfortable view zone, its leader line draws itself (path-draw-svg), then the isometric clipboard rises 24px with a hard facet-shadow snapping in beneath it, then body text fades up line-by-line. Leaving the zone reverses it. - **Data as motion:** recovery-rate numbers count up in IBM Plex Mono when their station activates (counter-animate); a thin "stream gauge" fills in deep-recovery-green for recovered fraction and rust-orange for the reject fraction. Polymer-code medallions can be hover-flipped to show the material name on the back face (card-flip, single axis). - **Cursor as inspector:** the cursor carries a faint isometric crosshair; hovering any machine highlights its outline and surfaces a one-line mono spec ("TROMMEL · 60mm screen · 12 t/h"). Magnetic snap of the crosshair to machine anchor points. - **Content first:** the actual wiki prose lives on the clipboards in IBM Plex Sans — full articles, cross-links rendered as engineer-blue leader-line jumps that pan the stage to the target station. The index/search is the trommel drum: type to filter, entries physically fall through the appropriate screen holes. - **Hard NO:** no hero CTA buttons, no pricing/plans, no testimonial carousel, no stat-grid bento blocks, no newsletter modal, no cookie banner theatre, no spinning-globe / leaf-arrow eco clichés, no glassmorphism, no warm gradient washes, no hand-drawn wobble. Flat faceted vector, measured data, calm engineering voice — full-screen, narrative, walk-through. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **A pannable horizontal isometric diorama as the entire site** — not card-grid (91%), not centered (82%), not full-bleed vertical scroll (88%). The layout is a continuous machine you walk along; scroll is remapped to a dolly move. Almost nothing in the corpus is built as a single axonometric stage. 2. **Isometric technical-illustration imagery** (isometric-icons sits at 4%, isometric layout 13%) rendered with a strict three-tone faceting lighting model and zero gradients — explicitly rejecting the 95% gradient / 98% warm / 82% glassmorphism / 95% hand-drawn conventions all at once. 3. **Mono typography routed exclusively through measured plant data** — recovery %, polymer codes, bale weights, ppm — honouring the 94% mono convention but giving it an engineering-instrument job instead of decorative-tech-vibe duty. 4. **The conveyor belt as literal layout spine** — a continuously animating element that physically connects every section and carries sorted material between them; structure and content move on the same belt. 5. **Anti-eco-cliché stance** — no globes, no leaf-arrows, no guilt copy; recycling treated as infrastructure logistics and mechanical craft, voiced like a subway/plant manual (authoritative tone, ~5% of corpus, vs. the 34% pastoral-romantic / 23% warm-inviting norm). Chosen seed/style: **isometric technical docs** — *aesthetic: isometric, layout: immersive-scroll, typography: tech-mono, palette: muted, patterns: path-draw-svg, imagery: isometric-icons, motifs: tech, tone: authoritative* Avoided per frequency analysis: hand-drawn (95%), glassmorphism (82%), photography imagery (98%), card-grid (91%), full-bleed (88%), centered (82%), warm palette (98%), gradient palette (95%), pastoral-romantic / warm-inviting tone.