# 14 · Monochrome Luxe — Design System

> A pure black-and-white high-fashion editorial one-pager — extreme contrast, huge condensed display type, an image-forward lookbook — in the tradition of luxury fashion campaigns and Vogue-style spreads (no color at all, ever).
> **All content is placeholder** — the persona "Elise Laurent" and every project/service/link are samples; replace them with your own.

---

## 1. Website Goal
Present a creative director, stylist, photographer, or fashion professional with maximum confidence and restraint. The primary outcome is to let a curated lookbook of work carry the story and drive an inquiry — positioning the persona as expensive, editorial, and in-demand.

## 2. Target Audience
Creative directors, stylists, photographers, art directors, and fashion/luxury professionals. Flatters image-led portfolios where large photography and a strong name are the whole pitch.

## 3. Brand Personality
Confident, minimal, luxurious, editorial, uncompromising. Voice is spare and declarative — one-line statements set in towering caps, no filler, no exclamation.

## 4. Visual Direction
Pure black and white with extreme contrast and huge condensed uppercase type. A full-bleed grayscale hero image fills the viewport with a centered name; a single statement line follows. The lookbook is an asymmetric 12-column grid of grayscale image tiles that scale on hover, each labeled with a number and caption. The about block inverts to solid black. No color, no rounded corners, no decoration — just type, image, and hairlines.

## 5. Color System
Monochrome only — black, white, and greys.

| Token | Value | Use |
|---|---|---|
| `--black` | `#000` | About block bg, pure black |
| `--white` | `#fff` | Inverted text, borders |
| `--off` | `#f4f3f1` | Page background |
| `--ink` | `#0a0a0a` | Text |
| `--dim` | `#6d6d6d` | Secondary text, contact labels |
| `--faint` | `#9c9c9c` | Meta, captions, footer, service numbers |
| `--line` | `rgba(255,255,255,.22)` | Hairlines on dark |
| `--line-d` | `#e2e0dc` | Hairlines on light |

Image placeholders are grey gradients: `--grey-1` `linear-gradient(150deg,#2a2a2a,#0a0a0a)`, `--grey-2` `#5a5a5a→#171717`, `--grey-3` `#8a8a8a→#333`; all lookbook images carry `filter:grayscale(1)`. **Zero chroma — never introduce a color accent; contrast and scale do all the work.**

## 6. Typography
One condensed display face + one neutral sans.

| Role | Family | Notes |
|---|---|---|
| Display / headlines | `--disp` "Anton", Impact, sans-serif | Weight 400; uppercase, near-`.005–.01em` tracking; used huge |
| Body / labels | `--body` "Inter", ui-sans-serif | Weights 300/400/500/600; base `16px`, line-height `1.6` |

- Type scale (clamp): hero name `clamp(58px,17vw,270px)`; statement `clamp(30px,6vw,88px)`; section titles `clamp(30px,5vw,66px)`; about big `clamp(34px,5vw,80px)`; stats `clamp(40px,6vw,80px)`; contact `h2` `clamp(44px,12vw,190px)`.
- Labels: `.label` `11px`, weight 600, letter-spacing `.32em`, uppercase; nav `.2em`; role line `.3em`.
- Signature type move: the `.statement`/headlines set in towering Anton caps with `line-height:.82–.98`; inside the statement, `.thin` words flip to Inter weight 300 italic lowercase for contrast.

## 7. Layout Principles
- Spacing base: `--pad:clamp(16px,4vw,56px)`; sections `padding:clamp(48px,7vw,110px) 0`, statement/contact `clamp(60px,10–11vw,150px)`.
- Container: `.wrap` `max-width:1280px`, centered.
- Lookbook grid: `repeat(12,1fr)`, gap `clamp(12px,1.6vw,22px)`; items span 7/5/5/7 with mixed aspect ratios (`4/3`, `4/5`, `16/10`) for editorial asymmetry.
- Radius: none (0) everywhere.
- Elevation: no shadows — depth comes from the full-bleed black hero (radial vignette `::after`), the inverted black about block, and hairlines (`--line` on dark, `--line-d` on light).

## 8. Homepage Sections
1. Fixed nav with `mix-blend-mode:difference` — brand, links, EN/中文 toggle (auto-inverts over any background).
2. Full-bleed grayscale hero — label, `Elise Laurent` name, role line, `Scroll` cue (`100svh`, min `560px`).
3. Statement — one centered towering caps line with `.thin` italic words.
4. `#work` — "Selected work / Lookbook 2026": asymmetric 12-col grayscale lookbook (4 items) + template note.
5. `#about` — inverted black block: "Twenty years behind the image" + bio + numbered services list (01–04).
6. Stats — 4-up numeric row (years / campaigns / covers / houses).
7. `#contact` — huge caps "Work with me" + mailto + link row.
8. Footer — copyright + template credit.

## 9. Component Style
- **Buttons/links:** no filled buttons; the mailto is underlined (`border-bottom:1px solid var(--ink)`); nav/contact rows are tracked uppercase Inter that underline on hover.
- **Cards (lookbook items):** grayscale image tiles; `.img` scales `1.05` on hover over `.9s`; caption bar gradient-to-black with an Anton title + meta; a corner number index.
- **Nav:** fixed, `mix-blend-mode:difference` so it flips black/white against whatever scrolls under it; active language pressed white-on-black.
- **Services:** a bordered list — each row `border-top:1px solid var(--line)`, Anton service name + faint number.
- **Chips:** none.
- **Forms:** none (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`); an inline script swaps them via `innerHTML` (preserving `<br>`, `<span class="thin">`), sets `<html lang>`, and persists to `localStorage` key **`t14_lang`** (default `en`).

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` start `opacity:0; translateY(24px)` → `.in`, IntersectionObserver threshold `.12`, guarded by `html.js`; stagger `data-d` → `.1/.2/.3s`, transition `.8s var(--ease)` (`cubic-bezier(.22,.61,.36,1)`) — slower and more deliberate than the other packs.
- Hover: lookbook images slow-zoom (`transform:scale(1.05)` over `.9s`); links underline; nav auto-inverts via blend mode.
- `prefers-reduced-motion: reduce` disables reveals and smooth scroll.

## 11. Responsive Design
- `max-width:760px` — all lookbook items span the full 12 columns at `aspect-ratio:4/3`; the about block collapses to one column.
- `max-width:720px` — nav links hide (brand + toggle remain).
- `max-width:640px` — the stats row drops to 2 columns.

## 12. Things to Avoid
- Never add color — a single accent hue breaks the entire concept.
- No rounded corners, drop shadows, or gradients-as-decoration (grey image gradients are the only gradients).
- Don't shrink the display type — the towering Anton caps are the whole impact; timid sizing looks generic.
- Don't fill the lookbook with a uniform grid — the asymmetric 7/5 spans and mixed aspect ratios are the editorial signature.
- Avoid busy copy; keep statements to a single confident line.