# Design Language for recycle.digital ## Aesthetics and Tone recycle.digital is **a salvage yard for dead software** — a quiet, methodical, almost reverent place where obsolete digital matter (a 1998 GIF, a corrupted save file, a deprecated API, a forgotten subdomain, a screenshot of a website that no longer exists) is brought in, sorted, dismantled into reusable fragments, and given a second life. The aesthetic is **abstract-glitch-tech** — but executed *cold and clinical*, not as a chaotic vaporwave party. Think of a forensic data-recovery lab crossed with a municipal recycling depot: fluorescent overhead light, grey concrete, conveyor belts, weigh scales, sorting bins — except every object on the belt is made of pixels, scanlines, and half-decoded bytes. The tone is **edgy-rebellious** crossed with **grounded-earthy** (an intentionally strange pairing — glitch is at 11% in the corpus, grounded-earthy at 8%, and they are almost never combined). There is a deadpan, archival humor here: this is a site that treats a broken JPEG with the same dignity a real recycling center gives a crushed aluminum can. Nothing screams. The glitches are *controlled* — they happen on a schedule, on a hover, on a scroll milestone — like machinery cycling, not like a system crashing. The mood: **the calm hum of a sorting facility at 2am, lit by the green glow of a CRT that refuses to die.** The whole experience is a single full-screen narrative scroll: you arrive at the **intake bay**, follow a corrupted artifact down the **sorting line**, watch it get **shredded into salvageable fragments**, see those fragments **re-pressed into something new**, and leave through the **outbound dock** where the reborn object ships out. No pricing. No CTA. No signup. Just the process, observed. ## Layout Motifs and Structure The governing layout is **horizontal-scroll** (only 8% in the corpus) used as a literal **conveyor belt**: the page scrolls *sideways*, left to right, and the content physically rides along on a belt rendered as a repeating CSS-drawn tread pattern that moves in parallax-counterpoint to the scroll (the belt moves slightly faster than the content, so artifacts appear to "ride" it). Vertical scroll is hijacked and translated to horizontal travel (with a graceful no-JS fallback to ordinary vertical stacking). - **No card grid.** Instead: **station modules** — five wide bays (`00 INTAKE`, `01 SORT`, `02 SHRED`, `03 RE-PRESS`, `04 OUTBOUND`), each occupying roughly 100–140vw of horizontal travel, separated by `[ ─── GATE ───]` ASCII dividers that the belt clicks through. - **A persistent bottom strip** runs the full width of the viewport as a fixed **HUD scale readout**: live counters in monospace showing `MASS IN: 14.2 KB`, `FRAGMENTS RECOVERED: 1,204`, `MASS OUT: 9.7 KB`, `LOSS: 31.7%` — numbers that animate (counter-animate, 15% in corpus) as you scroll past each station. This is the only "stats" element and it is deliberately framed as factory instrumentation, not marketing metrics. - **A persistent top rail** holds the wordmark `recycle.digital` in the left corner and a thin **progress bar styled as a belt position indicator** — a small notched marker sliding along a track, with station names ticking past. - **Layered-depth within each bay**: the belt is the back plane; artifacts sit on a mid plane casting hard 1px-offset drop shadows; floating **dust motes of stray pixels** drift on a front plane with cursor-follow parallax (cursor-follow is 89% in corpus — used here, but the *thing* that follows the cursor is a "magnet claw" reticle, not a generic dot). - Composition is **broken-grid** (11% in corpus): nothing aligns to a clean column. Artifacts are placed at slight rotations (-3° to +4°), labels are pinned at corners like inventory tags, and dimension-lines (technical-drawing style, with arrowheads and measurements in `px`) connect things across the dead space. ## Typography and Palette **Fonts — all Google Fonts, three voices:** - **Headings, station numbers, the wordmark — *Major Mono Display* (weight 400).** A lowercase-only, wide, almost stencil-like monospace display face. Used huge: station headers at `clamp(48px, 8vw, 120px)`, all lowercase, `letter-spacing: 0.04em`. Its mechanical evenness reads like a label printed on industrial equipment. Glitch effects (RGB-split, slice-offset) are applied *only* to this typeface, and only on station entry. - **Body, captions, the HUD readout, inventory tags — *Space Mono* (weights 400 / 700, regular + italic).** A workhorse monospace with just enough personality (the bracket-y, slightly-too-tall caps). All technical labels, measurements, "manifest" text. Tabular figures for the live counters. - **One contrast voice — *Newsreader* (weights 400 / 500, italic).** A warm, readable serif used *sparingly* for the short reflective interludes between stations — the one human voice in the facility, like a worker's handwritten note taped to a machine. Set in italic, 18–22px, generous leading, max 60ch, sitting on a torn-paper card. **Palette — "cold facility with one living signal":** - `#0B0E0C` — **depot black** (near-black with a green undertone): the primary background, the concrete floor. - `#E6E4DD` — **dust paper**: off-white for body text and the manifest cards; the only "warm" surface. - `#3DF07E` — **scanner green** (the living signal): the CRT-glow accent — used for the active station marker, the cursor reticle, counter increments, link underlines. Used at maybe 5% coverage so it stays electric. - `#FF3B3B` — **reject red**: the LOSS indicator, the shred-zone warnings, glitch RGB-split's red channel. Strictly rationed. - `#2A2EFF` — **archive blue**: glitch RGB-split's blue channel, the "outbound" station's recovered-data highlight, dimension-lines. - `#5B5F58` — **machine grey**: belt treads, panel chrome, secondary rules, the HUD strip background. Texture overlays: a fine **scanline** layer (1px green-tinted horizontal lines at 4% opacity, animated to drift), a subtle **grain-overlay** (8% in corpus) for the concrete, and on hover, blocks of content briefly show **datamosh smear** — a CSS-only pixel-displacement using layered `clip-path` shards. ## Imagery and Motifs - **No stock photography.** Imagery is entirely **generative-art (10% in corpus) + glitch-art (2%)**: the "artifacts" on the belt are procedurally rendered with `` — dithered Bayer-matrix gradients, corrupted-bitmap rectangles, half-decoded JPEG DCT-block mosaics, a 16-color VGA-palette ramp that's been "damaged." Each is a *little portrait of digital decay*. - **The conveyor belt** itself: CSS-drawn interlocking trapezoid treads with hard shadows, a center seam line, and small bolt-dots — repeating via `background` and translated on scroll. - **Sorting bins**: at the SORT station, three labeled hoppers (`KEEP`, `FRAGMENT`, `MELT`) drawn as wireframe isometric boxes; artifacts visibly drop into them with a spring-bounce. - **The shredder** (SHRED station): a row of interlocking-circle blades (SVG), and artifacts that pass over them break apart into vertical strips that fall and re-sort below — a `path-draw-svg` (44% in corpus, used here as machine-blade outlines) plus particle strip-fall. - **The press** (RE-PRESS): a hydraulic ram (two grey plates) that compresses fragment-strips into a fresh, clean, glowing-green "ingot" of code — a small animated block that snaps from chaos to order. - **Technical-drawing motifs throughout**: dimension lines with `px` measurements, corner registration marks (`⌐`, `¬`), barcode-like ID strips on every artifact, a faint **engineering grid** (10px) ghosted behind the belt. - **Stray-pixel dust**: tiny 2–4px squares in scanner-green and machine-grey drifting across the foreground, repelled gently by the cursor reticle. - **The reticle cursor**: a square bracket `[ ]` "magnet claw" that snaps (magnetic, 80% in corpus) to artifacts and shows their manifest tag on contact. ## Prompts for Implementation Build recycle.digital as **one static page** — a single HTML file, one CSS file, one ES module — structured as a **horizontal conveyor-belt journey through a digital recycling facility**. Vertical wheel/trackpad scroll and touch-drag translate to horizontal travel; provide a clean vertical-stack fallback when JS is off or `prefers-reduced-motion` is set (in which case all glitch/datamosh/strip-fall animation is replaced with static "before/after" frames). Resist every commercial instinct: **no CTA, no email capture, no contact form, no pricing tiers, no testimonial wall, no logo cloud, no FAQ accordion, no chat widget, no comparison table.** The only "numbers" on the page are the factory instrumentation strip (MASS IN / FRAGMENTS / MASS OUT / LOSS) and the station counters — and those exist to tell the *story of the process*, not to sell anything. The page should feel like watching a documentary about an actual facility. Narrative beats, in horizontal order: 1. **`00 INTAKE` (loading bay):** A corrupted artifact arrives on the belt — a `` rendering of a "damaged" old image. The wordmark glitches into place once (RGB-split settling to clean). The reticle cursor introduces itself by snapping to the artifact and printing its manifest tag (`ID: a6f.gif · ORIGIN: 1999 · STATE: CORRUPTED · MASS: 14.2KB`). Scanline overlay drifting. Short *Newsreader*-italic note: *"Nothing here is garbage. Everything here was once someone's afternoon."* 2. **`01 SORT`:** The belt clicks through a `[─── GATE ───]`. The artifact passes three hoppers — `KEEP`, `FRAGMENT`, `MELT` — and visibly *splits*: parts spring-bounce into each bin. Counters tick. Dimension-lines measure the fragments. 3. **`02 SHRED`:** SVG circular blades spin (CSS rotation). Fragments cross them and shatter into vertical pixel-strips that fall and re-pile. `path-draw-svg` reveals the blade outlines as you enter. Reject-red warning chevrons pulse at the edges. The LOSS counter climbs. 4. **`03 RE-PRESS`:** Two grey hydraulic plates slide together (spring/elastic easing) and compress the messy strips into a single clean, glowing scanner-green "ingot" — a tidy `` block of ordered dithered pixels. A satisfying snap: chaos → order. *Newsreader* note: *"It is not the same file. It never could be. But it is not nothing."* 5. **`04 OUTBOUND` (shipping dock):** The reborn object — now labeled `ID: a6f.recycled · STATE: STABLE · MASS: 9.7KB · LOSS: 31.7%` — rides off the right edge of the belt into archive-blue light. The belt empties. The HUD strip settles to its final readout. The wordmark glitches once more and holds. A final quiet line. Implementation texture notes: - **Glitch is *budgeted and scheduled*, never constant.** RGB-channel-split, slice-offset, and datamosh smear fire on: station entry (IntersectionObserver), reticle contact with an artifact, and a slow ambient 14-second cycle on the wordmark only. Everything else is steady. - **The belt** is the spine: a `background` of CSS-gradient treads, `background-position` driven by scroll progress, slightly out of sync with content translate for parallax. - **Counters** use `counter-animate` with tabular-figure *Space Mono*; increments flash scanner-green for 200ms. - **Cursor reticle**: a magnetic square-bracket claw; on artifact contact it expands to frame the artifact and unfurls a typewriter-effect manifest tag. Hidden on touch devices (replaced by tap-to-reveal). - **Stray-pixel dust**: a lightweight requestAnimationFrame loop, ~40 squares, cursor-repulsion, paused when off-screen / reduced-motion. - **Sound**: none. Optional `prefers-reduced-motion`-respecting *visual* "click" (a 1-frame white flash on the gate dividers) when the belt advances past each station. - **Manifest cards & worker notes** are torn-paper rectangles (CSS `clip-path` jagged edge) with a faint coffee-ring; the *Newsreader* italic interludes live here. - Everything CSS-drawn or canvas-generated — **zero external image assets** beyond fonts. ## Uniqueness Notes Differentiators, each measured against the 504-design corpus from the frequency analysis: 1. **Horizontal-scroll-as-conveyor-belt is a literal mechanism, not a gallery.** Horizontal-scroll sits at 8% in the corpus and is overwhelmingly used for image galleries/portfolios. Here it is a *factory line*: the scroll direction is the production direction, the belt is a rendered moving object, and the content physically "rides" it with parallax counterpoint. No prior site uses horizontal travel as an industrial-process metaphor. 2. **Glitch (11%) executed cold-clinical and grounded-earthy (8%) instead of vaporwave-chaotic — and *budgeted*.** Glitch in the corpus is almost always loud, neon, party-mode. This site rations glitch like machinery cycles: scheduled, triggered, controlled, paired with grey concrete and a deadpan archival tone. Glitch-as-forensic-process, not glitch-as-vibe. The glitch+grounded-earthy intersection is essentially empty. 3. **Generative `` "portraits of digital decay" as the only imagery — zero photography in a 98%-photography corpus.** Every artifact is procedurally rendered corrupted-bitmap / DCT-mosaic / damaged-VGA-ramp art. No stock photos, no illustration library, no 3D renders — the imagery *is* the subject matter (decayed digital data) rendered honestly. 4. **The "stats" are factory instrumentation telling a process story (MASS IN → FRAGMENTS → MASS OUT → LOSS), explicitly anti-marketing.** Where the corpus is saturated with stat-grids selling growth, this strip exists to show *material loss in a recycling process* — it goes *down*, on purpose, and the loss percentage is the emotional point. 5. **Five-station narrative (INTAKE → SORT → SHRED → RE-PRESS → OUTBOUND) with serif "worker's notes" as the lone human voice.** A *Newsreader*-italic torn-paper interlude between cold monospace stations — a structural device drawn from documentary pacing, not landing-page pacing. Avoided overused patterns from the frequency analysis: **no card-grid (91%)**, **no full-bleed hero (88%)**, **no centered layout (82%)**, **no hand-drawn / glassmorphism aesthetic (95% / 82%)**, **no warm-gradient palette (98% / 95%)** — the palette is a cold near-black with a single electric green and strictly rationed red/blue. Cursor-follow (89%), magnetic (80%), spring (84%), stagger (71%), counter-animate (15%), path-draw-svg (44%) and parallax (90%) are all present but re-skinned to the factory metaphor (magnet-claw reticle, belt parallax, blade-outline path-draws, instrumentation counters) rather than used generically. Chosen seed/style: **abstract glitch art tech** (from seeds.json) — interpreted as a *cold forensic data-recovery / digital-salvage facility*, with aesthetic tags `glitch` + `terminal` + `grounded-earthy`, layout `horizontal-scroll` + `broken-grid` + `layered-depth`, imagery `generative-art` + `glitch-art` + `grain-overlay`, typography `mono` + `serif-revival` contrast voice, palette cold-near-black + electric-green signal.