# Design Language for recycle.games ## Aesthetics and Tone recycle.games is the field journal of a **scavenger's guild that turns discarded things into play** — a hoard-cabinet rendered as a website. The governing aesthetic is **goblincore**: the unembarrassed love of the overlooked, the bent, the rusted, the half-rotted, the *almost-thrown-away*. Where most sibling sites polish their objects to a showroom shine, recycle.games does the opposite — it celebrates patina, dents, mismatched parts, dirt under the fingernails. The mood is **grounded-earthy** with a streak of mischief: this is a place that hoards bottle caps in jars labeled in pencil, that knows the difference between *junk* and *treasure* is mostly a matter of who's looking. The conceptual frame: the site is a **rummage drawer with seven compartments**, each pulled open in turn as the visitor scrolls down. Inside each compartment: salvaged "games" — not video games, but *play made from waste* — a marble run built from drainpipe offcuts, a deck of cards printed on cereal-box card, a board game whose pieces are mismatched buttons and dead batteries. The tone never apologizes for the mess; it *organizes* the mess, lovingly, the way a magpie arranges its shiny things. Nothing here is slick. Everything here is *kept*. The emotional register sits between a forager's reverence and a child's "ooh, can I have that?" — earnest, a little feral, deeply against waste. No corporate sheen, no eco-virtue-signalling stock photography of green leaves and recycling arrows. Instead: the honest, slightly grubby beauty of a thing that was saved. ## Layout Motifs and Structure The layout is **organic-flow** — emphatically *not* a card-grid, not a centered content well, not a tidy three-column stack. The page reads as a continuous **rummage**: things spill, lean, overlap, get tucked into corners. There is no symmetrical max-width column. Content drifts left and right of an invisible meander-line, the way objects settle in a drawer that's been opened and shut a hundred times. **Structural mechanics:** - **Seven Drawers.** The page is one long vertical pull through seven compartments — DRAWER 01 through DRAWER 07. Each Drawer "opens" as it enters the viewport: a subtle slide-and-settle, contents arriving with weight (a heavy, slightly over-damped spring), small things landing a beat after big things (`stagger`). - **The meander.** A hand-inked dotted line — like the dashed "fold here" line on a craft template, or a treasure-map path — threads down the entire page, weaving between Drawers, occasionally looping around an object, sometimes running off the edge and coming back. It is drawn progressively as you scroll (`path-draw-svg`). It is the spine of the whole site; everything hangs off it or sits beside it. - **No grid alignment.** Objects (illustrated salvaged things, blocks of text, photo scraps) are placed at slight rotations (-4deg to +5deg), with deliberate overlaps and uneven gaps. Text columns are narrow (~50–58ch) and pinned *off-axis* — never centered. Whitespace is uneven: a generous bare patch of "drawer bottom" next to a dense cluster of crammed-in things. - **Tucked annotations.** Small handwritten labels — "kept 03/2021", "found behind the workshop", "still good", "needs a wash" — sit beside objects on scraps of masking tape or torn paper, slightly askew. - **No nav chrome.** A single thin pencil-line along the top edge with the words `recycle . games` in a hand letter, and a tiny inked index of Drawer numbers that fills in as you pass each one. No hamburger menu, no sticky CTA bar, no footer mega-menu — just the closing line of the last Drawer and the end of the meander, tied off in a little knot. ## Typography and Palette **Typefaces** (all available on Google Fonts): - **Caveat** — the hand-letter voice. Used for the wordmark, all the masking-tape annotations, Drawer numbers, and the occasional shouted aside ("look at this!"). Set generously, slight rotations, never perfectly baseline-aligned. This is the *pencil-on-a-scrap* font. - **Fraunces** (9pt optical, 400 / 400 italic / 600, "soft" and "wonky" axes pushed up) — the display and headline voice. A characterful old-style serif with a slightly imperfect, melted warmth. Drawer titles at `clamp(2.4rem, 7vw, 5.5rem)`, tight leading, sometimes a word set in italic to "tilt" it. Carries the foraged-but-loved feeling: not pristine, but *cared for*. - **Spline Sans Mono** (400 / 500) — the catalogue voice. Used for the small structured bits: object IDs ("OBJ-114 / drainpipe, 40mm"), measurements, materials lists, the index of Drawer numbers. A humanist monospace — orderly, like the one neat hand in a chaotic drawer. Body-adjacent captions at 0.8125rem. - **Newsreader** (400 / 400 italic / 500) — the body-text voice for the longer passages of guild lore and "how it was made" notes. A readable text serif with a faint newsprint honesty; line-height 1.8, narrow measure, set ragged-right always. **Palette** — warm, muted, earthy; the colors of a workbench and the things on it: - `#2A2622` — **bog-bottom** — near-black warm brown, the deepest ink and the darkest shadow. Primary text color. - `#E8DFCB` — **drawer-paper** — warm oat/parchment, the default background; the color of old shelf liner. - `#9C7B4E` — **rust-honey** — a tarnished brassy ochre; primary accent, used for the meander line, key headline words, underlines. - `#5C6B43` — **moss-on-metal** — a desaturated olive green; secondary accent, the "still good" stamp color, leaf-organic bits, hover states. (This is the *only* green — earthy, not eco-logo green.) - `#A8412B` — **terracotta-clay** — a burnt brick-red; sparing third accent, used for the most important annotations and the closing knot. - `#BCB29C` — **dust-grey** — muted greige for hairlines, secondary captions, the dotted-template lines, the "shadow under a propped object." A faint paper grain (`grain-overlay`) lies over the whole page at low opacity; backgrounds shift very slightly between Drawers (oat → faintly cooler → faintly warmer) like different sheets of liner paper. ## Imagery and Motifs - **Salvaged objects as the entire imagery system.** Every "image" is an illustrated *found thing*, drawn in a loose ink-and-wash style (`hand-drawn`, `watercolor` washes inside ink outlines): a bent fork, a length of drainpipe, a jam jar of buttons, a single roller skate, a coil of frayed rope, a stack of cereal-box card, a tin of mismatched dominoes, a wooden spool, a cracked teacup repaired with visible staples (kintsugi-but-grubbier). Each sits at a slight angle with a soft pencil-shaded shadow, as if propped against the drawer wall. - **Masking-tape labels.** Torn rectangles of "tape" (slightly translucent, with the faint stripes of real masking tape) carry handwritten notes in Caveat — placed half-on, half-off the objects they describe. - **The dotted meander / template lines.** The dashed inked path is the connective tissue; secondary dotted lines mark "cut here", "fold", "this goes with that" — the visual grammar of a craft template laid over a hoard. - **Stamps and ink marks.** A small olive `STILL GOOD` rubber stamp (imperfect, ink-bled corners), a terracotta `KEPT` stamp, smudgy fingerprints in the margins, a pencil tally of how many times something was almost discarded. - **Drawer hardware.** Each Drawer header carries a small drawn drawer-pull (a worn brass knob or a leather tab), reinforcing the cabinet conceit. As a Drawer enters view it "slides open" — the contents sliding up from below the lip with weight. - **Texture, always.** Paper grain, the faint weave of fabric scraps, the speckle of old metal, pencil-graphite sheen. Nothing flat, nothing slick, nothing glassy. The opposite of a glass card. - **Magpie corner.** A recurring tiny ink drawing of a magpie — guild mascot — perched on a Drawer edge, sometimes carrying a bottle cap, sometimes just watching. Never animated cutesy; drawn with a single confident line. ## Prompts for Implementation Build recycle.games as **one long single-document HTML page** — seven Drawers, no SPA framework, no router, no modal dialogs, no cookie-banner styling, no nav bar. The visitor pulls open a rummage cabinet one compartment at a time, scrolling top to bottom. Prioritize **the joy of the kept object over the sell**, **mess that's been lovingly organized over a clean grid**, **one slow downward rummage over branching navigation**. There is explicitly **no CTA stack, no pricing table, no stat-grid of "X tons recycled", no testimonial carousel, no feature comparison, no FAQ accordion, no newsletter modal**. If lore needs to be conveyed, convey it as a *handwritten note tucked beside an object*, not as a marketing block. **Storytelling spine:** the dotted **meander line** is an SVG path running the full height of the document, stroke-drawn progressively as the visitor scrolls (`path-draw-svg`, driven by scroll position). It weaves between Drawers — loop a bit around DRAWER 03's jam jar, run off the right edge before DRAWER 05 and re-enter from the left, and at the very bottom resolve into a small tied knot beside the closing line. This single line should feel like *the thread that holds the hoard together*. **Drawer-open behavior:** as each Drawer scrolls into view, its contents arrive with **weight** — a slightly over-damped `spring` (no bouncy overshoot; it *settles*), big objects landing first, smaller objects and their tape labels arriving a beat later (`stagger`, ~60–90ms steps). A faint "drawer pull" shadow deepens as the Drawer opens. **Object interactions:** hovering an illustrated object lifts it a few px with a soft drop-shadow and a tiny tilt-back-to-true (`hover-lift` + slight `tilt-3d`, max ~6deg) — like picking it up to look closer. The masking-tape label can fade/peel slightly on hover (`fade-reveal`). A subtle cursor companion: a faint graphite smudge or a tiny following magpie silhouette (`cursor-follow`) — understated, never a glowing blob. **Texture & paper:** apply a low-opacity paper grain overlay (`grain-overlay`) across the whole page; let the background paper tone drift subtly Drawer-to-Drawer. Hairlines and dotted template lines in `dust-grey`. Headline key-words in `rust-honey` get a hand-drawn `underline-draw` that inks in on reveal. Stamps (`STILL GOOD` / `KEPT`) appear with a tiny `pulse-attention`-free thunk — a quick scale-settle, ink corners imperfect. **Type in motion:** Drawer titles in Fraunces reveal line-by-line with a gentle settle; Caveat annotations write on briefly (`typewriter-effect`) only for the *shortest* notes — keep it sparing so it reads as handwriting, not gimmick. Spline Sans Mono object IDs simply fade in, calm and orderly. **Respect motion preferences:** under `prefers-reduced-motion`, the meander draws instantly, Drawers simply fade, objects don't tilt — the hoard is still a hoard, just still. **Bias:** full-screen narrative rummage, atmosphere and affection over information, the object as the hero, the kept thing made beautiful by being kept. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The rummage-drawer-cabinet IA.** Where sibling sites are catalogs, galleries, journals, or dashboards that *present* polished content, recycle.games is built as a seven-compartment cabinet that you physically *pull open* compartment by compartment as you scroll, each one settling with weight. The structural metaphor is a hoard being organized in front of you — not a page being browsed. 2. **Goblincore as the governing aesthetic** — overwhelmingly absent from siblings (goblincore ≈ 2%). The site deliberately *celebrates* dents, rust, mismatched parts, and dirt-under-the-fingernails patina rather than hiding them. There is exactly one green in the palette and it is desaturated `moss-on-metal`, explicitly *not* the bright "eco recycling-arrow" green every sustainability site reaches for. 3. **Illustrated salvaged objects + masking-tape annotations as the entire imagery system** — no photography at all, in a corpus where photography appears in ~98% of designs. Every visual is a loose ink-and-wash drawing of a *found thing*, propped at an angle with a pencil-shaded shadow and a hand-lettered tape label. 4. **The dotted "craft-template" meander** as the storytelling spine — one continuous stroke-drawn SVG path that weaves between Drawers, loops objects, runs off-edge and back, and resolves into a tied knot at the bottom. It is the thread that holds the hoard together, not a decorative flourish. 5. **No green-eco clichés, no CTA-driven layout, no stat-grid.** The page never quantifies its virtue or asks for a click — it just keeps things, lovingly, and shows you. **Chosen seed/style:** `goblincore earthy chaos shop` **Avoided patterns from frequency analysis:** no `glassmorphism` (82%), no `card-grid` (91%), no `photography` (98%), no `parallax`-heavy hero, no generic `centered` content well; instead leaning into underused `organic-flow` layout, `goblincore` aesthetic, `hand-drawn` + `watercolor` imagery, `grain-overlay` texture, and `path-draw-svg` as a structural device rather than a small accent.