# Design Language for doublestandard.xyz ## Aesthetics and Tone doublestandard.xyz embraces a playful aesthetic -- bright, optimistic, and energetic -- to address the serious topic of double standards through humor and visual wit. The missing hyphen (compared to double-standard.xyz) makes this version feel more casual and approachable. Imagine a pop-up exhibit at a design festival where infographic posters about hypocrisy are displayed with colorful, comic-book-style illustrations and diagonal arrangements that create visual tension. The visual language draws from Pentagram's playful information design, the colorful infographics of Information is Beautiful, and the bold geometric illustrations of Malika Favre. Burnt-orange tones bring warmth and urgency. The tone is raw-authentic -- calling out double standards without sugarcoating, but with visual charm. ## Layout Motifs and Structure The layout uses **diagonal-sections** -- angled dividers between sections create visual tension that mirrors the concept of unfair tilting of standards. **Primary structure:** - **Bold declaration (100vh):** A bright background (burnt orange) with the title "DOUBLESTANDARD" in large playful-rounded type, centered. Below, ".xyz" in a contrasting color. The section's bottom edge cuts at a 6-degree angle, immediately creating the sense that things are not level -- not fair. - **Tilted comparisons (4 diagonal sections, ~100vh each):** Each section is clipped at alternating angles (6deg, -6deg, 6deg, -6deg). Content within each section presents a double standard with vector-art illustrations -- simple, bold, geometric shapes representing the two sides. Each section has a distinct color from the burnt-orange spectrum. - **Floating elements interlude (100vh):** A pause section where small vector-art icons (balance scales, thumbs up/down, checkmarks/crosses) float freely across the viewport, representing the chaos of inconsistent standards. - **Blur-focus deep dive (80vh):** A section where content at the edges is blurred and only the center is sharp, forcing focus on the core argument. As the user scrolls, the focused area shifts, revealing more content. - **Level ground footer (50vh):** The diagonal angles finally flatten to 0 degrees. A clean, level horizontal line. The message: this is what a single standard looks like. **Spacing philosophy:** Within diagonal sections, generous padding (clamp(32px, 5vw, 64px)) compensates for the visual complexity of angled edges. The angled clips overlap by 5vh to prevent gaps. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Fredoka" (Google Fonts) -- bold, rounded, playful display font. Weight 600. Size clamp(36px, 6vw, 80px). Letter-spacing: -0.02em. - **Body text:** "Quicksand" (Google Fonts) -- geometric rounded body text. Weight 400. Size clamp(15px, 1.1vw, 18px). Line-height: 1.75. - **Accent:** "Space Mono" (Google Fonts) -- monospaced for data points and emphasis. Weight 400, size 14px. **Palette:** - **Burnt Sunset** `#D06030` -- primary orange background - **Cream Bright** `#FFF5E8` -- text on dark, card backgrounds - **Deep Cocoa** `#3A1A0A` -- dark text and contrast elements - **Tangerine Pop** `#FF8040` -- lighter orange accent - **Sage Contrast** `#508050` -- green accent for "fair" elements - **Shadow Brown** `#2A1008` -- deep shadow for blur-focus areas ## Imagery and Motifs **Core visual motifs:** - **Vector-art comparison illustrations:** Simple, bold geometric illustrations comparing two treatments. A person in a crisp circle vs. a person in a cramped rectangle. A gold trophy vs. a tin cup. All rendered as flat CSS/SVG shapes with clean edges and solid fills. - **Diagonal angle cuts:** The fundamental visual metaphor. Content sections cut at 6-degree angles create a literal "tilted playing field." The final section's return to 0 degrees is the resolution. - **Floating standard icons:** Small SVG icons (balance scales, equal signs, not-equal signs, arrows) that drift through the interlude section in random patterns (CSS animation, 15-30s cycles). - **Blur-focus depth control:** CSS filter: blur() applied progressively from center outward, creating a tilt-shift photography effect that directs attention. The focus zone is linked to scroll position. - **Raw authentic typography:** Headlines use deliberately informal letter-spacing and occasional word-emphasis through color change (switching to Sage Contrast for a key word in each headline). ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like a provocative design exhibit -- bright, bold, impossible to ignore. The diagonal angles make the viewer feel that something is wrong. The level footer provides catharsis. **Opening animation sequence:** - Frame 0-200ms: Burnt Sunset background fills viewport. - Frame 200-800ms: "DOUBLESTANDARD" appears letter by letter in rapid succession (40ms per letter), each letter bouncing slightly (scale 1.1 to 1.0). - Frame 800-1200ms: ".xyz" appears with blur-focus effect (blur(4px) to blur(0)). - Frame 1200-1800ms: The diagonal bottom edge reveals itself as the first comparison section slides into view. **Scroll behavior:** Diagonal sections enter with their content sliding along the angle (translateX/Y matching the 6-degree slope). Floating icons in the interlude are always animating when visible. The blur-focus zone tracks scroll position. **Interaction details:** - Vector-art illustrations respond to hover with a color swap (the two compared elements exchange colors, making the double standard even more obvious). - Floating icons stop and pulse when hovered. - Diagonal section edges ripple briefly on hover (clip-path polygon coordinates oscillate +-1px for 300ms). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Diagonal sections as tilted playing field:** The 6-degree angles create a literal visual metaphor for an unfair, tilted standard. The return to level ground in the footer is both a design resolution and a thematic statement. 2. **Color-swap comparison illustrations:** Vector-art pairs that swap colors on hover force the viewer to imagine each scenario from the other side -- a simple interaction that creates empathy. 3. **Blur-focus as attention director:** Using CSS blur to control what the viewer can see at any moment creates a guided-attention experience unique among the designs. 4. **Playful aesthetic for serious content:** The bright, rounded, energetic visual language makes the topic of double standards approachable and shareable, contrasting with the expected somber treatment. **Chosen seed/style:** aesthetic: playful, layout: diagonal-sections, typography: playful-rounded, palette: burnt-orange, patterns: blur-focus, imagery: vector-art, motifs: floating-elements, tone: raw-authentic **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 blur-focus (11%) pattern, burnt-orange (4%) palette, and diagonal-sections (8%) layout.