Modern Dark (Cinema)
Also called: Cinematic dark UI, Streaming UI, Ambient dark
A dark theatre for content: full-bleed key art, colour that bleeds from imagery onto the page, film grain, subtle glass and tall poster type.
Design keywords
Say these words to ask for this style.
Modern Dark (Cinema) treats every screen like a streaming billboard. Large widescreen imagery carries the colour — teal-and-orange grading, glowing horizons — and that colour bleeds outward as soft ambient light onto the near-black page, like a TV in a dark room. Headlines are tall condensed capitals in the manner of film posters, metadata is set like a billing block, panels are barely-there smoked glass, and a fine film grain sits over everything. The UI stays quiet so the pictures can be loud.
Best for
- Streaming, film and music platforms
- Game launches and trailers
- Event, festival and premiere pages
- Photography and video portfolios
Avoid for
- Form-heavy admin tools
- Products with no strong imagery
- Bright, friendly family brands
✓ Do
- Let one big image per view own the colour; derive glows from it (blur 40–60px, 50–70% opacity)
- Set headlines in tall condensed capitals with tight leading (0.95–1.05, Latin only; Thai headings 1.3)
- Keep panels near-black smoked glass: rgba(255,255,255,.055) fill, 1px rgba(255,255,255,.11) edge, 14px blur, 10px radius
✕ Don't
- Don’t add saturated UI colour that competes with the imagery
- Don’t use flat pure #000 with no light — the room needs ambient glow
- Don’t use rounded, bubbly type or big radii
Not to be confused with
On mobile
Open on a full-width poster card with the title over the art; keep ambient glow to one blurred layer behind that card, use a solid black tab bar with a white active icon, and drop grain on low-end devices.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.