# Design Language for recycle.wiki ## Aesthetics and Tone recycle.wiki is a **brutally honest encyclopedia of refuse** — a site that refuses to look like a sustainability brand. Where most eco-sites cloak themselves in soft sage gradients and aspirational lifestyle photography, recycle.wiki leans into the **anti-design** aesthetic as both philosophy and metaphor: recycling is about acknowledging what already exists, not pretending it away. The visual language is **deliberately imperfect, collaged, and confrontational** — like a zine made from found materials rather than a product page made from Figma templates. The tone is **bold and confident without being preachy**. This is not a site that begs you to care about the planet. It assumes you already know why recycling matters and skips straight to the raw, unvarnished information — the kind of wiki that was assembled by obsessives with callused hands, not graphic designers. Think: the visual intensity of a protest poster crossed with the information density of a field guide, rendered through the warmth of earth pigments and the rawness of torn-paper collage. Mood: a Saturday afternoon in a community recycling center — cardboard towers, rubber-banded bins, hand-lettered labels, and the satisfaction of sorting. Grounded, physical, slightly chaotic, completely purposeful. ## Layout Motifs and Structure The page is a single **immersive vertical scroll** that refuses orthogonal regularity. Layout is governed by the anti-grid: each section tilts 1°–3° off-axis, creating a stacked-stack feeling as though content panels were physically layered on a corkboard. Despite the apparent disorder, the reading axis is always clearly vertical — the tilt is decorative disruption, not navigational chaos. **Structural zones (top to bottom, full viewport scroll):** 1. **Impact Hero (100svh).** Full-screen torn-edge collage panel. The domain name `recycle.wiki` is set in enormous playful-rounded type that punches through overlapping material swatches. A single oversize recycling arrow (not the standard ♻ glyph — a custom thick-stroke angular arrow) spirals behind the lettering. Background is #3D2B1F (espresso earth), foreground collage tears in #C4A35A and #5C7A2E. 2. **Encyclopedia Index (morph-animated tabs).** Three fat rounded-rectangle tabs — MATERIALS / PROCESSES / PLACES — that morph between states when hovered: the tab blob inflates and deflates like a balloon pressed from the side. Each tab is a different earth tone. Tab labels use a condensed playful-rounded face. 3. **Material Entries (scroll-triggered stacked panels).** Each material (glass, paper, metal, plastic, organic) occupies a full-width panel that slides in from alternating left/right as the user scrolls, stacking over the previous like layered cardstock. Each panel has a torn upper edge (CSS clip-path) revealing the color of the panel beneath. 4. **Process Flow (morph diagram).** An animated infographic where recycling stages (collect → sort → process → reform) are shown as morphing blobs that transition between states. Sharp-angle arrows connect the blobs — rigid geometry against organic morphing shapes creates deliberate visual tension. 5. **Collage Footer.** A dense collage of overlapping stamps, labels, and texture swatches — all earth-toned — that feels like the bottom of a recycling bin. The footer contains navigation links styled as hand-stamped rubber-stamp text. **Spatial rules:** generous padding within panels (80px+ vertical), but panel edges collide and overlap using negative margins (–24px). The overall effect is deliberate density at the macro level with breathing room at the micro level. ## Typography and Palette **Typography — playful-rounded, all from Google Fonts.** - **Display / Hero:** [Nunito](https://fonts.google.com/specimen/Nunito) — weight 900 ExtraBlack, used for the domain name and major section titles. Round terminals, generous letter-spacing at –0.02em. Size: 6rem–12rem depending on breakpoint. - **Section Headers:** [Fredoka](https://fonts.google.com/specimen/Fredoka) — weight 600 SemiBold. A squarish rounded sans with a slightly toy-like quality that reads as approachable authority. Used at 2rem–3.5rem. - **Body / Wiki Text:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 400 Regular and 500 Medium. Clean, humanist, excellent legibility at small sizes. Used at 1rem–1.125rem, line-height 1.7. - **Accent / Labels / Stamps:** [Boogaloo](https://fonts.google.com/specimen/Boogaloo) — a slightly informal, compressed face used for category stamps, material labels, and the rubber-stamp footer text. Weight 400 only. **Palette — earth-tones, six colors:** - `#3D2B1F` — Espresso Earth: the darkest tone, used for body text and primary backgrounds on light-panel sections - `#C4A35A` — Dried Grass: warm amber-gold, primary accent for highlights, borders, and the morphing tab blobs - `#5C7A2E` — Compost Green: mid-range earthy green, used for the materials section panels and active states - `#8B4A2B` — Terracotta: a fired-clay orange-red, used for the processes section panels and sharp-angle arrow motifs - `#D9C9A8` — Linen Beige: warm off-white, used for text on dark panels and the hero background wash behind the collage - `#2A3D1C` — Forest Floor: deepest green, used for footer background and as text on the Dried Grass panels **Color application rules:** No two adjacent panels share a family. Dark panel → light panel → dark panel alternation maintains rhythm. The morphing blobs always use `#C4A35A` in resting state and shift to the panel's accent color on hover. ## Imagery and Motifs **Primary imagery is collage** — the site uses no photography in the traditional sense. Instead, all imagery is constructed from: - **Material texture swatches:** close-cropped flat-lay scans of corrugated cardboard, crumpled aluminum foil, clear plastic film, and newspaper print — rendered in earth tones via CSS `mix-blend-mode: multiply` over the palette colors - **Typographic found-objects:** oversize single characters from obsolete typefaces, cut-and-pasted as if from a physical layout, scattered across panel backgrounds at low opacity - **Hand-drawn recycling arrow variations:** five custom arrow forms ranging from blocky and geometric to looping and organic — used as decorative separators and panel watermarks. All arrows use the sharp-angles motif: arrow heads are right-triangles with no rounding, stems are thick rectangles. - **Rubber-stamp overlays:** circular and rectangular stamp shapes with rough ink-coverage texture (simulated via CSS box-shadow spread + a grain filter) appearing on panel edges and the footer **Sharp-angles motif:** Decorative geometry throughout uses only 45° and 90° angles — no curves except in the typefaces themselves and the morphing blobs. Arrow heads, corner brackets, section dividers, and hover-state outlines are all strict right-geometry. This creates a deliberate counterpoint to the rounded typography. **Morph patterns:** CSS keyframe animations using `border-radius` morphing (from `50% 50% 50% 50%` to `60% 40% 70% 30% / 40% 60% 30% 70%`) on the tab elements and process-flow blobs. Morphing speed is 3s ease-in-out infinite, slow enough to read as breathing rather than animation. ## Prompts for Implementation Build recycle.wiki as a **single long scroll encyclopedia page** with no pagination, no separate article pages, and no navigation drawer. The visitor scrolls through the entire wiki in one uninterrupted journey. **Implementation specifics:** **Hero (section 1):** Set `background-color: #3D2B1F`. Place four overlapping `div` elements with `position: absolute`, each containing a material-texture image (cardboard, foil, paper, plastic) sized at 300px–500px and rotated between –8° and +12°, `opacity: 0.4`, `mix-blend-mode: multiply`. The domain name `recycle.wiki` sits in Nunito 900, `font-size: clamp(4rem, 10vw, 11rem)`, color `#D9C9A8`. A custom SVG arrow shape (thick-stroke, angular head) is positioned behind the text with `z-index: 1`, animating a slow 20s clockwise rotation. **Stacked-panel scroll:** Use `position: sticky; top: 0` on each panel, with `z-index` incrementing from 1 to 5. Each panel has a CSS `clip-path` on its top edge using a torn-paper polygon (15–20 point jagged line) that reveals the panel below. Panels slide in from transform `translateX(–100px)` to `translateX(0)` using IntersectionObserver with `threshold: 0.15`. **Tab morphing (section 2):** Three `button` elements with `border-radius: 30px`, each transitioning `border-radius` on `:hover` to an asymmetric value like `60% 40% 55% 45% / 45% 55% 40% 60%` over 0.4s ease. Background colors: MATERIALS → `#C4A35A`, PROCESSES → `#8B4A2B`, PLACES → `#5C7A2E`. Labels in Fredoka 600. **Process-flow morph (section 4):** Four `div.blob` elements inline with `display: flex; gap: 2rem; align-items: center`. Each blob is 120px × 120px, `border-radius` animated via CSS keyframes between four asymmetric states, 3s duration, `animation-delay: 0s / 0.75s / 1.5s / 2.25s` respectively to create a wave effect. Between blobs, insert SVG arrows: `` rendered in `#8B4A2B` — strict triangular arrowheads, no curves. **Typography scale:** - `h1`: Nunito 900, `clamp(4rem, 10vw, 11rem)`, color `#D9C9A8` - `h2`: Fredoka 600, `clamp(2rem, 4vw, 3.5rem)`, color varies by panel - `h3`: DM Sans 500, `1.5rem`, uppercase, `letter-spacing: 0.08em` - `p`: DM Sans 400, `1.0625rem`, line-height 1.75 - `.stamp`: Boogaloo 400, `1.25rem`, `transform: rotate(–3deg)`, color `#3D2B1F` **Anti-design authentics:** Apply `transform: rotate(1.5deg)` to the entire second section. Apply `transform: rotate(–1deg)` to the fourth section. These micro-tilts break the orthogonal grid without making content illegible. **No CTAs, no pricing, no stat-grids, no testimonials.** The only call to action is "start reading." ## Uniqueness Notes 1. **Anti-design aesthetic applied to an information wiki, not a portfolio or agency site.** The frequency report shows `anti-design` at 0% — the corpus has zero examples. recycle.wiki uses anti-design not as a stylistic affectation but as a formal argument: a recycling encyclopedia built from visual scraps mirrors its subject matter. No other site in the registry uses the subject matter as the justification for the visual system. 2. **Sharp-angles as counterpoint to rounded typography.** The corpus shows `rounded-sans` typography at 3% and essentially no other designs that deliberately create tension between a rounded type system and a sharp-geometry motif system. Most designs harmonize their type and motif choices. recycle.wiki sets Nunito (ultra-round) against right-triangle arrow heads and 45°-only decorative geometry — the collision is the design. 3. **Collage imagery with zero photography.** The frequency report shows `photography` at 87% — the dominant imagery mode in the corpus by a factor of 10. recycle.wiki uses no lens-based imagery at all. All visual content is material-texture swatches and typographic found-objects, both of which are CSS-achievable without image files, keeping the site materially consistent with its subject (assembled from parts that already exist). 4. **CSS morph blobs as the primary UI affordance (tabs, navigation).** The corpus shows no designs where the primary navigation element is a morphing organic blob. Most sites use flat, bordered, or gradient buttons. The morph tab pattern is both aesthetically unusual and thematically appropriate — materials change shape when processed. 5. **Seed documented:** `aesthetic: anti-design, layout: immersive-scroll, typography: playful-rounded, palette: earth-tones, patterns: morph, imagery: collage, motifs: sharp-angles, tone: bold-confident` 6. **Avoided overused patterns from frequency analysis:** photography (87% — avoided entirely), minimal imagery (44% — replaced with dense collage), warm gradient palette (corpus dominant — replaced with specific earth pigment values), grotesque-neo typography (dominant — replaced with playful-rounded Nunito/Fredoka).