# Design Language for politics.quest ## Aesthetics and Tone politics.quest channels a skeuomorphic aesthetic — the rich, tactile material simulation of physical objects rendered digitally, applied to a political quest and civic engagement platform. The site feels crafted — leather-bound policy folders, stitched navigation tabs, embossed government seals, and the reassuring weight of materials that suggest institutions built to last. Inspiration draws from the skeuomorphic era of Apple's iOS 6, the leather-tooled surfaces of traditional legal stationery, the embossed seals of government documents, and the tactile warmth of hand-bound journals. The tone is grounded-earthy — rooted, pragmatic language that treats political engagement as practical citizenship built on solid, tangible foundations. ## Layout Motifs and Structure The layout uses an **f-pattern** architecture — content organized in the natural F-shaped reading pattern of civic documents and government publications, with clear hierarchical scanning paths. **F-Pattern Architecture:** - Strong left-margin headline hierarchy - Top horizontal bar: featured civic quest spanning full width - Primary content: 60%, sidebar resources: 35% - Consistent headline positions for scanline reading - Container: max-width: 960px centered - The f-pattern creates the civic document reading quality **Section Sequence:** 1. **Charter:** Hero with geometric-sans title on midnight-blue skeuomorphic gradient, mixed-media textured civic imagery, floating-elements dimensional document layers 2. **Quest:** Political quests in f-pattern flow — path-draw-svg interactive civic path illustrations with mixed-media collage evidence 3. **Policy:** Policy deep-dives in sidebar-paired format with floating-elements layered document panels and mixed-media legislative illustrations 4. **Action:** Civic action items in scanline-optimized format with mixed-media action-item markers 5. **Seal:** Footer as official seal — grounded-earthy closing with floating-elements settled document and civic commitment stamp ## Typography and Palette **Typography:** - **Headlines:** "Outfit" (Google Fonts) — geometric sans at 2.2rem-3rem, weight 700. Its clean geometric precision creates the authoritative civic voice of government-grade typography. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Outfit" at 1rem, weight 600 for quest objectives and policy labels. - **Labels:** "Outfit" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Navy Midnight:** #0c1020 — deep navy midnight for backgrounds - **Document Surface:** #161c2c — dark document blue for panels - **Civic Blue:** #3068b0 — strong civic blue for primary accent - **Brass Seal:** #c8a040 — warm brass for secondary accent - **Parchment:** #e8dcc8 — warm parchment for tertiary accent - **Bright Doc:** #d8e0ec — bright document white for text - **Shadow Navy:** #2c3848 — navy shadow for secondary text - **Border Civic:** rgba(48,104,176,0.1) — civic blue border ## Imagery and Motifs **Mixed-Media Civic Collage:** Political content illustrated through mixed-media collage — layered SVG elements combining document textures, seal stamps, and civic iconography. Thin-stroke civic icons (scales of justice, ballot boxes, capitol domes, 24-32px) in Civic Blue and Brass Seal. The collage creates the rich, layered quality of civic history visualized. **Path-Draw-SVG Civic Pathways:** Civic quest paths drawn with animated SVG stroke — stroke-dasharray/dashoffset animation drawing path lines from start to end over 1.5s ease-in-out on scroll. Paths connect quest steps like a civic roadmap. The drawing motion creates the quality of civic engagement as a mapped, navigable journey. **Floating-Elements Document Layers:** Multiple document-like panels (rectangles with subtle shadow and rotation) floating at different z-depths. Background layers at 0.03 opacity with transform: rotate(1-3deg), foreground accents at 0.06 with slight offset. The layering creates the skeuomorphic quality of stacked civic documents. **Midnight-Blue Institutional Depth:** Backgrounds use deep navy tones — radial-gradient(at 50% 30%, rgba(48,104,176,0.03), transparent 50%) on Navy Midnight. The institutional palette creates the serious, foundational atmosphere of civic architecture. **Skeuomorphic Material Surfaces:** Panels feature stitched borders (CSS border with inset shadow: box-shadow: inset 0 0 0 3px #161c2c, inset 0 0 0 4px rgba(200,160,64,0.1)) and subtle leather-grain texture (repeating-radial-gradient at 0.02 opacity). The material simulation gives civic content the tangible weight of official documents. ## Prompts for Implementation Build the page as a skeuomorphic civic quest. F-pattern: .quest-layout { max-width: 960px; margin: 0 auto; padding: 60px 24px; } .civic-grid { display: grid; grid-template-columns: 60fr 35fr; gap: 30px; } Path-draw: .civic-path path { stroke: #3068b0; stroke-width: 2; fill: none; stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length); transition: stroke-dashoffset 1.5s ease-in-out; } .civic-path.visible path { stroke-dashoffset: 0; } Floating docs: .doc-layer { position: absolute; background: rgba(22,28,44,0.6); border: 1px solid rgba(48,104,176,0.06); transform: rotate(var(--rotation, 2deg)); opacity: var(--layer-opacity, 0.04); } Skeuomorphic surface: .civic-panel { background: #161c2c; box-shadow: inset 0 0 0 3px #161c2c, inset 0 0 0 4px rgba(200,160,64,0.1), 0 4px 16px rgba(12,16,32,0.2); border-radius: 6px; padding: 28px; } AVOID: Partisan political gamification, corporate civic tech platforms, and minimal government tool interfaces. Let skeuomorphic craftsmanship and grounded-earthy pragmatism create a civic quest where political engagement feels as tangible and weighty as a hand-bound legal document. ## Uniqueness Notes 1. **Skeuomorphic for civic engagement:** Material-simulating design makes political participation feel tangible and institutionally grounded. 2. **F-pattern as civic document:** Government-publication reading pattern makes political content scannable and authoritative. 3. **Path-draw-SVG as civic roadmap:** Animated pathways visualize political engagement as a navigable journey with clear steps. 4. **Floating-elements as stacked documents:** Layered panels create the rich quality of accumulated civic history and policy documentation. 5. **Midnight-blue as institutional depth:** Deep navy palette creates the serious, foundational atmosphere of civic architecture. **Seed/Style:** aesthetic: skeuomorphic, layout: f-pattern, typography: geometric-sans, palette: midnight-blue, patterns: path-draw-svg, imagery: mixed-media, motifs: floating-elements, tone: grounded-earthy **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 skeuomorphic aesthetic, f-pattern layout, midnight-blue palette, mixed-media imagery, and grounded-earthy tone.