# 12 · Neon Cyberpunk — Design System

> A dark HUD/terminal-adjacent one-pager with magenta/cyan neon, scanlines, and a glitching headline — the cyberpunk dev-and-streamer aesthetic (Blade Runner console meets a Twitch overlay), condensed techno type on near-black.
> **All content is placeholder** — the persona "RIN.TANAKA" and every build/stream/stat/link are samples; replace them with your own.

---

## 1. Website Goal
Present a game developer, streamer, or maker as a live, always-on operator. The primary outcome is to route visitors to builds (Steam/itch/GitHub), the stream schedule, and a contact channel — while the neon HUD signals "online, building in public."

## 2. Target Audience
Indie game devs, streamers, shader/graphics hackers, and technical creators. Flatters work that lives on Steam/itch/GitHub and thrives on a loud, high-energy, community-driven persona.

## 3. Brand Personality
Electric, technical, nocturnal, loud, playful. Voice is terminal-flavored and lowercase (`// about.exe`, `set reminder →`) — fast, confident, a little glitchy.

## 4. Visual Direction
Near-black background overlaid with a faint cyan grid and a fixed scanline layer. A full-viewport HUD hero pins corner brackets around a huge condensed headline that glitches into magenta/cyan RGB-split copies. Cards are dark gradient panels with neon hairline borders and glow-on-hover; stats and status pills light up in lime. Everything is uppercase, monospace-forward, and edged rather than rounded.

## 5. Color System
Near-black canvas with three neon accents (magenta, cyan, lime).

| Token | Value | Use |
|---|---|---|
| `--bg` | `#05060a` | Page background |
| `--bg-2` | `#0a0c14` | Card gradient end |
| `--panel` | `#0e111c` | Card gradient start |
| `--text` | `#e8ecff` | Primary text |
| `--dim` | `#8b93b5` | Secondary text |
| `--faint` | `#565d7d` | Meta, captions, indices |
| `--magenta` | `#ff2d78` | Glitch layer, card tab, contact border/glow |
| `--cyan` | `#00f0ff` | Headings glow, links, active toggle, hover borders |
| `--lime` | `#b6ff3a` | Status "ONLINE", stat/pill accents, schedule days |
| `--line` | `rgba(0,240,255,.18)` | Cyan hairline borders |
| `--line-2` | `rgba(255,45,120,.28)` | Magenta hairline (chips) |

Body carries a cyan grid: two `rgba(0,240,255,.04)` gradients at `background-size:44px 44px`. **Three neon accents max — this is NOT amber-terminal; keep magenta/cyan/lime and never add a warm accent.**

## 6. Typography
Condensed techno display over a monospace base.

| Role | Family | Notes |
|---|---|---|
| Display / headings | `--disp` "Rajdhani", ui-sans-serif | Weights 500/600/700; uppercase, tight tracking |
| Body / meta / mono | `--mono` "JetBrains Mono", ui-monospace | Weights 400/500/700; base `15px`, line-height `1.65` |

- Type scale (clamp): glitch hero `clamp(52px,14vw,180px)`; section titles `clamp(26px,4.4vw,50px)`; card `h3` `clamp(19px,2.2vw,25px)`; stat number `clamp(38px,5vw,62px)`; contact `h2` `clamp(30px,5vw,60px)`.
- Letter-spacing: `.tag` `.24em`, nav/pills `.08–.16em`, headings `.03em` — all uppercase.
- Signature type move: the `.glitch` headline duplicates its text via `::before` (magenta) and `::after` (cyan) with `clip-path` splits animating on `gl1`/`gl2`; nav links prefix a `› ` and glow cyan on hover.

## 7. Layout Principles
- Spacing base: `--pad:clamp(16px,4vw,44px)`; sections `padding:clamp(52px,8vw,110px) 0`.
- Container: `.wrap` `max-width:1160px`, centered.
- Grids: `.g3` `repeat(3,1fr)`, `.g2` `repeat(2,1fr)`, gap `clamp(14px,1.8vw,20px)`; schedule rows use `grid-template-columns:auto auto 1fr auto`.
- Radius: none (0) — hard edges throughout. Hero uses four absolutely-positioned corner brackets (`26px`, `2px solid var(--magenta)`).
- Elevation: no drop shadows for depth; instead neon glow on hover (`box-shadow:0 0 26px -8px rgba(0,240,255,.5)`), the fixed `.scan` scanline overlay, and text-shadow glow on stats/links.

## 8. Homepage Sections
1. Fixed blurred nav — brand `RIN.TANAKA` (magenta dot), primary links, EN/中文 toggle; plus a fixed scanline overlay layer.
2. Glitch HUD hero — corner brackets, `// status: ONLINE` meta, glitch headline, status pills, scroll cue (fills `100svh`).
3. `#about` — "Profile" (`01`): 3 cards (Build/Stream/Teach) + a 3-up stat row.
4. `#builds` — "Builds" (`02`): 2-column project cards with chips + template note.
5. `#stream` — "Stream schedule" (`03`): MON/WED/FRI schedule list rows.
6. `#contact` — "Ping me" neon CTA panel with mailto + social row.
7. Footer — copyright + template credit.

## 9. Component Style
- **Buttons/links:** no filled buttons; links are the neon mailto (cyan glow) and nav/social rows; schedule rows act as links with a `set reminder →` cue.
- **Cards:** `.card` dark gradient (`linear-gradient(160deg,var(--panel),var(--bg-2))`), `1px solid var(--line)`, a magenta top-tab (`::after`), hover → cyan border + glow. Stat cards show a glowing cyan number.
- **Nav:** fixed, `rgba(5,6,10,.72)` + `backdrop-filter:blur(8px)`, cyan bottom hairline; active language pressed in cyan.
- **Chips:** uppercase mono, `1px solid var(--line-2)` (magenta), in `--dim`.
- **Pills:** hero status pills; `.on` variant borders/fills lime with a `●` marker.
- **Forms:** none (contact is a mailto + link row).
- **Chat/AI surface:** none.
- **Bilingual EN/中文 toggle:** elements carry `data-en` / `data-zh` (and `data-en-ph`/`data-zh-ph`); an inline script swaps them via `innerHTML` (preserving `<b>` etc.), sets `<html lang>`, and persists to `localStorage` key **`t12_lang`** (default `en`).

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` start `opacity:0; translateY(22px)` → `.in`, IntersectionObserver threshold `.12`, guarded by `html.js`; stagger `data-d` → `.08/.16/.24s`, transition `.6s var(--ease)` (`cubic-bezier(.2,.7,.3,1)`).
- Glitch: `.glitch::before` animates `gl1 3.2s steps(2) infinite` (magenta), `::after` `gl2 2.6s steps(2) infinite` (cyan) — RGB-split jitter near the loop end.
- Hover: cards/schedule rows gain neon border + glow; nav & social links glow cyan/lime.
- `prefers-reduced-motion: reduce` disables reveals, smooth scroll, the glitch animation, and hides the scanline overlay (`.scan{display:none}`).

## 11. Responsive Design
- `max-width:820px` — `.g3` grids drop to 2 columns.
- `max-width:680px` — nav links hide (brand + toggle remain).
- `max-width:560px` — `.g3` and `.g2` collapse to one column; schedule rows simplify to `auto 1fr` (time + reminder cue hidden).

## 12. Things to Avoid
- Don't turn this into an amber/warm terminal — the identity is cool magenta/cyan/lime neon on near-black.
- No rounded corners, no soft/diffuse shadows — glow is the only "elevation."
- Don't add a fourth accent hue or pastel tints; keep the palette tight.
- Don't remove the scanline/grid texture or the glitch headline — they carry the aesthetic (but always honor reduced-motion).
- Avoid long prose; keep copy terminal-terse, uppercase, and lowercase-command flavored.