# Design Language for double-standard.xyz ## Aesthetics and Tone double-standard.xyz is **a 1986 arcade attract-mode running on a CRT that has been left on too long**, broadcasting a high-saturation **dopamine-aurora hallucination** at exactly 4:11 AM. Where the sibling site `double-standard.org` is a sober Victorian conservatory, this `.xyz` is its rebellious teenage cousin — a **neon ribbon-cassette** that captures the same idea (two judgments, one phenomenon) and replays it as a synthwave intermission card between halves of an imaginary tournament. The conceptual thesis: **a double standard is the moment two adjacent slot-machine reels stop on the same fruit but pay out differently**, and this site is the bus-station diner where that paradox is announced over a humming loudspeaker, in mirrored neon, while a Pac-Man screensaver loops in the corner of your eye. The dominant tone is **nostalgic-retro** — but not the warm-coffee-shop nostalgia of mid-century revival, nor the muted sepia of vintage photography. This is **sharp, candied, sodium-flare nostalgia**: the specific ache of finding an unopened pack of 1991 *Lisa Frank* trapper-keeper stickers in a glove-compartment in 2026 and realising the foil is still holographic, still humming, still wrong-about-the-decade. The color logic is **aurora-gradient**: ribbons of magenta-indigo-cyan-spring that move across the page like the polar lights filmed through a leaky VHS tape head. The motion logic is **ripple** — every interaction sends concentric rings outward as if the page were a vinyl record dropped in a chlorinated swimming pool at midnight. The voice is **first-person plural and slightly stoned**: "we've been thinking about this since 1987 and we still haven't decided who was right." Inspirations explicitly named: the **Yellow Magic Orchestra** *BGM* (1981) album sleeve where the band-members' faces are diagonally split by a hot-pink LED meridian; the **opening title-card of *Streets of Fire*** (1984, Walter Hill) — that exact magenta-into-cobalt rainfall over a wet asphalt cul-de-sac; the **interstitial bumpers of MTV between 1983 and 1986** when the channel still felt like an unsanctioned pirate broadcast; the **VHS box art of *The Last Starfighter* and *Tron***; the **gradient meshes of Hiroshi Nagai's city-pop poolside paintings** (1979–1985); and the **diagonal sashes of Italian *Memphis Group* speed-rails** (Sottsass, 1981–1988). Crucially, this is *not* vaporwave — vaporwave is melancholic and slow; this site is **awake, jittery, and sincere**, the way a teenager with a Walkman is sincere about a song that adults have decided is embarrassing. The emotional contract: the visitor leaves feeling that they have just stepped out of a roller-rink at 11:47 PM with their hand stamped in UV ink, slightly dizzy, slightly braver, and absolutely certain that the two judgments they were about to make were both wrong in opposite directions. ## Layout Motifs and Structure The page is built around a single dominant compositional rule: **diagonal-sections at exactly 18.5°** (the shoulder-angle of a 1985 jukebox cabinet). Every major section break is a slanted seam running from upper-left to lower-right, with the content on either side belonging to **opposing micro-climates** — left side cool/cyan/measured, right side hot/magenta/permissive — separated only by the diagonal aurora ribbon. The diagonal *never* runs the other way; the consistency is the whole point. This is the geometric expression of "double standard": **two truths, sharing one slash**. Macro structure (full-bleed, no maximum content width — the aurora must be allowed to bleed off all four edges): 1. **Reel-One (hero)** — Full viewport. A diagonal aurora ribbon enters from the upper-left and exits the lower-right. The site title (`double-standard.xyz`) is set in **massive condensed display type** rotated to lie *along* the diagonal, like a marquee letter-banner taped across a storefront window. Above the diagonal: a single sentence in cool cyan. Below: the same sentence rewritten in hot magenta, with **3 words swapped** so the meaning inverts. The eye is forced to compare. Subtle ripple emanates from the cursor as it crosses the diagonal seam. 2. **Twin-Fruit row** — A horizontal strip divided by *two* diagonal seams (a chevron pointing right). Three trapezoidal panels, each containing a paired-judgment vignette: same act, two verdicts. Panels are skewed (CSS `transform: skew(-18.5deg)`) so they read as parallelograms tilting forward into the user's lap, like flipper-table targets. On hover the panel's paired counterpart **flips up from below** with a card-flip motion that reveals the alternate verdict in the opposite color-pole. 3. **Aurora-Plate** — A long, slow vertical scroll where a large generative aurora-mesh occupies the right two-thirds and a stack of editorial paragraphs occupies the left third, each paragraph entering with a **path-draw-svg underline** that traces the word "but" wherever it appears. The aurora's hue cycles slowly (60s loop) through indigo→magenta→cyan→spring-green→indigo. As the user scrolls, the diagonal seam migrates downward by a few pixels per scroll-tick, so the entire page composition seems to be **slowly tilting**, like a pinball machine being lifted by one corner. 4. **Geometric-Standards Cabinet** — A collection of small geometric primitives (chevrons, lozenges, hexagonal pills, half-discs) arranged on an irregular grid that bends along the master 18.5° diagonal. Each primitive is a tiny **comparative judgment glyph**: two icons sharing a trapezoid, with a verdict-label in condensed type. Hover triggers a ripple that **propagates to neighbouring primitives** in a chain reaction, like dominoes of light. This replaces the conventional card-grid; the grid is *broken along the diagonal*. 5. **Ribbon-Coda** — A final full-bleed strip where the aurora ribbon **inverts itself** — the cool side becomes hot and vice versa — and the closing line of text is the opening line of the hero, **read backwards**. The footer is a single condensed-mono line of running text that scrolls horizontally in the manner of a 1986 stock-ticker, listing pairs of contradictory judgments separated by ` // `. Spatial rules: **never a centered hero**, **never a card-grid in the conventional sense**, **never symmetrical**. The page is always heavier on one diagonal axis than the other, and the heaviness alternates section by section so the visitor's eye keeps having to re-balance. Negative space is treated as **electrified vacuum**: it is not blank, it has a faint scan-line texture and a barely-perceptible aurora bleed at the edges. White space is dyed, never neutral. ## Typography and Palette **Type stack — all from Google Fonts, all licensed to use freely:** - **Display / hero / marquee:** **Bebas Neue** at extreme sizes (clamp(96px, 14vw, 220px)), letter-spacing 0.04em, set in uppercase. Bebas is the condensed sans-serif that evokes 1980s arena-rock posters and bowling-alley scoreboards — exactly the right register. For the largest hero word we layer **Big Shoulders Display** beneath Bebas at a 4-pixel cyan offset, producing a chromatic-aberration ghost. - **Editorial body:** **Archivo Narrow** at 17px / 1.55 line-height — a condensed humanist sans that retains warmth at small sizes. This carries the long-form paragraphs. - **Auxiliary condensed numerics & captions:** **Oswald** at 13px in uppercase tracking 0.18em, used for verdict-labels, plate-numbers, and the diagonal stock-ticker footer. - **Inline accent (the word "but", the word "however", the word "yet"):** **Major Mono Display** — a CRT-monospace face that flips the temperature of any sentence it lands in. Used sparingly, like spice. - **Hand-touch (rare, for the single "signed" mark in the coda):** **Caveat Brush** in a 1-line faux-marker scrawl, magenta on cyan. Type is **never centered for paragraphs** (only for single-line marquee titles). Line-length is constrained to 52 characters max. All headings are uppercase; all body is sentence-case with deliberately lowercase opening to make every paragraph feel like a continuation of a thought already in progress. **Palette — aurora-gradient, dopamine-saturated:** Core 7-stop gradient (read in this exact order for all aurora ribbons): - `#0B0014` — *vacuum-black-violet*, the page's structural background. Not pure black — there's a 3% violet bleed that a CRT-emulator phosphor would imprint after 40 years. - `#3A0CA3` — *deep-indigo-burst*, the cool-pole anchor. - `#7209B7` — *amethyst-arcade*, transitional violet. - `#F72585` — *neon-magenta-flare*, the hot-pole anchor; this is the dopamine itself, the pull-the-lever color. - `#FF7A00` — *sunset-citrus*, a brief warm crest used only at gradient peaks, never as a flat fill. - `#06D6F2` — *electric-cyan-pool*, the cool-pole accent for verdict-labels and the "left-side" of every diagonal split. - `#5BFFB1` — *spring-aurora-mint*, the rare fifth note used for hover-success ripples and the single "agree" verdict per page. Supporting neutrals (used sparingly, never flat against text): - `#FFE6F1` — *parchment-bubblegum*, the warmest off-white, used for editorial body text on dark backgrounds. - `#1B1230` — *console-shadow*, the panel background for the Twin-Fruit row. **Color rules:** - Backgrounds are **never pure white and never pure black** — always biased toward violet or bubblegum. - Text on dark uses `#FFE6F1`; text on light uses `#0B0014`. - The aurora gradient is rendered as a **conic-gradient at 18.5° rotation** with subtle CSS `filter: blur(40px)` over a faint scan-line repeating-linear-gradient overlay (3% opacity). - A faint **noise-texture** (procedurally generated SVG turbulence, ~6% opacity) sits over everything, giving the whole page the soft fuzz of a CRT being filmed by a camcorder. ## Imagery and Motifs The visual lexicon is **organic-blobs** in tension with **geometric-shapes** — a deliberate pairing. The blobs are the aurora; the geometric shapes are the verdicts the aurora illuminates. Specifically: - **Aurora-Blobs:** large irregular gradient meshes generated as SVG `` filters animated at 0.005Hz. Each blob is a **soft-edged organic mass** in the aurora 7-stop palette, animated to slowly drift and morph, never repeating exactly. Two blobs per major section: a cool one on the upper-left, a hot one on the lower-right, kissing along the master diagonal. The blobs cast no shadow — they ARE the light source. - **Verdict-Glyphs (geometric-shapes):** a small icon-set of about 14 primitives — chevron, lozenge, half-disc, trapezoid, equal-sign, not-equal-sign, scale-pan, isoceles-triangle, parallelogram, hexagonal-pill, slash-mark, double-slash, x-cross, check-tick. Each is rendered in a single accent color from the palette, with a 2-pixel inner stroke offset to give a faint chromatic-ribbon edge (like 1980s 3D-glasses anaglyph). These glyphs annotate every paired-judgment, sitting in the trapezoidal panels. - **The Slash (`//`) as primary motif:** the diagonal slash is everywhere — as section seam, as punctuation between paired statements (`generous // wasteful`, `principled // stubborn`, `ambitious // ruthless`), as cursor-cross-hair, as decorative ornament between paragraphs. The slash is **always at 18.5°**, never 45°, never vertical. It is the site's logo-ligature. - **Ripple-rings:** every click and every hover-lift emits **2 to 5 concentric circular rings** that ride out from the interaction point, fade to transparent over ~900ms, and absorb the local color of whatever they pass over (so a ripple crossing the diagonal seam picks up cyan on one side and magenta on the other — the ring becomes a tiny aurora itself). Ripples are the page's heartbeat. - **CRT artefacts:** a barely-visible **scan-line overlay** (1px horizontal lines at 3% opacity, 4px gap), a **chromatic-aberration ghost** on the largest hero text (cyan offset -2px x, +2px y; magenta offset +2px x, -2px y), and a **vignetted glow** at the four corners suggesting the curvature of a 14" Trinitron tube. These are the only "vintage" effects — there is no sepia, no paper texture, no film-grain. The nostalgia is *electronic*, not paper. - **No photography. No stock images. No people.** The site is a closed visual system of light, gradient, geometry, and type. The only "imagery" is generative. - **Cursor:** replaced with a small **slash-glyph** that rotates to align with the local diagonal it is approaching, and **trails a faint aurora ribbon** for ~200ms behind cursor motion. On clickable elements the cursor expands into a tiny chevron-pair facing inward like calipers. - **Decorative tertiary motifs:** scattered **half-discs and lozenges** in the empty spaces, like confetti from a 1985 awards-show; an occasional **hexagonal honeycomb fragment** at a corner, half-cropped, suggesting the aurora is leaking through a wall. These ornaments are **never functional**, they are mood-furniture. ## Prompts for Implementation This is a **full-screen narrative experience**, not a product page. There is **no pricing block, no testimonials grid, no stat counters, no "trusted by" logo strip, no signup CTA above the fold, no feature-comparison table**. The visitor scrolls through five vertical chambers of an aurora cathedral and leaves with one idea: *every judgment is paired with its inverse, and the diagonal between them is where you were standing the whole time.* **HTML structure prompts:** - A single long page, vertically scrollable, broken into 5 `
` elements named: `reel-one`, `twin-fruit`, `aurora-plate`, `cabinet`, `coda`. No multi-page navigation — there is **no nav bar** in the conventional sense, only a single floating slash-glyph in the upper-right that pulses gently and, on click, scrolls smoothly to the next section. - Use semantic `
` and `