# Sequel — Style Reference > private screening room, cream signature **Theme:** dark · **Source:** https://www.sequel.co · **Analyzed:** 2026-08-25 Sequel's design system is a private screening room: the interface disappears into pure black (#000000) so full-bleed, warm-graded film footage becomes the only decoration. Type does the branding work — VisueltPro at a single medium weight (500) carries almost every word, and a Bradford italic serif interrupts it mid-sentence ("Your *legacy*, made.") as an editorial signature. Text never uses chromatic color: hierarchy is built entirely from white at different opacities (100% → 90% → 75% → 60% → 40%). The one warm gesture is the cream pill button (#f5f5f0) — an off-white with a hint of paper that reads as luxury against the void. Panels are glass: near-transparent light washes (rgba(200,200,200,0.10)) with a hairline inner top highlight and a deep soft shadow, floating over the film like subtitles. Display type is enormous and tightly tracked (-5% at 57px+), while tiny all-caps labels (+5% tracking) mark sections like film slates. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas — the theater black everything floats on | | Ink | `#0d0d0d` | `--color-ink` | Slightly lifted full-bleed section backgrounds | | Charcoal | `#202020` | `--color-charcoal` | Solid card surfaces, video player chrome | | Glass | `rgba(200,200,200,0.10)` | `--color-glass` | Translucent panels and cards floating over imagery | | Glass Bright | `rgba(255,255,255,0.20)` | `--color-glass-bright` | Hover state for glass surfaces, ghost button fills | | Cream | `#f5f5f0` | `--color-cream` | Primary action pills, brand's single warm accent | | Paper | `#ffffff` | `--color-paper` | Primary headings and hero type at full strength | | Paper 90 | `rgba(255,255,255,0.90)` | `--color-paper-90` | Nav links, primary body copy | | Paper 75 | `rgba(255,255,255,0.75)` | `--color-paper-75` | Secondary body copy, supporting paragraphs | | Paper 60 | `rgba(255,255,255,0.60)` | `--color-paper-60` | Muted metadata, captions | | Paper 40 | `rgba(255,255,255,0.40)` | `--color-paper-40` | Disabled text, faint legal copy | | Black | `#000000` | `--color-on-cream` | Text on cream pills — max contrast inversion | ## Tokens — Typography **Primary:** VisueltPro (geometric grotesque) — weights 300, 400, 500. Fallback: `system-ui, sans-serif`. Used for everything: nav, headings, body, buttons, labels. **Accent:** Bradford (serif) — weight 500 *italic only*. Fallback: `Georgia, serif`. Used exclusively for emphasized words inline within VisueltPro headlines — never for full sentences, never roman. | Step | Size / Weight / Line | Tracking | Face | |------|---------------------|----------|------| | display-xl | 128px · 500 · 1.0 | -0.025em | Bradford italic (hero signature word) | | display | 57px · 500 · 1.0 | -0.05em | VisueltPro + Bradford italic inline | | heading | 32px · 500 · 1.0–1.2 | -0.03em (-0.05em italic) | VisueltPro / Bradford | | heading-sm | 30px · 300 · 1.2 | -0.025em | VisueltPro Light | | body-lg | 17.6px · 400 · 1.4 | 0 | VisueltPro | | body | 16px · 400 · 1.5 | 0 | VisueltPro | | body-ui | 16px · 500 · 1.5 | 0 | VisueltPro (nav, buttons) | | body-sm | 14px · 500 · 1.5 | 0 | VisueltPro | | caption | 12.8px · 400 · 1.4 | +0.03em | VisueltPro | | label | 11.2px · 500 · 1.5 | +0.05em | VisueltPro, ALL CAPS section slates | ## Tokens — Spacing & Shape | Purpose | Value | |---------|-------| | Density | Cinematic — one idea per viewport, sections breathe full-screen | | Base unit | 4px | | Section rhythm | Full-viewport (100vh) media sections; 120px+ between content blocks | | Card padding | 24–32px | | Element gap | 8–16px | | Button padding | 0 20–24px, fixed height pill | | Element | Radius | |---------|--------| | Buttons & chips | `9999px` (pill — the system's only button shape) | | Cards & panels | `10px` | | Avatars / dots | `50%` | **Shadows** - Panel: `0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08)` — depth plus a hairline top light that sells the glass - Soft: `0 4px 20px rgba(0,0,0,0.15)` — floating chips and small UI ## Guidelines - Use Bradford italic for at most one or two words inside a VisueltPro headline — it is punctuation, not a heading face - Build all text hierarchy with white opacity tiers (1 / 0.9 / 0.75 / 0.6 / 0.4) — never introduce a chromatic text color - Reserve the cream (#f5f5f0) fill for the single primary CTA per view; secondary actions are transparent pills with white text - Let photography and film stills supply all color and texture — UI surfaces stay black or translucent glass - Track display type tight: -0.05em at 57px+, -0.03em at 32px; loosen to +0.05em only on tiny all-caps labels - Keep glass panels at rgba(200,200,200,0.10) with the inset top highlight — they should read as projected subtitles, not solid cards - Cap UI weight at 500 — headlines and buttons share the same medium weight; lightness (300) is the display alternative, never boldness - Set stat numerals huge and light (54px · 300) inside cards separated by hairline vertical borders, each tagged with a tiny glass caps chip - Close the page by restating the hero signature at 128px over the footer — the brand line is the final frame of the film **Don't** - Do not use bold (600+) anywhere — the system's largest type is weight 500 - Do not set Bradford in roman or use it for body copy — italic accent words only - Do not use gradients, colored accents, or decorative borders — the film footage is the only color source - Do not use square or slightly-rounded buttons — every interactive pill is fully rounded (9999px) - Do not place content on mid-gray solid panels — surfaces are either near-black or translucent glass over imagery - Do not brighten the canvas above #0d0d0d — the theater stays dark; contrast comes from cream and white, not lighter backgrounds