# Design Language for recycle.reviews ## Aesthetics and Tone recycle.reviews channels a dopamine aesthetic — the reward-saturated, pleasure-triggering visual language of social media feedback loops applied to a recycling product reviews platform. The site rewards — bright color explosions celebrating each review, satisfying micro-animations acknowledging engagement, and the addictive quality of a platform that makes reading sustainability reviews feel as compelling as scrolling a social feed. Inspiration draws from the gamification patterns of Duolingo, the reward mechanics of loyalty apps, the confetti-celebration moments of Headspace, and the engagement-maximizing design of TikTok's interface. The tone is whimsical-creative — imaginative, playful language that makes recycling reviews feel like creative discovery adventures. ## Layout Motifs and Structure The layout uses an **asymmetric** architecture — content arranged in deliberately off-balance compositions that create the dynamic, scroll-stopping quality of social feeds designed for engagement. **Asymmetric Architecture:** - Content blocks at varied widths (40%, 55%, 70%) - Alternating alignment: left, right, centered - Feature reviews: full-width celebration moments - Quick reviews: compact cards in loose cluster - Container: max-width: 1000px with asymmetric inner positions - The asymmetry creates the feed-browsing quality of discovering reviews in unexpected positions **Section Sequence:** 1. **Drop:** Hero with bebas-bold title on earth-tones dopamine gradient, geometric-abstract reward burst graphics, leaf-organic environmental accent markers 2. **Feed:** Reviews in asymmetric flow — slide-reveal interactive review emergence with geometric-abstract celebratory illustrations 3. **Highlight:** Featured review in full-width celebration with leaf-organic environmental framing and geometric-abstract confetti burst 4. **Quick Takes:** Compact reviews in loose cluster with leaf-organic quick markers 5. **Streak:** Footer as engagement reward — whimsical-creative farewell with leaf-organic settled growth and playful closing ## Typography and Palette **Typography:** - **Headlines:** "Bebas Neue" (Google Fonts) — bold condensed at 2.8rem-3.8rem, weight 400. Its tall, impactful letterforms create the attention-grabbing quality of social-feed headlines designed to stop scrolling. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Bebas Neue" at 1.4rem for review ratings and category headers. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Earth Warm:** #f8f0e4 — warm earth base for backgrounds - **Earth Sand:** #ece0cc — warm sand for panels - **Earth Terracotta:** #c86838 — rich terracotta for primary accent - **Earth Olive:** #688840 — natural olive for secondary accent - **Earth Plum:** #885868 — warm plum for tertiary accent - **Text Earth:** #281c10 — warm dark for body text - **Shadow Earth:** #988868 — earth shadow for secondary text - **Border Earth:** rgba(200,104,56,0.1) — terracotta tint border ## Imagery and Motifs **Geometric-Abstract Reward Bursts:** Review celebrations illustrated through geometric burst patterns — radiating lines (1px, 20-40px) from center points, starburst circles (16-24px), and confetti rectangles (4x8px, rotated) in Earth Terracotta and Earth Olive at 0.1-0.15 opacity. The bursts create the dopamine-hit quality of each review feeling like a rewarded achievement. **Slide-Reveal Review Emergence:** Reviews enter with slide reveals — translateX(-40px) to translateX(0) for left-aligned, translateX(40px) for right-aligned, over 400ms ease-out on scroll. The slide creates the social-feed quality of new content sliding into view. **Leaf-Organic Environmental Markers:** Small leaf shapes (10-16px, SVG curved paths) in Earth Olive at 0.12 opacity as sustainability rating indicators and eco-friendly badges. The leaves create the environmental quality of recycling reviews connected to natural growth. **Earth-Tones Dopamine Warmth:** Background uses warm earth with reward-energy accents — radial-gradient(at 40% 30%, rgba(200,104,56,0.03), transparent 35%), radial-gradient(at 60% 70%, rgba(104,136,64,0.02), transparent 30%). The earth tones ground dopamine energy in sustainable, natural warmth. **Rating Stars as Eco-Badges:** Review ratings displayed as leaf-shaped badges (not stars) — SVG leaf clip-path, filled in Earth Olive for earned badges, Earth Sand outline for remaining. The eco-badges create the unique quality of sustainability-specific rating visual language. ## Prompts for Implementation Build the page as a dopamine recycling review feed. Asymmetric: .review-feed { max-width: 1000px; margin: 0 auto; padding: 60px 24px; } .review-card { width: var(--card-width, 55%); } .review-card:nth-child(odd) { margin-right: auto; } .review-card:nth-child(even) { margin-left: auto; } .review-card:nth-child(3n) { margin: 0 auto; width: 70%; } Slide-reveal: .review-card:nth-child(odd) { opacity: 0; transform: translateX(-40px); transition: all 400ms ease-out; } .review-card:nth-child(even) { opacity: 0; transform: translateX(40px); transition: all 400ms ease-out; } .review-card.visible { opacity: 1; transform: translateX(0); } Reward burst: .burst-circle { position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(200,104,56,0.12); } .confetti-bit { width: 4px; height: 8px; background: var(--confetti-color, rgba(200,104,56,0.12)); transform: rotate(var(--confetti-angle, 30deg)); } Eco-badge: .eco-leaf { clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%); width: 16px; height: 16px; background: var(--leaf-fill, #688840); } Earth panel: .review-panel { background: #ece0cc; border: 1px solid rgba(200,104,56,0.1); border-radius: 12px; padding: 24px; } AVOID: Standard review aggregator platforms, corporate sustainability review sites, and minimal product rating systems. Let dopamine reward energy and whimsical-creative imagination create a recycling review feed where every review feels like a celebrated creative discovery. ## Uniqueness Notes 1. **Dopamine for recycling reviews:** Reward-driven design makes reading sustainability reviews as compelling as scrolling a social media feed. 2. **Slide-reveal as feed discovery:** Sliding reviews create the social-feed quality of new content appearing with satisfying motion. 3. **Eco-badges as leaf ratings:** Leaf-shaped rating badges replace standard stars with sustainability-specific visual language. 4. **Geometric-abstract as confetti bursts:** Reward graphics celebrate each review with the dopamine hit of achievement acknowledgment. 5. **Earth-tones dopamine grounding:** Natural warm colors ground reward-driven energy in sustainable, organic warmth. **Seed/Style:** aesthetic: dopamine, layout: asymmetric, typography: bebas-bold, palette: earth-tones, patterns: slide-reveal, imagery: geometric-abstract, motifs: leaf-organic, tone: whimsical-creative **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 dopamine aesthetic, asymmetric layout, earth-tones palette, geometric-abstract imagery, and whimsical-creative tone.