Letterboxd Design System Deep Dive

1. Brand Overview

Letterboxd is the internet’s cinephile diary. A social network for tracking films you’ve watched, want to watch, and want to shout about. The brand isn’t screaming flashy “Hollywood red-carpet.” It’s understated. Dark, cool, restrained. Exactly what you’d expect from a platform for people who take movies seriously but want to have fun doing it.

The vibe? Think polished screening room rather than popcorn lobby. The design language leans on cool greys, desaturated blues, and occasional electric greens and blues as accents. The glow is subtle—there are shadows, but they’re functional, not ornamental. They use strong typography contrasts—GraphikWeb for crisp UI clarity, Tiempos for personality in headlines.

No bombastic gradients or heavy textures. You’re browsing lists, reviews, ratings—this content is the hero. The design system builds the frame without stealing focus. They’ve nailed that balance between being visually distinctive and letting film stills/posters do the colorful heavy lifting.

From a structural point of view, everything sits on a tight grid. Spacing is controlled (8px base scale, but they sneak in non-integers where needed—more on that later). Corner radiuses are small-to-medium; no overblown pill shapes except when it’s intentional (like 9999px for certain pill buttons or avatars).

If you’re designing for this brand, you have to love restraint. Colors are rationed. Motion is minimal. Interaction cues come from color tweaks and slight shadow changes. There’s purpose in every pixel. This is a design system for a brand whose audience is diverse—hardcore critics, casual movie-watchers, festival-goers—and they’ve found a visual middle ground that respects all of them.

2. Color System

2.1 Primary Colors

The main semantic colors are:

• Primary: rgb(255, 255, 255) — pure white. Not common to call white “primary,” but here it makes sense: the interface leans heavily on white for text and prominent elements against the dark background.
• Secondary: rgb(0, 172, 28) — saturated green. This is the Letterboxd “go” signal: account creation CTAs, secondary actions, positive messages.

They also have a hot accent rgb(0, 224, 84) (#00e054) used for password reset links—a brighter, more electric variant of the secondary green.

Blue makes an appearance in interactions (#40bcf4 hover/focus links) and in buttons (rgb(32, 156, 228) active/hover background). These accents energize the otherwise cool-neutral palette. Green for affirmation/engagement, blue for interactivity.

This works because the rest of the palette is muted—greys ranging from #223344 to #ddeeff—so these saturated pops stand out hard without feeling alien.

2.2 Complete Palette

2.3 Color Relationships

Neutrals dominate. Accessibility-wise, white (#ffffff) over #223344 is solid contrast (>WCAG AA at all sizes). The electric accent greens (#00ac1c and #00e054) against dark backgrounds have excellent legibility—but pairing them with lighter greys could get borderline. The brand mostly uses saturated colors for interactive elements, and ensures they sit on dark or white backgrounds.

Dark mode? The whole UI essentially is dark mode. Backgrounds in deep cool greys and navy hold white text. There's no separate light theme visible—the system is designed for this dark aesthetic.

2.4 Usage Guide

• Use greens (#00ac1c, #00e054) for affirmative CTAs and success states. Never for passive text.
• Use blues (#40bcf4, #209CE4 in vars) for interaction highlights—hover link colors, active states.
• Keep neutral greys for structural UI: dividers, labels, non-critical text.
• Avoid pairing light greys like #aabbcc with electric blue—it can reduce legibility.
• White text is only for high-contrast situations—don’t drop white on pale backgrounds.

3. Typography

3.1 Font Families

Two families drive the system:

• TiemposHeadlineWeb and TiemposTextWeb — custom serif with high personality, fallback to Georgia, ColorEmoji. Used sparingly for headings and certain links.
• GraphikWeb — modern geometric sans-serif, fallback through platform UI fonts (-apple-system, system-ui, Segoe UI, Hiragino Sans, Meiryo, ColorEmoji). Used for most UI, links, captions.

No Google or Adobe Fonts—this is custom-licensed. No variable font usage.

Serif in headings = character. Sans in body/UI = clarity.

3.2 Type Scale

3.3 Hierarchy

Heads get big contrast—Tiempos serifs at 36px feel editorial and literary, perfect for a film diary. Graphik carries body and link text, keeping UI minimal and crisp. Uppercase and spacing tweaks are common for navigation and meta labels—those 13px uppercase Graphik variants make for a clean, functional nav.

The extreme range—from 36px down to 10px—allows heavy compression for tight UI, without gaps in legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px—but micro adjustments break that rule when needed.

4.2 Layout

Breakpoints are granular—over 60 listed, from 98px up to 1270px. They’ve clearly tuned for specific device widths and UI components. This is mobile-first with many micro-steps to avoid awkward wrapping.

5. Visual Elements

Border Radius

They love small radii. Common: 3px (111 counts) for buttons, inputs, modals. Variant: 4px for slightly softer, 2px for badges. Special: 15px pills, 20px for images, 9999px for full pills. Clamp() usage for fluid radii in certain images.

Shadow System

Shadows are subtle: mostly small insets for delineation (rgba(221, 238, 255, 0.25) inset border) or small drop-shadows for depth. They don’t do heavy blur backgrounds—no Material-style z-depth stacks.

Borders

Thin 1px solids in neutral greys or accent greens. Dividers use 0px 0px 1px styles—often solid—but color is drawn from palette neutrals.

6. Components

6.1 Buttons

One example button (create-account-link):

• Default: bg #00ac1c green, white text, padding 0px 24px, radius 4px, no border, inset gloss shadow.
• Hover: bg #209ce4 (blue), white text, border 1px solid #778899, inset shadow.
• Active: Same as hover.
• Focus: bg white, color from --reset-interaction-icon-tint, box-shadow dark outline.

Opinion: The hover transform listed (translate(-50%, -50%) rotate(-135deg)) is likely for an icon, not the whole button.

6.2 Links

Eight variants—colors from greys (#667788), light blues (#ddeeff), greens, white. Hover state almost always flips to white. No underlines; text-decoration is none or transparent underline (hack to maintain placement).

6.3 Forms

Text input defaults: semi-transparent white bg, grey text/border, 15px radius, padding 6px 30px 6px 10px. Focus flips bg to white, adds dark glow.

No checkbox/radio/select data here.

7. Design Tokens

:root {
  /* Colors */
  --color-grey-logo: #667788;
  --color-grey-light: #aabbcc;
  --color-white: #ffffff;
  --color-dark-navy: #223344;
  --color-grey-button: #556677;
  --color-light-blue-tint: #ddeeff;
  --color-grey-medium: #778899;
  --color-blue-grey: #ccddee;
  --color-black-almost: #12161a;
  --color-grey-steel: #8899aa;
  --color-charcoal-blue: #445566;
  --color-pale-mint: #f4fcf0;
  --color-light-blue-grey: #bbccdd;
  --color-green-electric: #00e054;
  --color-blue-grey-soft: #c8d4e0;
  --color-blue-accent: #40bcf4;

  /* Typography - families */
  --font-tiempos-headline: "TiemposHeadlineWeb", Georgia, ColorEmoji;
  --font-tiempos-text: "TiemposTextWeb", Georgia, ColorEmoji;
  --font-graphik: "GraphikWeb", -apple-system, system-ui, Segoe UI, Hiragino Sans, Meiryo, ColorEmoji;

  /* Spacing */
  --space-0_625: 0.625px;
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-19_5: 19.5px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-166_859: 166.859px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-inset-blue: rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset;
  --shadow-soft-drop: rgba(0, 0, 0, 0.25) 0px 1px 5px 0px, rgba(0, 0, 0, 0.35) 0px 1px 10px 0px;
}

8. AI Coding Assistant Prompt

# Letterboxd Design System Specification

You are a Letterboxd design expert. Build UIs matching their visual language exactly.

## Brand Context
Letterboxd’s design is restrained, cool, and dark-themed. Neutrals dominate, with electric green and accented blues as interactive pops. Typography blends editorial serifs for personality with clean geometric sans for readability.

## Color Palette
- Grey Logo: #667788 — main link/UI neutral
- Grey Light: #aabbcc — body text and modal headers
- White: #ffffff — primary text, CTAs
- Dark Navy: #223344 — deep background sections
- Button Grey: #556677 — neutral button base
- Light Blue Tint: #ddeeff — subtle accents for links/modals
- Grey Medium: #778899 — UI neutral for buttons
- Blue Grey: #ccddee — background neutral
- Almost Black: #12161a — main background
- Grey Steel: #8899aa — muted text
- Charcoal Blue: #445566 — dark neutral
- Pale Mint: #f4fcf0 — success background for buttons
- Light Blue Grey: #bbccdd — neutral
- Electric Green: #00e054 — success links
- Blue Grey Soft: #c8d4e0 — neutral in buttons
- Electric Sky Blue: #40bcf4 — hover/focus accents

## Typography
Font families:
- Headings (serif): "TiemposHeadlineWeb", Georgia, ColorEmoji
- UI/body (sans): "GraphikWeb", -apple-system, system-ui, Segoe UI, Hiragino Sans, Meiryo, ColorEmoji

Type sizes/weights/line heights:
| Level | Font | Size | Weight | Line Height | Use |
| H1 Hero | TiemposHeadlineWeb | 36px | 700 | 1.33 | Main hero titles |
| Subhead | GraphikWeb | 26px | 300 | 1.23 | Secondary headings |
| Body Head | GraphikWeb | 17px | 400 | 1.53 | Section subheads |
| Nav Link | GraphikWeb | 15px | 700 | 1.20 | Small nav |
| Caption | GraphikWeb | 13px | 400 | 1.50 | Meta info |
[...]

## Spacing & Grid
Base: 8px grid with irregulars. Use values: 2px, 4px, 5px, 8px, 10px, 15px, 16px, 20px, 24px, 32px.

## Border Radius
none: 0 — dividers  
sm: 2px — badges  
md: 3px — inputs/buttons/modals  
lg: 4px — soft cards  
pill: 15px — text inputs  
full: 9999px — avatars, full pills  
image: 20px — images

## Shadows & Depth
Use subtle insets and small drop shadows for depth. Example: `rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset`.

## Components

### Primary Button
```css
.btn-primary {
  background: #00ac1c;
  color: #ffffff;
  padding: 0px 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 18px;
  border: none;
  box-shadow: rgba(255,255,255,0.1) 0px 1px 0px 0px inset;
}
.btn-primary:hover {
  background: #209ce4;
  border: 1px solid #778899;
}
.btn-primary:focus {
  background: #ffffff;
  box-shadow: rgb(0, 17, 34) 0px 0px 5px;
}
```

### Input Field
```css
.input {
  background: rgba(255,255,255,0.25);
  color: #556677;
  border-radius: 15px;
  padding: 6px 30px 6px 10px;
  border: none;
}
.input:focus {
  background: #ffffff;
  box-shadow: rgb(0, 17, 34) 0px 0px 5px;
}
```

### Link
```css
a.nav-link {
  color: #667788;
  text-decoration: none;
}
a.nav-link:hover {
  color: #ffffff;
}
```

## Layout & Responsive Rules
Use breakpoints from 98px up to 1270px. Mobile-first adjustments at 375px, 480px, 768px, 1024px widths.

## Interaction Rules
- Transitions: ~150ms ease for color/outline changes
- Hover: color shift to white
- Focus: dark glow outline
- Active: same as hover for buttons

## DO
- Stick to palette colors
- Maintain 8px grid where possible
- Use Tiempos for headings, Graphik for body
- Keep corner radii small/consistent

## DON'T
- Introduce unapproved colors
- Overuse shadows
- Mix large round corners with small radius elements without intent
- Add heavy transitions

## Code Examples

Primary Button in Tailwind:
```html
<button class="bg-[#00ac1c] text-[#ffffff] px-6 py-2 rounded-md font-bold text-lg hover:bg-[#209ce4]">
  Create Account
</button>
```

Input Field:
```html
<input type="text" class="bg-white/25 text-[#556677] rounded-[15px] px-2 py-1 focus:bg-white focus:shadow-[0_0_5px_rgb(0,17,34)]">
```

9. Summary

TL;DR — Letterboxd's design system is a dark, restrained frame for colorful film content. Cool greys dominate; electric greens and blues spark interactivity. Typography mixes editorial serifs and geometric sans for a voice that’s equal parts personality and clarity. Spacing is precise with an 8px logic plus occasional deviations for fit.

Brand Keywords:

• dark-editorial
• cinephile-minimal
• cool-neutral
• pop-accent
• restrained-contrast