# Design Language for recycle.cafe ## Aesthetics and Tone recycle.cafe is a **municipal salvage-yard reading room** — the website behaves like the bound intake ledger of a small-town materials-recovery depot that someone, decades ago, decided to keep beautifully. Picture a long timber counter under a corrugated roof: a brass weighing scale on one end, a wall of pigeonholes stuffed with carbon-paper triplicates, a cork board layered six deep with hand-pinned tags, and a coffee urn quietly steaming beside the cash drawer. This is not a "sustainability brand" with a leaf logo and a hopeful gradient. It is a working depot's clerical surface, rendered with the dry affection of an archivist: every object on the site has a **weight, an origin, a tare, and a destination**, and the page exists to record those facts in a hand the clerk is proud of. The tone is **grounded-earthy meeting scholarly-intellectual** — patient, slightly dusty, faintly amused. Copy reads like ledger marginalia: "received Tue, 3.2 kg, mostly window glass, two jars still labelled." Nothing shouts. Nothing converts. The visitor is a person leaning on the counter watching the clerk fill in a line, and the clerk is in no hurry. There is warmth here — the urn, the worn wood, the clerk's looping handwriting — but it is the warmth of *use over time*, not of a marketing palette. Surfaces look touched: graphite smudges at the page corners, a ring where a mug sat, a paperclip's rust ghost. Decay is not hidden; it is **catalogued**. The emotional register is the satisfaction of a thing accounted for: the small civic dignity of a receipt. ## Layout Motifs and Structure The spine of the site is a **vertical timeline-ledger** (timeline-vertical layout, ~4% of corpus) — but not the glowing milestone-dots-on-a-line cliché. This is a literal **ruled accounts page**: a single 14px baseline grid drawn as faint horizontal lines edge-to-edge, like ledger paper, running the entire scroll. A heavy vertical rule sits at the **38.2% column** (the "particulars" gutter), and a second lighter rule at 78% (the "weight" column). Content is entered *between the rules*, line by line, as if posted by hand — each section is an **entry block** with a date-stamp in the left margin, a description in the wide particulars column, and a figure (mass in kilograms, a tally, a count of jars) ruled into the right column. No card grid. No bento. No centered hero. No asymmetric overlap. The composition obeys **double-entry discipline**: every block has a left page (what came in) and, where relevant, a facing right page (where it went), separated by a perforation-dot seam down the centre that the eye reads as a bound gutter. Section transitions are **ruled-off totals** — a double underline, a carried-forward subtotal, a fresh page header that reads `RECYCLE.CAFE — INTAKE LEDGER — FOLIO 03`. The footer is the **closing balance**: a ruled box, signed and dated. One structural surprise: the **pigeonhole index**. A persistent narrow strip down the far left edge (32px) shows a column of tiny labelled slots — one per folio — and the slot for the current section is lit by a thin warm lamp-line, so you always know which drawer of the cabinet you're standing in. Scrolling slides the lamp down the cabinet. This replaces a conventional nav. ## Typography and Palette **Type stack — Google Fonts only. Three faces, all chosen for the ledger.** - **Bitter** (serif, slab) — the **primary body and figure face**. Bitter is a slab-serif designed for screen reading: blocky, sturdy, faintly bureaucratic, with the squared serifs of a rubber date-stamp. Slab-serif is ~4% of the corpus. Use it for all running text, all numbers in the weight column (tabular figures), and all folio headers (heavy weight, slightly tracked, like a ledger's printed column titles). - **Caveat** (handwritten) — the **clerk's hand**. Every figure the clerk "enters" — masses, tallies, marginal notes, the urn's level, the signature in the closing balance — is set in Caveat at ~1.15em, in graphite ink. It must look *posted by hand into a printed form*: slightly above the baseline, slightly slanted, occasionally crossing a rule. Reserve it strictly for entered data and marginalia; never for headers or body. - **JetBrains Mono** (mono) — the **stamp and reference face**. Used only for: the folio/reference codes (`RC-2026-0341-G`), the bin labels, the ruled column micro-headers (`TARE`, `NET`, `DEST`), and any timestamp. Tiny (11–12px), uppercase, letter-spaced like a label-maker tape. Mono is everywhere in the corpus (94%), so it is deliberately *minimized* here — confined to barcodes and stamps, never narrative. **Palette — forest-green and terracotta-warm, on aged manila.** (forest-green ~5%, terracotta-warm ~2% — both underused.) - `#EBE3D3` — **manila ledger paper**. The page. Warm, dry, faintly fibrous. - `#DDD2BC` — **shadowed paper / ruled-line tint**, also the pigeonhole strip ground. - `#2C3A2E` — **depot green** — the printed ink of the form: rules, column headers, folio titles, the heavy gutter rule. A dark, slightly grey conifer green. - `#4F6B4E` — **lichen green** — secondary printed elements, the pigeonhole lamp's *unlit* slots, hover states. - `#A6451E` — **terracotta stamp red** — the rubber-stamp colour: `RECEIVED`, `SORTED`, the date-stamp ring, the perforation seam dots, the closing-balance box edge. Used sparingly, like an actual ink pad running low. - `#3A332B` — **graphite** — the clerk's pencil: all Caveat handwriting, the corner smudges. - `#C9772B` — **brass-urn glow** — a single warm accent: the urn icon, the active pigeonhole lamp-line, the "carried forward" arrow. Never a fill, only a thin lit edge. ## Imagery and Motifs No photography. The whole site is **printed-form ephemera and clerical objects**, rendered in flat ink + graphite: - **The ruled ledger page itself** as the dominant texture — faint horizontal baselines, the two heavy vertical rules, a red margin line 64px from the left edge (the classic accounting-pad red rule), corner page-numbers, a punched binding-hole column down the gutter. - **Rubber stamps**, drawn as imperfect inked impressions in terracotta: `RECEIVED`, `SORTED`, `WEIGHED`, `RC` inside a hexagonal die, a circular date-stamp with rotating month ring. Stamps land with a slight rotation (±4°) and a patchy-ink mask so no two are identical. - **The pigeonhole cabinet** down the left edge: a column of tiny rectangular slots, each with a Caveat label, the active one lit by a 1px brass line. - **A brass scale** at the page head — a simple two-pan balance line drawing; the pans tip subtly as the running total updates. - **Triplicate carbon forms** for any "form-like" content block — a top sheet, with the faint impression of the same text bleeding through onto a second pinkish and third yellowish layer offset 3–4px behind. (No bright colours — bleached pink `#E4CFC4`, bleached yellow `#E0D8B8`.) - **The coffee urn** — one small drawn urn near the footer with a barely-moving steam wisp (SVG path, slow drift). It is the only "alive" object and the only reason this is a *cafe* and not a warehouse: the depot keeps the urn on for whoever's working late. - **Paperclips, rust ghosts, a single bent staple, a thumbtack** pinning marginal notes. Decorative, never interactive. - **Bin glyphs**: minimal flat icons for glass / paper / metal / textile / organic — each a single-line drawing, each with a JetBrains Mono code beside it like a parts diagram. ## Prompts for Implementation Build recycle.cafe as **one HTML file, one CSS file, one ES module** — no framework, no router, no build step. Target under 70KB uncompressed. One long vertical scroll, no horizontal scroll, no modals, no hover-drawer panels, no dropdown nav. **The page is a ledger being posted in real time.** On first paint, the ledger lies open and *blank below the current line* — ruled paper, folio header, the pigeonhole cabinet, the brass scale at zero, the urn cold. Then, line by line as the visitor scrolls (scroll-triggered, ~3% of corpus uses this sparingly), the clerk *posts entries*: the Bitter printed labels are already there, but the **Caveat figures write themselves in** — a short path-draw / typewriter hybrid where each handwritten number appears stroke-by-stroke at ~22 chars/sec, lands slightly above the rule, then settles onto it. As each net mass posts, the **running total in the closing-balance box counts up** (counter-animate, ~15%) and the **brass scale's pans tip** by a couple of degrees toward balance. Stagger entries within a folio by ~120ms. **Rubber stamps** drop on section milestones: when an entry block fully enters the viewport, a `RECEIVED` or `SORTED` stamp **slams down** — fast scale from 1.4→1.0 over 90ms, a tiny shake, a patchy-ink reveal mask, a faint paper-thump (no audio; just the visual jolt and a 1px page-shift). Use spring easing (~84% of corpus — fine, it's the right physics for a stamp) but keep it *terse*, not bouncy. **The pigeonhole lamp** is the scroll-position indicator: a 1px brass line that slides down the left-edge cabinet, snapping slot-to-slot as folios change, with the active slot's Caveat label brightening from lichen to graphite. Clicking a slot scroll-jumps to that folio (the only navigation). **The coffee urn** lives near the footer: a slow steam-path that drifts and dissipates on a ~6s loop; on hover the urn's brass edge warms (`#C9772B`) and a Caveat note posts itself beside it — "still hot. help yourself." This is the single moment of explicit hospitality; everything else is clerical. **Cursor**: no glow, no follower blob. The cursor over the particulars column becomes a **fine graphite pencil**; over a figure-in-progress it leaves a faint 8px graphite trail that fades in 400ms (like resting a pencil tip on paper). Over stamps, it becomes a small stamp handle. **Page-corner life**: the bottom-right corner of the "current page" curls up ~6px on idle and lies flat while scrolling, as if a draft from the open roof caught it. A mug-ring shadow sits permanently on Folio 02. Graphite corner-smudges deepen very slightly the longer you stay (a 90s ease, nearly imperceptible) — the page ages while you read it. **AVOID:** CTA buttons, "Get Started" heroes, pricing tiers, stat-grids, testimonial carousels, leafy eco-gradients, recycling-arrow-triangle logos used decoratively, glassmorphism, neon, parallax hero images, card grids, bento boxes. There is exactly one "button" on the whole site: a ruled box in the footer labelled `CLOSE FOLIO` in JetBrains Mono that, when clicked, draws the double-underline total and stamps `BALANCED` — and that is the entire conversion funnel. ## Uniqueness Notes Deliberate departures from the registry and from default associations: 1. **A recycling/cafe domain rendered as a clerical accounts ledger, not an eco-brand.** Zero leaves, zero green gradients, zero recycling triangles as hero art. The "recycle" idea is expressed only as *intake bookkeeping* — weights, tares, destinations — which no other site in the corpus does. The "cafe" is one cold-then-warm coffee urn kept on for the night clerk. The metaphor (a depot's bound ledger) *is* the design. 2. **timeline-vertical layout (~4%) reconceived as a ruled double-entry accounts page** — baseline-grid ruling visible as actual ledger lines, a red margin rule, punched binding holes, "carried forward" subtotals, a "closing balance" footer. Not glowing milestone dots. The corpus's timeline layouts are all milestone/roadmap; none is a literal accounting pad. 3. **Slab-serif Bitter (~4%) + handwritten Caveat as "printed form vs. clerk's posted figures"** — a strict typographic role-split where the handwriting is *only* entered data, never decoration. JetBrains Mono is present (94% of corpus) but radically suppressed — confined to stamps and reference codes, never narrative — an intentional inversion of the corpus norm. 4. **forest-green (#2C3A2E, ~5%) + terracotta-stamp-red (#A6451E, ~2%) on manila** — depot-green ink and a running-low rubber-stamp pad, not a "forest nature" or "autumn warm" mood. Both underused colours, used as *printer's ink and stamp ink*, not as scenery. 5. **Avoided overused patterns:** no parallax (90%), no cursor-follow glow blob (89%), no card-grid (91%), no full-bleed photo hero (88%, 98% photography), no glassmorphism (82%). Animation budget spent entirely on *posting entries by hand*, *stamps slamming down*, *a scale tipping*, *steam drifting*, and *a page corner curling* — all diegetic to a depot counter. 6. **Chosen seed (fallback, none provided in assignment):** `aesthetic: editorial-clerical / wabi-sabi-decay-catalogued, layout: timeline-vertical, typography: slab-serif (Bitter) + handwritten (Caveat), palette: forest-green + terracotta-warm on manila, patterns: scroll-triggered + counter-animate + stamp-slam, imagery: printed-form-ephemera / clerical-objects, motifs: ledger-rules + rubber-stamps + brass-scale + coffee-urn, tone: grounded-earthy + scholarly-intellectual.`