# Design Language for double-standard.xyz ## Aesthetics and Tone double-standard.xyz embraces a holographic aesthetic -- iridescent surfaces, prismatic light effects, and a shimmering unreality that mirrors the deceptive nature of double standards. The ".xyz" suffix suggests something experimental and modern. Imagine a holographic art installation where two identical objects appear different depending on the viewing angle -- the hologram itself embodies the double standard. The visual language draws from holographic packaging design, the iridescent surfaces of soap bubbles, and the prismatic light experiments of Olafur Eliasson. Honeyed neutral tones provide warmth beneath the holographic shimmer. The tone is playful -- using visual trickery and optical illusions to make a serious point about hypocrisy. ## Layout Motifs and Structure The layout uses a **z-pattern** composition guiding the eye in a Z-shaped reading path across each section -- a natural pattern for comparing two things side by side. **Primary structure:** - **Prism opening (100vh):** A neutral background with a large holographic element at center (CSS conic-gradient with hue-rotate animation creating an iridescent, shifting-color surface). The title "double-standard.xyz" sits above in clean sans-grotesk type. Vintage photography-style frames (sepia-toned borders) surround small content blocks. - **Z-pattern comparisons (4 sections, ~100vh each):** Each section presents a double-standard scenario. Content follows a Z: top-left shows Scenario A, top-right shows its treatment, bottom-left shows Scenario B, bottom-right shows its different treatment. The Z-path is reinforced by thin flowing-curve SVG lines connecting the four corners. - **Holographic gallery (100vh):** A section of holographic cards (CSS background with animated conic-gradient) that stagger in on scroll. Each card presents a famous historical double standard. The holographic surface shifts color as the user scrolls (hue-rotate linked to scroll position). - **Vintage evidence section (80vh):** A contrast section using vintage-photography styling -- sepia-toned, slightly desaturated. Content presents historical documentation of double standards in an archival style. - **Unified footer (50vh):** The holographic effects merge into a single stable iridescent gradient, suggesting resolution. Clean credits in neutral type. **Spacing philosophy:** Z-pattern sections use a 2x2 grid with 24px gaps. Each quadrant is sized equally (calc((100vw - 48px) / 2)). The strict geometric equality of the quadrants contrasts with the unequal content they contain. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Space Grotesk" (Google Fonts) -- clean geometric sans for clear messaging. Weight 700. Size clamp(28px, 4vw, 52px). - **Body text:** "Nunito Sans" (Google Fonts) -- warm humanist sans for body copy. Weight 400. Size clamp(15px, 1.05vw, 17px). Line-height: 1.75. - **Accent:** "Cormorant" (Google Fonts) -- elegant serif for pull quotes and emphasis. Weight 600, size clamp(20px, 2.5vw, 36px). **Palette:** - **Honey Neutral** `#F5E8D0` -- primary warm background - **Text Dark** `#2A2A2A` -- primary text - **Holo Base** `#E0D8F0` -- base color for holographic surfaces before hue-rotation - **Holo Accent** `#A088C0` -- purple tone from the holographic spectrum - **Sepia Warm** `#C8A878` -- vintage photography toning - **Curve Grey** `#8888A0` -- flowing-curve connector lines ## Imagery and Motifs **Core visual motifs:** - **Holographic surfaces:** CSS conic-gradient (multiple color stops cycling through rainbow spectrum) with @keyframes hue-rotate animation (0deg to 360deg over 8s), creating iridescent, shifting-color surfaces on cards and decorative elements. - **Vintage photography frames:** Content blocks styled with sepia-toned borders (4px solid Sepia Warm), slightly rounded corners (4px), and a subtle inner shadow creating a vintage print-edge effect. - **Flowing-curve Z-path connectors:** SVG quadratic bezier curves connecting the four corners of each Z-pattern section in thin grey strokes (2px, Curve Grey). These curves guide the eye through the comparison pattern. - **Stagger-reveal gallery:** Holographic cards enter the viewport with staggered timing (100ms per card, opacity 0 to 1, translateY(15px) to 0), creating a cascading reveal effect. - **Hue-rotate scroll linking:** The holographic gallery's surface colors shift based on scroll position (CSS custom property --scroll-hue mapped to filter: hue-rotate()), making the viewing angle determine the appearance -- a literal visual double standard. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like examining a holographic object from different angles -- each perspective reveals a different truth. The Z-pattern forces systematic comparison. The vintage section provides historical grounding. **Opening animation sequence:** - Frame 0-300ms: Honey Neutral background. - Frame 300-1000ms: The holographic element at center begins its iridescent animation (conic-gradient hue-rotate starts). - Frame 1000-1600ms: "double-standard" appears with letter stagger (60ms per character). - Frame 1600-2000ms: ".xyz" appears with holographic text treatment (background-clip: text on a shifting gradient). - Frame 2000-2600ms: The first Z-pattern section's flowing-curve connectors draw themselves. **Scroll behavior:** Z-pattern quadrants enter with stagger from their respective Z positions (top-left first, bottom-right last, 200ms stagger). Holographic gallery cards stagger in. Vintage section has no entry animation -- it's static and archival by design. **Interaction details:** - Holographic cards tilt toward cursor on hover (CSS perspective + rotateX/Y, max 3deg), changing the hue-rotate angle. - Vintage frames respond to hover with slight warmth increase (filter: sepia(0.2) to sepia(0.4)). - Z-pattern quadrants highlight their flowing-curve connector on hover (stroke-width from 2px to 3px). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Holographic surface as double-standard metaphor:** Holographic materials that change color based on viewing angle are a perfect visual metaphor for double standards -- the same thing looks different depending on how you look at it. 2. **Z-pattern for systematic comparison:** Using the Z-reading pattern specifically for comparing unequal treatments forces the viewer to systematically confront each double standard in a structured way. 3. **Scroll-linked hue-rotation:** The holographic colors changing based on scroll position makes the act of scrolling itself a perspective-shifting experience -- the viewer's position determines what they see. 4. **Vintage evidence as grounding contrast:** The sepia-toned archival section provides stark tonal contrast against the holographic sections, suggesting that double standards have deep historical roots beneath their modern iridescent surface. **Chosen seed/style:** aesthetic: holographic, layout: z-pattern, typography: sans-grotesk, palette: honeyed-neutral, patterns: stagger, imagery: vintage-photography, motifs: flowing-curves, tone: playful **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) as primary imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used z-pattern (1%) layout, vintage-photography (2%) imagery, and honeyed-neutral (4%) palette -- all underused.