# Design Language for recycle.games ## Aesthetics and Tone recycle.games is a **retro-futurist academic treatise on games as material cycles** — imagine a 1978 Bell Labs technical journal that got dropped into a Jetsons-era Atari arcade, then left to age in a warm creamy-paper archive for fifty years. The site reads as though a serious academic researcher in 2087 is studying late-20th-century game design through the lens of ecological systems theory, and is publishing their findings on a computer that costs as much as a house but renders type the color of old cream. The mood is **scholarly-playful duality**: rigorous, footnoted, citational — but the footnotes have speech bubbles, the citations pop with soft iridescent halos, and the header floats like a soap bubble catching afternoon light. This is not irony. The site genuinely believes games are closed-loop material systems worth studying, and it delivers this belief with the warmth of a late-night PBS documentary narrated by Carl Sagan — hushed reverence mixed with infectious curiosity. The visual register is **geometric-clean retro-futurism**: no scanlines, no glitch, no VHS distortion. Instead: crisp Bauhaus-derived circles, squares, and hexagons rendered in creamy pastels against warm off-white. Think Saul Bass title cards crossed with a 1970s NASA mission patch crossed with a laboratory specimen card — every form purposeful, every curve deliberate. Color temperature is warm ivory, not cold white. The academic scaffolding (rules, footnote indicators, section dividers) is rendered in a single deep indigo that reads like archival ink on cream bond paper. Pastel accent bubbles — pale sage, blush rose, sky periwinkle, butter yellow — float as decorative geometry rather than UI chrome. ## Layout Motifs and Structure The site is **one continuous full-bleed vertical scroll**, divided into seven named "cycles" (like a product lifecycle): Extraction → Production → Distribution → Consumption → Recovery → Reintegration → Rest. Each cycle occupies a distinct full-viewport section with a solid creamy background color that shifts slightly warmer or cooler as you descend — not a gradient, but a **slow thermal walk** from dawn ivory (#F7F3EB) to dusk cream (#EDE5D4). **Full-bleed geometry panels.** Each section fills 100vw × min(100vh, 680px). The main content sits in a single centered column of `min(780px, 88vw)`. Outside the column, at the far left and right edges, large geometric forms — rings, arcs, discs at 40–60% opacity — bleed past the column margin and off-screen, creating the sensation that the reader is inside a vast diagram. **Parallax depth layers (restrained).** Each section has exactly three depth layers: 1. Background color fill (static) 2. Large decorative geometry (moves at 0.3× scroll speed — very slow, almost imperceptible) 3. Text and foreground (stationary) This is parallax as depth cue, not spectacle — the geometry drifts, not zooms. **Bubble-cluster ornaments.** At each section break, a cluster of 3–7 circles of varying sizes (12px–80px) occupies a 120px vertical band as a visual caesura. The circles share one accent pastel per section and are arranged in loose orbital groupings — never touching, never perfectly aligned. They are drawn as SVG `` elements with `fill="currentColor"` and `opacity="0.35"`. **Footnote rail.** A 200px-wide right-margin rail (desktop only, collapsed on mobile) holds short academic-style footnotes in 10px type, numbered with superscript glyphs. They appear alongside the relevant paragraph via a sticky offset — like a Tufte-style side note system. **Navigation.** A fixed 48px top bar: wordmark at left, seven cycle names as text anchors at right, rendered in 11px geometric-sans ALL-CAPS. On scroll the active cycle name gains a soft pastel bubble underline. ## Typography and Palette **Primary font — Display and Body:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) variable, weights 300–700. Used for all headings, body copy, navigation, and footnotes. Space Grotesk is a geometric sans with slightly irregular terminals — the irregularity reads as hand-drawn without being informal, giving the scholarly text warmth without sentimentality. Variable axes: `wght 300→700`. **Secondary font — Monospace labels and specimen numbers:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) at weights 400 and 700. Used for specimen catalog numbers, chemical/ecological notation labels, footnote numbers, and the cycle counter displayed in each section (e.g., `CYCLE·03`). **Accent font — Pull quotes and chapter headers:** [DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display) italic only, used sparingly — one pull quote per two cycles maximum. Provides a single serif note that reads as a quotation mark for the whole section. **Scale:** - `clamp(52px, 8vw, 96px)` — cycle hero numeral (Space Mono, opacity 0.08, serves as oversized section watermark) - `clamp(28px, 4vw, 44px)` — cycle title (Space Grotesk, wght 700) - `clamp(15px, 1.8vw, 18px)` — body (Space Grotesk, wght 400, line-height 1.72) - `10px` — footnotes, labels (Space Mono, wght 400, letter-spacing 0.08em) **Palette — Warm Creamy Pastels + Academic Ink:** | Token | Hex | Usage | |---|---|---| | `--ivory-dawn` | `#F7F3EB` | Primary background (Cycle 1, 7) | | `--cream-base` | `#EDE5D4` | Mid-scroll background (Cycle 4) | | `--cream-dusk` | `#E6DCCC` | Warm terminal background (Cycle 6) | | `--ink-indigo` | `#2D2A5E` | All body text, rules, borders | | `--ink-mid` | `#4E4A7A` | Secondary text, footnotes | | `--bubble-sage` | `#C6DCC8` | Cycle 1–2 accent geometry | | `--bubble-blush` | `#F0CEC8` | Cycle 3–4 accent geometry | | `--bubble-periwinkle` | `#C4CAEC` | Cycle 5–6 accent geometry | | `--bubble-butter` | `#F0E8B6` | Cycle 7 accent geometry | | `--bubble-mist` | `#D4E8EC` | Cluster ornament default | Text is always `--ink-indigo` on any cream background. No dark backgrounds exist anywhere in the site. ## Imagery and Motifs **No photography.** No stock images. All visual matter is hand-built SVG geometry. **Abstract shape vocabulary (five forms, repeated across all sections):** 1. **The Ring (primary motif).** A large unfilled circle with a 2–4px stroke in `--ink-indigo` at 12% opacity. Rings appear at 180px–400px diameter, positioned to bleed off the left or right viewport edge. They suggest the closed loop of a material cycle — the site's core metaphor. 2. **The Bubble cluster (secondary motif).** Groups of filled circles in a single pastel accent, `opacity="0.35"`, arranged in loose orbital clusters. Never in a grid, always slightly irregular. Sizes: 12, 24, 38, 52, 68, 80px diameter. Used at section breaks and as floating ornaments within sections. 3. **The Hexagon tile (tertiary).** A single flat hexagon (no shadow, no gradient) appears in two sections as a material-science nod — recycled materials have crystalline grain structure. Rendered at 140px, `opacity="0.18"`, stroke only. 4. **The Arc sweep.** A partial arc (60–120° of a large circle, radius 300–500px) sweeping in from a corner, rendered in `--ink-indigo` at 6% opacity. Serves as compositional framing rather than decoration — the arc "points" the reader toward the section heading. 5. **The Specimen label.** Each cycle has a small rectangular "specimen card" element — 140px × 56px, 1px border in `--ink-mid`, monospaced type inside — that reads like a museum tag: `SPECIMEN·03 / DISTRIBUTION CYCLE / CLASS: COMMERCIAL`. Positioned at the top-right of each cycle panel, it functions as the academic citation anchor. **Retro-futurist texture:** A very fine halftone dot grid (SVG `` with 3px circles at 24px pitch, `opacity="0.04"`) overlays the entire page. This reads as aged paper texture from a distance and as a data-visualization substrate up close — a nod to both the scholarly publication and the Atari-era technical schematic. ## Prompts for Implementation Build recycle.games as **a single-page academic field report on games as closed material loops**, scrolled top-to-bottom. Seven full-viewport sections (CSS `min-height: 100svh`), each named after a stage in a product lifecycle. No page navigation, no modal overlays, no infinite scroll — just a long, calm, rigorous document. **Section structure:** 1. **CYCLE·00 — EXTRACTION** (`--ivory-dawn` bg). Hero: site wordmark in Space Grotesk 700, large. Below it, a 2-line thesis statement in DM Serif Display italic. Right-bleed arc sweeping from top-right. Bubble cluster (sage) lower-left. 2. **CYCLE·01 — PRODUCTION** (slight cream shift `#F3EEE4`). Body section: 400-word scholarly paragraph on game production as resource extraction, with two inline footnotes. Left-bleed ring (300px). Specimen label upper-right. 3. **CYCLE·02 — DISTRIBUTION** (`--cream-base` bg). Pull quote in DM Serif Display: "Every game disc is a 4.7-gram polycarbonate object that travels 11,000 kilometers before it is played once." Bubble cluster (blush) upper-right. Ring lower-left. 4. **CYCLE·03 — CONSUMPTION** (continuation cream `#EBE2D0`). Two-column split on desktop (text left, SVG diagram right). The SVG diagram is a labeled cycle diagram — five nodes connected by arcs, showing the material lifecycle of a single game cartridge. Monospaced labels on each node. No color fill, just `--ink-indigo` strokes. 5. **CYCLE·04 — RECOVERY** (`--cream-dusk` bg). Large oversized watermark numeral `04` (Space Mono, 0.06 opacity) behind text. Short paragraph + a nested blockquote (academic citation style with a left-border in `--bubble-periwinkle` at full opacity). Hexagon motif right-bleed. 6. **CYCLE·05 — REINTEGRATION** (back to lighter cream `#F0EBE0`). Interactive hover: each bubble in the ornament cluster, on hover, reveals a tooltip in Space Mono 10px showing a material stat — "avg. recycled content: 22%". Tooltip is a small rectangle with 1px `--ink-indigo` border, no shadow, no animation — just appears. 7. **CYCLE·06 — REST** (`--ivory-dawn` bg, matching Cycle 00 — completing the loop). Closing reflection paragraph. Footer: site wordmark small, Space Mono 11px copyright line, five bubble ornaments in `--bubble-mist`. No links, no social icons — this is not a product page. **Technical requirements:** - CSS custom properties for all palette tokens - `scroll-snap-type: y mandatory` on the outer container with `scroll-snap-align: start` on each cycle section — snapping is gentle, not forced (use `scroll-padding-top: 48px` for the nav) - SVG motifs inline, not `` — they must inherit CSS color - `font-display: swap` on all Google Fonts - No JavaScript frameworks; vanilla JS only for the footnote rail offset and hover tooltips - Parallax via `transform: translateY()` driven by `IntersectionObserver` + `requestAnimationFrame` — no `scroll` event listener on the main thread **What to avoid:** - Gradient fills (use flat solid creams only) - Drop shadows (use opacity and transparency instead) - Card components with rounded corners and shadows - CTA buttons (no "Sign Up", no "Get Started") - Dark sections or dark mode - Any photography or raster imagery ## Uniqueness Notes 1. **First scholarly-ecological framing of game content in the corpus.** The frequency report shows `book-scholarly` at only 3% for imagery and zero designs framing games through lifecycle-analysis theory. recycle.games applies a materials-science lens — specimen labels, cycle diagrams, footnote rails — to game content, a combination that does not appear elsewhere. This is not "academic aesthetic" as a skin; the content is genuinely written as field notes. 2. **Creamy-pastel + geometric-sans combination is 0% in corpus.** The frequency report shows `creamy-pastel` does not appear as a palette key in any existing design. `geometric-sans` appears at only 4%. This combination — warm ivory backgrounds, pastel accent geometry, and a clean geometric sans serif — is completely unclaimed. Most pastels in the corpus are used with serif revival or editorial fonts; pairing them with Space Grotesk's industrial geometry creates tension the corpus hasn't explored. 3. **Bubble clusters as structural caesuras, not decoration.** The corpus uses `bubble-playful` motifs occasionally but always as surface decoration. recycle.games uses bubble clusters as load-bearing typographic dividers — they replace horizontal rules and replace section headings in certain cycles. The bubbles are the punctuation of the document. 4. **Scroll-snap academic scroll (not cinematic parallax).** The corpus has `parallax` at 75% — extremely overused. recycle.games uses parallax at a fraction of normal intensity (0.3× speed, depth cue only) and combines it with `scroll-snap-type: y mandatory` — giving each cycle section the feel of turning a page in a heavy art book, not of flying through space. The snapping disciplines the parallax and prevents the spectacle. 5. **No photography, no illustration — pure constructed geometry.** At `abstract-shapes` frequency of 2%, this is rare. The entire visual vocabulary is five SVG primitive forms repeated across all seven cycles. This restraint — ring, bubble, hexagon, arc, specimen label — enforces a unified material language that mirrors the site's thesis: closed loops produce harmony. **Chosen seed:** aesthetic: retro-futuristic, layout: full-bleed, typography: geometric-sans, palette: creamy-pastel, patterns: parallax, imagery: abstract-shapes, motifs: bubble-playful, tone: scholarly-intellectual **Avoided patterns (overused per frequency):** hand-drawn (58%), editorial (53%), centered-only layout (84%), parallax as spectacle (75% but retained at minimal intensity), terminal aesthetic (32%), botanical imagery (29%), glassmorphism (21%).