Letterboxd Design System Reference

Minimalist Design Language

Letterboxd Design System

Clean, precise, and content-forward — a flat design system with a single blue accent, system typography, and zero decorative effects.

3 Color tokens 5 Type styles 4 Spacing levels System fonts

Foundation

Color Tokens

Letterboxd's minimal palette: a single saturated blue accent for interactive elements, neutral grays for text and borders, and a white canvas.

Ink

#313131

Primary text · Headings · High contrast

Hairline

#D9D9D9

Borders · Dividers · Subtle separators

Brand Link

#0000EE

CTAs · Links · Interactive states

Canvas

#FFFFFF

Background · Surface · Primary ground

Typography

Type Scale

System fonts ensure consistent rendering and performance across all platforms. Fixed sizes, two weights (400 and 600), and consistent line heights throughout.

Primary System UI UI · Headings · Body · Buttons

Monospace Monospace Code · Token values · Technical text

Display Build what matters 40px · 600 · 1.25

Heading The quick brown fox 24px · 600 · 1.25

Body MD The quick brown fox jumps over the lazy dog 16px · 400 · 1.5

Body SM The quick brown fox jumps over the lazy dog 12px · 400 · 1.5

Code const brand = '#0000EE'; 12px · 400 · monospace

Layout

Spacing & Shapes

8px base unit with a focused scale of four values: 8px (xxs), 16px (xs), 32px (sm), and 128px (md). All components maintain sharp 0px corners.

Spacing Scale

8px xxs

16px xs

32px sm

128px md

Border Radius

None 0px

Focus 2px

Border Widths

Default 1px

Focus 2px

Surfaces

Color Surfaces

A flat design system with no elevation or shadow effects. Depth is expressed exclusively through color blocking and spatial separation.

Canvas #FFFFFF

Border #D9D9D9

Ink #313131

Brand Link #0000EE

Components

Component Library

Core interactive elements rendered at exact specifications — sharp corners, system typography, and minimal styling.

Links

Interactive navigation — Default, Hover, Active, Focus

Default link Hover state Active state

Default: #0000EE text · no decoration · 12px / 400. Hover: #003681. Active: 2px #4693FF outline with 2px border-radius.

Buttons

Interactive triggers — Primary and Secondary

.btn

Primary: #0000EE bg · #FFFFFF text · 0px radius · 12px / 400. Secondary: transparent bg · #D9D9D9 border · #313131 text. No shadows.

Text Input

Form control — Default and Focused states

input

Default: #FFFFFF bg · #D9D9D9 border · 0px radius · 32px height. Focus: #4693FF 2px border · 2px border-radius.

Card

Content container — flat surface with border

.card

Card Title

A minimal card with no shadow, sharp corners, and clean typography.

#FFFFFF bg · #D9D9D9 border · 0px radius · 16px padding. No shadow. Title: 16px/600. Body: 12px/400.

Badges

Status indicators — All use brand blue

.badge

Success Error Info

12px / 400 · 4/8px padding · 0px radius. All variants use brand blue (#0000EE) with white text.

Guidelines

Do's & Don'ts

Principles for consistent application of Letterboxd's minimal design language across all surfaces.

Do — Embrace

Use brand blue (#0000EE) exclusively for all interactive elements and CTAs
Maintain sharp 0px corners on every component and surface
Apply the system font stack for consistent cross-platform rendering
Adhere strictly to the spacing scale (8px, 16px, 32px, 128px)
Express depth through color contrast and spatial separation, never shadows

Don't — Avoid

Do not round any corners; the system is intentionally angular (0px only)
Do not introduce additional colors outside the defined palette
Do not use font weights other than 400 and 600
Do not apply box-shadows, gradients, or decorative effects
Do not create multi-column layouts; single-column is the design principle

Letterboxd

Preview

Remixes of Letterboxd