# Design Language for recycle.wiki ## Aesthetics and Tone recycle.wiki channels a pop-art aesthetic — the bold, graphic impact of commercial art elevated to cultural commentary applied to a recycling knowledge wiki platform. The site pops — oversized halftone patterns, stark color blocks, and the confident visual punch of sustainability knowledge presented with the same graphic boldness as consumer advertising. Inspiration draws from the mass-production commentary of Andy Warhol, the comic-strip narratives of Roy Lichtenstein, the graphic activism of Keith Haring, and the typographic boldness of Barbara Kruger. The tone is futuristic-cutting-edge — forward-looking, technology-forward language that positions recycling knowledge as the most important information of the future. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — content organized in a bold grid that showcases recycling knowledge articles with the graphic impact of a pop-art gallery wall. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(260px, 1fr)) with varied heights - Cards: bold styling (thick borders, vivid backgrounds) - Feature articles span 2 columns for graphic emphasis - Gap: 12px between cards - Container: max-width: 1040px centered - The grid creates the gallery-wall quality of pop-art prints arranged for maximum visual impact **Section Sequence:** 1. **Splash:** Hero with handwritten title on neon-electric pop gradient, glitch-art bold visual distortion, tropical-fish playful accent elements 2. **Articles:** Knowledge entries in portfolio grid — scale-hover interactive zoom engagement with glitch-art graphic textures 3. **Feature:** Highlighted article in double-span with tropical-fish decorative accents and glitch-art immersive visual treatment 4. **Index:** Quick-reference entries in compact grid with tropical-fish category markers 5. **End Credits:** Footer as pop closing — futuristic-cutting-edge sign-off with tropical-fish settled accents and bold farewell ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) — handwritten script at 2.5rem-3.5rem, weight 700. Its casual, hand-lettered quality creates the graffiti-marker quality of knowledge scrawled with urgent importance. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "Caveat" at 1.2rem, weight 400 for article annotations and wiki marginalia. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Pop Black:** #0c0c10 — deep pop black for backgrounds - **Pop Surface:** #181820 — dark surface for panels - **Neon Green:** #38e868 — electric green for primary accent (recycling) - **Neon Pink:** #f838a8 — vivid pink for secondary accent - **Neon Yellow:** #e8e828 — electric yellow for tertiary accent - **Pop White:** #f0f0f8 — bright white for text - **Shadow Pop:** #383840 — pop shadow for secondary text - **Border Neon:** rgba(56,232,104,0.1) — green neon border ## Imagery and Motifs **Glitch-Art Visual Distortion:** Wiki panels feature pop-art glitch effects — horizontal color-channel offset (2px Neon Green, -2px Neon Pink) on key visual elements at 0.06 opacity. The glitch creates the screen-printed misregistration quality of pop-art production. **Scale-Hover Zoom Engagement:** Knowledge cards zoom on hover — transform: scale(1.04) with box-shadow expanding from 0 2px 8px to 0 8px 24px rgba(56,232,104,0.06) over 200ms ease. The zoom creates the quality of leaning in to examine a pop-art piece in a gallery. **Tropical-Fish Playful Accents:** Small decorative tropical fish shapes (SVG, 16-24px) in Neon Pink and Neon Yellow at 0.08-0.12 opacity scattered as article category markers and section decorations. The fish create the playful pop-art quality of unexpected decorative elements elevating serious content. **Neon-Electric Pop Atmosphere:** Background uses deep black with electric accent bursts — radial-gradient(at 30% 40%, rgba(56,232,104,0.03), transparent 30%), radial-gradient(at 70% 60%, rgba(248,56,168,0.02), transparent 25%), radial-gradient(at 50% 80%, rgba(232,232,40,0.015), transparent 20%). The neon creates the electric-sign quality of recycling knowledge illuminated in bold color. **Halftone Dot Pattern:** Panel backgrounds with halftone dots — radial-gradient(circle, currentColor 1px, transparent 1px) at background-size: 6px 6px and 0.03 opacity. The dots create the Ben-Day quality of comic-book printing enlarged to decorative scale. ## Prompts for Implementation Build the page as a pop-art recycling knowledge gallery. Portfolio: .wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-width: 1040px; margin: 0 auto; padding: 60px 24px; } .wiki-feature { grid-column: span 2; } Scale-hover: .wiki-card { transition: transform 200ms ease, box-shadow 200ms ease; } .wiki-card:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(56,232,104,0.06); } Glitch: .glitch-text { position: relative; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; left: 0; top: 0; } .glitch-text::before { color: rgba(56,232,104,0.06); transform: translateX(2px); } .glitch-text::after { color: rgba(248,56,168,0.06); transform: translateX(-2px); } Tropical fish: .fish-accent svg { stroke: var(--fish-color, rgba(248,56,168,0.1)); stroke-width: 1.5; fill: none; } Halftone: .halftone::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 6px 6px; pointer-events: none; } AVOID: Standard wiki platforms, corporate knowledge bases, and minimal encyclopedia layouts. Let pop-art boldness and futuristic-cutting-edge language create a recycling wiki where environmental knowledge is presented with the graphic impact of the most important art movement of our time. ## Uniqueness Notes 1. **Pop-art for recycling wiki:** Bold graphic art language makes environmental knowledge feel culturally urgent rather than academically dry. 2. **Handwritten as graffiti urgency:** Casual script creates the quality of knowledge scrawled with the urgency of important street communication. 3. **Glitch-art as print misregistration:** Color-channel offset creates the screen-printing quality of pop-art production processes. 4. **Tropical-fish as pop decoration:** Unexpected playful elements elevate serious recycling content with pop-art's signature irreverence. 5. **Neon-electric as illuminated knowledge:** Bold neon colors create the electric-sign quality of recycling facts that demand attention. **Seed/Style:** aesthetic: pop-art, layout: portfolio-grid, typography: handwritten, palette: neon-electric, patterns: scale-hover, imagery: glitch-art, motifs: tropical-fish, tone: futuristic-cutting-edge **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 pop-art aesthetic, portfolio-grid layout, neon-electric palette, glitch-art imagery, and futuristic-cutting-edge tone.