# Design Language for doublestandard.xyz

## Aesthetics and Tone
A glitch-punk zine exposing hypocrisy through visual corruption -- doublestandard.xyz renders as a distorted mirror where clean content is overlaid with its corrupted twin, glitch artifacts expose hidden data, and the interface itself seems to malfunction whenever double standards are detected. The glitch-punk aesthetic weaponizes broken design: errors are features, distortion is truth, and the cleanest-looking surfaces are the most suspect.

The tone is punk-accusatory: short sentences. Hard truths. No diplomatic softening. "You said X. You did Y. Explain."

## Layout Motifs and Structure
**Glitch-Stack System:** Full-width horizontal sections that alternate between "clean" (well-designed) and "glitched" (distorted version of the same content). The glitch sections use CSS transforms (skewX, translateX offset) and chromatic aberration.

**Section Flow:**
1. **The Facade:** Clean hero. Perfect typography. Then it glitches.
2. **The Reality:** Alternating clean/glitched content exposing contradictions.
3. **The Code:** A section showing the "source code" of double standards in monospace.
4. **The Fix:** Closing section in clean design suggesting how standards could be unified.

## Typography and Palette
- **Headlines:** "Space Grotesk" at 2.5rem-5rem, weight 700. Glitched versions use text-shadow RGB split.
- **Body:** "Inter" at 1rem, weight 400, line-height 1.7.
- **Code:** "Fira Code" at 0.85rem.

**Palette:** White (#fafafa) and Black (#0a0a0a) for clean sections. Neon magenta (#ff00ff) and cyan (#00ffff) for glitch artifacts. Glitch red (#ff0040) for distortion.

## Imagery and Motifs
**Chromatic Aberration Glitch:** Text in "glitched" sections has ::before (cyan, -3px offset) and ::after (magenta, +3px offset) pseudo-elements at 30% opacity.

**Section Skew:** Glitched sections are transformed: skewX(-1deg) with overflow hidden, creating a tilted-screen effect.

**Noise Bars:** Random-width horizontal bars of noise (background: repeating-linear-gradient with rapid color alternation) flash briefly on section transitions.

**Clean/Corrupt Toggle:** Content alternates between clean serif rendering and corrupted monospace rendering, showing the same words in different "standards."

## Prompts for Implementation
Build as a facade that breaks. The hero loads clean, then after 2s, a glitch wave corrupts it briefly (200ms skew + chromatic aberration flash) before returning to clean. This sets the pattern: nothing here stays clean. Alternating sections demonstrate the concept visually. The Code section uses full monospace to feel like examining source. The Fix closing section is the only section that stays consistently clean. No commercial elements.

## Uniqueness Notes
1. **Glitch as semantic content:** Visual distortion carries meaning (exposing hypocrisy) rather than being purely decorative.
2. **Clean/corrupt alternation:** Switching between polished and broken versions of the same content IS the design.
3. **Facade-then-glitch hero:** The delayed corruption of a clean hero creates a memorable opening twist.
4. **Source-code exposure section:** Showing content in raw monospace as "the code behind the standard" is conceptually distinctive.

Document chosen seed/style: aesthetic: glitch-punk, layout: clean-corrupt-alternate, typography: split-render, palette: mono-neon-glitch, patterns: chromatic-aberration, imagery: noise-bars, motifs: facade-break, tone: punk-accusatory
<!-- DESIGN STAMP
  timestamp: 2026-03-18T22:25:00
  seed: aesthetic: glitch-punk, layout: clean-corrupt-alternate, typography: split-render, palette: mono-neon-glitch
  aesthetic: A glitch-punk zine exposing hypocrisy through visual corruption -- doublestandard.xy...
  content_hash: a1b2c3d4e5f6
-->