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 all the work (#00ac1c CTA fill hovering to #009d1a, #00e054 active borders, #00c030 links and text) while blue #209cd4 and orange #f07000 stay in the three-dot logo. Type is a two-voice editorial pairing that reads like a film magazine — GraphikWeb for all UI and body (16/400, small 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) plus a soft drop shadow; controls sit at 3-4px radii, posters at a fluid clamp(2px,2.66%,8px), avatars at 100%, and the 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 over an unusually dense device-targeted breakpoint ladder from 350px up; the site is dark by default with no light toggle, and focus is real (the search field inverts to white on focus).
⚠ needs-dashboard
Browse Letterboxd in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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:rootcolour 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.
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.
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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.