# 06 · Fullscreen Photo — Design System

> A full-bleed image hero that fills the viewport with a huge italic-serif name overlaid, then the story reveals on scroll — the classic editorial photographer one-pager in the tradition of fashion/gallery print layouts.
> **All content is placeholder** — the persona and every project/post/link are samples; replace them with your own.

---

## 1. Website Goal
Give an image-led creative a single scrolling page where the photography does the talking. The first screen is one commanding photo + name; the rest presents a small selected-work gallery, a short about, and a contact call. Primary outcome: a booking or commission enquiry.

## 2. Target Audience
Photographers, art directors, models, and other image-first creatives who want their portfolio images — not UI chrome — to carry the site.

## 3. Brand Personality
Quiet, editorial, warm, confident, restrained. Voice is understated and craft-focused ("light first, everything else follows"), never salesy.

## 4. Visual Direction
Near-monochrome warm-neutral canvas so photos supply all the colour, with a single champagne accent. Signature moves: a `100svh` photo hero with a gradient scrim + animated scroll cue, a fixed nav using `mix-blend-mode: difference` to stay legible over any image, high-contrast italic-serif display, and CSS duotone-gradient placeholders labelled `[ photo ]` standing in for real imagery.

## 5. Color System
Warm-neutral, almost monochrome — photography carries the colour.

| Token | Hex | Use |
|---|---|---|
| `--bg` | `#0c0b0a` | Page background |
| `--bg-2` | `#141210` | Cards / gallery tile base |
| `--paper` | `#f4f1ea` | Light surface reference |
| `--ink` | `#16130f` | Ink on light / accent-button text |
| `--text` | `#f4f1ea` | Body text |
| `--dim` | `#b7b0a4` | Secondary text |
| `--faint` | `#7d766a` | Meta / footer text |
| `--line` | `rgba(255,255,255,.14)` | Hairlines / borders |
| `--accent` | `#c9a24b` | Champagne accent — italics, links, active toggle |

Plus duotone photo placeholders `--photo-1/2/3` (gradient fills). **Max ~2 colours: near-black canvas + the single champagne accent. Add no competing hues — photos supply the rest.**

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display | `--disp` "Cormorant Garamond", Georgia, serif | High-contrast serif; italic accents in accent colour |
| UI / body | `--sans` "Jost", ui-sans-serif, system-ui | Geometric sans; wide tracking on labels |

- Hero name: `clamp(52px, 13vw, 180px)`, weight 500, line-height `.92`, `letter-spacing:-.01em`.
- Lede: `clamp(26px, 4.4vw, 52px)`; section headings `clamp(30px, 5vw, 60px)`; contact headline `clamp(40px, 9vw, 120px)`.
- Eyebrows/labels: 12px, weight 500, `letter-spacing:.34em`, uppercase, accent colour.
- Signature move: italic serif words rendered in champagne (`em` inside display).

## 7. Layout Principles
- Global padding `--pad: clamp(18px, 4vw, 56px)`; content `.wrap` `max-width:1200px` centered.
- Section vertical rhythm `clamp(64px, 11vw, 150px)`.
- Hero `height:100svh; min-height:560px`, text bottom-aligned.
- Gallery: 2-col grid, `gap:clamp(14px, 2vw, 26px)`, tiles `aspect-ratio:4/5`.
- No rounded corners; elevation comes from hairlines (`--line`) and gradient scrims, not shadows.
- Easing: `--ease: cubic-bezier(.22,.61,.36,1)`.

## 8. Homepage Sections
1. Fixed nav — brand, Work / About / Contact links, EN/中文 toggle.
2. Hero — full-viewport photo, eyebrow, italic-serif name, sub-line, scroll cue.
3. Intro — single large serif lede statement.
4. Selected work — 2×2 gallery of series with hover zoom + captions.
5. About — portrait split, bio paragraphs, stats row (Shoots / Publications / Years).
6. Contact — big serif headline, mailto link, social row.
7. Footer — copyright + template label.

## 9. Component Style
- **Nav:** fixed, transparent, `mix-blend-mode:difference`; uppercase tracked links.
- **Gallery cards (`.shot`):** dark tile, image `scale(1.04)` on hover, caption over a bottom gradient, `[ photo ]` corner tag.
- **About split:** portrait placeholder + bio; stats separated by top hairline.
- **Buttons/links:** minimal; contact mail underlined in accent; social row dims→text on hover.
- **Lang toggle (EN/中文):** `.lang` buttons; `data-en`/`data-zh` swapped by an inline script (no separate app.js), persisted in `localStorage` under key **`t06_lang`** (default EN). Active button fills champagne.
- No chat/AI surface in this template.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` elements fade + rise (`translateY(26px)`, `.8s`), staggered via `data-d="1|2|3"` (`.1/.2/.3s`), triggered by IntersectionObserver, guarded by `html.js`.
- Scroll cue: `@keyframes cue` draws a 1px accent line up/down on `1.8s` loop.
- Hover: gallery image scale (`.8s`).
- `prefers-reduced-motion: reduce` disables the cue, reveals, and smooth scroll.

## 11. Responsive Design
- `@media (max-width:760px)` — about `.split` collapses to one column.
- `@media (max-width:720px)` — nav text links hide (brand + toggle remain).
- `@media (max-width:640px)` — gallery collapses to a single column.
- Hero uses `100svh` so it stays mobile-safe.

## 12. Things to Avoid
- Don't add competing colours — keep it near-monochrome so photos pop; one accent only.
- Don't drop the hero scrim (text becomes unreadable over light photos).
- Don't crowd the hero with text; give it the full viewport.
- Don't introduce rounded cards, soft shadows, or a sans-serif display face.
- Don't swap the italic-serif hero for anything geometric.