# 11 · Magazine Editorial — Design System

> A one-page personal site built like a print magazine — masthead, issue/volume line, a cover story, and a ruled multi-column feature index — in the tradition of glossy editorial layout (think a Condé Nast cover meets Swiss grid).
> **All content is placeholder** — the persona "Priya Nair" and every article/byline/link are samples; replace them with your own.

---

## 1. Website Goal
Present a writer, journalist, or editor as if they were their own publication. The primary outcome is to make selected writing feel authoritative and browsable at a glance — cover story up top, a clean feature index below — and to send the reader to real clips and a contact address.

## 2. Target Audience
Journalists, essayists, critics, editors, and long-form writers who want a portfolio that reads like the mastheads they publish in. Flatters text-heavy bodies of work where headlines and bylines carry the weight.

## 3. Brand Personality
Authoritative, literary, high-contrast, print-crisp, warm. Voice is confident and editorial — kickers in tracked uppercase, headlines set in a high-contrast serif, no marketing fluff.

## 4. Visual Direction
Warm paper background with near-black ink and a single editorial red. A dark masthead bar sits at the top; the hero fills the viewport with a bold serif name, an issue/volume line, and a cover story column beside a `3:4` duotone cover image carrying cover lines. Strong rules (2–3px black borders) separate every section; the about opens with a red drop cap. Glossy, dense, and cover-driven.

## 5. Color System
Warm paper + ink + one editorial red. No second accent.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#faf6ef` | Page background |
| `--paper-2` | `#f0e9dd` | Secondary warm fill |
| `--ink` | `#17130e` | Text, masthead bar, rules |
| `--text-2` | `#5c5347` | Body / secondary text |
| `--dim` | `#5c534740` | Faint ink (alpha) |
| `--faint` | `#9a8f7f` | Meta, captions, bylines |
| `--line` | `#d8cdba` | Hairline section rules |
| `--red` | `#c8102e` | Kickers, links, drop cap, accents |

Cover image is a warm duotone placeholder: `linear-gradient(150deg,#3b2f26,#c8102e 160%)`; cover-line highlight uses `#ff5a5a`. **Three inks max (paper, ink, red) — use the red sparingly, never introduce a second accent.**

## 6. Typography
Three-family magazine mix.

| Role | Family | Notes |
|---|---|---|
| Display / headlines | `--disp` "Playfair Display", Georgia, serif | Weights 500/700/800 + italic 500/700; high-contrast, italic `em` accents |
| Body | `--serif` "Source Serif 4", Georgia, serif | Weights 400/600 + italic 400; base `17px`, line-height `1.6` |
| Kickers / meta / nav | `--sans` "Inter", ui-sans-serif | Weights 400–700; uppercase, tracked |

- Type scale (clamp): masthead `clamp(44px,12vw,150px)`; cover headline `clamp(30px,4.6vw,66px)`; section titles `clamp(24px,3.4vw,40px)`; feature `h3` `clamp(20px,2.2vw,27px)`; contact headline `clamp(34px,7vw,96px)`.
- Kicker/meta letter-spacing `.14em–.22em`, uppercase; nav links `.12em`.
- Signature type move: the red drop cap in the about (`::first-letter`, `font-size:4.2em`, `float:left`) and italic `em` set in red inside serif headlines.

## 7. Layout Principles
- Spacing base: `--pad:clamp(18px,4vw,60px)` gutters; sections `padding:clamp(48px,7vw,110px) 0`.
- Container: `.wrap` `max-width:1200px`, centered.
- Cover hero fills `100svh`; body grid `1.1fr .9fr`. Feature index is a 3-column grid (`repeat(3,1fr)`); about is a 2-column grid with the drop-cap column.
- Radius: none (0) everywhere — print-crisp square corners.
- Elevation: no shadows; hierarchy comes from rules — `3px solid var(--ink)` masthead & footer, `2px solid var(--ink)` section titles / feature tops, `1px solid var(--line)` section hairlines.

## 8. Homepage Sections
1. Sticky masthead nav — brand, primary links, EN/中文 toggle (dark ink bar).
2. Cover hero — masthead name + issue/volume line, cover story column, `3:4` duotone cover image with cover lines and scroll cue.
3. `#writing` — "Selected writing" 3-column ruled feature index (Features 01–06) + template note.
4. `#about` — "About the writer" lead line + drop-cap bio column + bylines row.
5. `#contact` — centered kicker, big serif headline, mailto link, social/clips row.
6. Footer — copyright + template credit.

## 9. Component Style
- **Buttons/links:** no filled buttons; links are the mailto (`--red`, red underline) and social row (tracked uppercase Inter). Nav links are uppercase Inter at reduced opacity, brightening on hover.
- **Cards (features):** `.art` — top border `2px solid var(--ink)`, red number, serif headline that turns red on hover; no fill, no radius.
- **Nav:** sticky dark `--ink` bar, `.brand` uppercase Inter, active language pressed in red.
- **Chips/meta:** tracked uppercase Inter in `--faint`; byline row separated by a hairline.
- **Forms:** none in this template (contact is a mailto + link row).
- **Chat/AI surface:** none.
- **Bilingual EN/中文 toggle:** elements carry `data-en` / `data-zh` (and `data-en-ph`/`data-zh-ph` for placeholders); an inline script swaps them via `innerHTML` (so `<em>`/`<br>` are preserved), sets `<html lang>`, and persists the choice in `localStorage` key **`t11_lang`** (default `en`). Publication names stay untranslated.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` elements start `opacity:0; translateY(20px)` and animate to `.in` when observed (IntersectionObserver, threshold `.12`), guarded by `html.js`. Stagger via `data-d="1|2|3"` → `.08s/.16s/.24s` delays, transition `.7s var(--ease)` (`cubic-bezier(.22,.61,.36,1)`).
- Hover: feature headlines shift to red; nav links raise opacity to full.
- `prefers-reduced-motion: reduce` disables reveals and smooth scroll (elements shown immediately).

## 11. Responsive Design
- `max-width:820px` — cover body collapses to one column; feature index drops to 2 columns.
- `max-width:760px` — about grid collapses to one column.
- `max-width:720px` — nav links hide (brand + language toggle remain).
- `max-width:560px` — feature index collapses to a single column.

## 12. Things to Avoid
- No rounded corners, soft shadows, or glows — keep it print-crisp.
- No second accent color; don't dilute the single editorial red.
- Don't overuse the red — reserve it for kickers, links, the drop cap, and italic accents.
- Don't weaken the rules — the black borders and clear grid are the whole system.
- Don't swap the three-family serif/serif/sans mix for a single geometric sans; the high-contrast display serif is the identity.