# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Thin to light sans-serif — the opposite of monumental |
| **Examples** | Aperçu Light, Söhne Light, Aktiv Grotesk Light, Inter Thin (100-300) |
| **Weight** | 200-300 (thin, not bold) |
| **Tracking** | 0.05em-0.15em (generous, breathable) |
| **Size** | Small for this style — `clamp(1.2rem, 2vw, 2rem)` max |
| **Transform** | Uppercase for labels, sentence case for headlines |

**Why thin type:** The photography is heavy and monumental. Thin type provides contrast without competing. It whispers while the image speaks.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean, readable sans-serif |
| **Examples** | Aperçu, Söhne, Inter (400), Satoshi |
| **Weight** | 400-500 |
| **Tracking** | 0.01em-0.02em (slightly open for readability) |
| **Size** | Small — `clamp(0.75rem, 0.9vw, 0.9rem)` — max 14px |
| **Line Height** | 1.6-1.7 (generous for slow reading) |

**Why small body text:** This style doesn't have long-form content. Body text is caption-like — 1-3 sentences max. Small size keeps it secondary to the imagery.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family as body, lighter weight |
| **Examples** | Aperçu Light, Söhne Light |
| **Weight** | 300-400 |
| **Tracking** | 0.15em-0.25em (very wide, like film credits) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, photo credits, location tags. These tiny labels feel like film credits rolling at the edge of the frame.

---

## Type Scale

**Ratio:** Not applicable in the traditional sense. This style uses two sizes:

```
Display:  clamp(1.2rem, 2vw, 2rem)    — small by any other style's standard
Body:     clamp(0.75rem, 0.9vw, 0.9rem) — caption size
Micro:    10-12px                        — film credit size
```

The "scale" is the contrast between the vast image and the tiny type — not between type sizes.

---

## Font Pairing Logic

**Single family approach:** Use one typeface family at multiple weights (Light for display, Regular for body, Light for micro). This creates visual harmony — the type feels like one voice at different volumes.

**Alternative:** Pair a thin geometric sans (display) with a humanist sans (body) for subtle contrast. Example: Aktiv Grotesk Light + Söhne.

**Never:** Bold display type. Heavy weights destroy the cinematic atmosphere.

# Color Architecture

## Ground

The "ground" is the photograph itself. There is no solid background color — the image IS the background. However, for text areas and transitions:

```css
--color-ground: #F5F3F0; /* Fog-white — the color of mist and overcast sky */
--color-ground-dark: #1A1A1A; /* For dark photo sections */
```

**Why fog-white:** Not pure white (#FFFFFF) — that's too harsh. Fog-white (#F5F3F0) has a slight warm gray undertone that feels like overcast sky or morning mist.

---

## Text

```css
--color-text-on-light: #1A1A1A; /* Near-black on fog-white */
--color-text-on-dark: #E8E6E3;  /* Off-white on dark photos */
--color-text-muted: #888888;     /* For micro labels and credits */
```

**On dark photography:** Text must be off-white (#E8E6E3), never pure white. Pure white on dark photography creates halation and feels digital.

---

## Accent

```css
--color-accent: #C4956A; /* Dusty amber — like light through fog */
/* Alternatives: */
--color-accent-rose: #C4956A; /* Dusty rose */
--color-accent-sage: #8B9D83; /* Muted sage */
```

**Rule:** The accent appears on:
- The quiet CTA border and text
- One data point or label per section (e.g., a year, a location)
- Active navigation state

**Why dusty amber:** It's the color of golden hour light breaking through fog. It's warm but desaturated — it belongs in this world.

---

## The Color Rule

> **Desaturate everything. The photograph provides all visual richness. Text is near-black or off-white. ONE warm accent, used like a single note in a quiet room.**

---

## Photography Color Treatment

All photography must be processed:
- **Desaturate** to 60-80% (not full B&W — keep a hint of color)
- **Reduce contrast** slightly — crush the blacks, lift the highlights
- **Add subtle warm grade** — shift shadows slightly warm, highlights slightly cool
- **Film grain** at opacity 0.03-0.05

**Never:** Fully saturated, high-contrast, HDR-processed, or neon-tinted photography.

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure #FFFFFF background | Fog-white #F5F3F0 or the photograph itself |
| Pure #000000 text on dark photos | Off-white #E8E6E3 |
| Bright, saturated accent colors | Dusty, desaturated warm tones |
| Multiple accent colors | ONE accent, used sparingly |
| Colorful photography | Desaturated, graded, film-like |
| High-contrast imagery | Crushed blacks, lifted highlights |

# Motion Principles

## Philosophy

Motion in Vast Quiet Cinematic is **breathing, not performing**. Everything moves slowly, like clouds drifting or fog rolling. No snap, no bounce, no spring. The motion should feel inevitable — like the image was always going to reveal itself this way.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero photograph | Opacity 0→1 + subtle scale(1.02)→1 | 2000ms | `ease-out` | 0ms |
| Display text | Opacity 0→1 + translateY(12px)→0 | 1400ms | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | 600ms |
| Body text | Opacity 0→1 | 1000ms | `ease-out` | 1000ms |
| CTA | Border draw-in (SVG stroke) | 1200ms | `ease-in-out` | 1400ms |
| Section images | Opacity 0→1 + translateY(20px)→0 | 1600ms | `ease-out` | on scroll |

**Key:** All durations are SLOW (1000ms+). This is the opposite of snappy UI motion.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Parallax on hero image | Very subtle — 5-10% of scroll distance |
| Section transitions | Crossfade with 400ms overlap |
| Text reveals on scroll | Fade-in when entering viewport (IntersectionObserver) |
| Image scale on scroll | Subtle scale(1.0)→scale(1.05) over section height |

**The parallax should be barely perceptible.** If users notice the parallax, it's too much. It should feel like the image is just... there, slightly shifting.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Opacity 1.0 → 0.5 (500ms) | — |
| CTA button | Border opacity 0.6 → 1.0, text opacity 0.7 → 1.0 | — |
| Image links | Subtle brightness 1.0 → 1.03 (800ms) | — |

**All hover transitions are slow (500ms+).** Quick hover states feel jarring in this atmospheric context.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrance animations collapse to instant opacity
- No parallax
- No scroll-linked scale
- Images render at full opacity immediately
- Hover states use instant opacity change

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| ❌ Never animate | Why |
|-----------------|-----|
| Fast, snappy transitions | Breaks the cinematic atmosphere |
| Bounce or spring | Feels playful, not contemplative |
| Rotation or skew | Too dynamic for this style |
| Every element staggering | Motion should be sparse, not choreographed |
| Marquee text or auto-scrolling | The user controls the pace |
| Particle effects or confetti | Completely wrong register |

# Layout Grammar

## Grid System

**No visible grid.** The layout is defined by the photograph's composition and the placement of text at the edges. However, internally:

- Full-bleed sections: 100vw width, 100dvh min-height
- Text containers: max-width 480px (narrow, like a poem)
- Edge placement: text sits 5-10vw from the viewport edge

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Full-bleed desaturated photograph |
| Text position | Top-left OR bottom-right OR centered-but-tiny |
| Headline size | `clamp(1.2rem, 2vw, 2rem)` — SMALL |
| Headline weight | 200-300 (thin) |
| Headline tracking | 0.1em-0.15em (wide) |
| Subtext | 1-2 sentences max, below or beside headline |
| CTA | Thin border, small text, generous padding |

**The hero is the photograph.** Text is a caption, not a headline.

---

## Section Spacing

```css
--section-padding-y: clamp(6rem, 15vh, 12rem); /* MASSIVE whitespace */
--content-max-width: 480px; /* Narrow text column */
--edge-margin: clamp(2rem, 5vw, 6rem); /* Text distance from edge */
```

**The whitespace between sections should feel uncomfortable to a designer trained to fill space.** That discomfort means you're doing it right.

---

## Layout Patterns

### Pattern 1: Full-Bleed Photo + Edge Text
```
┌─────────────────────────────────────────┐
│                                         │
│  [Desaturated photograph fills all]     │
│                                         │
│  tiny label                             │
│  HEADLINE                               │
│  One sentence of body text.             │
│                              [Explore]  │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Fog White + Photo
```
────────────────────┬────────────────────┐
│                    │                    │
│  Fog-white ground  │  Desaturated photo │
│                    │  (full-bleed right)│
│  tiny label        │                    │
│  HEADLINE          │                    │
│  Body text...      │                    │
│                    │                    │
└────────────────────┴────────────────────┘
```

### Pattern 3: Photo with Centered Tiny Text
```
┌─────────────────────────────────────────┐
│                                         │
│  [Desaturated photograph]               │
│                                         │
│              tiny label                 │
│              HEADLINE                   │
│              [ Explore ]                │
│                                         │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full asymmetric or centered-tiny, massive whitespace |
| **Tablet (768px)** | Text moves to bottom-left of photo, whitespace reduces slightly |
| **Mobile (375px)** | Photo stacks above text, text full-width with edge margins |

**On mobile, the photograph should still dominate.** Don't shrink it to make room for text. Stack vertically.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Centered large headlines | Edge-aligned or centered-but-tiny |
| Card grids or feature rows | Full-bleed sections with single images |
| Multi-column text | Single narrow column (max 480px) |
| Filling whitespace with content | Let the space breathe |
| Multiple images per section | One image per section, full-bleed |
| Busy navigation with many links | 3-4 links max, thin text |

# Texture & Surface

## Primary Texture: Photographic

The texture IS the photography. Every image must be processed to feel cinematic:

| Processing | Effect | Parameters |
|-----------|--------|-----------|
| **Desaturation** | Reduce color intensity | 60-80% saturation (not full B&W) |
| **Contrast reduction** | Crush blacks, lift highlights | Shadows +10, Highlights -15 |
| **Warm grade** | Shift shadows warm, highlights cool | Shadow tint: +5 orange, Highlight tint: +3 blue |
| **Film grain** | Analog noise overlay | Opacity 0.03-0.05, overlay blend mode |
| **Vignette** | Darken edges, draw focus | Radial gradient, 40% transparent center |

---

## Film Grain Overlay

```css
.film-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,..."); /* feTurbulence */
  mix-blend-mode: overlay;
}
```

**Parameters:**
- Opacity: 0.03-0.05 (barely visible)
- Position: fixed (covers viewport, doesn't scroll)
- Blend mode: overlay or soft-light

---

## Vignette

```css
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}
```

**Purpose:** Darkens edges to draw the eye to the center of the photograph. Creates a "looking through a lens" feeling.

---

## Image Processing Rules

**NEVER use raw, unprocessed photography.** Every image must pass through:

1. Desaturate to 60-80%
2. Reduce contrast (crush blacks, lift highlights)
3. Add subtle warm grade
4. Apply film grain
5. Add vignette

**The goal:** Every photo should look like a still from an art-house film, not a stock photo or Instagram post.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | The photograph itself, or fog-white #F5F3F0 |
| Text areas | Transparent over photo, or fog-white solid |
| Buttons | Thin border (1px, 30% opacity), transparent bg |
| Navigation | Transparent, thin text, opacity hover |
| Dividers | None — whitespace separates sections |

**No cards, no panels, no shadows, no borders (except CTA).** The style is defined by what's NOT there.

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Raw, saturated photography | Desaturated, graded, film-like |
| Heavy grain or noise | Subtle grain at 0.03-0.05 opacity |
| Gradient overlays on photos | Vignette only (radial, subtle) |
| Glassmorphic cards | Transparent or solid fog-white |
| Drop shadows | No shadows — depth comes from the photo |
| Patterned backgrounds | Solid fog-white or the photograph |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `full-bleed photography` | The image fills the entire viewport — non-negotiable |
| `desaturated palette` | Colors pulled toward gray — the style's signature |
| `thin sans-serif` | Weight 200-300 type — whisper, don't shout |
| `extreme whitespace` | py-48+ section padding — space IS design |
| `edge-aligned text` | Text at viewport edges, never large and centered |
| `cinematic pacing` | Slow, deliberate, like a film — not a webpage |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `film grain overlay` | Subtle analog noise at 0.03-0.05 opacity |
| `vignette` | Radial darkening at edges |
| `fog-white ground` | #F5F3F0 — the color of mist |
| `quiet CTA` | Thin border, small text, invite don't demand |
| `slow parallax` | 5-10% scroll-linked movement, barely perceptible |
| `crushed blacks` | Compressed dark tones in photography |
| `lifted highlights` | Brightened light areas for atmospheric feel |
| `warm grade` | Slight orange shift in shadows |
| `letterbox` | Cinematic aspect ratio or black bars |
| `aspect-ratio cropping` | Specific image proportions (21:9, 16:9) |
| `color grading` | Cinematic color adjustment (LUT) |
| `desaturated earth tones` | Muted browns, grays, dusty greens |

---

## Context Terms

| Term | Mood |
|------|------|
| `Terrence Malick film` | Slow, contemplative, natural light |
| `art-house cinema` | Serious, atmospheric, visual storytelling |
| `morning mist` | Soft, diffuse, quiet |
| `golden hour` | Warm light, long shadows, peaceful |
| `overcast sky` | Even light, no harsh shadows, calm |
| `mountain ridge` | Vast, permanent, small human scale |
| `empty road` | Journey, solitude, possibility |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `bold` / `heavy` type | Destroys the whisper aesthetic |
| `centered large headline` | Fights the photography |
| `vibrant` / `saturated` | Wrong color register entirely |
| `card grid` | Too busy, too digital |
| `gradient` | Digital effect, not cinematic |
| `bounce` / `spring` | Wrong motion register |
| `glassmorphism` | Too tech-SaaS |
| `purple` / `blue` accent | Wrong temperature |
| `CTA above fold` | The CTA should be discovered, not forced |
| `feature cards` | This style doesn't have features — it has scenes |

---

## Prompt-Ready Phrases

```
"full-bleed desaturated photography hero"
"thin sans-serif display type at 200 weight"
"extreme whitespace between sections (py-48+)"
"fog-white ground color #F5F3F0"
"edge-aligned text, tiny and wide-tracked"
"film grain overlay at opacity 0.04"
"quiet CTA with thin border"
"cinematic color grading — crushed blacks, lifted highlights"
"slow parallax at 5-10% scroll distance"
"no gradients, no cards, no bold type"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Luxury brands** | The restraint and whitespace signal expense. Quiet confidence over loud marketing. |
| **Film/TV promotion** | Literally cinematic — the page feels like a title sequence. |
| **Architecture visualization** | Vast photography + minimal text = architectural presentation. |
| **High-end hospitality** | The atmosphere feels like a boutique hotel lobby — calm, considered. |
| **Photographer portfolios** | The photography IS the content. Text doesn't compete. |
| **Travel/tourism (premium)** | Evokes the feeling of being somewhere vast and beautiful. |
| **Automotive (luxury)** | Cinematic photography + minimal text = car commercial aesthetic. |

## Brand Personality Match

This style reinforces brands that are:
- **Contemplative** — thoughtful, not reactive
- **Premium** — expensive-feeling, exclusive
- **Visual** — the imagery carries the message
- **Quiet** — confident without shouting
- **Timeless** — not trendy, not dated

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **SaaS products** | Too slow, too minimal. Users need information density. |
| **E-commerce** | No product grids, no CTAs, no urgency. Wrong register entirely. |
| **Developer tools** | Too atmospheric, not technical enough. |
| **Youth brands** | Too serious, too slow, too quiet. |
| **Data products** | No room for charts, metrics, or information density. |
| **Campaign microsites needing engagement** | Too passive — users drift, they don't interact. |
| **Content-heavy sites** | The narrow text column and massive whitespace can't support long-form content. |

## How to Decide

Ask: **"Does my brand want to feel like the opening shot of an art-house film?"**

If yes → Vast Quiet Cinematic.
If no → Consider Editorial Serif Narrative (more text), Dark Cinematic Studio (warmer, more motion), or Luxury Refined Restraint (more polished).

# Reference Gallery

## Live Sites

### RISK (risk.film) — FLOT NOIR
- **What works:** Full-bleed cinematic photography, tiny edge-aligned type, extreme whitespace between scenes, slow crossfade transitions
- **URL:** risk.film

### Julien Calot (juliencalot.com) — FLOT NOIR
- **What works:** Desaturated landscape photography, thin sans-serif at viewport edges, quiet CTA, film grain overlay
- **URL:** juliencalot.com

### Raft (raft.com)
- **What works:** Full-bleed video backgrounds, scroll-triggered scene changes, narrative structure, cinematic color grading
- **URL:** raft.com

### 21 Hrs On The Moon (21hrs.space) — Studio 28K
- **What works:** Vast photography, minimal text, slow reveals, atmospheric pacing
- **URL:** 21hrs.space

## Key Visual References

### Photography Style
- **Desaturated landscapes** — mountains, empty roads, fog-covered lakes
- **Color grading** — crushed blacks, lifted highlights, warm shadow tint
- **Aspect ratio** — 21:9 or 16:9 cinematic widescreen
- **Film grain** — subtle noise at 0.03-0.05 opacity

### Typography References
- **Aperçu Light** at 200-300 weight — the quintessential thin cinematic sans
- **Söhne Light** — similar feel, slightly more geometric
- **Aktiv Grotesk Light** — clean, invisible, perfect for this style
- **Tracking** 0.1-0.15em on display — like film credits

### Layout References
- **Text at edges** — top-left, bottom-right, or centered-but-tiny
- **Massive section gaps** — py-48 to py-96 between content
- **Single narrow column** — max-width 480px for body text
- **Full-bleed everything** — no margins on images

## Screenshot Notes

> When capturing references for this style, look for:
> - The ratio of image to text (should be 80%+ image)
> - The weight of the type (should be 200-300, never 400+)
> - The amount of whitespace between sections (should feel excessive)
> - The photography treatment (desaturated, graded, film-like)
> - The CTA treatment (thin border, small text, quiet)
> - The overall feeling (should feel like a film, not a website)