What is Letterboxd's primary brand color and how is it used?

Letterboxd Green is a four-step ladder rather than one hex. '#00e054' (the vivid green) appears 24 times as a border tint on the poster-overlay focus state and on the rating-icon glyph fill. '#00ac1c' is the resting fill of the 'Get started — it's free!' primary CTA pill. '#00c030' is the CTA hover surface (also the rating-icon stroke color at 13 occurrences). '#009926' is the pressed/active state. The chrome reserves these greens exclusively for brand identity and rating semantics — body links resolve to a separate blue ladder ('#ddeeff' rest, '#40bcf4' hover, '#209ce4' active) so green never collides with hypertext.

Does Letterboxd's design system have a light mode?

No — the public homepage is dark-only. The base canvas is '#14181c' (extracted as '--theme-background-color') with poster wells one stop deeper at '#12161a' and the panel-low-contrast surface at '#556677'. The achromatic ramp is a six-step ladder of cool-blue grays ('#99aabb' / '#8899aa' / '#778899' / '#667788' / '#556677' / '#445566'), all sharing a hue around 248° in OKLCH — every gray on the page is the same blue-tinted neutral at a different lightness. Inverting to light would dismantle the cinema-dark identity that lets poster artwork carry the page.

What typefaces does Letterboxd use, and what if they're unavailable?

Three families ship in the system. TiemposHeadlineWeb (a serif by Klim Type Foundry) carries the hero at '36px' / weight '700' / '48px' line-height. TiemposTextWeb (the body serif from the same family) renders member-review prose at '15px' / weight '400' / '25px' line-height. GraphikWeb (a sans by Commercial Type) covers every piece of chrome — nav at '13px' / weight '700' / '1px' tracking uppercase, CTAs at '18px' / weight '700', metadata at '12px' / weight '400'. A PitchSansWeb monospace ('Menlo, Droid Sans Mono' fallback) is declared for code but unused on the homepage. If Tiempos is unavailable, Georgia is the licensed fallback already in the stack; Source Serif 4 is the closest open substitute. If GraphikWeb is unavailable, Inter at the same weights preserves the chrome voice.

Why does Letterboxd mix '15px' pill inputs with '4px' button rounding?

The radii are scoped by component family rather than a single rounded language. The global search input at the top of the page renders as a '15px' pill (input is '30px' tall, so '15px' equals full-pill). The primary CTA pill carries a softer '4px' radius. Interactive controls sit at '3px' ('--control-legacy-border-radius'), poster meta tags at '2px', avatars at '100%', and content panels at '0.5rem' / '8px' ('--panel-border-radius-default'). The mix reads intentionally: pills are for search and freeform input, gentle rounded rectangles are for action and surface, and circles are reserved for avatars and play-button glyphs. There is no full-pill button anywhere in the chrome.

Why are all the grays the same blue?

Every neutral on the page sits at hue 248° in OKLCH — a cool blue tint applied to a six-step lightness ladder: '#99aabb' (body text, 780 occurrences), '#8899aa', '#778899', '#667788' (metadata, 660), '#556677', '#445566' (low-contrast panel, 6). Letterboxd never uses a true neutral gray; the whole achromatic ramp shifts toward blue to harmonize with cinema-poster artwork (which tends to lean warm) and with the green-and-blue brand voltage. The result is that the chrome feels like a single cool atmosphere rather than a stack of independent grays.

Can I use this DESIGN.md to build a React film, journal, or social-diary app?

Yes — the file is structured for AI ingestion. Feed it to Claude, Cursor, or any agent that reads structured tokens and it will reproduce the three-green ladder, serif-display / sans-chrome split, uppercase nav voice, and '3px' control geometry rather than defaulting to a generic shadcn theme. You can also reference tokens directly: every color, font-stack, radius, and component recipe is a quoted value ready for Tailwind config, CSS variables, or a component library. The 19 component recipes cover the homepage surface area — green CTA, search-pill input, dark poster card with green focus outline, member-review row, journal/news card, uppercase nav strip, and the cool-blue gray ladder for text and dividers.

What's missing from this DESIGN.md spec?

Several items documented in the Known Gaps section: the five-star rating widget's interaction states (hover, half-star, locked); the heart 'like' button (orange '#ff9933') and watch-list bookmark glyphs in their active states; the activity-feed item types beyond the homepage member-review row; the profile-and-friends pages, which use a denser two-column layout not visible on the marketing homepage; motion timings beyond the two captured easings ('cubic-bezier(.19, 1, .22, 1)' ease-out-expo and 'cubic-bezier(.175, .885, .32, 1.275)' ease-out-back); the mobile bottom-rail navigation ('50px' tall) which lives in a separate component shell; and the destructive-action red ladder ('#ec1200' hover / '#c40f00' pressed) which exists in CSS variables but never renders on the public homepage.

Letterboxd Design System

Letterboxd's design system as a DESIGN.md file.

About Letterboxd DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source letterboxd.com

Social & Community
Music, Video & Streaming

Letterboxd's homepage is a film-diary built on a near-black canvas: the page background renders at "#14181c" and individual poster wells drop one stop further to "#12161a" so the only object on screen carrying real chroma is the theatrical poster artwork itself. Letterboxd Green is a three-step ladder rather than a single hex — "#00e054" tags the rating dots and the green outline that appears on the focused-poster overlay, "#00ac1c" fills the resting "Get started — it's free!" CTA pill, "#00c030" is the hover state, and "#009926" the pressed state. Where a streaming competitor would crowd the homepage with feature shelves, Letterboxd treats the page as a horizontal stack of poster rails, member-review cards, and a journal/news strip — the chrome itself recedes so the social diary becomes the foreground.

This page packages the Letterboxd homepage chrome into a single DESIGN.md file built on the Google Labs spec. Inside: 22 color tokens grouped into brand-green, link-blue, semantic, surface, ink, and hairline roles; 11 typography levels covering three font families (TiemposHeadlineWeb display serif, TiemposTextWeb review serif, GraphikWeb chrome sans, with PitchSansWeb monospace held in reserve); 6 corner radii anchored on the "3px" control radius and the "0.5rem" panel default; an 8-step spacing scale built around the "10px" / "15px" core measurements; and 19 component recipes covering the green CTA pill, the rounded search input, dark poster cards with green focus outlines, member-review rows with serif body, the uppercase nav strip, and the journal/news card grid.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes social-diary components that match Letterboxd's voice — three-green ladder on charcoal, serif-display over sans-chrome, uppercase nav, "3px" controls — rather than a generic dark dashboard theme. Or reference the tokens directly: every hex, font-stack, radius, and component recipe is a quoted DESIGN.md value ready for Tailwind config, CSS variables, or your own library. The system is worth studying for its three-typeface discipline — a display serif, a chrome sans, and a body serif each scoped to one job — and for the way a single accent color subdivides into a four-step interaction ladder rather than collapsing into one flat brand token.

What makes it distinct

Near-black film canvasbase '#14181c' with even deeper '#12161a' poster wells so theatrical artwork carries all chroma
Three-green ladder'#00e054' for rating dots and poster outlines, '#00ac1c' for the resting CTA fill, '#00c030' on hover, '#009926' on press
Serif-display, sans-chrome, serif-bodyTiemposHeadlineWeb for hero ('36px' / weight '700'), GraphikWeb for nav and CTAs, TiemposTextWeb for member reviews
Uppercase nav voice'11–13px' GraphikWeb at weight '700' with '1px' (8% em) letter-spacing distinguishes top-bar links from running content
Pill-and-radius mix'15px' search-input pill against '4px' button rounding, '3px' control radius, and a flat '0.5rem' panel corner; no full-pill geometry
Link blue, not greenbody links resolve to '#ddeeff' at rest, hover to '#40bcf4', active to '#209ce4', preserving green as a brand-and-rating signal

Live at letterboxd.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

letterboxd.com

Explore Letterboxd

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Letterboxd design system FAQ

Common questions about Letterboxd's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Letterboxd — official site

The social film-diary platform this DESIGN.md was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Letterboxd in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→