# Design Language for mosoon.xyz ## Aesthetics and Tone mosoon.xyz is a **city block at 2AM on a Friday when the rain has just stopped and every neon sign is reflected in a shallow puddle** — that exact electric moment when urban infrastructure becomes involuntary art. The aesthetic is **dopamine-soaked HUD brutalism**: the visual language of a fighter pilot's heads-up display projected onto the glass facade of a Shibuya convenience store at midnight. Think the illegible beauty of Tokyo crosswalk signage seen from a rain-slicked taxi, or the electric geometry of a Hong Kong night market reduced to pure signal: yellow, cyan, hot magenta on absolute black. The tone is **conversational and conspiratorial** — like a city local leaning over to tell you where the best ramen is, not a brand screaming at you. Short sentences. Direct address. The kind of copy that says "you already know this" before explaining something. No formal language, no passive voice, no corporate hedging. The site speaks in the present tense, in the second person, at 11pm. The mood is **high-voltage but unhurried** — dopamine without anxiety. The neon pulses, the geometry tilts, the city hums, but nothing demands your attention with urgency. It is confident in its own electricity. ## Layout Motifs and Structure The structure is a **HUD-overlay stack on a deep-field city canvas**. There is no conventional grid. Instead, the layout is organized as five independently-positioned HUD panels — transparent, bordered in 1px neon cyan or magenta, with subtle scanline textures — floating over a fixed full-viewport background that is a procedurally-generated city grid seen from above at an extreme perspective. **The five HUD panels:** 1. **ALPHA PANEL** — upper-left quadrant, wide and short, contains the wordmark and a single city-district label (e.g. "DISTRICT 07 — MOSOON"). Bordered in `#00FFFF` (electric cyan). Has a corner-cut at 24px on the top-right corner, CSS `clip-path`. 2. **BETA PANEL** — center-screen, portrait orientation, taller than wide, contains the hero statement — three lines of oversized display type at `clamp(52px, 9vw, 128px)`, tilted 3D on the Y-axis by `rotateY(8deg)` and persisted with `perspective: 1200px`. This panel hovers slightly off the plane, casting a colored drop shadow in `#FF00AA40`. 3. **GAMMA PANEL** — lower-right, square, contains an animated city-grid wireframe (canvas-drawn orthographic city blocks, lines in `#FF00AA` at 0.4 opacity, slowly drifting rightward). This is pure ambient decoration. 4. **DELTA PANEL** — upper-right, narrow vertical strip, contains a scrolling ticker of city-data text (made-up data: "TEMP 18°C / HUMIDITY 74% / SIGNAL STR 94% / DISTRICT ACTIVE"). Text is `JetBrains Mono`, 11px, uppercase, `#FFFF00`. 5. **EPSILON PANEL** — lower-left, medium, contains the primary content (three to five short paragraphs, conversational, city-local voice). **All five panels are absolutely positioned.** On mobile, they collapse into a vertical stack with the 3D tilt neutralized to `rotateY(2deg)` — the HUD feeling survives but the panels stack cleanly. The deep-field city background is a `` element, fixed-position, full-viewport. It draws an orthographic city block grid from a high vanishing point — thin lines, `#1A1A2E` fill, `#00FFFF14` grid lines — that slowly drifts upward at 0.2px/frame, simulating aerial urban drift. **No hero images. No full-bleed photography. No sticky navigation bar.** Navigation, if any, is embedded as a single line inside the ALPHA panel — three city-district style links like `[ 01 ABOUT ] [ 02 WORK ] [ 03 CONTACT ]`. ## Typography and Palette **Palette:** | Name | Hex | Role | |---|---|---| | Void | `#050508` | Page background, deepest canvas | | Electric Cyan | `#00FFFF` | Primary HUD border, primary accent | | Hot Magenta | `#FF00AA` | Secondary accent, tilt shadow, hover state | | Arc Yellow | `#FFFF00` | Ticker data, secondary text | | Ghost White | `#E8E8F0` | Body text in panels | | Neon Emerald | `#00FF88` | Tertiary accent, status indicator dots | | Smoked Glass | `#0D0D1A` | HUD panel background at `rgba(13,13,26,0.72)` | | Flare White | `#FFFFFF` | Wordmark, maximum emphasis | **Typography:** - **Wordmark / Hero Display:** [`Anton`](https://fonts.google.com/specimen/Anton) — a condensed, ultra-bold sans with the density of a warehouse district sign. Used at `clamp(80px, 18vw, 220px)` in the BETA panel, uppercase, `letter-spacing: -0.02em`. Color: `#FFFFFF` with a 2px text-shadow in `#00FFFF` at 70% opacity creating a neon bleed. - **Sub-display / Panel Labels:** [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk) — variable weight 300–700. Used for panel headers at 13px uppercase with `letter-spacing: 0.18em` in `#00FFFF`. The geometric forms feel native to a HUD interface. - **Body / Conversational Copy:** [`IBM Plex Sans`](https://fonts.google.com/specimen/IBM+Plex+Sans) — weight 400, size 16px, line-height 1.7, color `#E8E8F0`. The slightly mechanical warmth of IBM Plex reads as a city-dweller explaining directions, not a brand broadcasting. - **Data / Ticker / Code:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400, size 11px, uppercase, `letter-spacing: 0.12em`, color `#FFFF00`. Exclusively for the DELTA panel ticker and any inline code or coordinates. ## Imagery and Motifs **No photography. No stock. No illustrations of people.** The entire visual world is generated from three motif families: 1. **City-Grid Canvas (generative).** The full-viewport background canvas draws an orthographic city map — rectangular blocks of varying sizes, arranged in a loose grid from a high vanishing point at `(50vw, -20vh)`. Block fills are `#0D0D1A`. Grid line color is `#00FFFF` at 8% opacity. One random block per 4 seconds gets a brief flicker: its fill cycles to `#00FF8820` for 200ms then back. The grid slowly drifts upward at 0.2px/frame, infinite, seamless. The viewer feels they are moving over a city at night at walking speed. 2. **Geometric-Abstract Shards (SVG, inline).** Scattered across the background (not inside panels) are 8–12 semi-transparent geometric shards: irregular polygons (hexagons, truncated triangles, rhomboids) ranging from 40px to 140px, filled with gradients that run from `#00FFFF08` to `#FF00AA08`, with 1px strokes in `#00FFFF30` or `#FF00AA30`. These shards are absolutely positioned, statically placed (no animation), and exist to break the strict orthogonality of the city grid with urban visual noise — like broken glass, graffiti outlines, or neon reflections on wet pavement. 3. **Neon Status Indicators (CSS).** Each HUD panel has a status indicator in its top-right corner: a 6px circle in `#00FF88` with a CSS `box-shadow: 0 0 8px 2px #00FF88` pulsing at 2s ease-in-out infinite with opacity between 0.6 and 1.0. This is the only animation on the panels themselves — the rest of the HUD is static chrome. 4. **City-Urban Text Motifs.** District labels, coordinates, signal-strength readouts, and temperature data embedded in the DELTA ticker and the ALPHA panel label create the feeling of a live city-monitoring interface. These are fictional but plausible: `LAT 35.6762 / LON 139.6503`, `GRID REF: 07-M44`, `UPTIME 99.8%`. They never pretend to be real data — they are explicitly decorative. ## Prompts for Implementation Build mosoon.xyz as **a city-monitoring HUD you walk into, not a page you scroll**. The viewport is a window into a living city seen from above. The five HUD panels are the only interactive surface. There is no scroll on desktop (all five panels fit in one viewport). On mobile, panels stack vertically and the page becomes scrollable — but the city-grid canvas remains fixed behind everything. **Implementation priorities (in order):** 1. **The City-Grid Canvas** — implement first, as everything else layers on top. Use `requestAnimationFrame` with a `y-offset` counter that increments by 0.2 per frame and wraps at the grid tile height. Draw ~200 city blocks per frame using a pre-computed layout array generated at init. Keep the frame budget under 3ms by using a dirty-rect strategy: only redraw blocks that have changed (flickering blocks) plus a full y-scroll redraw each frame. 2. **The BETA Panel 3D Tilt** — `transform: perspective(1200px) rotateY(8deg) rotateX(2deg)`. The panel enters the viewport on load with a CSS transition: starts at `rotateY(24deg) translateX(40px) opacity(0)` and transitions to final position over 1.2s `cubic-bezier(0.16, 1, 0.32, 1)`. This is the hero animation — the city HUD powering on. 3. **Anton Display Type in BETA Panel** — The three hero lines use Anton at sizes: line 1 at `clamp(52px, 9vw, 112px)`, line 2 at `clamp(80px, 14vw, 180px)` (widest, the "anchor" line), line 3 at `clamp(48px, 7.5vw, 96px)`. The anchor line is the domain name or the core brand statement. The neon bleed text-shadow (`0 0 20px #00FFFF, 0 0 60px #00FFFF80`) is applied only to the anchor line — the others use plain white. 4. **HUD Panel Borders** — Each panel has `border: 1px solid` with its assigned accent color plus a `box-shadow: inset 0 0 16px 20, 0 0 24px 18`. The `background` is `rgba(13, 13, 26, 0.72)` with `backdrop-filter: blur(8px)`. Corner cuts are done with `clip-path: polygon(24px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 24px)` on panels that have a top-left chamfer, or the mirrored version for top-right chamfers. 5. **Ticker Tape in DELTA Panel** — A single `
` containing the ticker text, inside a `overflow: hidden` container. CSS `@keyframes ticker` translates the text from `translateY(0)` to `translateY(-100%)` over 18s linear infinite. On hover over the DELTA panel, `animation-play-state: paused`. 6. **Geometric Shards** — Generate the 8–12 shards at page load using a small JS function that picks random polygon vertices (5–7 points) within a bounding box of 40–140px, places them at random viewport positions that avoid the five HUD panel zones, and renders them as inline SVG polygons appended to a `shards-layer` div that sits between the canvas and the panels in the z-stack. 7. **Conversational copy in EPSILON Panel** — Three paragraphs, second-person, present tense, 12–18 words per sentence. Example opening: "You've been looking at city data all day. This is the part where it stops being data." End with an invitation to a specific action (contact, project, or link) framed as a city-local tip: "If you want in on this, the door's open — `[ reach out ]`." 8. **No page scroll on desktop** — use `overflow: hidden` on `body` for `min-width: 768px`. The five panels are sized and positioned to fit within `100vh`. On `max-width: 767px`, remove the overflow hidden, neutralize 3D tilts, and stack panels vertically with `16px` gap. **AVOID:** pricing blocks, testimonial carousels, stat grids, hero-with-CTA-button layouts, navigation bars, footer links sections, modal popups, cookie banners, any full-screen video backgrounds. ## Uniqueness Notes 1. **HUD-overlay on aerial city canvas — first in corpus.** The frequency analysis shows `hud-overlay` at near-zero in the existing registry. Most city-urban designs in the corpus use street-level photography or graffiti typography. This site inverts the perspective entirely — aerial, abstract, infrastructural — and builds the city as generative data-art rather than a photograph. The city is always moving, always drifting upward, never still. 2. **Absolute-positioned panel composition, no scrollable sections.** Nearly every design in the corpus (including the reference designs) is a vertically scrolling single column or a bento grid. mosoon.xyz has zero scroll on desktop. All five panels fit in one viewport like a cockpit instrument panel. This is structurally rare in the corpus and forces a fundamentally different reading behavior — the viewer scans spatially, not temporally. 3. **Anton as display face at extreme scales.** The corpus has a strong preference for Space Grotesk, Inter, and Quicksand for display type. Anton — a condensed ultra-bold that reads like painted warehouse signage — is absent from the corpus entirely. At 14–18vw with neon bleed shadows, it achieves a scale and physical presence that neither geometric sans nor rounded sans can match. It is unmistakably urban and unmistakably large. 4. **Dopamine palette without gradients.** Most neon-electric designs in the corpus (and in general web design) use gradient transitions between neon colors, soft blends, or vaporwave washes. mosoon.xyz uses **flat, unblended neons against absolute black** — each panel has exactly one accent color, assigned by role, never mixed. The visual richness comes from the juxtaposition of four distinct neon primaries (`#00FFFF`, `#FF00AA`, `#FFFF00`, `#00FF88`) against the void, not from blending them. This is closer to Times Square signage than to synthwave wallpapers. 5. **Conversational tone inside a technical visual language.** The body copy deliberately contradicts the visual register. The HUD chrome says "infrastructure" and "surveillance data"; the EPSILON panel copy says "you already know this part." The friction between cold visual language and warm direct speech is the site's personality — a city that is both system and person. **Chosen seed:** aesthetic: dopamine, layout: hud-overlay, typography: oversized-display, palette: neon-electric, patterns: tilt-3d, imagery: geometric-abstract, motifs: city-urban, tone: conversational **Avoided patterns (per frequency analysis):** bento-grid (overused at 5%+), glassmorphism (common in corpus), vertical-scroll-single-column, gradient-blend neons, hero-with-CTA-button, testimonial-section, stat-grid, sticky-nav.