# Design Language for recycle.report ## Aesthetics and Tone recycle.report is **an isometric materials-recovery facility rendered as a calm civic instrument** — picture the control mezzanine of a municipal recycling plant at 6am, before the shift starts, when the conveyors are still and the bins are labeled and everything is waiting to be counted. The aesthetic is **isometric-technical-docs precision crossed with a grounded-earthy palette of recovered pulp and oxidized aluminum** — not the lime-green "eco" cliché, not photographs of crushed bottles in soft focus, but a deliberately diagrammatic world: every material stream is an isometric chute, every statistic is a stack of cubes on a belt, every section of the page is a labeled station in a sorting line you scroll *through* like a walkway above the floor. The tone is **grounded-earthy and quietly authoritative** — this is a *report*, not a campaign. It speaks like a well-made annual review printed on visibly recycled stock: matter-of-fact, exact, faintly proud of the numbers without ever shouting them. No guilt, no polar bears, no "save the planet" urgency. Instead: the satisfaction of a clean material flow, the dignity of waste correctly handled, the dry humor of a facility that has measured everything. Think of the visual register of an IKEA assembly diagram, a transit map, and a metallurgical phase chart — combined and tinted the color of recycled kraft paper and the dull silver of a baled can. Mood words: **diagrammatic, sorted, weighed, kraft-toned, mezzanine-cool, unhurried.** ## Layout Motifs and Structure The page is **one continuous isometric sorting line viewed from a fixed 30°/150° axonometric angle** — the entire site is drawn on a single isometric grid (no perspective vanishing point, ever), and scrolling moves a "walkway" marker down the length of the facility. This is `immersive-scroll` (12% in frequency) executed as a *factory floor plan you traverse*, not a parallax landscape. - **The isometric grid is law.** A 2:1 isometric lattice underpins every block. All boxes, chutes, belts, bins, and stat-stacks are drawn as parallelograms on this lattice. Headlines and body text sit on flat "label plates" that float slightly above the floor on stubby drop-shadows — readable, never sheared. - **Six Stations, vertically stacked.** The report is divided into six stations along the line, each occupying roughly one viewport-and-a-half: (1) **Intake** — the wordmark and the year's headline tonnage arriving on a belt; (2) **Sort** — the material streams split into labeled chutes (paper, glass, aluminum, plastic-by-resin, organics); (3) **Weigh** — the big numbers, rendered as stacks of unit-cubes on a scale platform that visibly compresses; (4) **Contamination** — the rejects line, drawn in a muted rust tone, the one slightly somber station; (5) **Recover** — bales and pellets leaving on a truck-bed parallelogram; (6) **Ledger** — a flat methodology plate, the only nearly-2D section, like the back page of a printed report. - **Walkway rail.** A thin isometric handrail runs down the entire left edge of the content column as a persistent scroll-progress element — small "you are here" tick slides along it, labeled with the current station name. - **No card-grid, no bento-box, no hero-with-CTA.** Where stats would normally be a 4-up stat grid, here they are physical: cubes on belts, fill-levels in bins, needles on dial gauges mounted to chute walls. - **Asymmetric within the iso grid.** Stations alternate which side the chutes feed from, so the eye zig-zags down the line rather than marching straight. ## Typography and Palette **Fonts (Google Fonts only — a technical-document pairing, three voices):** - **Display / Station Labels / Wordmark — *Archivo Expanded* (wght 700–800, width Expanded)** — A grotesque with an expanded width that reads like the stenciled lettering on industrial bins and the bold heads of a government report. Used for "recycle.report", the six station names ("INTAKE", "SORT", "WEIGH"…), and the headline tonnage figure. Set in tracked, near-uppercase. At large sizes it should feel *stamped*, not typeset. - **Body / Annotations — *IBM Plex Sans* (wght 400/500, with *Plex Sans Condensed* for tight diagram callouts)** — A humanist-but-engineered sans designed expressly for technical documentation; carries dense methodology paragraphs and the dozens of small chute-labels without fuss. Plex's slightly mechanical italics are used for units and footnotes. - **Data / Numerals / Belt Counters — *IBM Plex Mono* (wght 500)** — Every number that ticks, every tonnage, every percentage, every resin code (♳ PET, ♴ HDPE…), every coordinate on the iso grid. Tabular figures so counters don't jitter. Mono is at 94% in the corpus — but used here strictly as *the readout typeface of instruments mounted on the line*, never as a "tech aesthetic" affectation. **Palette — "recovered kraft & oxidized metal" (grounded-earthy, 8 colors):** - `#E7DFCF` — **Kraft Paper** — primary background; the color of 100%-recycled cardstock, faintly fibrous. - `#D8CCB4` — **Pressed Pulp** — secondary surface for label plates and the floor of the facility. - `#3C3A33` — **Bale Ink** — near-black brown-grey; all body text, iso-grid linework, stencil labels. - `#7E8B83` — **Oxidized Aluminum** — the dull sage-silver of a crushed can; primary structural color for belts, chutes, machinery. - `#9C6B3F` — **Cardboard Edge** — warm mid-brown; the paper stream and corrugated accents. - `#3E6B57` — **Bottle Glass Green** — a deep, bottle-bottom green; the glass stream and the single "go" / progress accent. - `#B7472A` — **Contamination Rust** — oxidized iron-orange; used ONLY in the Contamination station and for reject markers — deliberately rationed so it reads as a warning, not decoration. - `#C9A227` — **Brass Gauge** — muted brass-gold; dial needles, the weigh-scale platform, small "verified" seals on the Ledger plate. Everything is matte. No glassmorphism, no neon glow, no gradient mesh — at most a faint paper grain over the kraft background and hard-edged isometric drop-shadows in `Bale Ink` at 12% opacity. ## Imagery and Motifs **No photography. No 3D renders. Everything is hand-built SVG on the isometric lattice — the entire site is one technical diagram.** - **Isometric machinery kit.** A small vocabulary of axonometric primitives, drawn once and reused: the **belt** (a striped parallelogram that scrolls its stripes), the **chute** (an angled prism that "drops" cubes into a bin), the **sorting bin** (an open box with a fill-level you can see rise), the **scale platform** (a slab that compresses a few pixels under a cube-stack), the **dial gauge** (a circle seen flat-on, mounted to a chute wall, needle in `Brass Gauge`), the **bale** (a wire-wrapped cube of compressed material), the **truck-bed** (a low parallelogram that carries bales off-screen). - **Unit cubes as the only "data viz."** Quantities are *physical*: one cube = one standardized unit of tonnage. Big numbers are tall stacks; small numbers are short ones. Cubes are tinted by material stream. When a counter animates up, cubes drop onto the stack one at a time via the chute. `data-viz` (6%) reimagined as a literal materials inventory. - **Resin-code glyphs.** The recycling-triangle resin codes (1–7) appear as small stenciled badges on the plastic chutes — ♳♴♵♶♷♸♹ rendered in `Plex Mono` inside hand-drawn triangles. - **Stencil & label-plate motif.** Every text block is mounted on a beveled "label plate" the way placards bolt onto industrial equipment — slight inset shadow, two tiny screw-head dots in the corners, `Archivo Expanded` legend. - **Paper-fiber texture.** A barely-there SVG noise filter gives the kraft background a recycled-stock fleck. Belts have a subtle directional hatch so motion reads even when paused. - **The walkway handrail & "you are here" tick** — recurring wayfinding motif borrowed from real plant floors and transit diagrams. - Decorative micro-elements: dotted "flow arrows" along belts, weight-class stamps (`▲ 2.4 t`), small calibration crosses at iso-grid intersections, a corner "Facility No. — / Reporting Period —" plate echoing a real audit document. ## Prompts for Implementation Build recycle.report as **a single-route, vertically scrolled walk down one isometric sorting line** — one HTML file, one CSS file, one JS module. The reader is on a mezzanine walkway; scrolling moves them past six stations. Target roughly **80 seconds of unhurried traversal**. There is no CTA button, no pricing block, no testimonial row, no email signup, no 4-up stat grid. There is only the line and its readouts. **Storytelling structure (six stations, top to bottom, scroll-triggered reveals):** 1. **Intake.** The wordmark "recycle.report" is stamped on a label plate bolted to an arrivals belt. A truck-bed parallelogram has just deposited the year's total intake; the headline tonnage figure (`Plex Mono`, big, tabular) counts up as cubes tumble from the truck onto the belt. One line of `Plex Sans`: what was received, where, over what period. 2. **Sort.** The belt forks into five labeled chutes — Paper (`Cardboard Edge`), Glass (`Bottle Glass Green`), Aluminum (`Oxidized Aluminum`), Plastic (sub-split by resin badge), Organics. As this station enters the viewport, cubes already on the belt slide and "fall" into their chutes with a short spring drop and a soft settle; each chute's running count ticks in `Plex Mono`. Tiny annotations explain each stream in one phrase. 3. **Weigh.** Five scale platforms, each carrying its stream's cube-stack. The platforms visibly compress under load (a 3–4px squash with a spring ease). Brass dial gauges on the wall swing their needles to the stream's share-of-total. The largest stack gets a stenciled `▲ X.X t` weight stamp. One sentence of dry context — e.g. "Glass is the heaviest stream and the least changed in a decade." 4. **Contamination.** The mood shifts: this station's floor and machinery tint toward `Contamination Rust` and a slightly desaturated kraft. A short reject belt carries mis-sorted cubes (drawn cross-hatched, "wrong color") off to a rust-edged bin whose fill-level rises. A `Plex Mono` percentage — the contamination rate — sits beside it. Honest, not alarmist: one line on what contamination costs and the single most common offender. 5. **Recover.** Back to full color, slightly warmer. Cube-stacks have been compressed into **bales** (wire-wrapped cubes) and **pellets** (small cube clusters); a truck-bed carries them toward the right edge and off-screen as you scroll, each bale stamped with its material and weight. One sentence: what the recovered material becomes / who takes it. 6. **Ledger.** The isometric world flattens to nearly 2D — a single large "back-page" label plate in `Pressed Pulp`, like the methodology page of a printed report. Plain `Plex Sans` columns: definitions, what's counted, what isn't, data sources, a `C9A227` "verified" seal, a "Facility No. — / Period —" footer plate. The handrail terminates here with a final "END OF LINE" tick. **Animation & interaction:** - **Scroll = the walkway.** A persistent left-edge isometric handrail with a sliding "you are here" tick, labeled with the current station. Belts scroll their stripes proportional to scroll velocity (they look like they're running while you move, idle when you stop). - **Cube drops** — the signature motion: cubes fall down chutes with a short spring (`stagger` between cubes), land with a tiny squash, settle into stacks. Counters (`counter-animate`) tick in lockstep with cubes landing — number and physical stack always agree. - **Gauge needles** swing with an elastic overshoot on station entry. Scale platforms squash under load. `path-draw-svg` for the iso-grid linework drawing itself in at the very top. - **Cursor**: a subtle `magnetic`/hover-lift on label plates (they rise ~3px on their drop-shadow); hovering a chute highlights its stream and shows a one-line tooltip on a mini label plate. Keep it restrained — this is an instrument panel, not a toy. - `prefers-reduced-motion`: belts stop, cubes appear in final stacks, counters show final values, needles sit at rest. - **AVOID:** parallax landscapes, perspective 3D, glassmorphic panels, neon, gradient meshes, CTA banners, pricing tiers, stat-grids, stock photography, lime-green "eco" styling, polar-bear-grade emotional appeals. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **A recycling site that refuses every recycling cliché.** No green-leaf hand-drawn aesthetic (hand-drawn is 95% — avoided entirely), no photography (98% — avoided entirely), no soft-focus crushed bottles, no lime "eco" palette. Instead a kraft-and-oxidized-metal *industrial audit* register. The subject is treated as a measured material flow, not an emotional cause. 2. **Strict single-axis isometry as the whole layout, not a decoration.** isometric-technical-docs sits at ~3–4% and isometric aesthetic at 13%; here the *entire page* is one axonometric diagram with no perspective vanishing point ever — the layout, the navigation (a literal walkway handrail), and the data viz all live on one 2:1 lattice. 3. **Statistics rendered as physical mass.** Numbers are stacks of unit-cubes on compressing scale platforms with swinging dial gauges — the `counter-animate` and the physical object are bound together. No 4-up stat grid (card-grid 91%, bento-box 15% — both avoided). 4. **The Contamination station** — one deliberately desaturated, rust-tinted section in an otherwise warm matte palette, with `Contamination Rust` rationed so strictly it functions as the only warning color on the site. Emotional honesty without alarmism is itself a departure from both the "friendly/playful" and "mysterious-moody" defaults in the corpus. 5. **Report-as-printed-document framing.** The closing Ledger station flattens to a near-2D "back page" with verified seals and a facility/period plate — the site literally ends like an annual report, not like a marketing landing page. Chosen seed/style: **`isometric technical docs` → recombined as *aesthetic: isometric, layout: immersive-scroll, typography: tech-mono, palette: grounded-earthy, patterns: counter-animate, imagery: data-viz, motifs: abstract-tech, tone: grounded-earthy*** — an underused-vocabulary blend (isometric, immersive-scroll, grounded-earthy, counter-animate, data-viz all sit well below corpus medians). Referenced avoided patterns from frequency analysis: hand-drawn (95%), glassmorphism (82%), photography (98%), card-grid (91%), full-bleed (88%), warm/gradient palettes (~98%/95%), parallax (90%), cursor-follow (89%) — all consciously declined in favor of matte isometric diagramming, walkway-scroll navigation, and a kraft/oxidized-metal earth palette.