# 05 · Cinematic Dark — Design System

> Dark-mode, vibrant-gradient personal site — deep near-black canvas, oversized grotesque display, blue→cyan gradient accents, soft glow, and glassy panels. Trend: the 2026 Awwwards-style creative-developer portfolio.
> **All content is placeholder** — the persona "Kai Nakamura" and every project/stat/post are samples; replace them with your own.

---

## 1. Website Goal
A cinematic, high-impact portfolio for creative technical work that should feel premium and alive. It optimizes for immediate wow — the dark canvas and gradient headline carry the first impression — and for signalling craft to studios and clients evaluating motion/3D/WebGL work.

## 2. Target Audience
Creative developers, motion / 3D / WebGL designers, agencies, and product launches. It flatters visually rich, interactive work and people whose value proposition is "premium and futuristic."

## 3. Brand Personality
Dark, electric, confident, futuristic, glossy. Voice is bold and cinematic ("I build the web that moves you"), leaning on impact words rather than modesty.

## 4. Visual Direction
Deep near-black page with fixed radial glows in the top corners, dark glassy panels edged with translucent-white hairlines, and a single vivid blue→cyan gradient reserved for high-value moments (headline words, logo mark, solid buttons, active states, thumbnails). Oversized Space Grotesk display + gradient *is* the hero — no hero image needed. An infinite skills marquee runs under the hero. Deliberately not amber/monospace/terminal (that's Mission Control) and not the overused purple→pink.

## 5. Color System
Restrained dark neutrals so the gradient pops; the gradient carries the brand.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#08080f` | page (fixed radial glows top corners) |
| `--bg-2` | `#0e0e18` | inputs / recessed |
| `--panel` / `--panel-2` | `#12121e` / `#181826` | cards / raised |
| `--text` | `#edeef5` | primary text |
| `--dim` / `--faint` | `#a2a3b8` / `#6b6c84` | secondary / labels |
| `--line` / `--line-2` | `rgba(255,255,255,.09)` / `rgba(255,255,255,.14)` | hairline borders |
| `--g1` → `--g2` | `#4c6fff` → `#22d3ee` | **the gradient** — blue → cyan |
| `--g3` | `#7c5cff` | violet, used *sparingly* in `--grad-3` |

Composite tokens: `--grad: linear-gradient(105deg, var(--g1), var(--g2))`, `--grad-3` (violet→blue→cyan), and `--glow` (a gradient-tinted ring + drop). **Rule:** keep everything else dark and neutral, and reserve the gradient for a few moments — gradient-everything stops being special.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings / UI | **Space Grotesk** (`--disp`), system fallback | weights 400–700; key words get `.grad-text` |
| Body | **Inter** (`--body`), system fallback | weights 400–600 — body only |

- Body 16px / line-height 1.65.
- Fluid `clamp()`: hero `h1` `clamp(46px, 9.5vw, 118px)` at `-0.04em`, line-height 0.95; footer CTA `h2` `clamp(34px, 7vw, 88px)`; section `h2` `clamp(30px, 5vw, 56px)`; panel `h3` `clamp(20px, 2.4vw, 28px)`; stat `.n` `clamp(40px, 6vw, 68px)`.
- `.eyebrow`: 12px, weight 600, `letter-spacing: .16em`, uppercase, in `--g2` cyan.
- Signature move: `.grad-text` clips `--grad` through the text (`-webkit-background-clip: text`, transparent fill) on headline words and stat numbers.

## 7. Layout Principles
- **Spacing** gutter `--pad: clamp(18px, 4vw, 52px)`; section rhythm `clamp(44px, 7vw, 96px)`; grid gap `clamp(16px, 2vw, 22px)`.
- **Container** `.wrap` max-width `1180px`.
- **Grid** `.grid` with `.g2` (`repeat(2,1fr)`) and `.g3` (`repeat(3,1fr)`); blog `.post` is `130px 1fr auto`.
- **Radius** `--r: 18px` panels, `--r-sm: 12px` inner (thumbs/inputs), `999px` pills — subtle, not rounded-soft.
- **Elevation** dark glassy panels with 1px translucent-white borders; on hover the border goes transparent and the gradient-tinted `--glow` appears. Feature panels get a faint gradient wash. No heavy drop shadows.

## 8. Homepage Sections
1. **Nav** — sticky, blurred (`backdrop-filter: blur(14px)`), hairline bottom; brand with a gradient mark, pill links, EN/中文 toggle.
2. **Hero** — cyan eyebrow, oversized headline with a `.grad-text` word, lede, two CTAs (gradient solid + outline).
3. **Skills marquee** — an infinite auto-scrolling `.marquee` of tools, edge-masked, diamond-separated.
4. **Selected work** — section head + a `.g2` grid of `.panel` cards; the first is a `.feature` panel with a gradient `.thumb`, others use `.thumb.alt` or none.
5. **Stats** — a `.g3` row of stat panels with `.grad-text` numbers, closed by the template note.
6. **Footer** — a centered `.cta` with a gradient-word headline and social links, plus copyright.

## 9. Component Style
- **Buttons** — pill (`999px`); default is `--panel` with a `--line-2` border, hovering to `--glow` + `-1px` lift; `.btn.solid` is gradient-filled with near-black text; arrow nudges right.
- **Cards / panels** — `.panel` = `--panel` fill, 1px `--line` border, `--r` 18px; `a.panel` / `.hoverable` lift `-4px` with `--glow` on hover; `.panel.feature` carries a faint gradient wash; `.thumb` / `.thumb.alt` are pure-CSS gradient placeholders with a glossy overlay.
- **Nav** — sticky, blurred; pill links (hover = `--panel` fill, current = `--panel-2` with inset hairline).
- **Forms** — `--bg-2`-filled inputs with `--line-2` border and `--r-sm`; focus adds `--g1` border + a 3px `rgba(76,111,255,.22)` ring.
- **Chips** — pill, `--panel-2` fill, `--line` border.
- **Chat / AI surface** — a glassy `.chat` panel with a header status dot (`--g2` with soft glow), rounded 16px bubbles; `.msg.user` is gradient-filled with near-black text clipping bottom-right, `.msg.ai` is `--bg-2` clipping bottom-left; composer input is a pill.
- **Bilingual EN/中文 toggle** — elements with both `data-en` and `data-zh` are swapped by `app.js` (via `innerHTML`, so words inside `.grad-text` spans keep their gradient); inputs use `data-*-ph`. Default English; choice persists in `localStorage` under key **`cine_lang`**; proper nouns carry no `data-*`.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` starts faded + 22px down and settles via `.in`, a longer smooth 0.7s on `--ease` `cubic-bezier(.22,.61,.36,1)`; stagger via `data-d="1|2|3"` (0.07 / 0.14 / 0.21s).
- The `.marquee .track` scrolls infinitely via `@keyframes scroll` (26s linear); hover lifts panels/buttons with `--glow`; arrows translate `3px`.
- Guarded by `html.js`. `@media (prefers-reduced-motion: reduce)` stops both the marquee animation and the rises.

## 11. Responsive Design
- **≤ 860px** — the `.g3` grid drops from 3 to 2 columns.
- **≤ 720px** — nav wraps; links drop to a full-width row under the brand.
- **≤ 680px** — blog `.post` rows stack to a single column.
- **≤ 620px** — both `.g2` and `.g3` grids collapse to a single column.

## 12. Things to Avoid
- No amber or monospace, and no terminal/HUD chrome — that's Mission Control's territory.
- Don't gradient everything; reserve it for a few high-value moments or it stops being special.
- No light backgrounds — keep the canvas dark and neutral so the gradient is the star.
- Keep the glow subtle and maintain high text contrast for accessibility on dark.