# 09 · Print Magazine — Design System

> An editorial print-magazine personal site — masthead, folio numbers, drop caps, and pull quotes on warm paper, in the tradition of a numbered design/engineering folio and classic feature-spread 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
Present a person's work as a published magazine issue — literary, considered, and "in print." The single scroll reads as a cover, a feature spread, an index of works, a CV, and a colophon — the primary outcome being a credible, editorial impression that invites correspondence (email/links).

## 2. Target Audience
Writers, editors, and engineers who want a literary, "published" feel. It flatters people whose work rewards reading — those comfortable with a dry-witted, print-inspired voice over a "web app" look.

## 3. Brand Personality
Literary, editorial, considered, slightly dry-witted, print-inspired. Voice is written in third-person feature-article prose with editorial labels (Feature, Index, Curriculum Vitæ, Colophon) — never casual or emoji-driven.

## 4. Visual Direction
Warm paper background with a subtle SVG-noise grain, a fixed masthead bar with an issue number, and a full-screen magazine-cover hero framed by top/bottom rule bars. The feature is a true two-column spread with a red drop cap and a ruled pull quote; work is a folio-numbered index. Red appears only on editorial marks; radius is zero everywhere.

## 5. Color System
Warm print-paper family + ink + one editorial red.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#efe9dc` | page background (with grain texture), masthead fill |
| `--paper-d` | `#e5dccb` | secondary paper wash |
| `--ink` | `#191510` | text, rules, borders |
| `--red` | `#b3271b` | accent — drop cap, folio/page numbers, italic emphasis, hover states |
| `--muted` | `#786e5c` | captions, meta, CV entries |
| `--line` | `#c9bfa9` | hairline rules (column rule, index dividers) |

Red is the only accent and is always attached to something editorial — a folio number, a drop cap, an italic word — never a background fill or a button.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / masthead / headlines | **DM Serif Display** | weight 400; italic for accent words |
| Body / feature copy | **Newsreader** (serif, optical sizing) | weight 400–500; italic for deks/pull quotes/CV roles |
| Mono / meta | **Space Mono** | weight 400–700; masthead labels, kickers, folio/page numbers, footer |

- Cover `h1` `clamp(3.4rem, 15vw, 13rem)`, weight 400, line-height `0.9` — the largest headline in the library.
- Body runs at `18px`/`1.62` line-height for genuine reading comfort; section headlines `clamp(2rem, 6vw, 4.4rem)`.
- Feature's first paragraph gets a true CSS drop cap (`::first-letter`, `4.6em`, floated, red); pull quote `1.6rem`.

## 7. Layout Principles
- Sections `max-width:1200px`, centered, padding `clamp(50px,8vh,100px) clamp(16px,3vw,40px)`.
- Radius `0` everywhere — this is print, not UI chrome; separation comes from 1–2px `--ink` rules (masthead, cover top/bottom rules, kicker underline, colophon top/bottom), not shadows.
- CSS multi-column: `.feature` is a 2-column ruled spread (`columns:2`, `column-rule:1px solid var(--line)`); `.cv` is 3-column. Index rows are a `44px 1fr auto` grid.
- Full-page SVG-noise grain (opacity `.05`) simulates paper texture.

## 8. Homepage Sections
1. **Masthead** — fixed, 2px bottom border: issue label ("The Folio № 16") left, serif brand center, "Est. 2010" + EN·中文 toggle right.
2. **Cover** (`#top`, full 100vh) — top rule (edition / price / volume), centered issue kicker, giant serif headline with one italic-red word, italic dek, bottom rule (feature / index / turn-the-page).
3. **Feature** (about) — kicker + page number, headline with italic red phrase, 2-column ruled body with a red drop cap and a centered ruled pull quote.
4. **Index · Selected Works** (work) — kicker + page number, folio-numbered rows (`01`–`04`): folio number, title + small italic subtitle, page/year.
5. **Curriculum Vitæ** (experience) — kicker + page number, 3-column list of dated entries with italic org names.
6. **Colophon** (contact) — centered red kicker, italic headline with a red accent word, underlined mailto, mono link row.
7. **Footer** — mono, split, uppercase.

## 9. Component Style
- **Kickers** — mono, uppercase, red, with a 2px ink bottom rule and a right-aligned page number.
- **Index rows** — hairline-divided grid; hover shifts `padding-left:12px` and turns red (not a card).
- **Pull quote** — serif, framed top and bottom by 2px ink rules, `break-inside:avoid`.
- **CV entries** — 3-column, `break-inside:avoid`, mono red year + serif role + italic muted org.
- **Links** — mailto is underlined in red; colophon links are mono uppercase, red on hover.
- **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 ink; persisted in localStorage under **`sp09_lang`**; `<html lang>` becomes `zh-Hant` for Chinese.

## 10. Motion / Animation
- `.reveal` → `.in`: fade + translateY(22px), `0.9s cubic-bezier(.2,.7,.2,1)`, staggered by `(i % 4) * 70ms` via IntersectionObserver (threshold `0.12`).
- No decorative motion otherwise — index rows shift/redden on hover; colophon links redden on hover.
- `prefers-reduced-motion: reduce` disables the reveals.

## 11. Responsive Design
- `@media(max-width:720px)` — `.feature` collapses from 2 columns to `columns:1`.
- `@media(max-width:820px)` — `.cv` collapses from 3 columns to `columns:1`.
- Masthead, cover rules, kickers, headlines, and section padding scale fluidly via `clamp()`; the cover holds full `100vh`; rule bars wrap their meta with `flex-wrap`.

## 12. Things to Avoid
- Don't round any corner or turn index rows into cards.
- Don't use a sans-only type system or drop the multi-column feature/CV on desktop.
- Don't add a second accent colour, or use red as a background/button fill.
- Don't drop the drop cap, pull quote, or folio numbering.
- Don't make the paper-grain texture heavy — keep it subtle (~5%).

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: a print magazine — masthead, cover, feature spread, folio-numbered index, colophon — like a numbered issue of a design/engineering magazine. Warm print-paper background `#efe9dc` (with a subtle SVG-noise grain texture at ~5% opacity) and `#e5dccb` secondary wash, ink `#191510` for text and rules, a single editorial red `#b3271b` used only for the drop cap, pull-quote accents, folio/page numbers, and italic emphasis words — never as a background or button fill. Typography: DM Serif Display (weight 400, italic for accent words) for the masthead/cover/headlines, Newsreader (serif, italic for deks and pull quotes) for feature body copy at 18px/1.62 line-height, Space Mono for masthead labels, kickers, folio numbers, page numbers, and the footer. Zero border-radius anywhere; separation comes from 1–2px ink rules, not shadows or cards. Structure: a fixed masthead with an issue label, a centered serif brand, an "Est. 2010" mono label, and an EN/中文 toggle; a full-viewport magazine-cover hero with top and bottom rule bars (edition/price/volume, then feature/index/turn-the-page) framing a centered kicker, a giant serif headline with one italic-red word, and an italic dek; a Feature (about) section with a kicker, a page number, a headline with an italic red phrase, and two-column ruled body copy where the first paragraph gets a true CSS drop cap (::first-letter, ~4.6em, red, floated) and one paragraph is broken by a centered ruled pull quote; an Index of Selected Works as folio-numbered rows (number, title with a small italic subtitle, page/year); a Curriculum Vitae as a 3-column list of dated entries with italic org names; and a centered Colophon contact section with a red kicker, an italic headline with a red accent word, an underlined mailto link, and a mono link row, ending in a mono uppercase footer. Add scroll-triggered fade+rise reveals via IntersectionObserver, respecting prefers-reduced-motion. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp09_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].