# Design Language for double-standard.org ## Aesthetics and Tone double-standard.org embraces an ethereal aesthetic -- luminous and dreamlike -- to examine the uncomfortable truth of double standards with transcendent beauty. The ".org" suffix suggests advocacy or education. Imagine a light installation in a gallery where two identical objects are treated with dramatically different lighting -- one spotlit, one shadowed -- forcing viewers to confront their own biases. The visual language draws from James Turrell's light spaces, the soft-focus photography of Rinko Kawauchi, and the generative art of Refik Anadol. Terracotta warm tones ground the ethereal lightness in earthen reality. Mountain-landscape motifs suggest the uphill struggle of overcoming inequality. The tone is energetic -- driven by the urgency of calling out hypocrisy. ## Layout Motifs and Structure The layout uses a **timeline-vertical** structure to show how double standards persist or evolve over time. **Primary structure:** - **Mirror opening (100vh):** The viewport is split vertically: left side is warm (terracotta gradient), right side is cool (blue-grey gradient). The title "DOUBLE STANDARD" sits at center, bridging both sides. Generative art patterns (SVG feTurbulence organic shapes) float in each half but differ in treatment -- one side's shapes are crisp, the other's are blurred. - **Timeline of standards (variable, ~400vh):** A vertical timeline at center with alternating nodes. Left nodes show "Standard A" (how one group is treated), right nodes show "Standard B" (how another is treated for the same thing). The visual asymmetry between corresponding cards (one bright, one muted) makes the double standard visible. - **Mountain metaphor (100vh):** A layered mountain landscape (CSS clip-path layers) in terracotta warm tones representing the terrain of inequality. Labels on different elevation points mark progress toward equality. - **Magnetic call-to-action zone (80vh):** Content elements with a magnetic attraction to the viewport center (elements accelerate toward center when within 200px, creating a gathering effect). This section asks what the viewer will do about double standards. - **Resolution footer (50vh):** A section where both halves of the mirror merge into a single unified tone, suggesting resolution. Clean credits. **Spacing philosophy:** Deliberately asymmetric. Left-side content has different spacing than right-side content in the timeline, making the inequality visible through design. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Vollkorn" (Google Fonts) -- a warm slab-serif with strong presence for confrontational headlines. Weight 700. Size clamp(28px, 4vw, 56px). - **Body text:** "Nunito" (Google Fonts) -- rounded, approachable body text. Weight 400. Size clamp(15px, 1.05vw, 17px). Line-height: 1.75. - **Labels:** "Fira Sans" (Google Fonts) -- clean sans for timeline labels. Weight 400, size 13px. **Palette:** - **Warm Ground** `#F0D8C0` -- warm half background (terracotta spectrum) - **Cool Ground** `#C0D0E0` -- cool half background - **Deep Terra** `#6A3A20` -- primary text on warm backgrounds - **Deep Steel** `#2A3A4A` -- primary text on cool backgrounds - **Inequality Red** `#C04030` -- accent for highlighting disparities - **Mountain Ochre** `#B88040` -- mountain landscape tones ## Imagery and Motifs **Core visual motifs:** - **Split-mirror composition:** The fundamental visual device. Every major section has a warm half and a cool half, creating a persistent visual double standard that the viewer cannot ignore. - **Generative art organic shapes:** SVG elements with feTurbulence creating organic blobs that appear in both halves but with different visual treatments (one crisp, one blurred), embodying the double standard. - **Mountain landscape layers:** CSS clip-path polygon layers in terracotta tones creating a mountain range. Each layer represents a different shade from Warm Ground (distant, light) to Mountain Ochre (foreground, dark). - **Magnetic content elements:** In the call-to-action zone, content cards have a CSS animation that simulates magnetic attraction to viewport center when triggered by IntersectionObserver -- they accelerate (translateX/Y) toward center with ease-in timing. - **Asymmetric timeline cards:** Left and right timeline cards are deliberately styled differently -- one has thicker borders, more padding, brighter colors (the privileged standard); the other is more constrained, muted, and compact. ## Prompts for Implementation **Full-screen narrative experience:** The site should make double standards visible through design -- the split composition forces the viewer to constantly compare two treatments of the same content. The mountain section provides hope. The magnetic zone demands action. **Opening animation sequence:** - Frame 0-300ms: Split background appears (warm left, cool right, instant). - Frame 300-1000ms: Generative shapes bloom in both halves simultaneously but with different visual treatments. - Frame 1000-1600ms: "DOUBLE" appears on the left side, "STANDARD" on the right side, meeting at center. - Frame 1600-2200ms: The timeline's center line draws from top downward. **Scroll behavior:** Timeline nodes enter from their respective sides (left cards from left, right from right). Mountain layers have subtle parallax (foreground faster than background). Magnetic zone elements gather toward center as the section scrolls into view. **Interaction details:** - Hovering over a "Standard A" card highlights the corresponding "Standard B" card with Inequality Red border, making the disparity explicit. - Mountain elevation labels glow on hover with tooltips showing context. - Magnetic elements resist cursor proximity (push away before snapping to center). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Split-mirror visual double standard:** The warm/cool viewport split that persists throughout the site makes the concept of double standards physically visible in the design itself. 2. **Asymmetric timeline as inequality visualization:** Deliberately styling left and right timeline cards differently (one privileged, one constrained) turns the layout asymmetry into a content statement. 3. **Magnetic gathering for call-to-action:** Content elements that physically gather toward viewport center create a unique animation metaphor for collective action. 4. **Mountain landscape as progress terrain:** Using CSS clip-path mountains with labeled elevation points to represent progress toward equality creates a spatial metaphor for social change. **Chosen seed/style:** aesthetic: ethereal, layout: timeline-vertical, typography: slab-serif, palette: terracotta-warm, patterns: magnetic, imagery: generative-art, motifs: mountain-landscape, tone: energetic **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used magnetic (11%) pattern, terracotta-warm (1%) palette, and mountain-landscape (4%) motifs -- underused choices.