# Design Language for polytics.club ## Aesthetics and Tone polytics.club channels a graffiti aesthetic — the raw, expressive visual energy of street art and urban writing culture applied to a politics discussion club platform. The site speaks from the walls — bold, unapologetic expressions of political thought rendered with the spray-can confidence of artists who claim public space for public discourse. Inspiration draws from the wildstyle graffiti of DONDI, the political street art of Banksy, the tag typography of urban writing culture, and the mural activism of the Chicano Art Movement. The tone is approachable-casual — relaxed, street-smart language that makes political discussion feel like a park-bench conversation rather than a lecture hall seminar. ## Layout Motifs and Structure The layout uses a **hero-dominant** architecture — content anchored by large, immersive hero sections that function like building walls where political statements are displayed in bold, mural-scale presentations. **Hero Dominant Architecture:** - Hero sections: 70-100vh with mural-scale content - Supporting content: max-width: 800px flowing beneath heroes - Mini-heroes at 40vh for secondary political statements - Each hero a wall for political expression - Container: full-width heroes, 800px body content - The heroes are walls — the graffiti canvas for political thought **Section Sequence:** 1. **Wall:** Hero as tagged building facade with humanist title on burnt-orange street gradient, lens-flare urban light effects, vintage street culture marker accents 2. **Crew:** Club members in hero-to-content flow — lottie-animation interactive tag animations with lens-flare spotlight highlights 3. **Throw-Up:** Quick political takes in bold hero moments with vintage street-culture frame elements 4. **Piece:** Long-form political pieces in contained content with lens-flare reading light 5. **Tag:** Footer as artist tag — approachable-casual sign-off with vintage street culture seal and crew credit ## Typography and Palette **Typography:** - **Headlines:** "Source Sans 3" (Google Fonts) — humanist sans at 2.5rem-3.5rem, weight 700. Its warm, readable forms create the accessible voice of street-smart political commentary. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Source Sans 3" at 1.1rem, weight 600 for discussion tags and crew labels. - **Labels:** "Source Sans 3" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Concrete Dark:** #181410 — dark concrete for backgrounds - **Wall Surface:** #282018 — warm wall surface for panels - **Burnt Orange:** #d07028 — hot burnt orange for primary accent - **Spray Teal:** #28a8a0 — spray-can teal for secondary accent - **Spray Magenta:** #c84888 — spray magenta for tertiary accent - **Wall White:** #f0e8d8 — wall-white for text - **Shadow Concrete:** #584838 — concrete shadow for secondary text - **Border Tag:** rgba(208,112,40,0.12) — tag-colored border ## Imagery and Motifs **Lens-Flare Urban Spotlights:** Street-light effects — radial-gradient spots (100-150px) in Burnt Orange (rgba(208,112,40,0.05)) and Spray Teal (rgba(40,168,160,0.03)) positioned as if cast by overhead streetlights. The flares create the nocturnal quality of graffiti illuminated by urban lighting. **Lottie-Animation Tag Movement:** Political discussion tags feature subtle animation (CSS-animated SVG) — gentle wobble (rotate(-1deg) to rotate(1deg) over 2s), with color shift on hover. The movement gives political tags the living quality of fresh spray paint still settling. **Vintage Street Culture Markers:** Retro street-culture elements — SVG crown symbols (20px), arrow markers, and star tags in Burnt Orange and Spray Magenta at 0.08-0.12 opacity. Positioned as if tagged onto content sections by club members. **Burnt-Orange Concrete Warmth:** Backgrounds use warm concrete tones — radial-gradient(at 40% 60%, rgba(208,112,40,0.03), transparent 50%) on Concrete Dark. The warmth suggests sun-baked walls where political graffiti has aged into the architecture. **Hero as Building Wall:** Each hero section uses subtle texture (SVG noise at 0.03 opacity) creating the concrete-wall quality of a building facade. Content positioned as if written/sprayed on the wall — slightly off-grid, asymmetric text placement within the centered container. ## Prompts for Implementation Build the page as a graffiti political club. Hero: .wall-hero { min-height: 70vh; display: flex; align-items: center; position: relative; } .wall-hero.full { min-height: 100vh; } .wall-content { max-width: 800px; margin: 0 auto; padding: 60px 24px; } Tag animation: .tag-element { animation: tagWobble 2s ease-in-out infinite; } @keyframes tagWobble { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } } Street markers: .street-marker { position: absolute; opacity: 0.1; } .street-marker svg { width: 20px; height: 20px; fill: var(--marker-color, #d07028); } Lens flare: .urban-light { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--light-color, rgba(208,112,40,0.05)), transparent 70%); width: 150px; height: 150px; pointer-events: none; } Wall texture: .wall-surface { position: relative; } .wall-surface::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background: url("data:image/svg+xml,..."); pointer-events: none; } AVOID: Polished political platforms, corporate discussion forums, and academic political sites. Let graffiti energy and approachable-casual language create a political club where discourse has the raw authenticity of street art and the warmth of park-bench conversation. ## Uniqueness Notes 1. **Graffiti for political club:** Raw street art energy makes political discussion feel like authentic public expression rather than institutional debate. 2. **Hero-dominant as building walls:** Large hero sections function as concrete facades where political statements are displayed at mural scale. 3. **Lottie-animation as fresh tags:** Subtle wobble animation gives political content the living quality of spray paint still settling on walls. 4. **Burnt-orange as sun-baked concrete:** Warm palette creates the atmospheric quality of political graffiti aged into urban architecture. 5. **Vintage markers as crew culture:** Street-culture symbols create the community identity of a political crew marking their territory. **Seed/Style:** aesthetic: graffiti, layout: hero-dominant, typography: humanist, palette: burnt-orange, patterns: lottie-animation, imagery: lens-flare, motifs: vintage, tone: approachable-casual **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses graffiti aesthetic, hero-dominant layout, burnt-orange palette, lens-flare imagery, and approachable-casual tone.