# Design Language for recycle.auction ## Aesthetics and Tone recycle.auction is a **goblincore salvage-hoard auction house** — imagine a magpie's nest the size of a warehouse, where every dented kettle, single mismatched boot, cracked terrarium, and orphaned bicycle wheel has been catalogued by a creature that genuinely believes shiny-but-broken is the highest form of beauty. The site is **earthy, gleeful, slightly feral**: it treats the act of bidding on other people's discards not as thrift-shame but as a treasure dig — knees in the dirt, mud under fingernails, a triumphant little shriek when the hammer falls. The mood is **grounded-earthy crossed with whimsical-creative**: warm decomposing-leaf browns, the green-grey of moss on a forgotten garden chair, the dull brass of a coin found in a coat pocket, and the occasional inexplicable iridescent glint of a beetle's wing-case on something that should not glint at all. It rejects the two reflexes of the recycling-website genre. It is **not** clinical-eco-minimalism (no white-space gospel, no sans-serif lecture about your carbon footprint, no leaf-icon-in-a-circle). And it is **not** thrift-app dopamine-grid (no infinite scroll of square photos, no neon "DEAL!" badges). Instead it commits to **the dig**: the homepage is a single descending excavation through strata of accumulated stuff, narrated like a creature showing you around its hoard. Tone in copy: confiding, a little possessive of the objects, prone to tangents ("this one still has the original receipt from 1974, isn't that *unbearable*"), never apologetic. The site believes that nothing is waste — only treasure that hasn't been re-loved yet — and it says so with the conviction of something that has never owned a dustbin. ## Layout Motifs and Structure The corpus is choked with **card-grid (91%)**, **full-bleed (88%)**, **centered (82%)**. recycle.auction discards the grid lattice entirely and replaces it with a **stratigraphic dig-column** — a single vertical excavation, top to bottom, through named layers of a hoard. You do not scroll a feed; you *dig down* through sediment. - **The Topsoil (hero zone).** No centered headline-over-photo. Instead the viewport opens at ground level: a hand-drawn loamy horizon line wobbles across the screen, tufts of grass and a half-buried object peeking up (a teapot spout, a doll's arm, a typewriter key). The wordmark "recycle.auction" is set into the dirt like a hand-lettered cardboard sign on a stick. A single line of copy: *"everything down here used to belong to someone. dig."* A downward burrow-arrow, animated like it's tunneling. - **The Strata (lot listings).** As you scroll, you pass through 5–7 horizontal earth-bands, each a different soil texture and tone (topsoil → clay → root-tangle → old-foundation → bedrock). Lots are **not cards in a grid** — they are **objects embedded in the soil wall**, arranged organically (organic-flow layout, 6% in corpus): a chipped enamel mug sticking half out of a clay seam here, a stack of warped LPs wedged between roots there, sizes varying with how "interesting" the hoard-narrator finds them. Each object, when you hover/tap, gently *wiggles loose* from the dirt and rotates to face you, revealing its lot card on a torn-paper tag tied around it with twine. - **The Worm-Trails (navigation).** Between strata, meandering tunnels (squiggly SVG paths drawn live as you scroll) connect categories — "things that were once kitchens," "the wheel pile," "books nobody finished," "single shoes (we will reunite them)." Clicking a worm-trail burrows you sideways to that category's pocket. - **Bedrock (footer / how-it-works).** The bottom of the dig: a stone shelf where the rules live, carved like a placard at a natural-history museum, plus a tiny resident creature (the auctioneer) winking. Asymmetric placement (asymmetric layout, 42% — but used here as genuine off-balance burrow geometry, not a tidy split). - No bento grid, no dashboard, no card-grid lattice anywhere. The single recurring "module" is **object-in-soil**, repeated at irregular intervals down one column. ## Typography and Palette **Typography (Google Fonts only):** - **Display & wordmark & lot names — *Fredoka* (weights 400/500/600), used chunky and slightly squashed at 64px → 120px for layer names ("CLAY SEAM", "THE WHEEL PILE") and 28px → 40px for lot titles.** Fredoka's rounded, friendly, slightly bulbous letterforms read like hand-shaped clay — perfect for a creature that has never seen a ruler. Tracking tightened, words occasionally tilted ±3° as if pressed into mud. - **Body & narration — *Gentium Book Plus* (regular & italic, 17px → 19px, generous 1.7 line-height).** A warm, bookish, slightly old-fashioned serif — it makes the hoard-narrator's confiding tangents read like marginalia in a beloved field guide. Italic used heavily for the asides. - **Tags, lot numbers, bid figures, timers — *Special Elite* (typewriter, 13px → 15px, letter-spaced).** Every torn-paper lot tag is "typed" — lot no., provenance, current bid, time-left — in smudgy uneven typewriter. This is the only "data" typeface and it stays small and grubby. (Counts as `mono`/`handwritten`-adjacent but specifically a battered typewriter, not clean tech-mono.) **Palette — `warm-earthy` + `forest-green` accents, deliberately *not* gradient-led (gradient is 95% in corpus; here gradients appear only as subtle soil-depth shading, never as a hero wash):** - `#3A2E22` — **wet topsoil brown** (primary text, dig-column ground) - `#5C4A33` — **dug clay** (mid-strata band) - `#8A7A5C` — **dry sediment** (lighter band, card backgrounds) - `#E8DEC8` — **bone / old paper** (torn-tag surfaces, base canvas at top) - `#6B7A4E` — **garden-chair moss green** (worm-trails, links, the auctioneer creature) - `#3E4A2E` — **deep root green** (bedrock band, footer) - `#B5642A` — **rusted-iron orange** (live-bid pulse, "you're winning" state, hammer-fall flash) - `#7FB5A6` — **inexplicable beetle-iridescent teal** (rare hover sparkle on ~1 in 12 objects, the "this one's special" glint — used sparingly, never structurally) ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Everything is **hand-drawn SVG** (hand-drawn imagery is 95% in corpus — but here it's load-bearing in a way the genre rarely commits to: not decorative doodles around photos, but the *entire object catalogue* rendered as wobbly ink-and-watercolor line drawings, because a hoard-creature draws what it loves rather than photographing it). - **The objects themselves** — 30–40 unique hand-drawn salvaged items (kettle, single boot, terrarium, bicycle wheel, typewriter, warped LPs, doll, enamel mug, garden chair, rotary phone, ship-in-a-bottle with a crack, etc.), each in loose 2px ink stroke with a single flat watercolor wash, slightly wobbly, slightly wrong-proportioned, lovingly so. - **Soil-wall textures** — layered SVG noise + hand-stippled `` clusters for pebbles, root tendrils (path-draw), and the occasional cross-section of an old brick or a tree-ring stump embedded in the band. - **Worm-trails** — meandering hand-drawn squiggle paths between strata, drawn live with `stroke-dasharray` as you scroll, each ending in a tiny tunnel-mouth. - **The auctioneer creature** — a small, friendly, indeterminate burrowing thing (somewhere between a mole, a magpie, and a sock), appears in the bedrock footer and occasionally pokes a paw up from behind an object when you win a bid. Never anthropomorphized into a mascot logo — it just *lives there*. - **Torn-paper lot tags** — irregular hand-torn rectangle shapes (jagged SVG edges), faint coffee-ring stains, a hole punched with twine drawn looping to the object. - **Decorative grace notes**: dirt-clod cursors, a tiny falling-pebbles particle when a band loads, grass tufts that bend away from the cursor, a worm that occasionally inches across the screen and burrows back in. ## Prompts for Implementation Build recycle.auction as **a single-route vertical excavation** — one HTML file, one CSS file, one JS module, one `lots.json` for the catalogue. Treat the page as a **2-minute dig down through a hoard**, narrated by the creature that lives in it. **There is NO CTA-heavy hero, NO pricing table, NO stat grid ("10,000 items recycled!"), NO testimonial row, NO logo wall, NO "trusted by" strip, NO email-signup band, NO three-column feature cards.** Every section earns its place as a *layer of soil you pass through*. - **Scroll = digging.** Map scroll progress to a "depth" value. The background `` shifts hue from bone-paper `#E8DEC8` at depth 0 through the soil tones down to deep root green `#3E4A2E` at the bottom. A faint depth-meter (in Special Elite, e.g. *"-2.4m"*) ticks up in a corner. Use `scroll-triggered` reveals: objects *push out of the soil wall* (translateY + slight rotate + a puff of `#8A7A5C` dust particles) as their band enters view, `stagger`ed irregularly (not a neat cascade — random 0–400ms offsets, like things settling). - **Object interaction.** On hover/focus, an object `wiggle`s (small keyframed rotate ±4° with `spring`/`elastic` easing), lifts ~12px out of the dirt with a soft shadow, and its torn-paper lot tag swings down on its twine (rotate from the punch-hole as pivot, slight pendulum overshoot). The tag shows: hand-typed lot no., a one-line provenance tangent, current bid in `#B5642A`, and time-left counting down live in `Special Elite`. ~1 in 12 objects also emits a single slow `#7FB5A6` iridescent shimmer-sweep — the "special find" glint. - **Bidding moment.** When a user places a bid (mock interaction is fine), the hammer falls: a hand-drawn wooden gavel swings in from offscreen, a `#B5642A` flash ripples out from the object, the auctioneer creature's paw pops up from behind it holding a tiny "SOLD?" sign, and a small shower of dirt-clods bounces (`bounce-enter` + gravity). Confiding copy appears: *"it's yours now. be kind to it."* - **Worm-trail nav.** Between strata, draw meandering SVG paths with `path-draw-svg` (animate `stroke-dashoffset` on scroll). Each trail is labelled in Fredoka and is a clickable category jump — smooth-scroll-burrow to that band with a brief screen-shake-of-loose-earth on arrival. - **Cursor & ambient life.** Cursor is a small dirt clod / trowel tip; grass tufts bend away from it (`cursor-follow` on nearby `` elements only — keep it cheap). Occasionally a hand-drawn worm inches across the viewport on a sine path and burrows out. A pebble or two trickles down when a new band loads. - **Type in motion.** Layer names (Fredoka) settle into place with a tiny `tilt-3d`-ish thunk and a dust puff, as if dropped. Narration paragraphs (Gentium Book Plus) `fade-reveal` line by line. Lot tags type themselves out in `Special Elite` with a `typewriter-effect` (with believable uneven key timing). - **Storytelling spine.** The copy must carry a through-line: the creature greets you at topsoil, gets progressively more attached to the objects the deeper you go ("this is the part of the hoard I don't show everyone"), and at bedrock quietly explains the auction rules as if showing you the house ledger, then waves you off. Keep it warm, possessive, tangent-prone, never salesy. Sustain immersion top to bottom; do not break character for a "Features" or "Why Choose Us" block. - **Performance posture is secondary to the dig** — but keep SVGs reasonably optimized and stagger heavy work to scroll idle. Honor `prefers-reduced-motion` by replacing wiggles/digs with simple cross-fades while keeping the descending earth-tone journey intact. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Stratigraphic dig-column replaces card-grid.** Card-grid sits at 91% — the single most saturated layout in the corpus. recycle.auction has *no grid lattice at all*: lots are individual hand-drawn objects embedded irregularly in a vertical soil-wall, ordered by the narrator's affection, not by a 12-column system. Scrolling is reframed as *physically digging downward through sediment*, with a live depth-meter — an interaction metaphor the corpus does not contain. 2. **Goblincore as a committed thesis, not a texture.** Goblincore registers at ~2% in the corpus. Here it isn't a coat of grunge over a normal layout — it drives the information architecture (worm-trail navigation, hoard-narrator voice, "single shoes (we will reunite them)" categories, the resident burrowing auctioneer-creature), the imagery system (every product rendered as a wobbly love-drawing, never a photo), and the palette (decomposing-leaf browns + moss + one beetle-iridescent accent). It's the rare goblincore *e-commerce* site that means it. 3. **No gradient-wash hero, no eco-clinical minimalism, no thrift-dopamine grid.** Gradient is 95% and warm is 98% in the corpus; this design keeps the warmth but spends gradients only on subtle soil-depth shading, never a hero blend — and it pointedly rejects both default modes of the recycling/secondhand genre (white-space sustainability lecture; neon deal-grid) in favor of a tactile excavation narrative. 4. **Hand-drawn imagery is the catalogue, not the garnish.** Hand-drawn is 95% in the corpus but almost always means doodles framing photos. Here there is *zero photography* — the entire lot inventory is loose ink-and-wash drawings, justified in-fiction (a hoard-creature draws what it loves), making the medium itself part of the storytelling. 5. **Typewriter type used only as grubby data.** `Special Elite` is reserved strictly for lot tags, bid figures, and the depth-meter — battered and small — against `Fredoka` clay-display and `Gentium Book Plus` field-guide body. The mono-as-everything cliché (mono at 94% in the corpus) is inverted: mono-ish type is the *least* prominent voice, deliberately marginal and smudged. Chosen seed/style: **"goblincore earthy chaos shop"** Avoided overused patterns from the frequency analysis: card-grid (91%), full-bleed hero (88%), centered (82%), glassmorphism (81%), gradient-wash palette (95%), photography imagery (98%), mono-as-primary-type (94%), dashboard/bento layouts, stat-grids, CTA-heavy hero, pricing blocks, logo walls, testimonial rows.