# 01 · Minimal Editorial — Design System

> Quiet editorial minimalism — a warm-paper gallery catalogue in the Aesop / Kinfolk school, where whitespace, hairlines, and a single italic serif carry the whole page.
> **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
Present one person's work with the calm authority of a print catalogue. The page should read louder than its own UI: a full-viewport name lockup, a short statement, a hairline-ruled work list, and an inverted contact band. Primary outcome is a considered first impression that funnels to the contact section / mailto.

## 2. Target Audience
Designers, writers, and senior/principal engineers whose output should feel curated rather than "techy". It flatters people whose credibility comes from taste and restraint — anyone who wants a portfolio that looks like an art book, not a dashboard.

## 3. Brand Personality
Quiet, warm, considered, literary, precise. Voice is understated and confident — it never shouts, never uses jargon, and lets a single italic word do the emphasis.

## 4. Visual Direction
Warm off-white paper with a faint radial wash and SVG grain in the hero. Structure is drawn entirely with 1px hairlines — no cards, no shadows. Signature moves: a huge two-line serif name with the surname italicised in bronze-olive, a `mix-blend-mode: difference` fixed topbar, and one full-bleed dark contact band as the only inversion.

## 5. Color System
One warm paper family + ink + a single muted bronze-olive accent.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#f4f1ea` | page background |
| `--paper-2` | `#ece7dc` | hero radial wash |
| `--ink` | `#1c1a16` | primary text; dark contact band background |
| `--muted` | `#8b8577` | eyebrows, meta labels, captions |
| `--line` | `#d9d3c5` | hairline rules only — never a shadow |
| `--accent` | `#6b5d3e` | italic serif accent words inside headings, one per heading |

**Rule:** 4 real colours max on screen at once. The accent is reserved for `<em>` italic words inside headings — never buttons, never backgrounds.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Cormorant Garamond** (serif, italic axis loaded) | weight 300–400; italic is the one expressive move |
| Body / UI / labels | **Manrope** (sans) | weight 300 body, 500–600 for uppercase labels |

- Type scale (real `clamp()`): hero `h1` `clamp(3.4rem, 13vw, 12rem)` / line-height `0.92`; role line `clamp(0.9rem, 1.6vw, 1.1rem)`; about `h2` `clamp(1.9rem, 4vw, 3.4rem)`; work title `clamp(1.6rem, 3.4vw, 2.6rem)`; contact `h2` `clamp(2.6rem, 9vw, 8rem)`.
- Weights: body stays at `300`; headings never exceed `400`.
- Letter-spacing: headings `-0.01em` to `-0.02em`; eyebrows / section labels uppercase at `0.32em`–`0.42em`.
- Signature type move: Cormorant's italic axis on single accent words — not Playfair, not a grotesque.

## 7. Layout Principles
- Spacing base 8px; sections use `padding: clamp(80px, 12vh, 160px) clamp(24px, 5vw, 64px)`.
- Container: single-column `.wrap`, `max-width: 1200px`, centered.
- Grid: `.about-grid` is one column, becoming `1.4fr 1fr` (gap 80px) at ≥860px; `.work-item` is one column, becoming `64px 1fr auto` at ≥760px.
- Radius effectively `0` — no rounded cards anywhere.
- Elevation none — structure is drawn with 1px `--line` hairlines only; section labels lead with a 40px `--ink` tick.

## 8. Homepage Sections
1. **Topbar** (fixed, `mix-blend-mode: difference`) — brand name left, "Available for work — 2026" + EN/中文 toggle right.
2. **Hero** (`#top`, 100vh) — eyebrow, `Jinyu / Chen` name lockup (italic surname), role line, animated scroll cue.
3. **About** — two-column: statement headline with an italic accent word + a definition list of facts (Based in / Focus / Experience / Stack).
4. **Selected Work** — numbered hairline-divided rows (`01`–`04`): title + small subtitle + year, arrow reveals on hover.
5. **Contact** (`#contact`, inverted `--ink` band) — large serif headline with inline mailto link, social row.
6. **Footer** — copyright + template name.

## 9. Component Style
- **Topbar:** ultra-slim, uppercase 12px, letters `0.18em`; links inherit via blend mode.
- **Work rows:** hairline top/bottom borders; hover eases `padding-left` (`.4s cubic-bezier(.2,.7,.2,1)`) and reveals a `→` serif arrow — no thumbnails.
- **Meta list:** `<dl>` rows with uppercase `dt` (muted) and right-aligned `dd`, separated by `--line` hairlines.
- **Contact:** inverted band, serif headline, mailto with a `rgba(244,241,234,.3)` underline that solidifies on hover; social row is uppercase muted links.
- **Bilingual EN/中文 toggle:** a bordered 2-button group in the topbar; every string carries `data-en` / `data-zh`, swapped via `apply(lang)` (sets `innerHTML`, updates `<html lang>` to `zh-Hant`, toggles `aria-pressed`), persisted in `localStorage` under **`sp01_lang`**; placeholders use `data-en-ph` / `data-zh-ph`.

## 10. Motion / Animation
- Scroll reveals: `.reveal` (opacity 0 + `translateY(28px)`) → `.in` via `IntersectionObserver` (threshold `0.15`), transition `1s cubic-bezier(.2,.7,.2,1)`, staggered `(i % 4) * 90ms`.
- Scroll cue: a 1px bar runs the `drop` keyframe (`2.2s ease-in-out infinite`).
- Hover: work rows shift left + arrow slides in; mailto underline darkens.
- `@media (prefers-reduced-motion: reduce)` disables both `.reveal` transforms and the scroll-cue animation.

## 11. Responsive Design
- **≥860px:** `.about-grid` becomes `1.4fr 1fr` with an 80px gap (statement + meta side by side); below, they stack.
- **≥760px:** `.work-item` becomes a `64px 1fr auto` baseline-aligned row; below, number/title/year stack.
- Fluid `clamp()` on type and section padding handles everything in between; hero holds `min-height: 640px`.

## 12. Things to Avoid
- No second accent hue; the bronze-olive is the only colour beyond paper + ink + muted.
- No rounded corners, drop shadows, or gradients used as decoration (the hero wash + grain are the only exceptions).
- No emoji, no monospace/terminal labels (that belongs to templates 02/03).
- Don't bold body text or use italics anywhere except single accent words.
- Don't add card thumbnails to the work list — hairlines carry it.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: quiet editorial minimalism — Aesop/Kinfolk school. Warm paper background `#f4f1ea` with `#ece7dc` radial wash, near-black ink `#1c1a16`, muted grey-brown `#8b8577` for meta text, hairline rules `#d9d3c5`, and a single bronze-olive accent `#6b5d3e` used only for italic words inside headings. Typography: Cormorant Garamond (serif, italic weight loaded) for all display/heading text, Manrope (sans, weight 300–600) for body and UI labels — no other display font. Structure: a fixed top bar with mix-blend-mode difference containing the name and an EN/中文 toggle; a full-100vh centered hero with a huge two-line serif name (second line italicized in accent colour), an eyebrow line above, and a role line + scroll cue below; an About section split into a headline-with-italic-accent-word and a definition list of facts; a Selected Work section of hairline-divided numbered rows (number · title+subtitle · year, arrow on hover); and a full-bleed inverted dark contact band with a large serif headline, inline mailto link, and a social link row, ending in a footer. No rounded corners, no shadows, no gradients as decoration — only 1px hairlines for structure. Add scroll-triggered fade+rise reveals via IntersectionObserver, staggered, and respect prefers-reduced-motion. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp01_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].