# 09 · Y2K Retro Pop — Design System

> A one-pager in the Y2K / vaporwave revival — chrome type, neon gradients, a perspective grid floor, and a setting-sun disc. Bold, nostalgic, and unapologetically fun, in the lineage of 90s techno flyers and retro-futurist album art.
> **All content is placeholder** — the persona and every project/post/link are samples; replace them with your own.

---

## 1. Website Goal
Give a musician or creative-with-attitude a loud, immersive landing page. A retro-futurist hero (sun + neon grid) leads into about, music releases, tour dates, and a booking CTA. Primary outcome: a booking, remix, or collaboration enquiry.

## 2. Target Audience
Musicians, DJs, streamers, and creative brands with attitude who want maximal colour and nostalgia rather than restraint.

## 3. Brand Personality
Bold, nostalgic, playful, high-energy, night-drive. Voice is stylized and evocative ("Signals from 1999", "send coordinates"), leaning into the retro fantasy.

## 4. Visual Direction
Deep-purple night sky with neon everything. Signature moves: a chrome-bevel headline (`.chrome` silver→lilac gradient with a faint stroke), a CSS sun disc (`--sun`) with a scanline mask, a perspective-transformed neon grid floor, and neon-outlined cards (2px borders + coloured glow) in cyan / pink / violet variants. Glow comes from coloured `box-shadow` / `text-shadow`, not blur filters on text.

## 5. Color System
Deep night ground with a loud neon quartet; chrome + sun gradients for hero moments.

| Token | Hex / value | Use |
|---|---|---|
| `--bg` | `#160a2b` | Page background |
| `--bg-2` | `#1f0f3a` | Deeper ground |
| `--panel` | `#251247` | Card fill |
| `--text` | `#f4ecff` | Body text |
| `--dim` | `#b9a7e0` | Secondary text |
| `--faint` | `#7d6ba8` | Meta text |
| `--magenta` | `#ff2e97` | Neon pink — borders, glow, accents |
| `--cyan` | `#00e5ff` | Neon cyan — links, toggle, grid |
| `--violet` | `#a259ff` | Neon violet — default card border |
| `--gold` | `#ffd23f` | Tagline, stat numbers |
| `--line` | `rgba(255,255,255,.16)` | Hairlines |
| `--sun` | `gold→magenta→violet` gradient | Sun disc |
| `--chrome` | silver→lilac gradient | Chrome headline text |

**Commit to the loud palette. No pastels or muted neutrals (they kill the vibe); keep body copy in solid `--text`.**

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display | `--disp` "Orbitron", ui-sans-serif, system-ui | Techno-futurist; UPPERCASE, wide tracking; weights 500–800 |
| Body | `--body` "Chakra Petch", ui-sans-serif, system-ui | Squared retro-tech sans; weights 400–600 |

- Hero `h1`: `clamp(46px, 12vw, 150px)`, weight 800, line-height `.9`, `letter-spacing:.02em`, uppercase, chrome fill.
- Tagline: `clamp(13px, 2vw, 18px)`, `letter-spacing:.4em`, uppercase, gold with glow.
- Section headings: `clamp(28px, 5vw, 56px)`, uppercase; card titles `clamp(18px, 2.2vw, 24px)`; stats `clamp(36px, 5vw, 58px)`.
- Eyebrow: Orbitron 12px, `letter-spacing:.28em`, uppercase, cyan.
- Signature move: chrome bevel used sparingly — hero + contact headline only.

## 7. Layout Principles
- `.wrap` `max-width:1120px`; `--pad: clamp(18px, 4vw, 44px)`.
- Sections padded `clamp(56px, 9vw, 120px)`.
- Grids: `.g3` 3-col / `.g2` 2-col, `gap:clamp(14px, 2vw, 22px)`.
- Square corners throughout; "elevation" is neon glow via coloured `box-shadow`.
- Hero `min-height:100svh`, centered, with absolutely-positioned sun + floor behind `.inner`.
- Easing: `--ease: cubic-bezier(.22,.61,.36,1)`.

## 8. Homepage Sections
1. Fixed nav — brand (◈ NOVA), About / Music / Shows / Booking, EN/中文 toggle (cyan box).
2. Hero — sun disc + perspective grid floor, chrome name, tagline, badges, scroll cue.
3. About (Transmission 01) — 3 neon capability cards + 3 stat cards.
4. Music (Transmission 02) — numbered release list with ▶ play links; template note.
5. Shows (Transmission 03) — 2-col grid of tour-date cards.
6. Contact — neon CTA card with chrome "Book NOVA", blurb, mail, social links.
7. Footer — copyright + template label.

## 9. Component Style
- **Nav:** fixed, translucent purple with `backdrop-filter: blur(10px)`, bottom hairline; links glow cyan on hover.
- **Cards (`.card`):** panel fill, 2px `--violet` border + violet glow; `.cyan` / `.pink` variants recolour border + glow; `.stat` shows a gold glowing number.
- **Release rows (`.rel a`):** 4-col grid, 2px hairline border, `translateX(4px)` + cyan glow on hover.
- **Badges:** 2px magenta border + glow.
- **Contact card (`.cta`):** 2px magenta border, large magenta glow, faint neon gradient wash.
- **Lang toggle (EN/中文):** `.lang` group in a 2px cyan box with glow; `data-en`/`data-zh` swapped by an inline script (no separate app.js), persisted in `localStorage` under key **`t09_lang`** (default EN). Active button fills cyan.
- No chat/AI surface in this template.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` fade + rise (`translateY(24px)`, `.6s`), staggered `data-d="1|2|3"` (`.08/.16/.24s`), IntersectionObserver, guarded by `html.js`.
- Hover: nav links glow cyan; release rows slide + glow; card links recolour.
- Static neon effects (sun scanline mask, grid perspective, glows) are CSS, not animated loops.
- `prefers-reduced-motion: reduce` disables reveals and smooth scroll.

## 11. Responsive Design
- `@media (max-width:820px)` — `.g3` becomes 2 columns.
- `@media (max-width:680px)` — nav text links hide (brand + toggle remain).
- `@media (max-width:560px)` — all grids single-column; release rows drop meta + play (2-col layout).
- Hero uses `100svh`.

## 12. Things to Avoid
- Don't add pastel or muted neutrals — they kill the vibe.
- Don't over-apply chrome to body text (unreadable); reserve it for the hero moment.
- Don't move glow off borders/shadows onto blurred text.
- Don't round corners or add soft product-style shadows.
- Don't calm the palette — this template is meant to be maximal.