Light & surface · 2012–2017
Light Leak
Warm orange, yellow, and magenta flares bleeding across a surface — the accidental beautiful imperfection of old film.
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(20% 0.04 45) - --fg
oklch(94% 0.018 70) - --muted
oklch(68% 0.03 60) - --surface
oklch(26% 0.045 48) - --surface-2
oklch(32% 0.04 50) - --border
oklch(38% 0.04 50) - --accent
oklch(78% 0.19 55) - --accent-fg
oklch(18% 0.04 45) - --focus
oklch(78% 0.19 55)
| Token | Value |
|---|---|
| --font-body | 'DM Sans', system-ui, sans-serif |
| --font-display | 'DM Serif Display', Georgia, serif |
| --font-mono | ui-monospace, monospace |
| --radius | 8px |
| --radius-sm | 5px |
| --shadow | 0 3px 12px oklch(10% 0.03 40 / 0.6) |
| --shadow-lg | 0 20px 60px oklch(10% 0.03 40 / 0.75) |
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;700&display=swap');
:root {
--bg: oklch(20% 0.04 45);
--fg: oklch(94% 0.018 70);
--muted: oklch(68% 0.03 60);
--surface: oklch(26% 0.045 48);
--surface-2: oklch(32% 0.04 50);
--border: oklch(38% 0.04 50);
--accent: oklch(78% 0.19 55);
--accent-fg: oklch(18% 0.04 45);
--focus: oklch(78% 0.19 55);
--font-body: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Serif Display', Georgia, serif;
--font-mono: ui-monospace, monospace;
--radius: 8px;
--radius-sm: 5px;
--shadow: 0 3px 12px oklch(10% 0.03 40 / 0.6);
--shadow-lg: 0 20px 60px oklch(10% 0.03 40 / 0.75);
}Where it came from
Origin: Analog film photography — light entering a camera through gaps in the body
Light leaks occur when light enters a film camera through a loose back or housing gap, creating bright streaks across the frame. Film-emulation photo apps and filters popularised the effect digitally in the early 2010s. It became a signature move in lifestyle photography, music app design, and editorial sites, valued for the warmth and nostalgic imperfection it brings without requiring actual film.
How to spot it
- Warm radial gradient flares in orange, amber, yellow, or magenta
- Overlaid on photography or dark surfaces at partial opacity
- High luminance contrast between the flare and the surrounding area
- Often combined with grain or vignette to complete a full analog film look
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Warm, evocative, and distinctive at a glance | Can overpower text or content beneath the flare |
| Works beautifully on photography-forward layouts | Feels tied to the early-2010s Instagram and VSCO era |
| Nostalgic without being tied to a specific decade | Warm colours over light surfaces fail contrast requirements |
In the wild
- Music artist sites with a film photography aesthetic
- Lifestyle brand editorial pages
- Analog photography app interfaces
Use it when
Photography, music, and lifestyle brands where the warm, imperfect film aesthetic fits the product story.