# Design Language for double-standard.xyz ## Aesthetics and Tone `double-standard.xyz` is **a corrupted broadcast from an alternate frequency** — the visual manifesto of a pirate transmission breaking through a luxury signal. The aesthetic is **glitch rendered as ideology**: every distortion is intentional, every scanline break is a rhetorical device, every chromatic aberration is a raised middle finger at the polished surfaces that surround it. This is not the fashionable glitch-lite of music videos; it is the glitch of a corrupt data sector, of a CRT monitor that has been hit too many times, of a satellite feed caught mid-storm. The domain name `double-standard` is the concept engine. The site holds two contradictory realities simultaneously — pristine and broken, legible and scrambled, high-fashion and underground zine. Every visual element lives at the collision point of these two registers: a headline that is simultaneously flawless and fragmenting, a color field that is simultaneously luxurious and radioactive, a layout that is simultaneously architectural and crumbling. The tone is **edgy-rebellious** in the political sense of that word — it makes a *claim*, not just a gesture. The mood: a broadcast antenna tower on an abandoned rooftop at 3 AM, a flickering EXIT sign in a nightclub corridor, the moment a high-end fashion lookbook has been printed on a compromised photocopier. Celestial bodies appear as corrupted data — stars rendered as bitfield artifacts, constellations as broken SVG paths that heal only mid-hover. The sky is the signal; the glitch is the message. ## Layout Motifs and Structure The layout system is **layered-depth** executed as a Z-axis explosion — not the gentle parallax tilt of portfolio sites but a genuine sense of objects at different orbital distances from the viewer. The page is not scrolled; it is traversed, as if moving through a series of debris fields at different depths in space. **The Depth Stack:** - **Layer -2 (void):** Fixed background — an inky gradient-mesh that breathes at 0.003Hz, nearly imperceptibly. Hex noise grain sits at 4% opacity. Stars are rendered as a sparse field of 3–5px bursts with chromatic aberration offsets (+2px red channel, -2px blue channel). - **Layer -1 (deep field):** Large translucent glitch-banner shapes drifting at 0.1× scroll rate — torn rectangles of color at 12–18% opacity, edges offset by 4px per channel, suggesting a grid that has been shattered and is slowly reassembling. - **Layer 0 (ground plane):** The actual content structure — a non-uniform asymmetric grid. Not a standard 12-column grid. Instead: a CSS Grid where columns are defined as `[1fr 2.618fr 1fr]` and rows use `minmax(0, auto)` with explicit named areas. Content blocks deliberately bleed outside their grid cells by 8–24px using negative margins, creating a sense that the layout is under pressure. - **Layer +1 (foreground text):** Headlines and critical copy float `position: sticky` at `z-index: 10`, slightly ahead of the scroll plane. On glitch micro-interactions, text blocks shift by ±6px horizontally with a 30ms clip-rect animation — three frames, no easing. - **Layer +2 (event layer):** Cursor-proximate star bursts and chromatic fringe effects that respond to mouse position at full viewport speed, no lag. These sit at `z-index: 20` and never occlude readable text. **Section architecture:** The page has five *transmission zones*, not sections. They are not separated by padding or dividers but by **signal interference transitions** — a full-viewport glitch burst (15 frames, < 400ms) that briefly scrambles the layout before resolving into the next zone. Each zone uses a different depth configuration, so the visual gravity shifts as the viewer traverses. Zone 1 — Uplink (hero/manifesto): Full-bleed, Layer stack fully active, single massive headline. Zone 2 — Contradiction Field: Two column split, left column clean, right column glitching. Zone 3 — Star Map: Near-dark zone, gradient-mesh stars, textural. Zone 4 — Signal Corruption: Most extreme glitch density, short sharp copy lines. Zone 5 — Carrier Wave (close): Returns to near-clean state — but not quite. A residual tremor remains. ## Typography and Palette **Typography — variable-fluid, all from Google Fonts.** The type system exploits the variable axis aggressively. Fonts do not have a fixed weight; they breathe along the `wght` axis during interactions and between states. - **Display / Manifesto:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — used for all large headlines and the site name treatment. Variable axis `wght 300–700`. At rest: `wght 700`, tracked at `-0.04em`. On glitch micro-interaction: `wght` animates to `300` in 2 frames then snaps back to `700`, creating a weight-collapse flicker that reads as a transmission dropout. Size: fluid clamp from `clamp(4.5rem, 12vw, 11rem)`. - **Body / Manifesto copy:** [DM Mono](https://fonts.google.com/specimen/DM+Mono) — fixed-width but treated as editorial body text, not as code. Weight 400 at body scale (`clamp(0.9rem, 1.4vw, 1.1rem)`), weight 500 for callouts. The monospace baseline gives the copy a broadcast-teletype register that reinforces the transmission metaphor. Line height: 1.65. - **Accent / Interference labels:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — used sparingly for short uppercase labels (zone headings, signal-strength labels, coordinate markers). Size: `clamp(0.65rem, 1.1vw, 0.85rem)`. Tracked at `0.28em`. Never used for more than 4 words. **Color Palette — high-contrast, no warm tones:** - `#0A0A0F` — Void black. Background base. Not pure `#000000` — has a fractional blue undertone that keeps it from looking printed. - `#F0F0FF` — Ghost white. Primary text color. Slightly blue-shifted from pure white, so it reads as a cold broadcast source. - `#FF003C` — Signal red. The primary accent. Chromatic aberration red channel offset. Used for glitch artifacts, error states, the +2px red-channel displacement in star rendering. - `#00FFC8` — Phosphor cyan. Secondary accent. The complementary collision with signal red creates maximum chromatic tension. Used for hover states, gradient-mesh second node color, cursor trails. - `#6B00FF` — Deep violet. Third accent. Used for gradient-mesh third node, deep-layer shapes, the blue channel offset in chromatic aberration (-2px). - `#1A1A2E` — Midnight panel. Used for cards, zone backgrounds, non-void depth layers. Sits between void black and visible content. - `#FF003C` at 8% opacity over `#0A0A0F` — the scanline texture is achieved with a CSS repeating-linear-gradient at 2px intervals using this value, not an image. **Color application rules:** - Never use `#F0F0FF` directly on `#1A1A2E` — always on `#0A0A0F` or full glitch-shifted backgrounds. - The `#FF003C` / `#00FFC8` pairing appears *only* in direct opposition (never adjacent without the void between them). - `#6B00FF` appears only in background layers; it never carries readable text. ## Imagery and Motifs **No photography. No stock. No human faces.** The entire visual vocabulary is constructed from two motif families: **1. Gradient Mesh (generative).** Not the Adobe Illustrator mesh gradient of the 2010s. This is a **dynamic noise-driven gradient mesh** rendered in canvas or WebGL. The mesh has 9 control nodes arranged in a 3×3 grid, each node carrying one of three colors: `#FF003C`, `#00FFC8`, `#6B00FF`. Nodes drift in Perlin noise space at 0.0008Hz, creating an almost-imperceptibly-shifting color field. The mesh is the background texture of the Zone 3 (Star Map) and bleeds into Zone 2 at low opacity (18%). It is *never* a hero image or a decorative full-bleed header background — it is substrate, not surface. **2. Star-Celestial (corrupted).** Constellations and star fields exist on the site but only as **corrupted astronomical data** — the visual language of a star atlas that has been run through a faulty compression algorithm. Specific treatments: - **Star bursts:** SVG `` elements with three layered copies offset by the chromatic aberration vectors (`+2px x-axis, 0 y-axis` for red; `-2px x-axis, 0 y-axis` for blue/violet). Fill opacity 0.6/0.3/0.3 respectively. Radius: 1.5–5px. - **Constellation lines:** `` elements with `stroke-dasharray` set to animate between full and 40% draw on a 3.2s loop — the lines breathe, appearing to transmit and drop signal. - **Coordinate labels:** Bebas Neue labels in `#F0F0FF` at 60% opacity, using real constellation names (Orion, Cygnus, Cassiopeia, etc.) but rendered at random rotation angles (±15deg) as if a coordinate system has been corrupted. - **Zone 3 sky field:** 200–400 star bursts distributed via a seeded Poisson disk distribution (not random scatter) so the field never looks uniform. Three density clusters create a galactic-structure impression. **Additional motif — the scanline:** A CSS-only scanline overlay at `z-index: 100`, `pointer-events: none`, achieved with `repeating-linear-gradient` at 2px rows, alternating `rgba(0,0,0,0)` and the scanline color at 3% opacity. Visible only on dark zones. On Zone 4 (Signal Corruption), scanline density doubles (1px rows) and opacity rises to 6%. **No gradients on text** except during glitch frames where the `background-clip: text` technique is used for a 2-frame rainbow-shift during transmission transitions. ## Prompts for Implementation Build `double-standard.xyz` as a **single-page manifesto transmission** — not a landing page, not a portfolio, not a product site. It is a broadcast. The visitor is receiving a signal; they did not choose to tune in, they are being received. **The five transmission zones, implementation notes:** **Zone 1 — Uplink.** Full `100svh`. The headline is the only content: `DOUBLE` on line one, `STANDARD` on line two. Space Grotesk, `clamp(5rem, 14vw, 13rem)`, weight 700. The two words are *not* the same weight — `DOUBLE` at weight 700, `STANDARD` at weight 300 — a deliberate contrast that enacts the concept. Beneath the headline: a single DM Mono line, weight 400, at `clamp(0.85rem, 1.3vw, 1rem)`, tracking `0.18em`: the site's one-line manifesto in uppercase. The background is void black with the star field Layer -2 active. No CTA. No navigation. No decorative elements except the star field and a faint scanline. On load: the headline appears via a glitch-reveal — 8 frames of random clip-rect positions over 480ms, then snapping into place. **Zone 2 — Contradiction Field.** Split layout: left `40%` carries clean, stable copy in DM Mono. Right `60%` carries the same copy but each word has a 12% chance per render cycle (every 4s) of entering a 3-frame glitch state — weight collapse + chromatic aberration + clip displacement. The two columns are never synchronized. The viewer reads the clean version and the corrupt version simultaneously. CSS Grid: `grid-template-columns: 2fr 3fr`. No border, no divider between columns — only the visual behavior distinguishes them. A faint gradient-mesh layer (18% opacity) breathes behind the right column. **Zone 3 — Star Map.** Near-dark: background shifts to `#0D0D1A`, one step above void. The gradient-mesh is foregrounded slightly, at 35% opacity, creating a nebula-like color field across the lower half. Star bursts fill the zone with the Poisson disk distribution. Constellation polylines animate. This zone has the least text — only three short DM Mono lines of 12–18 words each, positioned in the gaps between star clusters, as if the copy is occupying the dark matter between stars. No glitch activity here — the Zone 3 / Zone 4 transition is the most extreme glitch burst (full-viewport, 18 frames). **Zone 4 — Signal Corruption.** The most aggressive zone. Copy is delivered in 5–8 word bursts, DM Mono, all caps, each burst arriving at 600ms intervals via a JS queue (not CSS animation) — the copy *types itself*, but via clip-rect reveals, not character-by-character. Between bursts: silence. Double scanline density. Chromatic aberration on all text. The gradient-mesh is absent here — Zone 4 is void black and signal red. The star field still exists behind everything but at 30% of Zone 1 density. On hover of any text: a violent 6-frame glitch burst, then silence. This zone should feel like a transmission degrading in real time. **Zone 5 — Carrier Wave.** The page resolves, almost. Background returns toward void black. The headline from Zone 1 reappears in miniature (`clamp(1.2rem, 2.2vw, 1.8rem)`) in the bottom-left, DM Mono, weight 300 — a ghost of the opening signal. A single Bebas Neue label in the bottom-right: `SIGNAL END` at `0.75rem`. The star field returns at full density but with 60% of the chromatic aberration magnitude — the signal is weakening but still present. No CTA. No signup. No social links. The carrier wave simply ends. **Micro-interactions (non-glitch):** - All interactive elements (if any links exist) use a hover state where the text weight slides from 400→600 over 120ms (Space Grotesk variable axis), then the underline draws in from left to right over 180ms using `clip-path`. - Scroll progress: a `1px` vertical line on the right edge of the viewport, `#FF003C`, growing from 0 to `100svh` as the user scrolls. No percentage label. - On mobile: the depth stack collapses to Layer 0 and Layer +1 only (performance). Glitch transitions reduce to 4 frames. **Implementation anti-patterns to avoid:** - No parallax on the scroll layer itself — the depth effect is achieved via fixed positioning and opacity, not `transform: translateY()` scrolling. - No looping CSS animations that fight each other for GPU compositing budget. All glitch animations are JS-triggered, not CSS `animation: infinite`. - No border-radius on the glitch-artifact shapes — they are rectangles, torn, not rounded. - No warm tones anywhere — if a color needs to be lighter, it goes toward `#F0F0FF`, not toward any yellow or orange value. ## Uniqueness Notes 1. **Glitch as rhetorical structure, not decoration.** The frequency report shows `glitch` at 14% and `glitch-art` at 2% — but in every prior use, glitch is a visual texture applied to a conventional layout. `double-standard.xyz` makes glitch the *structural logic* of the page: the concept of the domain (double standard = two contradictory things held simultaneously) is enacted via simultaneous clean/corrupt states. The glitch is the argument, not the garnish. 2. **Layered-depth as Z-axis debris field, not as parallax hero.** `layered-depth` appears at 5% in the corpus and in every instance is used for a cinematic parallax hero section. Here the depth stack is active across the *entire page* as a persistent spatial model — five named layers with different physics, not a single hero trick. The viewer is always inside the debris field, not looking at it. 3. **Star-celestial rendered as corrupted astronomical data.** `star-celestial` appears at only 2% in the corpus. Prior instances treat stars as decorative ambient elements — sparkles, background twinkles. Here stars are corrupt SVG data with chromatic aberration, Poisson-distributed for astronomical realism, with constellation lines on transmission loops. The star field is a *signal source*, not a backdrop. 4. **High-contrast without warm tones.** `high-contrast` is at 20% but prior uses default to black/white or black/gold or dark/orange. This palette is cold: void black + ghost white + signal red + phosphor cyan + deep violet. The chromatic aberration treatment makes the red/cyan split visible as a physical property of the typography, not as a color choice applied to shapes. 5. **Variable font used for glitch animation, not for typographic expression.** `variable-fluid` appears at 6% in the corpus and all uses exploit the weight or optical size axis for *responsive sizing*. `double-standard.xyz` uses the variable `wght` axis as a *glitch animation vector* — weight collapse from 700 to 300 in 2 frames is a transmission artifact, not a typographic refinement. 6. **Avoided overused patterns:** No parallax scroll (`91%` in corpus), no warm gradient (`87%`), no photography (`93%`), no mono typeface used as personality (`91%`), no centered layout as default (`93%`), no spring animation (`45%`). The site uses DM Mono but as editorial body text at normal reading scale — not as a personality/identity device. Seed: `aesthetic: glitch, layout: layered-depth, typography: variable-fluid, palette: high-contrast, patterns: micro-interactions, imagery: gradient-mesh, motifs: star-celestial, tone: edgy-rebellious`