# Design Language for recycle.games ## Aesthetics and Tone recycle.games channels an editorial aesthetic — the curated, narrative-driven presentation of feature content applied to a recycling games and gamification platform. The site scores — each recycling challenge framed as a competitive story, the strategic depth of environmental action gamified with editorial gravitas, and the confident presentation of sustainability as the most important game of our time. Inspiration draws from the game-review editorials of EDGE magazine, the competitive storytelling of FiveThirtyEight, the infographic journalism of The Pudding, and the data-driven narratives of Bloomberg. The tone is grounded-earthy — practical, rooted language that keeps gamification feeling honest and actionable rather than frivolous. ## Layout Motifs and Structure The layout uses a **hud-overlay** architecture — content organized with game-interface overlay elements that create the heads-up-display quality of recycling missions viewed through a player's command screen. **HUD Overlay Architecture:** - Full-viewport game-view background - HUD frame: fixed borders with status indicators - Content panels: floating within HUD frame, max-width: 880px - Mission briefings: centered card overlays - Container: full-viewport with HUD frame and 880px inner content - The HUD creates the mission-control quality of recycling as strategic gameplay **Section Sequence:** 1. **Mission Brief:** Hero with retro-display title on jewel-tones game gradient, vector-art clean game illustrations, tech analytical HUD overlays 2. **Challenges:** Game missions in HUD-framed panels — counter-animate interactive score animations with vector-art game asset illustrations 3. **Boss Level:** Featured challenge in full-HUD with tech detailed analytics and vector-art immersive game art 4. **Scoreboard:** Leaderboard in HUD-styled table with counter-animate live scoring 5. **Game Over:** Footer as session end — grounded-earthy closing with tech settled HUD and practical farewell ## Typography and Palette **Typography:** - **Headlines:** "Press Start 2P" (Google Fonts) — retro pixel display at 1.6rem-2.2rem, weight 400. Its 8-bit pixel forms create the classic-gaming quality of recycling challenges as retro arcade missions. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "Press Start 2P" at 0.8rem for scores, timers, and mission labels. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Jewel Deep:** #0c1020 — deep jewel dark for backgrounds - **Jewel Surface:** #141830 — rich jewel for panels - **Jewel Emerald:** #28c868 — bright emerald for primary accent (recycling green) - **Jewel Ruby:** #e83848 — vivid ruby for secondary accent (urgency) - **Jewel Sapphire:** #3868d8 — rich sapphire for tertiary accent - **HUD Light:** #c8d0e0 — cool light for text - **Shadow Jewel:** #282840 — jewel shadow for secondary text - **Border Jewel:** rgba(40,200,104,0.1) — emerald tint border ## Imagery and Motifs **Vector-Art Game Illustrations:** Recycling concepts illustrated through clean game-style vector graphics — simplified recycling symbols, power-up icons, health bars (20-30px) in Jewel Emerald and Jewel Sapphire with 1.5px strokes. The vectors create the game-asset quality of recycling actions as collectible power-ups. **Counter-Animate Score Display:** Score values animate on scroll-into-view — numbers counting up from 0 to final value over 1.2s ease-out using CSS @property for animatable number values. The counter creates the arcade-score quality of recycling achievements tallying in real time. **Tech HUD Overlays:** Thin analytical HUD frame — 1px borders at viewport edges, corner bracket indicators (12px), small status dots (4px) pulsing in Jewel Emerald. The HUD creates the command-screen quality of monitoring recycling missions from a strategic operations center. **Jewel-Tones Game Atmosphere:** Background uses deep jewel tones with game-screen glow — radial-gradient(at 50% 40%, rgba(40,200,104,0.03), transparent 35%), radial-gradient(at 30% 70%, rgba(56,104,216,0.02), transparent 30%). The jewel depth creates the immersive-screen quality of being inside a recycling game world. **Pixel Grid Overlay:** Subtle pixel-grid pattern — repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(200,208,224,0.02) 3px, rgba(200,208,224,0.02) 4px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(200,208,224,0.02) 3px, rgba(200,208,224,0.02) 4px). The grid creates the monitor-pixel quality of viewing recycling data through a game screen. ## Prompts for Implementation Build the page as an editorial recycling game HUD. HUD: .game-hud { position: relative; min-height: 100vh; } .hud-frame { position: fixed; inset: 12px; border: 1px solid rgba(40,200,104,0.06); pointer-events: none; z-index: 100; } .hud-corner { position: absolute; width: 12px; height: 12px; border: 1px solid rgba(40,200,104,0.1); } .game-content { max-width: 880px; margin: 0 auto; padding: 80px 24px; } Counter: .score-value { font-family: 'Press Start 2P', monospace; } /* JS: animate number from 0 to target on intersection */ Vector game art: .game-icon svg { stroke: var(--icon-color, #28c868); stroke-width: 1.5; fill: none; } HUD status: .hud-dot { width: 4px; height: 4px; border-radius: 50%; background: #28c868; animation: hudPulse 2s ease-in-out infinite; } @keyframes hudPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } Pixel grid: .pixel-grid::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(200,208,224,0.02) 3px, rgba(200,208,224,0.02) 4px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(200,208,224,0.02) 3px, rgba(200,208,224,0.02) 4px); pointer-events: none; } AVOID: Standard gamification dashboards, corporate sustainability trackers, and minimal challenge platforms. Let editorial game design and grounded-earthy honesty create a recycling game where environmental action is the most strategic, rewarding mission available. ## Uniqueness Notes 1. **Editorial game HUD for recycling:** Game-interface overlay makes sustainability feel like strategic gameplay rather than passive obligation. 2. **Counter-animate as arcade scoring:** Counting-up numbers create the satisfying quality of recycling achievements tallying in real time. 3. **Retro-display as 8-bit heritage:** Pixel typography creates the classic-gaming quality of recycling as a timeless arcade challenge. 4. **Jewel-tones as game world:** Deep, saturated colors create the immersive quality of being inside a recycling game universe. 5. **HUD frame as mission control:** Fixed viewport borders create the command-screen quality of strategic environmental operations. **Seed/Style:** aesthetic: editorial, layout: hud-overlay, typography: retro-display, palette: jewel-tones, patterns: counter-animate, imagery: vector-art, motifs: tech, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses editorial aesthetic, hud-overlay layout, jewel-tones palette, vector-art imagery, and grounded-earthy tone.