# Design Language for ppuzzle.org ## Aesthetics and Tone ppuzzle.org channels a wabi-sabi aesthetic — the Japanese philosophy of beauty in imperfection applied to the Political Puzzle organization platform. The site accepts — surfaces carrying the dignified wear of purpose, asymmetric compositions embracing natural irregularity, and the quiet confidence of an organization that values substance over polish. Inspiration draws from the kintsugi philosophy of golden repair, the weathered wood of Japanese temple architecture, the irregular beauty of handmade ceramics, and the imperfect grace of traditional calligraphy. The tone is tech-tutorial — clear, instructional language that guides users through political puzzle concepts with the patient clarity of a well-written tutorial. ## Layout Motifs and Structure The layout uses a **hero-dominant** architecture — content anchored by large, immersive hero sections that establish each political puzzle topic with visual weight before flowing into detailed content. **Hero Dominant Architecture:** - Hero sections: 70-90vh with immersive topic establishment - Supporting content: max-width: 800px flowing beneath heroes - Mini-heroes at 40vh for secondary topics - Each hero a contemplative moment of wabi-sabi beauty - Container: full-width heroes, 800px body content - The heroes create contemplative pauses between tutorial content **Section Sequence:** 1. **Foundation:** Hero with variable-fluid title on jewel-tones wabi-sabi gradient, minimal clean organizational illustrations, aurora-lights atmospheric color accents 2. **Lessons:** Tutorial content in hero-to-content flow — stagger interactive step animations with minimal clean step illustrations 3. **Practice:** Applied exercises in mini-hero moments with aurora-lights ambient color shifts and minimal focused interface 4. **Mastery:** Advanced concepts in focused content with minimal precise diagrams 5. **Rest:** Footer as contemplative rest — tech-tutorial closing with aurora-lights settled glow and patient farewell ## Typography and Palette **Typography:** - **Headlines:** "Literata" (Google Fonts) — variable serif at 2rem-3rem, weight 700, using optical size axis. Its fluid variable nature embodies wabi-sabi's acceptance of change and impermanence. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for code examples and puzzle notation. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Jewel Indigo:** #101028 — deep jewel indigo for backgrounds - **Jewel Surface:** #181838 — rich jewel for panels - **Jewel Sapphire:** #3860b8 — sapphire blue for primary accent - **Jewel Emerald:** #38a068 — emerald green for secondary accent - **Jewel Gold:** #c8a038 — jewel gold for tertiary accent - **Moon Light:** #d0d4e0 — moonlight for text - **Shadow Jewel:** #303050 — jewel shadow for secondary text - **Border Jewel:** rgba(56,96,184,0.1) — sapphire border ## Imagery and Motifs **Minimal Clean Organization:** Political puzzle concepts illustrated through minimal, clean graphics — simple geometric shapes (circles, lines, rectangles) in Jewel Sapphire and Jewel Emerald. Thin strokes (1.5px), no fills. The minimalism creates the wabi-sabi quality of objects reduced to their essential forms. **Stagger Tutorial Steps:** Tutorial content enters with staggered timing — each step delayed by calc(var(--i) * 100ms) with opacity 0 to 1 and translateY(12px) to translateY(0) over 400ms ease-out. The stagger creates the patient, sequential quality of a well-paced tutorial. **Aurora-Lights Atmospheric Color:** Soft aurora-style color shifts — radial-gradient(at 30% 40%, rgba(56,96,184,0.04), transparent 40%), radial-gradient(at 70% 60%, rgba(56,160,104,0.03), transparent 40%), radial-gradient(at 50% 80%, rgba(200,160,56,0.02), transparent 30%). The multi-color aurora creates atmospheric warmth without competing with tutorial clarity. **Jewel-Tones Wabi-Sabi Depth:** Deep jewel backgrounds with subtle variation — panels at slightly different depths of indigo creating the wabi-sabi quality of surfaces that are similar but never identical. The rich palette honors the precious quality of knowledge being shared. **Wabi-Sabi Surface Imperfection:** Panel borders with slight irregularity — border-radius varying per corner (border-radius: 6px 4px 5px 7px), subtle asymmetric padding. The gentle imperfection embodies wabi-sabi's celebration of the beautifully irregular. ## Prompts for Implementation Build the page as a wabi-sabi tutorial organization. Hero: .wabi-hero { min-height: 70vh; display: flex; align-items: center; justify-content: center; } .tutorial-content { max-width: 800px; margin: 0 auto; padding: 60px 24px; } Stagger: .step { opacity: 0; transform: translateY(12px); transition: all 400ms ease-out; transition-delay: calc(var(--i) * 100ms); } .step.visible { opacity: 1; transform: translateY(0); } Aurora: body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(at 30% 40%, rgba(56,96,184,0.04), transparent 40%), radial-gradient(at 70% 60%, rgba(56,160,104,0.03), transparent 40%); pointer-events: none; } Wabi panel: .wabi-panel { background: #181838; border: 1px solid rgba(56,96,184,0.1); border-radius: 6px 4px 5px 7px; padding: 30px 28px 28px 30px; } Minimal illustration: .org-graphic svg { stroke: var(--graphic-color, #3860b8); stroke-width: 1.5; fill: none; } AVOID: Standard organization websites, corporate nonprofit platforms, and polished tutorial sites. Let wabi-sabi imperfection and tech-tutorial clarity create a Political Puzzle organization where knowledge is shared with patient beauty and honest simplicity. ## Uniqueness Notes 1. **Wabi-sabi for political org:** Beauty-in-imperfection philosophy makes the organization feel genuine and substance-focused rather than polished and hollow. 2. **Hero-dominant as contemplative pause:** Large hero sections create meditative moments between tutorial content. 3. **Stagger as patient teaching:** Sequentially appearing steps create the unhurried quality of a well-paced tutorial. 4. **Aurora-lights as atmospheric warmth:** Multi-color aurora creates rich atmosphere without competing with instructional clarity. 5. **Wabi-sabi borders as honest design:** Slightly irregular surfaces embody the organization's commitment to substance over appearance. **Seed/Style:** aesthetic: wabi-sabi, layout: hero-dominant, typography: variable-fluid, palette: jewel-tones, patterns: stagger, imagery: minimal, motifs: aurora-lights, tone: tech-tutorial **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 wabi-sabi aesthetic, hero-dominant layout, jewel-tones palette, minimal imagery, and tech-tutorial tone.