Light & surface · 2018–present
Spotlight
Dark backgrounds with a tight radial light source illuminating content — as if each element sits on a studio stage, everything else fading to black.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(6% 0.005 260) - --fg
oklch(92% 0.006 260) - --muted
oklch(55% 0.008 260) - --surface
oklch(10% 0.006 260) - --surface-2
oklch(14% 0.007 260) - --border
oklch(22% 0.007 260) - --accent
oklch(88% 0.004 260) - --accent-fg
oklch(10% 0.006 260) - --focus
oklch(80% 0.008 260)
| Token | Value |
|---|---|
| --font-body | 'Jost', ui-sans-serif, system-ui, sans-serif |
| --font-display | 'Cormorant Garamond', Georgia, serif |
| --font-mono | ui-monospace, monospace |
| --radius | 8px |
| --radius-sm | 5px |
| --shadow | 0 4px 16px oklch(0% 0 0 / 0.7) |
| --shadow-lg | 0 24px 64px oklch(0% 0 0 / 0.85) |
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500&family=Jost:wght@400;500;600&display=swap');
:root {
--bg: oklch(6% 0.005 260);
--fg: oklch(92% 0.006 260);
--muted: oklch(55% 0.008 260);
--surface: oklch(10% 0.006 260);
--surface-2: oklch(14% 0.007 260);
--border: oklch(22% 0.007 260);
--accent: oklch(88% 0.004 260);
--accent-fg: oklch(10% 0.006 260);
--focus: oklch(80% 0.008 260);
--font-body: 'Jost', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-mono: ui-monospace, monospace;
--radius: 8px;
--radius-sm: 5px;
--shadow: 0 4px 16px oklch(0% 0 0 / 0.7);
--shadow-lg: 0 24px 64px oklch(0% 0 0 / 0.85);
}Where it came from
Origin: Theatre stage lighting; product photography studio setups
Spotlight design translates theatrical and product photography lighting conventions to the screen. A dark vignette surrounds the lit subject, concentrating attention. It appeared in luxury product sites, game menus, and cinematic app onboarding, usually alongside a limited palette and strong drama. A cursor-following spotlight requires JavaScript; CSS can fake it convincingly with per-element :hover radial highlights and a fixed vignette.
How to spot it
- Very dark, near-black background with a radial vignette
- Tight radial gradient light source at the subject centre
- High contrast: bright illuminated subject against near-invisible surrounds
- Often monochrome or one accent colour — the light is the palette
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely focused attention — one thing at a time | Low information density — dark surrounding space is visually expensive |
| Premium, cinematic quality | A cursor-follow glow requires JS and has keyboard-accessibility challenges |
| Works powerfully for single-product hero moments | Hard to implement authentically in pure CSS at full fidelity |
In the wild
- Luxury product launch landing pages
- Game title screens and menu transitions
- Cinema and event booking flows
Use it when
Hero moments or landing pages where one thing deserves all the attention and drama is not just appropriate but required.