# 07 · Cinematic — Design System

> A film-still / dark-cinema personal site — letterbox bars, film grain, and italic serif credit sequences, in the tradition of A24 title cards and prestige-trailer typography.
> **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
Make a portfolio feel like a film's opening credits — atmospheric, restrained, prestige. The single dark scroll opens on a letterboxed title card, states a "logline," presents work as cinematic "stills," lists "credits," and closes on an "end credits" contact — the primary outcome being an unhurried, cinematic impression that leads to email/links.

## 2. Target Audience
Designers, engineers, directors, and creatives who want an atmospheric, understated portfolio with gravitas. It flatters work that benefits from mood and quiet drama over loud, colourful salesmanship.

## 3. Brand Personality
Atmospheric, restrained, prestige, quietly dramatic, cinematic. Voice is spare and evocative — one "emotional" italic word per heading, film-vocabulary labels (slate, frame, credits), never chatty or loud.

## 4. Visual Direction
Near-black background with letterbox bars top and bottom of the full-viewport hero, a fixed SVG-noise film-grain overlay above everything, and inset vignette shadows on the hero frame and each still. Italic Playfair serif name treatment, a single warm amber-light accent, and dark image-still placeholders that zoom slightly on hover.

## 5. Color System
Near-black film scale + one warm amber-light accent.

| Token | Hex | Use |
|---|---|---|
| `--black` | `#0b0b0d` | page background, letterbox bars |
| `--coal` | `#141418` | still/frame background |
| `--smoke` | `#e8e4dd` | primary text |
| `--ash` | `#9a958c` | secondary text, labels, credits roles |
| `--amberlt` | `#d9a441` | accent — italic words, active lang toggle, mailto underline |
| `--line` | `#26262c` | hairline borders |

Amber-light is the only warm note against an otherwise desaturated dark palette — never add a second saturated hue.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Playfair Display** (serif, italic axis loaded) | weight 400–500; italic `<em>` in amber is the signature |
| Body / UI / labels | **Manrope** | weight 300–500; wide letter-spacing on uppercase labels |

- Hero `h1` `clamp(3rem, 12vw, 10rem)`, weight 400, line-height `0.98`.
- Body stays weight 300 for a light, atmospheric feel (`line-height:1.7`).
- Uppercase "mono-feel" labels (slate `.4em`, run-bar `.24em`, credits roles `.16em`, lbl `.32em`) use widely letter-spaced Manrope — no actual mono font.
- Contact headline scales to `clamp(2.4rem, 8vw, 6.5rem)`.

## 7. Layout Principles
- Sections `max-width:1200px`, centered, padding `clamp(70px,11vh,150px) clamp(22px,4vw,54px)`.
- Radius `0` everywhere — stills and panels are hard-edged rectangles, like film frames.
- Depth comes from inset vignette shadows (`inset 0 0 220px 60px rgba(0,0,0,.85)` on the hero frame, `inset 0 0 120px 20px rgba(0,0,0,.6)` on stills), not drop shadows.
- Stills grid: 1-col mobile → 2-col at ≥820px, with one `.wide` still spanning both columns (aspect `21/9` vs default `16/10`). Credits: `150px 1fr` rows, max-width `760px`.

## 8. Homepage Sections
1. **Nav** — fixed transparent bar: serif brand left; "Design Engineer" role label + EN·中文 toggle right.
2. **Hero** (`#top`, full 100vh, letterboxed) — slate line ("A Portfolio · Reel 01"), italic serif name, tagline, run-bar (director / scroll / runtime).
3. **Logline** (about) — amber label + large statement headline with one italic amber phrase.
4. **Selected Frames** (work) — dark still placeholders (frame number, vignette) with caption row (title/year) and description below.
5. **Credits** (experience) — centered label + role/org rows.
6. **End credits** (contact) — centered italic amber headline, underlined mailto, uppercase link row.
7. **Footer** — centered, uppercase, single line, top hairline.

## 9. Component Style
- **Stills/cards** — hard-edged `.shot` (`1px var(--line)`, coal fill) with `.no` frame number top-left, inset vignette, and a `.img` gradient placeholder; caption row separated by a top hairline.
- **Nav** — transparent, uppercase wide-tracked labels; serif brand un-transformed.
- **Buttons/links** — no fills; the mailto is an underlined amber link (`border-bottom:1px solid var(--amberlt)`), contact links shift smoke on hover.
- **Credits rows** — `150px 1fr` grid, uppercase ash role labels, top hairline dividers.
- **Bilingual EN/中文 toggle** — `data-en`/`data-zh` on every string, swapped via `apply(lang)` (sets `innerHTML`, also `data-en-ph`/`data-zh-ph` placeholders), buttons reflect `aria-pressed`; active button fills amber; persisted in localStorage under **`sp07_lang`**; `<html lang>` becomes `zh-Hant` for Chinese.

## 10. Motion / Animation
- `.reveal` → `.in`: fade + translateY(30px), `1.1s cubic-bezier(.2,.7,.2,1)` — the slowest, most deliberate reveal in the library — staggered by `(i % 3) * 90ms` via IntersectionObserver (threshold `0.14`).
- Still images scale `1.06` on hover (`0.8s`).
- Fixed `.grain` SVG-noise overlay (opacity `.05`) sits above all content; hero + stills carry inset vignettes.
- `prefers-reduced-motion: reduce` disables the reveals.

## 11. Responsive Design
- `@media(min-width:820px)` — `.stills` becomes 2-col; `.still.wide` spans both columns at `21/9` (1-col, `16/10` below).
- Hero holds full `100vh` with `min-height:640px`; letterbox bars are `9vh`, run-bar pinned above the bottom bar.
- Section padding, headline sizes, and hero type scale fluidly via `clamp()`; nav/section horizontal padding tracks `clamp(22px,4vw,54px)`.

## 12. Things to Avoid
- Don't brighten the background or add a second saturated accent.
- Don't round the still frames or any panel.
- Don't speed up the reveals — slow and deliberate is the point.
- Don't drop the grain overlay or inset vignettes (they carry the "film" read).
- Don't switch headings to sans or overuse the italic amber word (one per heading).

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: cinematic film-still / prestige-title-card — dark, atmospheric, restrained, like an A24 opening credits sequence. Near-black background `#0b0b0d`, still/frame background `#141418`, primary text `#e8e4dd`, secondary text `#9a958c`, and a single warm amber-light accent `#d9a441` used only for italic words, the active language toggle, and the mailto underline — no other saturated colour. Typography: Playfair Display (serif, italic axis loaded) for headings with one italic amber phrase per major heading, Manrope (light weight, widely letter-spaced for uppercase labels) for everything else — no other display font. Add letterbox bars (black bars top and bottom) across the full-viewport hero, a subtle full-page SVG-noise film-grain overlay above all content, and an inset vignette shadow on the hero frame and each project "still". Structure: a fixed transparent nav with the serif brand and a role label plus an EN/中文 toggle; a letterboxed hero with a slate line ("A Portfolio · Reel 01"), an italic serif name, a tagline, and a run-bar with director/scroll/runtime labels; a Logline section with an amber label and a large statement headline containing one italic amber phrase; a Selected Frames section of hard-edged (no border-radius) still placeholders with a frame number, vignette, caption row (title/year), and description, zooming slightly on hover; a centered Credits section listing role/org rows; and a centered End Credits contact section with an italic amber headline, an underlined mailto link, and an uppercase link row, ending in a centered uppercase footer. Reveal animations should be slow and deliberate (around 1s, translateY 30px), respecting prefers-reduced-motion. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp07_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].