---
title: "Letterboxd design system"
variant: extended
source: https://letterboxd.com/
captured_at: 2026-10-12
theme: dark
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/letterboxd-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Letterboxd · Design System

> A dark, cinematic home for film discovery and conversation.

**Theme:** dark · **Industry:** entertainment · **Source:** https://letterboxd.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Letterboxd pairs a near-black canvas with film imagery, crisp editorial headlines, and compact community feeds. Bright green calls to action stand out against restrained blue-gray interface surfaces and text.

## North star

Let film imagery and editorial content carry the page, using a quiet charcoal interface and reserving vivid green for meaningful actions.

## Overview

The page is grounded in a near-black charcoal canvas (#14181c), letting film artwork supply most of the color and atmosphere. White serif hero copy creates an editorial focal point, while Graphik sans-serif handles navigation, labels, metadata, and dense feed content. Muted blue-gray text keeps secondary information legible without competing with posters and stills. Saturated green is reserved for the primary signup action and a small progress badge; blue-gray panels group feature explanations, reviews, and stories. The hero combines a cinematic, edge-faded image with centered messaging, followed by poster rows, compact feature tiles, review and recommendation columns, and a multi-column story feed. Content remains relatively narrow and information-rich, with regular section gaps rather than expansive whitespace. Cards rely chiefly on imagery and tonal surface separation, using restrained radii and occasional subtle shadows instead of prominent borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cinema Charcoal | `#14181c` | `--color-cinema-charcoal` | brand | Dominant page canvas and image-fade endpoint; keeps the long homepage cohesive and cinematic. |
| Slate Mist | `#99aabb` | `--color-slate-mist` | neutral | Primary muted text for navigation, descriptions, and supporting content. |
| Deep Slate | `#202830` | `--color-deep-slate` | surface | Card surface behind editorial story and feed content. |
| Screen White | `#ffffff` | `--color-screen-white` | neutral | High-contrast headings, signup-button text, and key interface labels. |
| Electric Green | `#00e054` | `--color-electric-green` | semantic | Measured green border accent; appears on select highlighted content treatments. |
| Harbor Blue | `#445566` | `--color-harbor-blue` | surface | Blue-gray feature panels and supporting text-link blocks. |
| Frosted Blue | `#ddeeff` | `--color-frosted-blue` | neutral | Pale secondary link and body text, including subtle inset link treatment. |
| Night Steel | `#2c3440` | `--color-night-steel` | surface | Footer background and occasional secondary interface surface. |
| Metadata Blue | `#667788` | `--color-metadata-blue` | neutral | Low-emphasis metadata and film-title link color in dense content. |
| Signup Green | `#00ac1c` | `--color-signup-green` | accent | Primary signup button background; a rare, high-attention action color. |
| Progress Green | `#00c030` | `--color-progress-green` | semantic | Small uppercase in-progress badge, not a general page surface color. |
| Pale Steel | `#aabbcc` | `--color-pale-steel` | neutral | Occasional lighter body and heading text within secondary interface content. |

### Semantic aliases

`--color-canvas` → `#14181c` (Cinema Charcoal) · `--color-surface` → `#202830` (Deep Slate) · `--color-surface-2` → `#2c3440` (Night Steel) · `--color-surface-3` → `#445566` (Harbor Blue) · `--color-text` → `#ffffff` (Screen White) · `--color-text-muted` → `#99aabb` (Slate Mist) · `--color-text-subtle` → `#ddeeff` (Frosted Blue) · `--color-border` → `#00e054` (Electric Green) · `--color-accent` → `#00ac1c` (Signup Green) · `--color-on-accent` → `#ffffff` (Screen White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#14181c` | 17.84:1 | AAA |
| `#ffffff` | `#202830` | 14.92:1 | AAA |
| `#ffffff` | `#2c3440` | 12.56:1 | AAA |
| `#ffffff` | `#445566` | 7.67:1 | AAA |
| `#99aabb` | `#14181c` | 7.49:1 | AAA |
| `#99aabb` | `#202830` | 6.27:1 | AA |
| `#99aabb` | `#2c3440` | 5.28:1 | AA |
| `#99aabb` | `#445566` | 3.22:1 | AA-large |
| `#ddeeff` | `#14181c` | 15.08:1 | AAA |
| `#ddeeff` | `#202830` | 12.61:1 | AAA |

### Gradients

- `linear-gradient(rgb(20, 24, 28) 0%, rgba(20, 24, 28, 0.945) 16.56%, rgba(20, 24, 28, 0.8) 30.85%, rgba(20, 24, 28, 0.608) 43.77%, rgba(20, 24, 28, 0.392) 56.23%, rgba(20, 24, 28, 0.2) 69.15%, rgba(20, 24, 28, 0.055) 83.4`
- `linear-gradient(90deg, rgba(20, 24, 28, 0) 0%, rgb(20, 24, 28) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GraphikWeb | `--font-body` | webfont | 400, 700, 300 | Navigation, body copy, labels, links, feature panels, and most interface text. | Inter |
| TiemposTextWeb | `--font-tiempostextweb` | webfont | 400, 700 | Editorial subheadings and selected prominent story titles. | Source Serif 4 |
| TiemposHeadlineWeb | `--font-display` | webfont | 700 | Large centered hero headline. | Source Serif 4 |

- **GraphikWeb:** Compact sans-serif workhorse; use bold uppercase for navigation and eyebrow labels, with modestly tracked uppercase links.
- **TiemposTextWeb:** Serif display character adds editorial contrast; use bold weights selectively for film and story headlines.
- **TiemposHeadlineWeb:** Bold serif headline with natural casing and no added tracking; preserve its strong contrast against the dark canvas.

### Type scale — Major Third (ratio ≈ 1.29, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1.33 | 0 | — | TiemposHeadlineWeb | Centered, prominent hero statement in bold editorial serif. |
| h2 | 26px | 300 | 1.23 | 0 | — | GraphikWeb | Light sans-serif section headings introducing major homepage content. |
| h3 | 24px | 400 | 1 | 0 | — | GraphikWeb | Compact sans-serif headings for cards and grouped content. |
| h4 | 22px | 700 | 1.2 | 0 | — | TiemposTextWeb | Bold serif titles for editorial story blocks. |
| body | 13px | 400 | 1.5 | 0 | — | GraphikWeb | Compact descriptions, reviews, and explanatory copy. |
| caption | 12px | 400 | 1.5 | 0 | — | GraphikWeb | Film metadata, bylines, and quiet supporting details. |
| nav | 15px | 700 | 1.5 | 0 | — | GraphikWeb | Bold sans-serif primary navigation labels. |
| link | 12px | 700 | 1 | 0.083em | uppercase | GraphikWeb | Small bold uppercase calls to action and section links. |
| eyebrow | 12px | 700 | 1 | 0.083em | uppercase | GraphikWeb | Tracked uppercase labels above content groups. |

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 1, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 15, 16, 18, 20, 24 px.
- Section rhythm 32px · element gap 7px · card padding — · max content width 950px.

A centered desktop composition uses a measured page maximum width of 950px within a full-width charcoal canvas. The opening hero aligns its headline and action centrally beneath cinematic artwork; below it, poster strips and feature tiles introduce the service. Dense content transitions into a two-column review and recommendation area, then multi-column editorial cards and horizontal film/news rows. The main content uses a measured 12-column structure with compact spacing, while section separation is clearer than card-internal whitespace. The footer breaks into a single full-width dark band.

## Shape & elevation

- Radius: button `4px` · input `9999px` · card `3px` · media `0px` · badge `2px` · link `0px` · xs `2px` · sm `3px` · md `4px` · lg `0px` · pill `9999px`
- Shadow `inset` (link, other): `rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset`
- Shadow `md` (other, card): `rgba(0, 0, 0, 0.25) 0px 1px 5px 0px, rgba(0, 0, 0, 0.35) 0px 1px 10px 0px`
- Shadow `inset-2` (other): `rgba(20, 24, 28, 0.125) 0px 0px 1px 1px inset`
- Shadow `sm` (other): `rgb(0, 0, 0) 2px 0px 7px 0px`
- Shadow `inset-3` (link, button): `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
- Shadow `inset-4` (button): `color(srgb 1 1 1 / 0.1) 0px 1px 0px 0px inset, color(srgb 0 0 0 / 0.25) 0px 1px 2px 0px`
- Motion: standard transition `0.5s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The design is mostly flat: charcoal canvas and blue-gray card surfaces define hierarchy more than elevation. Cards have subtle measured corner rounding, with occasional restrained dark shadows. Thin inset highlights appear on select links and buttons; avoid adding persistent outlines or dramatic layered shadows across every card.

## Imagery

Film posters, stills, and editorial thumbnails are the page’s defining imagery, arranged in tightly aligned rows and card grids. The hero uses a wide cinematic frame with darkened edges and a warm sunset image; its color belongs to the featured artwork, not the interface palette. Later sections mix poster art, still photography, and some video-thumbnail treatments. Keep images crisp, edge-to-edge, and visually dominant.

## Components

### Hero signup

Center a bold white serif message under a cinematic image and pair it with the bright green signup action; keep supporting copy subdued.

### Film poster strip

Show a compact, horizontally aligned run of edge-to-edge portrait posters so the artwork itself supplies color and browsing context.

### Feature tiles

Group short benefit copy in blue-gray panels with simple icons and muted text, using a dense multi-column arrangement.

### Review feed

Present reviews in a compact column with film art, reviewer details, rating cues, and restrained metadata.

### Editorial story cards

Use image-led cards on dark slate surfaces, with serif story titles, concise summaries, and small uppercase read links.

### Footer band

Finish with a blue-gray footer surface, small muted navigation links, and subdued legal or attribution text.

### Measured component styles

- **Primary button** (“Get started — it‘s free!”): background #00ac1c · text #ffffff · radius 4px · padding 0px 24px · 700 18px GraphikWeb · shadow rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset
- **Secondary button** (“Browse shelves”): background #556677 · text #c8d4e0 · radius 12px · padding 5.5px 12px · 700 13px GraphikWeb · shadow color(srgb 1 1 1 / 0.1) 0px 1px 0px 0px inset, color(srgb 0 0 0 / 0.25) 0px 1px 
- **Link** (“Wildwood (2026)”): transparent background · text #667788 · radius clamp(2px, 2.66667%, 8px) clamp(2px, 1.77778%, 8px) · padding 0px · 400 16px GraphikWeb · shadow rgba(221, 238, 255, 0.25) 0px 0px 0px 1px inset
- **Input**: background #4f5255 · text #556677 · radius 15px · padding 6px 30px 6px 10px · 400 12px GraphikWeb
- **Card** (“AFI Your Guide to AFI Alumni Films at AF”): background #202830 · text #99aabb · radius 3px · padding 0px · 400 16px GraphikWeb
- **Badge** (“IN PROGRESS”): background #00c030 · text #ffffff · radius 2px · padding 3px 4px 2px 4px · 400 10px GraphikWeb · uppercase · shadow rgba(20, 24, 28, 0.35) 0px 1px 1px 0px
- **Navigation item** (“About”): transparent background · text #99aabb · radius 0px · padding 0px · 700 15px GraphikWeb

## Do

- Use #14181c as the dominant page canvas.
- Reserve #00ac1c for the main action.
- Let film artwork provide most warm and varied color.
- Use Graphik-style sans-serif for dense interface content.
- Use bold serif headlines for editorial emphasis.
- Group content with restrained blue-gray surfaces.
- Keep feeds and poster rows compact and image-led.

## Don't

- Do not turn featured artwork colors into interface brand colors.
- Do not use green as a large decorative background.
- Do not make every card heavily bordered or shadowed.
- Do not replace the compact feed with oversized airy cards.
- Do not use serif typography for all interface labels.
- Do not let metadata compete with headlines and posters.

## Agent prompt

Build a new Letterboxd-style page on a dominant Cinema Charcoal (#14181c) canvas. Treat film posters, stills, and editorial thumbnails as the primary source of visual color; keep interface surfaces restrained with Deep Slate (#202830), Harbor Blue (#445566), and Night Steel (#2c3440). Use white (#ffffff) serif display headlines against compact Graphik-like sans-serif navigation, metadata, and body copy in Slate Mist (#99aabb) or Metadata Blue (#667788). Center the hero message and use a single Signup Green (#00ac1c) primary action; Progress Green (#00c030) belongs only on small status badges. Organize the rest as dense poster strips, feature tiles, review and recommendation columns, and image-led editorial cards. Favor flat tonal grouping, subtle radii, minimal shadows, and clear section rhythm over spacious marketing layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered cinematic hero flows into poster rows, feature tiles, review feeds, recommendations, and a multi-column editorial story grid. | prominent signup action, film discovery, review and follow feed | edge-faded hero image, serif headline, poster strips, compact dark cards |
| 2 | footer | A single full-width blue-gray band contains a compact line of navigation links and subdued attribution text. | secondary site navigation, legal and attribution links | dark footer band, small muted links, social icons |

## Source CSS custom properties (selected)

```css
--theme-brand-mono-primary-color: #fff;
--theme-brand-orange-content-color: #ff8000;
--theme-brand-orange-surface-color: #ee7000;
--theme-brand-blue-content-color: #40bcf4;
--theme-brand-blue-surface-color: #209ce4;
--theme-heading-content-color: #fff;
--theme-heading-hover-content-color: #40bcf4;
--theme-heading-active-content-color: #209ce4;
--theme-body-link-content-color: #def;
--theme-body-link-hover-content-color: #40bcf4;
--theme-body-link-active-content-color: #209ce4;
--theme-interactable-content-color: #def;
--theme-interactable-hover-content-color: #fff;
--theme-interactable-active-content-color: #cde;
--theme-body-high-contrast-content-color: #abc;
--theme-body-high-contrast-hover-content-color: #bcd;
--theme-body-high-contrast-active-content-color: #9ab;
--theme-body-content-color: #9ab;
--theme-body-low-contrast-content-color: #89a;
--theme-metadata-high-contrast-content-color: #789;
--theme-metadata-high-contrast-hover-content-color: #abc;
--theme-metadata-high-contrast-active-content-color: #678;
--theme-metadata-content-color: #678;
--theme-metadata-hover-content-color: #9ab;
--theme-metadata-active-content-color: #567;
--theme-metadata-low-contrast-content-color: #567;
--theme-metadata-low-contrast-hover-content-color: #89a;
--theme-metadata-low-contrast-active-content-color: #456;
--theme-destructive-content-color: #d94c00;
--theme-destructive-hover-content-color: #f55c0a;
--theme-destructive-active-content-color: #d94c00;
--theme-fill-color: #456;
--theme-fill-hover-color: #789;
--theme-fill-active-color: #345;
--theme-separator-color: #456;
--theme-separator-secondary-color: #283038;
--theme-separator-reversed-color: #bcd;
--theme-surface-color: #283038;
--theme-surface-hover-color: #384450;
--theme-focus-color: #209ce4e6;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/letterboxd-com