# Letterboxd — Marketing site Design Spec

> Source: letterboxd.com (live DOM, computed styles), 2026-07-31. A third-party
> ad overlay was present and ignored (its colours excluded).
> Coverage: logged-out homepage. All stylesheets readable. No published `:root`
> colour tokens (the only `--*` vars are skeleton-animation timings) — palette
> read from the census; the brand triad was read directly from the logo SVG fills.
> Reality check: the queue hint ("film social network — dark editorial with a
> green/orange/blue triad; nothing in Done occupies the social-network register")
> is accurate. The canvas is a dark blue-black navy, all greys are blue-tinted,
> and the logo's three dots are the green/blue/orange triad. The signature the
> hint misses is a two-voice type system: GraphikWeb for all UI/body against a
> **Tiempos serif** for the hero headline — genuinely editorial, like a film
> magazine.

## 1. Visual Theme & Atmosphere

Letterboxd feels like a cinema foyer after dark: a deep blue-black canvas, a
full-bleed film still bleeding into the background through a navy scrim, and a
serif headline that reads like a magazine masthead. Every grey is tinted blue,
which gives the whole surface a cool, filmic cast, and colour is rationed to the
brand's green/blue/orange dot triad — green does the work (CTAs, links, borders),
the blue and orange live almost entirely in the logo. Film posters, framed with
a faint blue-white inset ring and a soft drop shadow, are the recurring unit.
It is social and editorial at once: Graphik keeps the UI crisp while Tiempos
gives the copy a literary voice. It deliberately avoids pure black, warm greys,
bright chrome and flat card design. Feels: filmic, dark, editorial, social.

## 2. Color Palette & Roles

No published colour tokens — census + logo SVG. All neutrals are blue-tinted.

| Token | Hex | Role / usage |
|---|---|---|
| text-1 | #aabbcc | brightest blue-grey text |
| text-2 | #99aabb | primary muted text (741×) |
| text-3 | #8899aa | tertiary |
| text-muted | #667788 | secondary/labels (454×) |
| text-faint | #556677 | faint / secondary pill fill |
| text-dim | #445566 | dim on dark |
| near-white | #ddeeff | near-white blue highlight |
| white | #ffffff | headlines, CTA text |

| Token | Hex | Role / usage |
|---|---|---|
| canvas | #14181c | page background (blue-black navy) |
| canvas-deep | #12161a | deeper wells (64×) |
| card | #2c3440 | cards / raised surfaces |
| inset | #202830 | insets |
| ink-darkest | #223344 | darkest blue-grey (borders/fills) |

| Token | Hex | Role / usage |
|---|---|---|
| green-dot | #00c030 | logo green + link/text green (46×) |
| green-brand | #00e054 | brand green border (41×) |
| green-fill | #00ac1c | primary CTA fill |
| green-hover | #009d1a | CTA hover (focus #009318) |
| blue-dot | #209cd4 | logo blue dot |
| orange-dot | #f07000 | logo orange dot |

Rules: green is the working accent (CTAs, links, active borders); blue and
orange stay in the logo triad and are not chrome colours. Every neutral is
blue-tinted — never a warm or pure grey.

## 3. Typography Rules

Two families: **GraphikWeb** (UI + body grotesque, 1849×; stand-in Inter) and
**Tiempos** (`TiemposHeadlineWeb`/`TiemposTextWeb` serif; stand-in
Fraunces/Newsreader) for the hero headline and editorial copy. Times is a 7×
fallback.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero headline | 36px / 48px | 700 | normal (Tiempos serif) |
| Logo / h1 | 24px / 24px | 400 | normal (Graphik) |
| Sub / h3 | 16px / 20px | 700 | normal (Graphik) |
| Body | 16px / 24px | 400 | normal (Graphik) |
| Nav | ~13px | 700 | UPPERCASE (Graphik) |
| Button | 18px (primary) / 13px (pill) | 700 | normal |

Note: the serif is reserved for the marketing headline; the whole product UI is
Graphik. Nav items are small uppercase Graphik 700.

## 4. Component Stylings

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA (green) | #00ac1c fill / #fff, 4px radius, 42px, Graphik 18/700, inset `rgba(255,255,255,.1) 0 1px 0` highlight | #009d1a fill | #009318 fill | — | — |
| Secondary pill | #556677 fill / #c8d4e0, 12px radius, 24px, Graphik 13/700, inset highlights | color → #fff | default ring, outline-offset -2px | — | dim |
| Nav link | transparent / blue-grey, UPPERCASE | → #fff | — | — | — |
| Search field | dark, blue-grey placeholder | bg → rgba(255,255,255,.8) | **bg → #fff, text #223344**, box-shadow none | — | — |
| Film poster | fluid radius `clamp(2px,2.66%,8px)`, inset `rgba(221,238,255,.25) 0 0 0 1px` ring + drop shadow | scale/lift | — | — | — |

Focus is present (not suppressed): the search field inverts to white on focus
and secondary buttons keep the native ring — no anti-pattern here.

Cards/panels use #2c3440 over the navy canvas. The recurring unit is the film
poster with its blue-white inset ring.

## 5. Layout Principles

Full-bleed hero: a film backdrop faded into the navy via a top-down scrim
gradient, with the serif headline and green CTA centred over it. Below, content
is poster-grid and list-driven (Films / Lists / Members / Journal), dense and
card-based. A fixed top nav (logo + uppercase links + search) sits over the
backdrop. Spacing is compact and grid-aligned — this is a mature social product,
not a spacious landing page.

## 6. Depth & Elevation

Radius scale: film posters use a **fluid `clamp(2px,2.66%,8px)`** (199×), controls
**3px (109×)** and buttons **4px (27×)**, avatars **100%** (22×), plus 2px, 16px,
20px and a `4px 4px 0 0` tab-top.

Shadows:

- `rgba(221,238,255,.25) 0 0 0 1px inset` — blue-white poster ring (65×)
- `rgba(0,0,0,.25) 0 1px 5px, rgba(0,0,0,.35) …` — poster drop (45×)
- `rgba(20,24,28,.125) 0 0 1px 1px inset` — dark inset (41×)
- `rgba(255,255,255,.1) 0 1px 0 inset` — green-button top highlight (7×)

Borders: 1px **#00e054** (brand green, 41×) marks active/branded edges; plus
neutral hairlines. Depth mixes inset rings + soft drops (posters read as
physical), rather than flat cards.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.333s | cubic-bezier(0.19,1,0.22,1) | fades (71×) |
| box-shadow | 0.1s | ease-in | hover lifts (57×) |
| color, text-decoration | 0.5s | cubic-bezier(0.19,1,0.22,1) | links (51×) |
| border | 0.1s | linear | edges (41×) |

House easing: **`cubic-bezier(0.19,1,0.22,1)`** (expo-out) at 0.333–0.5s.
Keyframes: `spinner-base`, `shimmer`/`pulse`/`fade-in` (skeleton loading),
`reveal`, `slideIn`, plus the full animate.css library (bounce, tada, wobble,
jello, heartBeat…) available for reactions. No JS animation library detected.

## 8. Backgrounds, Effects & WebGL

Film-imagery-led on a dark canvas: **46 raster layers** (posters/backdrops) and
**2 videos**. The signature background move is the hero backdrop fading into the
navy through scrim gradients — `linear-gradient(#14181c, rgba(20,24,28,.8) …,
transparent)` top-down and `linear-gradient(to right, transparent, #14181c)`.
Backdrop-blur `blur(4px)` / `blur(10px)` on overlays. No canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Build on a blue-black navy #14181c with an all-blue-tinted grey ladder.
- Use green (#00ac1c fill / #00e054 border / #00c030 text) as the working accent.
- Pair Graphik (UI/body) with a Tiempos serif for editorial headlines.
- Frame film posters with the blue-white inset ring + soft drop shadow.
- Keep the expo-out easing (cubic-bezier(0.19,1,0.22,1)) for fades and hovers.

### Don't
- Don't use pure black, warm grey, or a neutral (untinted) grey ladder.
- Don't spread blue or orange into the chrome — they are logo-only.
- Don't set the whole page in the serif; it is headline-only.
- Don't flatten posters — the inset ring + drop shadow is the house look.
- Don't drop below the dense poster-grid density into a spacious landing layout.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 350–510px | fine-grained phone tuning (many seams) |
| 544 / 560 / 580 / 600px | small-tablet nav + grid |
| 640 / 668 / 720 / 767px | tablet → desktop poster columns |

An unusually **dense device-targeted breakpoint ladder** (dozens of min/max
seams from 350px up, including fractional 639.98px), reflecting a mature social
product tuned to many handset widths. The site is **dark by default** — a single
theme, no light toggle observed. Poster grids reflow column counts across the
ladder.

## 11. Agent Prompt Guide

- Canvas `#14181c` · Text `#99aabb` · Muted `#667788` · Card `#2c3440` · Accent green `#00ac1c` (fill) / `#00e054` (border)
- Font: Graphik (UI/body, stand-in Inter) + Tiempos serif (headlines) · Body: 16px · Radius: 3–4px control / fluid 2–8px poster · Control height: 42px
- Focus: search field inverts to white bg #fff / text #223344 · Hover: CTA → #009d1a

<letterboxd_design_language>
Letterboxd is a dark, filmic film-social network on a blue-black navy canvas
(#14181c) where every grey is blue-tinted (a ladder of #aabbcc / #99aabb /
#667788 / #556677 over #2c3440 cards). Colour is rationed to the brand's
green/blue/orange dot triad: green does the work — #00ac1c CTA fill (hover
#009d1a), #00e054 active borders, #00c030 links/text — while blue #209cd4 and
orange #f07000 stay in the logo. Type is a two-voice editorial pairing:
GraphikWeb for all UI and body (16/400, uppercase 700 nav) against a Tiempos
serif for the hero headline (36/48, 700). The recurring unit is a film poster
framed with a blue-white inset ring (rgba(221,238,255,.25) 0 0 0 1px inset) and a
soft drop shadow; controls sit at 3-4px radii, posters at a fluid
clamp(2px,2.66%,8px), avatars at 100%. The primary green button carries an inset
white top highlight. Atmosphere is full-bleed film imagery faded into the navy
through scrim gradients, with backdrop-blur on overlays — no canvas, no grain.
Motion is expo-out cubic-bezier(0.19,1,0.22,1) at 0.333-0.5s. Feels: filmic,
dark, editorial, social. Avoid: pure black or warm/neutral greys, spreading blue
or orange into the chrome, setting body copy in the serif, or flattening posters.
</letterboxd_design_language>