# Design Language for recycle.games ## Aesthetics and Tone recycle.games embodies the visual language of a **watercolor ecology atlas from an alternate 1978** -- a world where retro-futuristic environmental science was illustrated not with sterile diagrams but with loose, bleeding ink washes on heavy cotton paper, where pigment pools in the valleys of textured stock and dries with crystalline edges that catch the light. The aesthetic is **watercolor retrofuturism**: the spontaneous, uncontrollable beauty of wet-on-wet watercolor technique merged with the optimistic techno-utopianism of 1970s speculative design magazines like Whole Earth Catalog and Omni. Every surface carries the ghost of water -- tide marks, bloom patterns, granulation where pigment settles into paper fiber. But this is not nostalgia for its own sake; it is the visual argument that the future of recycling and ecological games is as beautiful and unpredictable as paint dissolving in water. The mood sits at the intersection of scientific wonder and artistic accident. Imagine turning the pages of a field guide to recyclable materials, but each page is a luminous watercolor study: aluminum cans rendered in washes of cadmium orange bleeding into cerulean, glass bottles captured in transparent layers of viridian and raw sienna, cardboard boxes depicted with the warm granulation of burnt umber on rough-press Arches paper. The tone is **minimal** -- restrained, unhurried, confident in silence. There are no exclamation marks, no urgency. The site breathes like a gallery hung with quiet, luminous paintings. ## Layout Motifs and Structure The layout follows an **immersive-scroll** architecture -- a single, continuous vertical journey that unfolds like an unrolling scroll painting, with no traditional page breaks, no card grids, no sectioned containers. The entire experience is one long, flowing descent through layered watercolor environments, each bleeding into the next through soft gradient transitions that mimic the way wet pigment feathers at the edge of a wash. **Scroll Architecture:** - **Full-viewport chapters:** The site is divided into 5-7 "wash chapters," each occupying 100vh minimum. Chapters are not separated by hard lines but by gradual color transitions -- the background hue shifts from warm ochre (#D4A574) to cool teal (#2A6B7C) to deep indigo (#1E1E3F) as the user scrolls, simulating the experience of moving through different layers of a watercolor painting from warm foreground to cool background. - **Parallax paint layers:** Within each chapter, 3-4 semi-transparent layers move at different scroll speeds (0.2x, 0.5x, 0.8x, 1.0x), creating depth. The slowest layer carries broad watercolor washes (large gradient divs with `mix-blend-mode: multiply`), the middle layers carry content, and the fastest layer carries small splatter details (absolutely positioned SVG elements with irregular, organic shapes). - **Off-center content placement:** Text and imagery never sit dead-center. Instead, content blocks are positioned at 20%-35% from the left edge on odd chapters and 55%-75% from the left edge on even chapters, creating a gentle zigzag reading path that mimics the way a painter's eye moves across a composition. Max content width: 540px for text blocks, 720px for image frames. - **Breathing margins:** Generous vertical spacing between elements -- minimum 8vh between content groups. The page should feel like a watercolor with more untouched paper than painted surface, honoring the principle of "less is more" in both painting and design. - **No navigation bar:** A single small watercolor swatch indicator (5 tiny circles with watercolor fill effects) floats fixed at the right edge of the viewport, showing current position within the scroll journey. Each dot is 12px diameter with a CSS radial-gradient simulating pigment concentration at center fading to transparent at edges. ## Typography and Palette **Typography:** - **Headlines / Chapter Titles:** "Bebas Neue" (Google Fonts) -- an all-caps, ultra-condensed sans-serif with zero stroke contrast and mechanical regularity. At 5rem-9rem, its towering, narrow letterforms create dramatic vertical rhythm against the organic, fluid watercolor backgrounds. The tension between Bebas Neue's rigid industrial geometry and the soft, unpredictable paint washes is the typographic thesis of the entire design. Set with `letter-spacing: 0.08em`, `line-height: 0.95`, `font-weight: 400`. Color: either pure white (#FFFFFF) with `text-shadow: 0 2px 8px rgba(30,30,63,0.3)` for legibility over washes, or deep indigo (#1E1E3F) when over light backgrounds. - **Body / Running Text:** "Source Serif 4" (Google Fonts) -- a transitional serif with open counters, generous x-height, and the quiet authority of a well-typeset field guide. Used at 1.05rem-1.2rem, `font-weight: 400`, `line-height: 1.75`, `letter-spacing: 0.01em`. The generous line-height gives each line of text the same breathing room as white paper between watercolor strokes. Color: #3A3A52 (a muted blue-charcoal that reads softer than pure black). - **Captions / Labels:** "Bebas Neue" at 0.75rem, `letter-spacing: 0.2em`, used sparingly for small labels, navigation indicators, and metadata. Color: #8A8A9E (a quiet lavender-gray). **Palette:** The palette is **retro-futuristic** -- combining the warm, sun-faded tones of 1970s print media with unexpected cool technological accents: | Role | Color | Hex | Watercolor Reference | |------|-------|-----|---------------------| | Warm Ground | Cadmium Ochre | #D4A574 | Raw sienna wash, first layer | | Deep Field | Teal Verdigris | #2A6B7C | Viridian mixed with Payne's gray | | Night Sky | Retro Indigo | #1E1E3F | Indigo concentrated, wet-on-dry | | Accent Glow | Electric Coral | #E85D4A | Cadmium red light, diluted | | Paper White | Arches Cream | #F5F0E8 | Untouched cotton rag paper | | Text Body | Ink Charcoal | #3A3A52 | Lamp black with ultramarine undertone | | Highlight | Futurist Mint | #7ECFB3 | Viridian + white gouache | | Subtle Gray | Graphite Mist | #B8B4A8 | Pencil sketch undertone | All backgrounds use CSS gradients that simulate watercolor wash behavior: `background: linear-gradient(175deg, #F5F0E8 0%, #D4A574 35%, #2A6B7C 70%, #1E1E3F 100%)` with individual chapter sections using localized wash palettes. ## Imagery and Motifs **Photography as Watercolor:** All photography is treated with a consistent post-processing language that bridges the gap between camera and paintbrush. Every photograph is displayed through a **watercolor mask** -- irregular, hand-painted-looking clip paths (SVG `` elements with organic, feathered edges rather than geometric rectangles). The masks simulate the effect of painting a water shape on paper and then dropping a photograph into the wet area. **Retro-Patterns as Structural Motifs:** The site's decorative system draws from 1970s environmental graphics and retro-futurist pattern design: 1. **Recycling Chevrons:** Abstracted recycling arrows rendered as watercolor chevron patterns -- three soft-edged arrow shapes arranged in the classic triangular recycling loop but painted with visible brushstrokes and uneven pigment distribution. These appear as section dividers between scroll chapters, each approximately 200px tall, built with SVG paths and CSS filters (`filter: url(#watercolor-roughen)` using an `feTurbulence` + `feDisplacementMap` combination). 2. **Dot Matrix Grids:** Small grids of circular dots (8x8 or 12x12) with each dot painted in a slightly different opacity and hue variation of the chapter's dominant color. These reference the halftone printing of 1970s magazines while maintaining watercolor softness. Built with CSS `radial-gradient` repeated backgrounds. 3. **Wave Interference Lines:** Thin, undulating horizontal lines (1px stroke, spaced 6px apart) that ripple across backgrounds like water spreading on paper. These are SVG `` elements with sine-wave `d` attributes, colored in translucent versions of the palette (#2A6B7C at 15% opacity). 4. **Pigment Bloom Spots:** Circular watercolor blooms (radial gradients with `mix-blend-mode: multiply`) scattered at seemingly random positions but actually placed on a golden-ratio spiral. Each bloom is 80-200px diameter with a concentrated center fading to fully transparent edges. They simulate the accidental beauty of dropping concentrated pigment onto wet paper. 5. **Retro Data Ribbons:** Horizontal bands of color that reference the data-tape aesthetics of 1970s computer printouts, but rendered with watercolor edge treatment -- each ribbon is a `
` with a CSS gradient and `border-image` using an SVG paint-edge pattern. ## Prompts for Implementation **Full-Screen Narrative Immersion:** The site opens with a full-viewport "first wash" sequence. The screen begins as pure Arches Cream (#F5F0E8) -- the blank paper. After 0.5s, a watercolor bloom begins expanding from the center of the viewport: a radial gradient of Cadmium Ochre (#D4A574) that grows from 0px to fill the viewport over 2.5 seconds, animated with CSS `@keyframes` scaling a circle from `scale(0)` to `scale(4)`. As the bloom spreads, it carries with it the faint suggestion of paper grain (a subtle noise texture overlay at 3% opacity using a tiny tiled PNG or CSS `filter: contrast(1.05) brightness(1.02)`). The domain name "recycle.games" fades in at the bloom's center, set in Bebas Neue at 7rem, white, with a 0.8s `opacity` transition beginning at the 1.5s mark. **Scroll-Driven Watercolor Transitions:** As the user scrolls, the background palette shifts continuously using CSS `scroll-timeline` (with JavaScript IntersectionObserver fallback). Each chapter's background is a full-viewport `
` with `position: sticky; top: 0` stacking, so chapters layer over each other as paint layers on paper. The transition between chapters uses `clip-path: polygon()` animations with organic, irregular shapes that simulate paint edges -- not geometric wipes but wobbly, hand-drawn-looking boundaries. **Spring Animation Physics:** All element entrances use spring-based easing rather than standard CSS ease curves. Implement using `animation-timing-function: linear` with keyframes that approximate spring physics (overshoot at 80% then settle). Text blocks spring into view from 30px below their final position with `opacity: 0 -> 1` over 600ms. Image frames spring from `scale(0.92)` to `scale(1.0)` with slight overshoot to `scale(1.02)` before settling. Navigation dots use spring animations on hover, expanding from 12px to 18px diameter with elastic overshoot. **Photography Treatment:** Each photograph is wrapped in a container with `overflow: hidden` and an SVG `` applied. The clip path uses `` elements with deliberately imperfect, hand-drawn-looking curves (generated from bezier control points with small random offsets). On scroll-triggered reveal, the clip path animates from a small irregular blob to its full size over 800ms, simulating the effect of water spreading on paper and revealing the image within. **Interactivity -- Watercolor Cursor Trail:** On desktop, the cursor leaves a faint watercolor trail -- small circular blooms (20-40px diameter) that fade in at 30% opacity and fade out over 2 seconds. Each bloom picks up the dominant color of the chapter the cursor is currently over. Implement with a `mousemove` event listener that spawns absolutely-positioned `
` elements with `border-radius: 50%`, a radial gradient fill, `mix-blend-mode: multiply`, and a CSS animation that transitions `opacity: 0.3 -> 0` and `transform: scale(1) -> scale(1.5)` over 2s, then removes the element from the DOM. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card-based navigation, hamburger menus, footer link columns, testimonial carousels, hero banner with call-to-action button. The site is a contemplative scroll experience, not a conversion funnel. **Paper Grain Texture:** Apply a subtle noise overlay to the entire site using a `::before` pseudo-element on `` with `position: fixed; inset: 0; pointer-events: none; background-image: url(data:image/svg+xml,...)` containing an SVG `feTurbulence` noise pattern at very low opacity (2-4%). This gives every surface the tactile quality of watercolor paper. ## Uniqueness Notes **Differentiators from other designs:** 1. **Watercolor-as-Interface Paradigm:** While watercolor aesthetic appears in only 7% of existing designs, this design goes beyond surface-level watercolor texture overlays. The entire interaction model -- clip-path reveals, bloom expansions, wash transitions, pigment cursor trails -- is derived from the physical behavior of watercolor paint on paper. The interface IS the medium, not decorated by it. 2. **Immersive-Scroll Architecture (1% frequency):** This is one of the very few designs using true immersive-scroll layout rather than traditional sectioned pages. The continuous vertical journey with sticky-stacking chapters and parallax paint layers creates a reading experience closer to scrolling through a physical scroll painting or turning pages of an illustrated atlas than browsing a website. 3. **Bebas Neue vs. Watercolor Tension:** The deliberate contrast between Bebas Neue's rigid, mechanical, all-caps geometry and the soft, uncontrollable organic quality of watercolor backgrounds creates a visual dialectic unique to this design. No other design in the portfolio pairs ultra-condensed industrial typography with painterly fluidity as its core aesthetic tension. 4. **Retro-Futuristic Ecology:** The specific combination of 1970s environmental science aesthetics (recycling chevrons, data ribbons, dot matrix grids) with watercolor painting technique and futurist color accents (Electric Coral #E85D4A, Futurist Mint #7ECFB3) creates a time-displaced visual identity -- simultaneously nostalgic and forward-looking -- that no other design achieves. 5. **Photography-Through-Paint Masking:** The SVG clip-path watercolor mask system for photographs, where images are revealed through organic, hand-painted-looking shapes rather than rectangles, is a distinctive visual technique not found in other designs in the portfolio. **Chosen seed/style:** aesthetic: watercolor, layout: immersive-scroll, typography: bebas-bold, palette: retro-futuristic, patterns: spring, imagery: photography, motifs: retro-patterns, tone: minimal **Avoided overused patterns:** Avoided centered layout (99% frequency), playful aesthetic (95%), mono typography (99%), warm-only palette (100%), vintage motifs (88%), friendly tone (98%). Instead leveraged underused watercolor aesthetic (7%), immersive-scroll layout (1%), bebas-bold typography (3%), retro-futuristic palette (4%), and retro-patterns motifs (2%).