# Design Language for polytical.club ## Aesthetics and Tone polytical.club channels an isometric aesthetic — the precise, dimensional projection of 3D objects onto 2D planes applied to a polytical (poly-political) discussion club platform. The site builds — content rendered in isometric projection creating miniature architectural models of political discourse, where every concept has visible structure and every argument has measurable dimensions. Inspiration draws from the isometric pixel art of eBoy, the architectural axonometric drawings of OMA/Rem Koolhaas, the isometric game worlds of Monument Valley, and the technical illustration precision of Hayao Miyazaki's aircraft drawings. The tone is opulent-grand — lavish, ceremonial language that treats political discussion as a grand salon tradition worthy of the finest intellectual theaters. ## Layout Motifs and Structure The layout uses a **minimal-navigation** architecture — content accessed through a stripped-down, elegant navigation system that emphasizes content over chrome, letting the isometric visual world take center stage. **Minimal Navigation Architecture:** - Navigation: simple horizontal bar with 4-5 text links, no hamburger - Content: single focused view, no sidebar distractions - Main content: max-width: 880px centered - Navigation fixed at top, transparent until scroll - Container: max-width: 880px centered - The minimal navigation lets isometric worlds fill the viewport **Section Sequence:** 1. **Grand Hall:** Hero with art-deco-display title on retro-futuristic isometric gradient, paper-aged vintage political illustrations, floral-botanical ornamental discussion garlands 2. **Salon:** Discussion topics in minimal-nav content — slide-reveal interactive topic card animations with paper-aged vintage discussion surfaces 3. **Chamber:** Featured debates in isometric scene compositions with floral-botanical decorative frames and paper-aged antiqued surfaces 4. **Gallery:** Member contributions in isometric gallery with paper-aged collector treatment 5. **Curtain:** Footer as grand closing — opulent-grand ceremonial farewell with floral-botanical final wreath and salon traditions sign-off ## Typography and Palette **Typography:** - **Headlines:** "Poiret One" (Google Fonts) — art-deco display at 2.5rem-3.5rem, weight 400. Its thin, geometric art-deco letterforms create the grand, theatrical quality of a political salon's engraved invitations. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.75. - **Accent:** "Poiret One" at 1.2rem for topic titles and salon labels. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Retro Charcoal:** #1c1820 — deep retro charcoal for backgrounds - **Salon Surface:** #282030 — rich salon purple-dark for panels - **Retro Gold:** #d0a838 — warm retro gold for primary accent - **Retro Teal:** #38a0a0 — retro teal for secondary accent - **Retro Coral:** #d07058 — retro coral for tertiary accent - **Cream Light:** #f0e8d8 — cream for text on dark - **Shadow Salon:** #504060 — salon shadow for secondary text - **Border Retro:** rgba(208,168,56,0.1) — retro gold border ## Imagery and Motifs **Paper-Aged Vintage Surfaces:** Discussion panels treated with vintage aging — background: linear-gradient(135deg, rgba(208,168,56,0.03), rgba(208,112,88,0.02)) with subtle noise texture (SVG feTurbulence at 0.02, opacity 0.04). The aging transforms digital discussions into collected vintage salon artifacts. **Slide-Reveal Topic Cards:** Discussion topics slide into view — translateX(-30px) to translateX(0) with opacity 0 to 1 over 400ms ease-out, staggered by 80ms. The sliding creates the theatrical quality of curtains drawing back to reveal each discussion topic. **Floral-Botanical Ornamental Frames:** Discussion sections framed with decorative botanical elements — SVG vine and leaf motifs (30-60px) in Retro Gold and Retro Teal at 0.06-0.1 opacity positioned at corners and section dividers. The botanical ornamentation creates the grand salon quality of discussions framed by cultivated nature. **Retro-Futuristic Isometric Atmosphere:** Backgrounds use retro-futuristic tones with isometric grid undertone — background-image: repeating-linear-gradient(30deg, rgba(208,168,56,0.01) 0px, transparent 1px, transparent 20px) creating a faint isometric grid. The retro palette combined with geometric structure creates architectural political space. **Isometric Discussion Architecture:** Key discussion concepts rendered as isometric building blocks — CSS transforms (rotateX(60deg) rotateZ(45deg)) creating flat isometric faces with visible top and side. Blocks in Retro Gold, Teal, and Coral at varying opacities. The isometric rendering gives political ideas visible, architectural structure. ## Prompts for Implementation Build the page as an isometric political salon. Minimal nav: .salon-nav { position: fixed; top: 0; width: 100%; padding: 16px 24px; display: flex; justify-content: center; gap: 32px; z-index: 10; background: transparent; transition: background 200ms; } .salon-nav.scrolled { background: rgba(28,24,32,0.95); } Content: .salon-content { max-width: 880px; margin: 0 auto; padding: 80px 24px; } Slide-reveal: .topic-card { opacity: 0; transform: translateX(-30px); transition: all 400ms ease-out; transition-delay: calc(var(--i) * 80ms); } .topic-card.visible { opacity: 1; transform: translateX(0); } Isometric block: .iso-block { transform: rotateX(60deg) rotateZ(45deg); width: 60px; height: 60px; background: var(--block-color, rgba(208,168,56,0.15)); } Floral frame: .botanical-corner { position: absolute; opacity: 0.08; } .botanical-corner svg { stroke: var(--flora-color, #d0a838); stroke-width: 1; fill: none; } AVOID: Corporate political forums, minimal discussion apps, and standard club platforms. Let isometric architectural precision and opulent-grand ceremonial language create a political salon where discourse is built like a grand architectural achievement. ## Uniqueness Notes 1. **Isometric for political club:** Dimensional projection gives political concepts visible, architectural structure and measurable weight. 2. **Minimal-navigation as theatrical focus:** Stripped navigation lets the grand isometric world of political discussion take center stage. 3. **Slide-reveal as curtain drawing:** Topics sliding into view create the theatrical quality of salon discussions being ceremonially unveiled. 4. **Floral-botanical as salon ornament:** Decorative botanical frames create the cultivated grandeur of historical political salons. 5. **Paper-aged as vintage collection:** Aged surfaces transform digital discussions into precious artifacts of intellectual exchange. **Seed/Style:** aesthetic: isometric, layout: minimal-navigation, typography: art-deco-display, palette: retro-futuristic, patterns: slide-reveal, imagery: paper-aged, motifs: floral-botanical, tone: opulent-grand **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 isometric aesthetic, minimal-navigation layout, retro-futuristic palette, paper-aged imagery, and opulent-grand tone.