# Design Language for gur.al ## Aesthetics and Tone `gur.al` is a **retro-futurist arcade scanner** — imagine the moment a 1979 coin-op game cabinet gets reprogrammed to display a living aurora map of deep space, its phosphor CRT screen now blowing neon-magenta and acid-teal borealis curtains across isometric geometry. The machine still bleeps. The fonts are still chunky pixel-adjacent display faces stamped on physical button panels. But the content inside those panels is alive: aurora plasma ripples behind translucent geometric polygons, and every number on screen spins backward before landing, like a vintage drum-roller scoreboard catching up with itself. The tone is **playful-confrontational**: the site does not take itself seriously, but it is deeply precise about its own visual rules. It is a game that knows it is a game. Buttons respond with satisfying counter-spin. Scores count down to reveal real values. Every section transition is a new level loading — geometric shapes assemble from the edges, aurora lights shift hue, and the heavy retro display typeface stamped on each panel gives you exactly three words of context before the animation tells the rest of the story. Mood: Saturday night at a retro arcade inside a northern-lights observatory. Neon-bright but spectral. Playful but governed by internal logic. No naturalistic photography. No corporate tone. Just light, geometry, and score. ## Layout Motifs and Structure The page is built on a **strict Z-pattern scan path** — the single most underused layout in the corpus. The eye enters top-left, sweeps to top-right, drops diagonally to a lower-left anchor, then sweeps to lower-right. Each of the four Z-nodes is a distinct **panel zone**: - **Zone A (top-left):** Wordmark stamped in 3-row stacked retro display type. Aurora plasma bleeds from the top-left corner behind it, pulling the eye in. - **Zone B (top-right):** Primary message — a single punchy 3-word headline in oversized retro display, right-aligned, with a counter-animate numeric ticker beneath it that counts down from a large number to the site's core stat. - **Zone C (diagonal bridge):** A full-viewport-width diagonal band, drawn at 18° tilt, containing a single isometric geometric shape (an irregular hexagonal prism) that rotates slowly. The diagonal pulls the eye from top-right to bottom-left along the Z's crossbar. - **Zone D (bottom-left):** The site's secondary content anchored here — short descriptors laid out in a 2-column offset grid, each prefixed with a chunky single-digit panel label. - **Zone E (bottom-right):** CTA-free footer zone containing only a small rotating polygon and the domain name in tiny mono. The final rest point of the scan. No cards. No nav bar. No sticky chrome. The entire Z is one scrollless viewport — content lives in the Z's geometry, not in vertical scroll. The Z-structure is enforced with `display: grid` using a 12-column × 6-row named-area layout, named zones A through E. Spacing is generous between zones — minimum 80px gutters. The inter-zone diagonal band is the only decorative break, and it is also functional (it carries the geometric hero element). ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display / Wordmark — `Bungee`:** Heavy, uppercase, slab-serif-adjacent with embedded inline shadows. Used at 96px for the wordmark (Zone A), 72px for the Zone B headline, and 32px for panel labels (Zone D). Letter-spacing: -0.02em. All caps always. This is the arcade cabinet's stamped-plastic font. It is chunky, confident, and slightly ridiculous — exactly right. - **Counter numerals — `Bungee Shade`:** The sister face with built-in drop-shadow registers. Used exclusively for the counter-animate ticker in Zone B. At 120px, the numerals have physical weight and depth — they look pressed into the screen. During counter-animate, each digit barrel-rolls backward through its column axis before settling. - **Supporting copy / labels — `Share Tech Mono`:** A monospaced display face with a telex/teleprinter aesthetic. Used at 13–16px for short descriptors in Zone D and the footer text. It echoes the CRT readout tradition without being a standard code font. **Color Palette — Analogous (violet → teal quadrant):** All five colors live in a 90° analogous arc from violet-blue through blue-teal. This is one of the most underused palette classes in the corpus (1%) and creates an aurora-authentic range without warmth. - `#1A0A2E` — Deep indigo-black. Page background. Almost no light, like the sky at 2am above the treeline. - `#2D1B69` — Electric violet. Zone A aurora base, used as the glow origin for radial gradients. - `#0B3D91` — Deep cobalt-blue. Diagonal band fill. The cold mid-range of the aurora. - `#0ABFBC` — Acid teal. Primary accent. Counter-animate digits, active polygon edges, hover states. - `#7B2FBE` — Saturated purple-magenta. Secondary accent. Aurora shimmer highlights, Zone B headline color. All text: `#E8F4F8` (near-white with a ghost of teal) on dark backgrounds. Panel labels in `#0ABFBC`. Error / attention: `#FF3CAC` (hot pink, used sparingly as a single accent for emphasis only). ## Imagery and Motifs **No photography.** The entire visual world is constructed from three families of generated form: 1. **Aurora Plasma (CSS + SVG filter).** Behind every zone, a live aurora effect is rendered using layered SVG `` + `` filters animated with `calcMode="linear"` interpolation. The turbulence baseFrequency shifts from 0.008 to 0.014 over 12 seconds, creating slow plasma drift. The plasma is masked to stay within each zone's grid area — it does not bleed across zone boundaries. Colors are constrained to the analogous palette. The plasma is always moving — even when other elements are static. 2. **Isometric Geometric Prisms (SVG, hand-coded).** The hero element in the diagonal bridge zone is a single irregular hexagonal prism drawn in isometric projection. Its three visible faces each carry a different analogous palette tint: top face in cobalt-blue, left face in electric violet, right face in acid-teal. The prism rotates at 0.5 RPM on its vertical isometric axis via CSS `@keyframes`. On page load it assembles — six triangular face segments slide in from the viewport edges and snap together with a 40ms each stagger. 3. **Counter Drum Panels (CSS 3D transforms).** The numeric counter in Zone B is implemented as a set of 5–8 CSS drum-roller panels. Each panel is a `perspective: 400px` container with faces at 0° and 90° on the X axis. On trigger (page load + every 8 seconds), each drum rolls backward: `rotateX(-90deg)` reveals the new digit face. The animation is staggered left-to-right with 60ms delay per digit. The final landing state uses a subtle `cubic-bezier(0.34, 1.56, 0.64, 1)` overshoot for a satisfying mechanical snap. 4. **Polygon Constellation (SVG).** Zone E's footer contains a static but breathing constellation of 7–11 irregular convex polygons at 12–32px, arranged in a loose formation. Each polygon has a 1.5px stroke in `#0ABFBC` at varying opacity (40–80%). On a 6-second cycle, one random polygon pulses its opacity from 40% to 95% and back — never more than one polygon glowing at a time, creating a slow random star-blink effect. ## Prompts for Implementation Build `gur.al` as a **single-viewport experience** — no vertical scroll, no sticky nav, no modal overlays. The entire site fits inside `100vw × 100vh`. The Z-grid is the page. **Grid definition:** ```css .z-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); grid-template-areas: "A A A A . . . B B B B B" "A A A A . . . B B B B B" ". . C C C C C C C . . ." "D D D D D . . . . . . ." "D D D D D . . . . E E E" ". . . . . . . . . E E E"; height: 100vh; width: 100vw; background: #1A0A2E; } ``` **Aurora layer:** Each zone has a `::before` pseudo-element containing an absolutely positioned SVG with `` + `` filter chain. The SVG is `pointer-events: none`, `mix-blend-mode: screen`, and `opacity: 0.4`. This gives each zone its own aurora pool without blending zones together. **Counter-animate implementation:** - On `DOMContentLoaded`, read the target value from a `data-target` attribute on the counter element. - Start from a number 3x the target value, counting down every 80ms. - Each digit uses the drum-roll CSS transform described above. - The final value snaps with the overshoot bezier. - After 8 seconds of rest, the counter re-triggers from 150% of target (shorter second cycle). - This is the page's primary interactive heartbeat — it should feel like a pinball machine rolling up a high score. **Diagonal band (Zone C):** - Implemented as `position: absolute`, `width: 150vw`, `left: -25vw`, `height: 160px`, `transform: rotate(-18deg)`, `transform-origin: center`. - Background: `linear-gradient(90deg, #2D1B69 0%, #0B3D91 50%, #2D1B69 100%)`. - The isometric prism SVG sits centered on this band, `position: relative`, with a `filter: drop-shadow(0 0 18px #0ABFBC)`. **Typography animations:** - Zone B headline: on load, each word of the 3-word headline drops in from 30px above with `opacity: 0 → 1`, staggered at 120ms per word, using `cubic-bezier(0.22, 1, 0.36, 1)`. - Zone A wordmark: appears as three stacked lines that slide in from left with `translateX(-40px)`, staggered at 80ms per line. - Panel labels (Zone D): scale from 0.6 to 1.0 and fade in, one by one, on a 200ms stagger after the Zone A animation completes. **Polygon constellation (Zone E):** - Use `requestAnimationFrame` with a slow clock (one tick per 6000ms) to pick a random polygon from the constellation array. - Animate its `opacity` attribute from current value to 0.95 over 400ms, then back to 0.4 over 600ms. - Never trigger the next blink until the current one completes. **Interaction:** - On any polygon hover (Zone E): the hovered polygon's stroke transitions to `#7B2FBE` over 200ms and its neighboring polygons (within 60px) dim to 20% opacity. - On the wordmark hover (Zone A): the three stacked lines shuffle their vertical order (swap lines 1 and 3) over 180ms using `translateY` transforms, then return after 600ms. This is playful and surprising. - On the counter hover (Zone B): the drum-roll restarts from a random large number, playing the full animation again. **No JavaScript frameworks.** Vanilla JS + CSS custom properties + SVG filters only. Total weight target: under 40kb unminified. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **sci-fi**, layout = **z-pattern**, typography = **retro-display**, palette = **analogous**, patterns = **counter-animate**, imagery = **geometric-abstract**, motifs = **aurora-lights**, tone = **playful**. **Differentiators from the existing corpus:** 1. **Z-pattern layout at 3% corpus frequency.** The vast majority of designs use centered (90%) or full-bleed (76%) layouts. `gur.al` uses a strict named-area CSS grid enforcing the Z-path — the four quadrant zones are not decorative, they are the navigation logic. No scroll, no nav bar, no hamburger. The Z is the UX. 2. **Analogous cold palette at 1% corpus frequency.** While warm gradients dominate 93% of designs and generic gradients 84%, `gur.al` deploys a five-color analogous arc in the violet-through-teal cold range. The palette is visually cohesive but spectrally rich — aurora authenticity without resorting to warm sunset clichés. 3. **Counter-animate as the primary storytelling engine.** The drum-roller counter is not a stat block or a CTA metric — it is the page's heartbeat and primary interactive affordance. The backward-rolling barrel animation, the 8-second re-trigger cycle, and the hover-restart create a score-board feeling that reinforces the playful arcade aesthetic without any game mechanics or gamification UX patterns. 4. **Retro-display type (`Bungee` / `Bungee Shade`) at 6% corpus frequency.** The corpus is dominated by mono (86%) and humanist (36%) typefaces. `Bungee Shade`'s built-in drop-shadow registers make the counter numerals look physically pressed into the screen — no text-shadow CSS needed, the font's own letterform carries the dimensional weight. 5. **Single-viewport no-scroll layout.** With centered layout at 90% and full-bleed at 76%, essentially every other design scrolls. `gur.al` does not. The 100vh Z-grid is the complete experience — fast to load, immediately legible, and impossible to confuse with any other design in the corpus. 6. **Aurora plasma via SVG filter animation (not CSS gradient animation).** The corpus uses CSS gradient animations for glow effects. `gur.al`'s aurora is generated by animating `` `baseFrequency` values — this produces a genuinely organic plasma drift that cannot be replicated with gradient keyframes.