# Design Language for p9r.xyz ## Aesthetics and Tone `p9r.xyz` is a **transmission from a broken arcade cabinet inside a neon-flooded Tokyo night market** — the aesthetic sits at the precise intersection of vaporwave's chromatic fever-dream and a military HUD's cold precision. The site reads as if someone injected the color palette of a 1987 Sega Super Scaler game into a cyberpunk fighter pilot's heads-up display, then left it running unattended until the phosphor grid warped and the scan lines began to drift. The tone is **bold-confident without being aggressive** — this is not the cheap neon-on-black of a generic "cyberpunk portfolio." It is the confidence of someone who has memorized the manual and discarded it. Text is large, deliberate, unhurried. Animations are intentional, never random. The HUD overlays are functional-looking but their data is poetry, not metrics. Mood anchors: late-night vending machine glow, cassette tape rewinding, a city seen from a highway at 120km/h through rain-smeared glass, the precise moment a vector game sprites into existence. The experience unfolds like **tuning into a broadcast that was always already playing** — the viewer arrives mid-transmission, not at a welcome screen. ## Layout Motifs and Structure The layout is a **stratified HUD-overlay system** built in five distinct Z-depth planes: - **Plane 0 (ground):** A full-screen slow-parallax vector landscape — low-polygon mountains or a grid-floor perspective — that drifts 2-4px on mouse move, never more. - **Plane 1 (atmosphere):** Floating gradient mesh clouds in magenta-to-cyan, opacity 0.15–0.3, moving at 0.4× the mouse delta. These exist only as color, never as shape. - **Plane 2 (HUD frame):** Corner brackets drawn in SVG — thin 1px lines forming L-shapes at viewport corners and mid-edge markers, like a rangefinder camera's framelines. Static. Color: `#00F5D4` at 60% opacity. - **Plane 3 (content layer):** Content blocks are not rectangles. They are **scanline-clipped parallelograms** — `clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)` — giving every card a slight italic-lean that reads as velocity. Cards have a 1px border in gradient from `#FF2D78` to `#00F5D4` and a subtle inner glow. - **Plane 4 (foreground HUD data):** Floating status readouts in monospace — coordinate strings, signal bars, a slow-counting hex counter — positioned at viewport edges like a fighter jet's altitude indicator. The grid is **asymmetric golden-ratio split**: left column is 38.2% wide, right is 61.8%. Primary content lives in the right. The left column holds the vertical navigation and HUD readouts. On mobile, these collapse to a bottom-anchored bar. No hero sections with CTAs. No stat grids. The scroll is a **timeline scrub**: as the user scrolls, the HUD planes shift in parallax, and content materializes through a horizontal scanline-wipe transition, not a fade. ## Typography and Palette ### Fonts - **Display / Hero:** [Orbitron](https://fonts.google.com/specimen/Orbitron) — geometric, squared letterforms that read as engineered. Used at 9–14vw for hero text, weight 700–900. The double-storey `O` and angular cuts make every headline feel stamped by a manufacturing process. Letter-spacing: `0.12em`. - **Body / Subheadings:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — variable, wght 300–700. Its quirky ink traps and slightly irregular terminals give body text a handmade quality that softens Orbitron's mechanical edge. Size 15–17px, line-height 1.65. - **HUD / Monospace Data:** [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono) — used exclusively for the floating HUD readouts, coordinate overlays, and any number/code display. All caps, size 10–12px, letter-spacing `0.22em`. Color: `#00F5D4`. ### Palette The palette is a **gradient-dominant vaporwave spectrum** pulled through a military night-vision filter — brights rendered against near-black, never against white. | Role | Name | Hex | |---|---|---| | Background deep | Void Black | `#0A0010` | | Background mid | Twilight Navy | `#0D0B2B` | | Background surface | HUD Dark | `#110D35` | | Primary accent | Neon Magenta | `#FF2D78` | | Secondary accent | Cyan Signal | `#00F5D4` | | Tertiary accent | Hyper Violet | `#BF5FFF` | | Gradient mid | Electric Lavender | `#9B59FF` | | Text primary | Ghost White | `#F0EEFF` | | Text secondary | Muted Lavender | `#9080B8` | | HUD green | Phosphor | `#39FF14` | **Gradient recipes:** - Hero gradient (diagonal): `linear-gradient(135deg, #FF2D78 0%, #BF5FFF 45%, #00F5D4 100%)` - Card border gradient: `linear-gradient(90deg, #FF2D78, #00F5D4)` - Background mesh: radial gradients at 3 viewport positions, magenta/violet/cyan at 8–15% opacity ## Imagery and Motifs ### Vector Art: The Core Visual System All imagery is **procedural vector art** — no photography, no raster images except optional texture overlays at very low opacity. 1. **Grid Floor Horizon.** A perspective-correct vanishing-point grid in `#9B59FF` at 20% opacity, lines 1px, drawn on ``. The grid extends to a horizon line exactly 38.2% from the top of the viewport. The grid slowly drifts toward the viewer — a 12-second loop — giving a constant sense of forward motion at walking pace. 2. **Mountain Silhouettes.** Two or three low-polygon mountain ranges (5–9 vertices each) in flat colors — `#1A0533`, `#0D0B2B`, `#110D35` — layered at different depths. The foreground range has a thin `#FF2D78` ridge-line. These are SVG `` elements, not images. 3. **Scanline Texture.** A repeating `background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 3px)` applied over all content surfaces at pointer-event-none — a 3px scanline that recalls CRT monitors without being cliché about it. 4. **HUD Corner Brackets.** Four SVG `` L-shapes, one per corner, drawn in `#00F5D4` at 55% opacity. Each bracket is 40px × 40px. On page load they animate in from 0 scale over 600ms with a cubic-bezier spring. They subtly pulse — opacity cycling 55%→80%→55% on a 4s loop. 5. **Signal Burst Rings.** On hover of any interactive element, a radial burst of 3 concentric rings (stroke only, no fill) expands from the pointer position: radius 0→80px, opacity 1→0, duration 500ms. Stroke color alternates between `#FF2D78` and `#00F5D4` per ring. 6. **Floating Data Glyphs.** The left column (38.2% wide) contains a slow vertical scroll of HUD readouts in Share Tech Mono: fake coordinates (`37.4°N 127.0°E`), signal strength bars (Unicode block elements), a slowly incrementing hex value, and a mission timer counting up from 00:00:00. These are purely decorative but feel like live telemetry. ### Layered Depth Motifs Every visual layer is semantically named in CSS custom properties: `--layer-ground`, `--layer-atmosphere`, `--layer-hud`, `--layer-content`, `--layer-foreground`. Mouse parallax is applied per layer using `transform: translate(calc(var(--mx) * var(--parallax-factor)), calc(var(--my) * var(--parallax-factor)))` where `--parallax-factor` varies: `0.01` for ground, `0.03` for atmosphere, `0` for HUD frame, `0.06` for content, `0.09` for foreground data. ## Prompts for Implementation ### Core Narrative This site is **a signal intercepted mid-transmission**. There is no "welcome." There is no "about us" above the fold. The first thing the viewer sees is the full-screen vector landscape already in motion — grid scrolling toward them, mountain silhouettes layered in depth, HUD brackets materializing over 600ms. A single line of Orbitron text fades in from 0% opacity after 800ms: the domain name in gradient, rendered at 11vw. Below it, in Space Grotesk at 18px, a single sentence of actual content — not a tagline, a statement. ### Animation Philosophy - All animations use `prefers-reduced-motion` media query as a kill-switch: if reduced motion is set, all animation stops, static state is shown. - The parallax response to mouse movement is smoothed via `lerp()` in a `requestAnimationFrame` loop — direct mouse position is never used. Damping factor: 0.08. - The grid floor uses a `` element for performance. All mountain SVGs are inline in the HTML, not external files. - Transitions between scroll sections use a **horizontal scanline wipe**: a full-width element in `#0A0010` sweeps left-to-right over 350ms, then right-to-left over 350ms revealing new content. No fade, no slide. ### Section Structure The site is structured as **five transmission blocks**, not sections with headers: 1. **[CHANNEL OPEN]** — Full viewport. Grid floor + mountains + HUD brackets. Domain name. One sentence. Nothing else. 2. **[SIGNAL STRONG]** — The primary identity/purpose block. Left column: HUD data stream. Right column (61.8%): large Space Grotesk text blocks with Orbitron pull-quotes. Parallelogram-clipped cards. 3. **[VECTOR FIELD]** — A showcase/portfolio block. Three to five parallelogram cards in a staggered grid. Each card has a gradient-border, inner scanline texture, and a hover state that triggers signal burst rings. 4. **[FREQUENCY LOG]** — Text-heavy block. Details/process/writing. The background shifts to `#0D0B2B` (slightly lighter). HUD readouts in left column change to show a new set of fake coordinates. 5. **[CARRIER WAVE]** — Footer/contact. Full-width gradient mesh. The grid floor reappears but inverted (scrolling away). A minimal contact line in Share Tech Mono. ### Do Not Include - Hero CTAs with arrow buttons or "Get Started" text - Pricing blocks or feature comparison tables - Stat grids ("500+ users", "99.9% uptime") - Hamburger menus on desktop - Stock photography or illustration of people - Light mode / color scheme toggle ### CSS Architecture Notes ```css :root { --c-void: #0A0010; --c-navy: #0D0B2B; --c-surface: #110D35; --c-magenta: #FF2D78; --c-cyan: #00F5D4; --c-violet: #BF5FFF; --c-lavender: #9B59FF; --c-text: #F0EEFF; --c-muted: #9080B8; --c-phosphor: #39FF14; --parallax-ground: 0.01; --parallax-atmo: 0.03; --parallax-content: 0.06; --parallax-fore: 0.09; } ``` All colors referenced only via custom properties. No hardcoded hex values in component rules. ## Uniqueness Notes 1. **Stratified five-plane Z-depth system.** Most vaporwave/HUD sites flatten everything to two layers (background image + content). This design explicitly separates ground, atmosphere, HUD frame, content, and foreground telemetry into named CSS layers with independent parallax factors — creating true perceptual depth without 3D transforms. 2. **Parallelogram content cards via `clip-path`.** Virtually no sites in the corpus use `clip-path` for card shapes. The subtle skew on every content card evokes velocity and distinguishes from the dominant rounded-rectangle card pattern (present in 60%+ of corpus sites). 3. **Left-column HUD telemetry as navigation.** The 38.2% left column is not a sidebar with links — it is a live-updating stream of fake coordinates, signal strength, and timers that doubles as the navigation system. Clicking a "coordinate" scrolls to that section. This inverts the common pattern of literal navigation labels. 4. **Horizontal scanline-wipe section transition.** Section transitions in the corpus are overwhelmingly fade or slide. The scanline wipe (a full-width `#0A0010` bar sweeping horizontally) is directly borrowed from vaporwave TV broadcast aesthetics and appears in 0% of surveyed designs. 5. **Transmission-block narrative structure.** Content is organized as radio/TV channel blocks (`[CHANNEL OPEN]`, `[SIGNAL STRONG]`, etc.) rather than conventional section headers. This gives the site a broadcast-station identity that persists without requiring a logo or brand mark. **Chosen seed:** aesthetic: vaporwave, layout: hud-overlay, typography: expressive-variable, palette: gradient, patterns: parallax, imagery: vector-art, motifs: layered-depth, tone: bold-confident **Avoided overused patterns from frequency analysis:** gradient (77% — used but differentiated via military HUD context, not soft aurora), parallax (77% — used but implemented as named Z-depth planes with independent factors, not simple background-attachment: fixed), hud-overlay (5% — used as primary structure not decoration), vaporwave (7% — used as the core aesthetic lens, not a surface treatment).