Anthology

Cinematic press-kit editorial

Hard black/white surface with a Times-serif wordmark for editorial titles and pull quotes. Sections toggle to full-bleed cinema mode (inverse palette, 350ms cross-fade). Snap-scroll carousels, inverse text selection.

Palette

Install the full kit

Drops 4 doc/token files plus 6 starter components.

DESIGN.md

# Anthology — Design Language

> Film-industry editorial. Black-and-white with a serif wordmark. Cinematic full-bleed sections that toggle inversion at the section level.

## Identity

Anthology treats the website like a press kit: white paper, black ink, no decoration. The only typographic concession is the wordmark — a `Times New Roman` serif that anchors the brand. Everything else is set in tight sans (Helvetica Neue) with `-0.02em` tracking on display headlines so each title feels like a single chiseled object. Sections alternate between full-bleed dark "cinema mode" surfaces and quiet paper-white interludes. Selection highlights flip to inverse (black background, white text) — a tiny detail that signals attention.

The design's power move is the **`data-mode="cinema"` section-level toggle**: any section can invert its palette without affecting the page, and the inversion transitions across a 350ms `bg-background` fade. The page becomes a reel of paper / cinema / paper / cinema scenes.

## Palette

| Token | Default (paper) | Cinema (`data-mode="cinema"`) |
|-------|-----------------|--------------------------------|
| `--background` | `#ffffff` | `#000000` |
| `--foreground` | `#000000` | `#ffffff` |
| `--card` | `#ffffff` | `#000000` |
| `--card-foreground` | `#000000` | `#ffffff` |
| `--muted` | `#f4f4f4` | `#1a1a1a` |
| `--muted-foreground` | `#6b6b6b` | `#a0a0a0` |
| `--border` | `#e5e5e5` | `#2a2a2a` |
| `--primary` | `#000000` | `#ffffff` (auto-inverted) |
| `--ring` | `#b5b5b5` | `#b5b5b5` |

There is no color. The dramatic moments come from inverting the entire surface, not from accent picks.

### Selection

```css
[data-designlang="anthology"] ::selection {
  background: #000;
  color: #fff;
}
```

(Always inverse, regardless of mode.)

## Typography

### Families

| Family | Token | Role |
|--------|-------|------|
| Helvetica Neue (system) | `--font-sans` | Everything |
| Times New Roman | `--font-wordmark` | The Anthology wordmark, pull quotes, editorial titles |

Mono is not used. The wordmark serif fills that "second voice" role for editorial moments.

### Scale

| Tier | Size | Weight | Tracking | Line-height |
|------|------|--------|----------|-------------|
| Display | `clamp(48px, 8vw, 144px)` | 500 | `-0.02em` | `0.95` |
| H1 | `clamp(36px, 5vw, 80px)` | 500 | `-0.015em` | `1.0` |
| H2 | `clamp(24px, 3vw, 48px)` | 500 | `-0.01em` | `1.1` |
| H3 | `20px` | 500 | `-0.005em` | `1.2` |
| Wordmark / pull quote | varies | 400 | `-0.01em` | `1.1` (serif) |
| Body | `16px` | 400 | `0` | `1.5` |
| Caption | `13px` | 400 | `0.02em` | `1.4` |
| Eyebrow | `11px` | 500 | `0.16em` | `1` (uppercase) |

### Three utility classes

```css
.anthology-display {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.anthology-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.anthology-wordmark {
  font-family: "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
```

## Spacing & geometry

### Container

```html
<div class="mx-auto max-w-[1480px] px-6 md:px-12">
```

### Radius

`0`. Square corners everywhere.

```css
--radius: 0;
--radius-sm: 0;
--radius-md: 0;
```

### Spacing scale

| Token | Value | Use |
|-------|-------|-----|
| `space-4` | `16px` | Chip padding |
| `space-6` | `24px` | Gutter mobile |
| `space-12` | `48px` | Gutter desktop |
| `space-24` | `96px` | Section vertical mobile |
| `space-32` | `128px` | Section vertical desktop |

### Full-bleed

Cinema sections extend to the viewport edge:

```tsx
<section
  data-mode="cinema"
  className="relative w-screen left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] py-32"
>
  <div className="mx-auto max-w-[1480px] px-6 md:px-12">{/* content */}</div>
</section>
```

The full-bleed trick breaks out of the parent container while keeping the inner content properly aligned.

## Motion

| Pattern | Easing | Duration |
|---------|--------|----------|
| Cinema ↔ paper bg transition | `ease` | 350ms |
| Hover color shift | `ease` | 200ms |
| Snap-scroll carousel | CSS scroll-snap (no JS animation) | — |
| Page transitions | none | n/a |

Carousels use CSS `scroll-snap-type: x mandatory`, not animated translation. The scroll itself is the animation.

## Voice & copy

- Press kit. Director quotes. Distributor copy.
- No exclamations. No marketing-speak.
- Section titles are nouns: *"Films"*, *"About"*, *"Shop"*, *"News"*.
- CTAs are quiet: *"Watch trailer"*, *"Buy tickets"*, *"Read interview"*, *"View dates"*.
- Headlines lean toward titles: *"Past Lives"* (italic serif), *"In theaters February 14"*.
- Numbers are minimal: a runtime, a release year, a screening date. Each one stands alone.

## Component recipes

### Hero (cinema mode)
- Full-bleed `data-mode="cinema"`, no padding image-led.
- Anthology wordmark top-left in serif (Times) at `.anthology-wordmark`.
- Display title bottom-left in sans (`.anthology-display`).
- One CTA: `.anthology-eyebrow` + a small arrow.

### Section transition
Cinema → paper boundary. The bg-color transition runs automatically:

```tsx
<section data-mode="cinema" className="transition-colors duration-[350ms]">…</section>
<section className="transition-colors duration-[350ms]">{/* paper, no data-mode */}</section>
```

Add `transition-colors duration-[350ms]` to every section to make the inversion fade rather than snap.

### Snap-scroll case studies
- Horizontal `flex` row with `overflow-x-auto snap-x snap-mandatory`.
- Each tile `snap-start`, 4:5 portrait, no border, no caption overlay.
- Caption sits underneath the tile in `.anthology-eyebrow`.

### Menu overlay
- Burger trigger; click reveals a full-bleed `data-mode="cinema"` overlay.
- Serif primary nav (Times, large), story cards in a 3-up grid, newsletter input on a single line.

## Anti-patterns

- ❌ Any color other than black/white/grayscale.
- ❌ `rounded-*` (no exceptions, including pills).
- ❌ `shadow-*`. Depth comes from inversion, not from elevation.
- ❌ Animated translations on hover (`hover:-translate-y-1`).
- ❌ Bold weights beyond 500. Use 400–500.
- ❌ Mono labels. Times serif fills the "second voice" role.
- ❌ Gradient fills. Solids only.

## Accessibility

- True-black on white (and vice-versa) passes AA at every size.
- Inverse selection is purely visual; screen readers ignore it.
- Snap-scroll carousels respect `scroll-behavior: smooth` on the html — disable when `prefers-reduced-motion`.
- `data-mode="cinema"` should NOT depend on `prefers-color-scheme` — it's a content decision, not a user preference.
- Focus ring: 2px `--ring` (`#b5b5b5`) with 2px offset. Visible against both modes.

## What ships with the pack

- `tokens.css` — `@theme inline` + scoped vars on `[data-designlang="anthology"]` with default + `data-mode="cinema"`. Includes `.anthology-display`, `.anthology-eyebrow`, `.anthology-wordmark` utilities and inverse selection.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Components: `hero-awards`, `editorial-feature`, `case-studies-list`, `programs-list`, `reel-section`, `menu-overlay`, `stack-cinematic`, `sticky-carousel`.
- Foundations — `Button`, `Card`.

Components (8)