# 04 · Swiss Grid — Design System

> International Typographic Style — Müller-Brockmann grid discipline and Swiss modernism, rendered as an information-design poster with condensed type and a single red accent.
> **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 work with the precision of an editorial grid system. Everything locks to a visible 12-column grid, headings are condensed uppercase, and red appears only as punctuation. Primary outcome: read as rigorous and legible — a clinical, credible statement of practice that leads to the contact section.

## 2. Target Audience
Systems-minded designers and engineers who value precision and legibility over decoration. It flatters people whose work is structured and methodical — the portfolio equivalent of a well-set specimen sheet.

## 3. Brand Personality
Precise, clinical, disciplined, confident, editorial. Voice is spare and declarative, framed like catalogue captions ("Statement of practice", "Fig. 01 / Cover", "§ 01").

## 4. Visual Direction
An explicit, visible 12-column grid drives every section. Off-white paper, near-black ink, condensed Archivo Narrow headings, and one red accent used punctuation-like (a period, a section number, an underline). Signature moves: flush-left alignment, numbered section heads (`§ 01`), a bottom-aligned hero, and work rows that invert to black on hover.

## 5. Color System
Paper + ink + one red accent, used almost like punctuation.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#f6f5f3` | page background |
| `--ink` | `#111111` | text, borders, inverted contact/footer background |
| `--red` | `#e2231a` | accent — section numbers, hero full-stop, link underlines |
| `--muted` | `#7a7a78` | meta labels, notes |
| `--line` | `#d5d3ce` | hairline rules between grid rows |

**Rule:** red never fills a background or large shape — it marks small, specific things (a period, a number, an underline). One accent only.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Body / UI / nav | **Archivo** | weight 400–700, regular width |
| Display / condensed headings | **Archivo Narrow** | weight 500–700, uppercase, tight tracking — all `h1`/`h2`/section numbers |

- Type scale (real `clamp()`): hero `h1` `clamp(3rem, 14vw, 12rem)` / line-height `0.86`; hero meta `clamp(1rem, 1.8vw, 1.35rem)`; section head `h2` `clamp(1.6rem, 4vw, 2.8rem)`; about paragraph `clamp(1.3rem, 3vw, 2.2rem)`; work title `clamp(1.3rem, 3vw, 2rem)`; contact `h2` `clamp(2.4rem, 10vw, 8rem)` / line-height `0.9`.
- Everything that reads as a heading is condensed + uppercase; everything that reads as body is regular-width Archivo. No serif anywhere.
- Signature type move: condensed uppercase headline ending in a red full-stop (`.red`).

## 7. Layout Principles
- Grid: an explicit `repeat(12, 1fr)` with `16px` gaps drives nav, hero, section heads, work table, experience, and contact — content is assigned specific `grid-column` spans, never centered blocks (e.g. hero meta `1/span 7`, stat idx `9/span 4`; about `3/span 8`).
- Container: `.cols` / `.in` at `max-width: 1280px`, padding `clamp(16px, 3vw, 40px)`.
- Sections: `padding: clamp(50px, 8vh, 110px) 0`, separated by a `1px solid var(--ink)` top rule.
- Radius `0` — no rounded corners. Elevation none — 1px `--line` hairlines and 1–2px `--ink` rules only (experience cells use a `2px` top border).

## 8. Homepage Sections
1. **Nav** (fixed, 1px bottom border, 12-col) — brand / role / status / EN·中文 toggle, each in its own column span.
2. **Hero** (`#top`, bottom-aligned within 100vh) — top rule row (portfolio label / "Fig. 01 / Cover"), condensed uppercase headline ending in a red period, lead paragraph (cols 1–7), stat list (cols 9–12).
3. **§ 01 About** — numbered head row (number / title / note) + one large statement paragraph (cols 3–10) with red-highlighted key nouns.
4. **§ 02 Selected Work** — grid table rows: index / title / category / year; full row inverts to `--ink` on hover.
5. **§ 03 Experience** — 3-across grid cells (`.xp-c`), red year label + role + description, 2px top border.
6. **§ 04 Contact** — full inverted `--ink` background, giant condensed headline with red mailto link, underlined link row.
7. **Footer** — inverted, split brand / template name.

## 9. Component Style
- **Nav:** 12-col grid; brand (span 3), role (span 3, muted), status (span 3, right, red `<b>`), toggle (span 3, right).
- **Work rows:** grid rows on `--line` top borders; hover sets `background: var(--ink); color: var(--paper)` with a `-12px` negative margin so the fill bleeds past the gutter; category dims to `#bbb`.
- **Section heads:** `§ NN` number in red condensed, condensed uppercase `h2`, right-aligned muted note.
- **Experience cells:** 3-across, `2px` `--ink` top border, red year label; collapse to full width ≤720px.
- **Bilingual EN/中文 toggle:** a bordered 2-button pair in the nav's rightmost column (active = `--ink` fill); every string carries `data-en` / `data-zh`, swapped via `apply(lang)` (sets `innerHTML`, `<html lang>` → `zh-Hant`, toggles `aria-pressed`), persisted in `localStorage` under **`sp04_lang`**; placeholders use `data-en-ph` / `data-zh-ph`.

## 10. Motion / Animation
- Scroll reveals: `.reveal` (opacity 0 + `translateY(20px)`) → `.in` via `IntersectionObserver` (threshold `0.12`), transition `0.8s cubic-bezier(.2,.7,.2,1)`, staggered `(i % 4) * 70ms`.
- Hover: work rows invert to a black bar (color + negative-margin bleed), transition `.2s`; contact links keep a red underline.
- `@media (prefers-reduced-motion: reduce)` disables `.reveal` transforms.

## 11. Responsive Design
- **≤720px:** `.xp-c` cells drop from `span 4` (3-across) to full width (`1/-1`), stacking vertically.
- The 12-col grid otherwise holds; fluid `clamp()` on type, section padding, and container padding scales the layout, so column spans compress rather than reflow above 720px.
- Hero stays bottom-aligned within `min-height: 100vh`; the hero stat list and contact links wrap when narrow.

## 12. Things to Avoid
- Don't center the hero or any headline — flush-left everywhere except the right-aligned notes/stats.
- Never round a corner or add shadows/gradients.
- Don't use red as a background fill or introduce a second accent colour.
- No serif or script type; keep headings condensed-uppercase and content locked to the 12-col grid.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: International Typographic Style / Swiss modernism — Müller-Brockmann grid discipline. Off-white paper background `#f6f5f3`, near-black ink `#111`, a single red accent `#e2231a` used only for small marks (a hero full-stop, section numbers, underlines — never as a fill), muted grey `#7a7a78` for notes, hairlines `#d5d3ce`. Typography: Archivo Narrow (condensed, weight 600–700, uppercase, tight letter-spacing) for every heading and section number, Archivo (weight 400–700) for body/nav/UI — no serif anywhere. Lay everything onto an explicit, visible 12-column grid with 16px gaps: a fixed nav with brand/role/status/EN-中文 toggle each in their own column; a bottom-aligned full-viewport hero with a top rule row, a giant condensed uppercase headline ending in a red period, a lead paragraph in columns 1–7, and a stat list right-aligned in columns 9–12; numbered sections (§ 01 About, § 02 Selected Work, § 03 Experience, § 04 Contact) each with a small red section number, a condensed heading, and a right-aligned note; About is one large statement paragraph with red-highlighted key nouns; Selected Work is a grid of rows (index/title/category/year) that invert to black background on hover; Experience is a 3-across grid of cells with a red year label and a 2px top border; Contact is a full black-background section with a giant condensed headline containing a red mailto link and an underlined link row. Zero border-radius, zero shadows, flush-left alignment everywhere except the right-aligned notes/stats. Add scroll-triggered fade+rise reveals via IntersectionObserver, staggered, respecting prefers-reduced-motion. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp04_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].