# Design Language for recycle.studio ## Aesthetics and Tone recycle.studio channels a dopamine aesthetic — the vibrant, reward-saturated visual language of maximum engagement applied to a recycling creative studio and workshop platform. The site energizes — bold color collisions, satisfying interaction feedback, and the motivating quality of creative work that celebrates every sustainable creation. Inspiration draws from the collaborative energy of WeWork creative spaces, the dopamine-driven design of Notion's interface celebrations, the creative workshop aesthetics of Skillshare, and the maker-culture energy of Instructables. The tone is elegant-sophisticated — refined, articulate language that elevates recycling craft to studio-quality creative practice. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — content divided into complementary halves that create the workshop quality of process on one side and result on the other. **Split Screen Architecture:** - Two-column split: 50/50 or 55/45 depending on content - Left panel: process documentation, instructions - Right panel: visual results, finished work - Feature sections: full-width breaking the split - Container: max-width: 1120px with split inner grid - The split creates the workshop-bench quality of materials on one side, finished work on the other **Section Sequence:** 1. **Studio:** Hero with slab-serif title on midnight-blue dopamine gradient, nature-elements environmental illustrations, floral-botanical decorative accents 2. **Workshop:** Studio projects in split panels — tilt-3d interactive project examination with nature-elements material illustrations 3. **Masterwork:** Featured project in full-width break with floral-botanical immersive framing and nature-elements detailed elements 4. **Materials:** Resource library in alternating split with floral-botanical organic dividers 5. **Close:** Footer as studio closing — elegant-sophisticated farewell with floral-botanical settled arrangements and refined sign-off ## Typography and Palette **Typography:** - **Headlines:** "Bitter" (Google Fonts) — slab serif at 2.4rem-3.2rem, weight 700. Its sturdy, craftsman-like forms create the workshop-signage quality of a creative studio that takes its craft seriously. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Bitter" at 1.1rem, weight 500 for project titles and material labels. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Midnight Deep:** #0c1020 — deep midnight for backgrounds - **Midnight Surface:** #141828 — rich midnight for panels - **Midnight Cyan:** #38b8d8 — bright cyan for primary accent - **Midnight Coral:** #e87868 — warm coral for secondary accent - **Midnight Lime:** #88d848 — bright lime for tertiary accent (recycling green) - **Moon Light:** #d0d4e0 — cool moonlight for text - **Shadow Midnight:** #283040 — midnight shadow for secondary text - **Border Midnight:** rgba(56,184,216,0.1) — cyan tint border ## Imagery and Motifs **Nature-Elements Environmental Illustrations:** Studio materials illustrated through natural element graphics — leaf textures, wood grain patterns, water droplet forms (20-40px) in Midnight Cyan and Midnight Lime with 1.5px strokes. The nature elements create the material-honesty quality of a studio working with recycled natural resources. **Tilt-3D Project Examination:** Project cards respond to cursor with perspective tilt — transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) with max 5deg. Transition: 150ms ease-out. The tilt creates the workshop quality of picking up and examining a handmade object. **Floral-Botanical Studio Decoration:** Decorative botanical elements — simplified flower and leaf SVGs (24-40px) in Midnight Coral and Midnight Lime at 0.06-0.1 opacity as section accents and project category markers. The botanical elements create the studio-garden quality of creative work surrounded by natural beauty. **Midnight-Blue Dopamine Atmosphere:** Background uses deep midnight with dopamine-bright accent punctuation — radial-gradient(at 40% 30%, rgba(56,184,216,0.03), transparent 35%), radial-gradient(at 60% 70%, rgba(232,120,104,0.02), transparent 30%), radial-gradient(at 50% 50%, rgba(136,216,72,0.015), transparent 25%). The midnight depth with bright accents creates the late-night studio quality of creative energy after dark. **Workbench Texture:** Panel surfaces feature subtle wood-grain texture — repeating-linear-gradient(95deg, transparent, transparent 4px, rgba(56,184,216,0.008) 4px, rgba(56,184,216,0.008) 5px). The texture creates the workshop-bench quality of a creative surface with history. ## Prompts for Implementation Build the page as a dopamine recycling creative studio. Split: .studio-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1120px; margin: 0 auto; padding: 80px 24px; } .studio-full { grid-column: 1 / -1; } Tilt-3d: .project-card { transition: transform 150ms ease-out; transform-style: preserve-3d; } /* JS: track cursor, apply perspective rotation maxing at 5deg */ Nature elements: .nature-svg svg { stroke: var(--nature-color, #38b8d8); stroke-width: 1.5; fill: none; stroke-linecap: round; } Floral accent: .botanical-accent svg { stroke: var(--floral-color, rgba(232,120,104,0.08)); stroke-width: 1; fill: none; } Workbench texture: .bench-surface { position: relative; } .bench-surface::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(95deg, transparent, transparent 4px, rgba(56,184,216,0.008) 4px, rgba(56,184,216,0.008) 5px); pointer-events: none; } Studio panel: .studio-card { background: #141828; border: 1px solid rgba(56,184,216,0.1); border-radius: 8px; padding: 24px; } AVOID: Standard craft platforms, corporate sustainability workshops, and minimal maker spaces. Let dopamine energy and elegant-sophisticated language create a recycling studio where sustainable creation is celebrated as premium creative practice. ## Uniqueness Notes 1. **Dopamine for recycling studio:** Reward-driven energy makes sustainable creation feel vibrant and motivating rather than obligatory. 2. **Split-screen as workshop bench:** Process/result duality creates the craft quality of seeing materials transform into finished work. 3. **Tilt-3D as object examination:** Perspective response creates the physical quality of picking up handmade objects in a workshop. 4. **Midnight-blue as late-night studio:** Deep palette with bright accents creates the focused energy of creative work done after hours. 5. **Workbench texture as craft surface:** Subtle wood-grain creates the tactile quality of a well-used creative workbench. **Seed/Style:** aesthetic: dopamine, layout: split-screen, typography: slab-serif, palette: midnight-blue, patterns: tilt-3d, imagery: nature-elements, motifs: floral-botanical, tone: elegant-sophisticated **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, split-screen layout, midnight-blue palette, nature-elements imagery, and elegant-sophisticated tone.