# 10 · Swiss Grid — Design System

> A one-pager in the International Typographic (Swiss) Style — a strict 12-column grid, flush-left grotesque type, big tabular numerals, and a red/black/white palette. Order as expression, after Müller-Brockmann and the Neue Haas tradition.
> **All content is placeholder** — the persona and every project/post/link are samples; replace them with your own.

---

## 1. Website Goal
Give a designer or art director a precise, editorial portfolio built entirely on a visible grid. A typographic hero opens onto a numbered work index (table), a two-column about with facts and stats, and a contact block. Primary outcome: a studio commission or collaboration.

## 2. Target Audience
Graphic designers, art directors, architects, and typographers who value precision, hierarchy, and unornamented, system-driven layout.

## 3. Brand Personality
Precise, disciplined, confident, editorial, honest. Voice is principled and matter-of-fact ("Order is not the enemy of expression"; "legible before it is clever").

## 4. Visual Direction
Everything sits on a 12-column grid with 2px black rules structuring the page. Flush-left grotesque type, big tabular numerals, and exactly one red accent. Signature moves: the ruled work "index" whose rows invert to red-on-white on hover, numbered section labels, and corner meta blocks. No gradients, shadows, rounded corners, or second hue.

## 5. Color System
Paper, ink, and a single Swiss red — nothing else.

| Token | Hex / value | Use |
|---|---|---|
| `--paper` | `#f2f1ec` | Page background |
| `--ink` | `#111110` | Text + 2px rules (`--line`) |
| `--dim` | `#57554e` | Secondary text |
| `--faint` | `#8f8c82` | Meta / labels / footer |
| `--line` | `#111110` | Structural 2px rules |
| `--line-2` | `rgba(17,17,16,.16)` | Light interior hairlines |
| `--red` | `#e2231a` | Numbers, links, hover fills, accent |

**Exactly one accent (red) on black rules over paper. Introduce no second hue.**

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Everything | `--grot` "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif | Grotesque with a Helvetica/Neue Haas fallback stack; weights 500–800 |

- `.mono` utility applies `font-variant-numeric: tabular-nums` for indices and stats.
- Hero `h1`: `clamp(52px, 15vw, 230px)`, weight 800, line-height `.86`, tight `letter-spacing:-.04em`, uppercase.
- Contact headline: `clamp(40px, 10vw, 150px)`; work titles `clamp(18px, 2.4vw, 30px)`; stat numbers `clamp(34px, 5vw, 60px)`.
- Corner meta blocks: 12px uppercase label with bold value on a new line (`<b>` inside the swapped value).
- Body weight is 500 by default; labels uppercase with small tracking.

## 7. Layout Principles
- 12-column grid everywhere: `.grid`, `.nav`, and hero top/bottom bars all use `grid-template-columns:repeat(12,1fr)`.
- `.wrap` `max-width:1280px`; `--pad: clamp(16px, 3vw, 40px)`; grid gap `clamp(12px, 1.6vw, 24px)`.
- Sections padded `clamp(48px, 7vw, 110px)` and separated by 2px top rules.
- Column spans: `.h-lead` span 8, `.about-body` span 8, `.facts` span 4; hero meta `.k` span 3; statement span 7, index note `9/13`.
- Square corners only; no shadows or elevation — hairlines and 2px rules do all structural work.
- Easing: `--ease: cubic-bezier(.3,.7,.3,1)`.

## 8. Homepage Sections
1. Sticky nav — brand (span 4), links (span 6), EN/中文 toggle (span 2), on a 12-col grid with bottom rule.
2. Hero — corner meta bar (Role / Based / Focus / Index), big "Design with a system." headline, statement + index cue.
3. Work index (01) — label + lead line, then a ruled 6-row table (no / title / desc / year).
4. About (02) — two-column prose + a facts list; a 4-up stat row; template note.
5. Contact (03) — label, "Let's set the grid." headline, mail link, social/CV row.
6. Footer — copyright + template label, split on a rule.

## 9. Component Style
- **Nav:** sticky, paper background, 2px bottom rule; links hover to red; grid-aligned.
- **Work index (`.index a`):** `0.8fr 4fr 3fr 1.2fr` ruled rows; hover inverts to `--red` fill, white text, slight horizontal pad.
- **Facts list:** label/value rows with light hairlines; **stats** use tabular `.mono` numerals over a 2px top rule.
- **About prose:** CSS `columns:2` (collapses to 1 on small screens).
- **Contact mail:** red, underlined with `text-underline-offset:6px`.
- **Lang toggle (EN/中文):** `.lang` group in a 2px ink box with a divider; `data-en`/`data-zh` swapped by an inline script (no separate app.js), persisted in `localStorage` under key **`t10_lang`** (default EN). Active button fills red. Corner meta values embed `<b>` inside the swapped string.
- No chat/AI surface in this template.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` fade + rise (`translateY(16px)`, `.5s` — deliberately quick, Swiss restraint), staggered `data-d="1|2|3"` (`.06/.12/.18s`), IntersectionObserver, guarded by `html.js`.
- Hover: index rows invert to red; nav/contact links recolour.
- `prefers-reduced-motion: reduce` disables reveals and smooth scroll.

## 11. Responsive Design
- `@media (max-width:760px)` — hero meta `.k` span 6; statement/index cue span 12 left-aligned; `.h-lead` span 12; nav links hide, brand + toggle each span 6; facts + about-body span 12.
- `@media (max-width:640px)` — index rows collapse to `auto 1fr` (desc/year drop under title, year left-aligned); about `columns:1`; stats become 2-up.

## 12. Things to Avoid
- Don't center things — keep flush-left alignment throughout.
- Don't add gradients, shadows, or rounded corners.
- Don't introduce a second hue — red is the only accent.
- Don't break the 12-column grid; add columns/rows within it.
- Don't abandon tabular numerals or consistent 2px rules.