# 05 · Retro Futurism — Design System

> Y2K synthwave / retro-futurism — outrun album art with a CRT scanline overlay: a deep purple void, glowing cyan/magenta gradient type, and a receding perspective grid.
> **All content is placeholder** — the persona ("Jinyu Chen") and every project/link are samples; replace them with your own. Single self-contained HTML file (inline CSS + JS).

---

## 1. Website Goal
Deliver a maximal, nostalgic "techno display" personal site. The hero stages a synthwave sun and perspective floor grid behind glowing gradient type; the rest moves through notched cards and glowing rows to a "transmit a signal" contact. Primary outcome: a memorable, stylised impression that drives a mailto / social click.

## 2. Target Audience
Anyone who wants a bold, nostalgic-futuristic site with personality — creative technologists, indie builders, musicians-who-code. It flatters people comfortable being loud and stylised rather than corporate or minimal.

## 3. Brand Personality
Maximal, glowing, nostalgic, playful-futuristic, confident. Voice borrows machine/transmission language — "SYSTEM ONLINE", "Transmit a Signal", "▸ Enter work" — theatrical but not brutalist-harsh.

## 4. Visual Direction
A dark purple void lit by a 4-hue neon system, every hue paired with a glow. Signature moves: a glowing sun disc + `perspective` floor grid in the hero, gradient-fill headlines with cyan drop-shadow, notched (`clip-path`) cards, and a subtle full-page CRT scanline overlay above everything.

## 5. Color System
Dark purple-void scale + a 4-hue neon system (cyan / magenta / violet / gold), always with glow.

| Token | Hex | Use |
|---|---|---|
| `--void` | `#0a0616` | page background |
| `--deep` | `#120a26` | card gradient base |
| `--panel` | `#180f30` | card gradient top |
| `--cyan` | `#3af0ff` | primary accent — links, glow text, borders |
| `--magenta` | `#ff3ecb` | secondary accent — labels, secondary buttons, glow |
| `--violet` | `#8b5cf6` | tertiary — perspective floor grid lines |
| `--gold` | `#ffd36b` | rare highlight — card index numbers, sun core |
| `--text` | `#e9e2ff` | primary text |
| `--dim` | `#9a8fc4` | secondary text |
| `--line` | `#2c1f4d` | hairline borders |

**Rule:** this template's identity is the 3–4 hue neon system, not a single accent — but every neon colour must carry a matching `text-shadow` / `box-shadow` / `filter: drop-shadow` glow; flat neon reads wrong.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings / UI | **Chakra Petch** | weight 500–700, uppercase for labels/nav; gradient-fill for hero/contact headlines |
| Mono / labels | **Space Mono** | weight 400–700 — kickers, nav status, card numbers, buttons, footer |

- Type scale (real `clamp()`): hero `h1` `clamp(3rem, 13vw, 11rem)` / line-height `0.9`; hero tagline `clamp(.85rem, 2vw, 1.05rem)`; about copy `clamp(1.2rem, 3vw, 2rem)`; contact `h2` `clamp(2.4rem, 9vw, 7rem)`.
- Hero `h1` fills a `linear-gradient(180deg, #fff → #cfe9ff → cyan → violet)` with a cyan `drop-shadow` glow; contact `h2` fills `#fff → magenta`; the brand wordmark fills `#fff → cyan`.
- Signature type move: gradient-fill headlines that glow, over a CRT scanline.

## 7. Layout Principles
- Spacing base 8px; sections `padding: clamp(70px, 10vh, 130px) clamp(18px, 4vw, 44px)`, `max-width: 1160px` centered.
- Grid: `.cards` uses `repeat(auto-fit, minmax(270px, 1fr))` with 16px gap; `.xp-row` is `130px 1fr`.
- Radius `0` on cards — separation comes from a notched `clip-path` corner-cut (`polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%)`), not rounded corners (lang toggle is a small 4px exception).
- Elevation: neon glow shadows on hover (`box-shadow: 0 0 26px var(--cyan)`, card `0 20px 50px -20px rgba(58,240,255,.4)`), never neutral grey shadows.

## 8. Homepage Sections
1. **Nav** (fixed, gradient-fade background) — gradient brand wordmark left; "◇ SYSTEM ONLINE" glow status + EN·中文 toggle right.
2. **Hero** (`#top`) — glowing sun disc + receding perspective floor grid behind centered content: mono kicker, huge gradient headline, mono tagline, cyan+magenta CTA pair, scroll cue.
3. **01 // About** — mono label + large statement with inline cyan (`.c`) / magenta (`.m`) colour spans.
4. **02 // Selected Work** — notched (`clip-path`) project cards: `/0N` gold index, cyan year, title, description.
5. **03 // Experience** — `.xp-row` list: cyan year column, magenta org line.
6. **04 // Contact** (centered) — gradient-fill headline (white → magenta) + cyan/magenta bordered link buttons.
7. **Footer** — mono, uppercase, split.

## 9. Component Style
- **Buttons (`.btn`):** mono uppercase, 1px cyan border, faint cyan fill; hover → cyan fill + `0 0 26px` cyan glow. `.btn.mag` variant swaps to magenta.
- **Cards:** `--panel → --deep` gradient, `--line` border, notched `clip-path`; hover → cyan border, cyan box-shadow glow, lift `-4px`. Index in gold, year in cyan (absolute top-right).
- **Nav:** transparent gradient-fade bar; status glows cyan; brand is a cyan gradient wordmark.
- **Labels (`.lbl`):** mono uppercase magenta with a magenta glow and a trailing gradient hairline (`::after`).
- **Bilingual EN/中文 toggle:** a small bordered pill pair in the nav (active = cyan fill, 4px radius); every string carries `data-en` / `data-zh`, swapped via `apply(lang)` (sets `innerHTML`, `<html lang>` → `zh-Hant`, toggles `aria-pressed`), persisted in `localStorage` under **`sp05_lang`**; placeholders use `data-en-ph` / `data-zh-ph`.

## 10. Motion / Animation
- Scroll reveals: `.reveal` (opacity 0 + `translateY(26px)`) → `.in` via `IntersectionObserver` (threshold `0.14`), transition `0.9s cubic-bezier(.2,.7,.2,1)`, staggered `(i % 4) * 80ms`.
- Static ambience: CRT scanline (`body::before`, repeating-linear-gradient, opacity `.5`, `mix-blend-mode: multiply`), sun disc, and perspective floor grid are static (no extra loops) — keep the scanline subtle.
- Hover: buttons/cards ignite neon glow shadows.
- `@media (prefers-reduced-motion: reduce)` disables `.reveal` transforms.

## 11. Responsive Design
- `.cards` is intrinsically responsive via `auto-fit`/`minmax(270px, 1fr)` — cards reflow multi-column → single-column as width shrinks (no explicit breakpoint).
- Fluid `clamp()` on type, section padding, and CTA sizing scales everything; the CTA row and contact links wrap; the sun uses `min(60vw, 520px)` so it shrinks with the viewport.
- Hero holds `min-height: 100vh`; `overflow-x: hidden` on `body` contains the 200%-wide floor grid.

## 12. Things to Avoid
- Don't lighten the background — the void purple is the identity.
- Don't drop the glow (flat neon looks like a mistake here) or round the card corners (use the notch).
- Don't reduce to a single accent — the 3–4 hue neon system distinguishes this from the single-accent templates (01/02/04).
- No serif type; keep the scanline subtle, not distracting.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: Y2K synthwave / retro-futurism — outrun album art with a CRT scanline overlay. Deep purple-void background `#0a0616` with `#120a26`/`#180f30` panel gradients for cards, hairline borders `#2c1f4d`, primary text `#e9e2ff`, secondary text `#9a8fc4`, and a 4-hue neon accent system — cyan `#3af0ff` (primary), magenta `#ff3ecb` (secondary), violet `#8b5cf6` (perspective grid lines), gold `#ffd36b` (rare highlights) — every neon colour must carry a matching glow (text-shadow / box-shadow / drop-shadow), flat neon without glow is wrong. Typography: Chakra Petch (weight 500–700, uppercase for labels) for display/UI, Space Mono for kickers/labels/card numbers/footer. Structure: a fixed nav with a gradient-fill wordmark and a glowing "SYSTEM ONLINE" status plus an EN/中文 toggle; a full-viewport hero with a glowing sun disc and a receding perspective floor grid behind a centered mono kicker, a huge gradient-fill uppercase headline with a cyan drop-shadow glow, a mono tagline, cyan and magenta bordered CTA buttons, and a scroll cue; a mono-labelled About section with a large statement paragraph using inline cyan/magenta colour spans; a Selected Work section of notched (clip-path corner-cut, not rounded) project cards with a gold `/0N` index, cyan year, title, and description, glowing cyan on hover; an Experience section of rows with a cyan year column and magenta org line; and a centered Contact section with a gradient-fill headline and cyan/magenta bordered link buttons, ending in a mono footer. A subtle full-page CRT scanline overlay should sit above everything at low opacity. Add scroll-triggered fade+rise reveals via IntersectionObserver, respecting prefers-reduced-motion. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp05_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].