# 01 · Quiet Luxe — Design System

> Editorial-minimalist personal site: calm, paper-warm, serif-led, with generous whitespace so type does the talking. School: Aesop / Kinfolk.
> **All content is placeholder** — the persona "Mira Anselm" and every project/post/link are samples; replace them with your own.

---

## 1. Website Goal
A quiet portfolio + journal for someone whose work benefits from restraint. The site is meant to recede so the work reads — it optimizes for legibility and a considered first impression, not conversion tricks or motion spectacle. The primary outcome is that a visitor trusts the maker's taste within the first screen.

## 2. Target Audience
Designers, writers, photographers, and small studios — anyone whose portfolio is flattered by white space and typographic discipline. It suits people pitching founders, publishers, and cultural institutions who value "considered" over "loud."

## 3. Brand Personality
Calm, warm, considered, restrained, literary. Voice is understated and confident — it never raises its volume, letting an occasional italic serif word carry the emphasis instead of color or size.

## 4. Visual Direction
Warm paper background, ink text, one muted olive accent, and hairline rules doing all the structural work. The signature move is a single italic serif word (`<em>`) inside each heading, set in the accent color. No dark mode, no monospace, no gradients, no rounded cards, no shadows — structure is drawn, not lit.

## 5. Color System
One warm paper family + ink + a single muted olive accent; never more than one accent hue on screen.

| Token | oklch | ≈ Hex | Use |
|---|---|---|---|
| `--paper` | `oklch(0.949 0.017 78)` | `#F4EFE6` | page background |
| `--paper-2` | `oklch(0.912 0.020 78)` | `#EAE3D6` | raised panels, row hover, chat surface |
| `--paper-3` | `oklch(0.878 0.023 76)` | `#E0D6C4` | deeper wash |
| `--ink` | `oklch(0.235 0.014 62)` | `#211C15` | primary text, solid buttons |
| `--ink-soft` | `oklch(0.435 0.017 66)` | `#5B5347` | secondary text |
| `--faint` | `oklch(0.585 0.018 70)` | `#8A8072` | meta, captions, labels |
| `--line` | `oklch(0.838 0.020 74)` | `#D8CFBF` | hairline rules & borders |
| `--accent` | `oklch(0.505 0.058 118)` | `#6B6A43` | olive — links, dots, italic accents |
| `--accent-deep` | `oklch(0.395 0.055 118)` | `#4F4E30` | accent hover |

**Rule:** 4 real colours max on screen. The accent is used sparingly — italic display words, the availability dot, and link underlines only.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Newsreader** (`--serif`), Georgia fallback | weight 300–500, optical sizing on; italics are the one expressive move (`<em>`) |
| Body / UI / labels | **Public Sans** (`--sans`), system fallback | 400 body, 500–600 labels/buttons |

- Fluid scale via `clamp()`: hero `h1` `clamp(42px, 8.4vw, 104px)`; section `h2` `clamp(30px, 4.6vw, 52px)`; lede `clamp(18px, 2.1vw, 22px)`; big-serif prose `clamp(21px, 2.6vw, 27px)`.
- Body is 17px / line-height 1.7. Headings use `text-wrap: balance` and negative tracking (`-0.02em` hero, `-0.015em` h2).
- `.eyebrow` labels: 12px, weight 600, `letter-spacing: 0.24em`, uppercase, in `--faint`.
- Signature move: **one italic serif word** per heading in the accent colour.

## 7. Layout Principles
- **Spacing base** 8px; section rhythm `--section: clamp(64px, 12vh, 156px)`; gutter `--pad: clamp(22px, 5vw, 64px)`.
- **Container** `.wrap` max-width `1180px`; text measure capped at `--measure: 62ch`.
- **Grid** two-column editorial `.split` (`1fr 1fr`); blog rows are `150px 1fr auto`; about facts are `120px 1fr`.
- **Radius** `--radius: 2px` — near-sharp, no rounded cards.
- **Elevation** none. Structure is drawn entirely with 1px `--line` hairlines and `border-top` section rules — never shadows.

## 8. Homepage Sections
1. **Nav** — sticky brand wordmark (with italic accent), page links with underline-wipe, EN/中文 toggle.
2. **Hero** — eyebrow, large serif headline, lede, two CTAs (solid + arrow link).
3. **About** — two-column split: section head with italic-accent h2, prose with a big-serif lead line and a `.facts` key/value list.
4. **Selected work** — section head + editorial `.posts` rows (year · title · summary · tags · "Case study →"), closed by a template note.
5. **Footer** — italic serif closing line, social links, copyright meta.

## 9. Component Style
- **Buttons** `.btn` — 1px ink border, `--radius` 2px, transparent fill; hover inverts to ink background. `.btn.solid` is ink-filled, hovering to `--accent-deep`; arrow nudges right on hover.
- **Cards / rows** — no cards; work is a hairline-separated `.posts` list, hovering to a `--paper-2` wash with the title shifting to `--accent-deep`.
- **Nav** — sticky, translucent paper with `backdrop-filter: blur(8px)`, hairline bottom; links grow an accent underline via `::after` scaleX.
- **Forms** — borderless inputs with a single `--line` bottom rule that turns `--accent` on focus; uppercase `--faint` labels.
- **Chips / tags** — `--line` outlined pills at `--radius` 2px, `--ink-soft` text.
- **Chat / AI surface** — a bordered `--paper-2` panel with a header dot, alternating `.msg.user` (ink bubble) / `.msg.ai` (paper bubble) blocks; AI emphasis renders as italic serif in `--accent-deep`.
- **Bilingual EN/中文 toggle** — any element carrying both `data-en` and `data-zh` is swapped by `app.js` (`applyLang`, via `innerHTML` so inline `<em>` survives); inputs use `data-en-ph` / `data-zh-ph`. Default English; choice persists in `localStorage` under key **`qluxe_lang`**. Proper nouns carry no `data-*` so they never translate.

## 10. Motion / Animation
- Scroll reveals: elements marked `[data-rise]` start faded + 14px down and settle via `.in` (added by an `IntersectionObserver`, threshold 0.12), 0.7s on `--ease` `cubic-bezier(0.22,0.61,0.36,1)`.
- Nav link underline wipes in on hover / current page; button arrow translates `4px`.
- All entrance motion is guarded by `html.js` so content stays visible if JS is absent. A `@media (prefers-reduced-motion: reduce)` block disables rises, arrow, and underline transitions.

## 11. Responsive Design
- **≤ 820px** — contact & AI-lead grids collapse to one column.
- **≤ 780px** — the `.split` editorial grid becomes single-column.
- **≤ 760px** — AI capability grid collapses to one column.
- **≤ 720px** — blog `.post` rows stack (date/read lose top padding).
- **≤ 680px** — nav wraps; links drop to a full-width row under the brand with a hairline top border.

## 12. Things to Avoid
- No second accent hue — the olive is the only color.
- No rounded cards, drop shadows, or gradients (structure is hairlines only).
- No emoji or monospace label styling (that belongs to other templates in this library).
- No dark mode, neon, or "techy" chrome.
- Don't let the accent creep beyond italic words, the availability dot, and link underlines.