Contemporary screen interpretation
Tenebrism
A dramatic lighting approach in which concentrated illumination emerges from extensive darkness. It is more specific than a dark theme or ordinary high-contrast text.
What defines it
- Dominant shadow
- Concentrated light
- Dramatic subject
What it asks of the project
- Reading & layout
- Open spacing for a slower reading pace
- Visual emphasis
- bold · atmospheric
- Implementation
- Allow time for a coherent decorative or image layer and responsive checks.
- Images & assets
- A strongly lit subject image is essential to a full treatment.
Color in use
A portrait gallery with one illuminated subject and unobtrusive but visible metadata.
Accent labelOpaque text/surface: 18.52:1 · Text/accent: 9.00:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Notice how the faces and focal objects emerge from extensive shadow. These contemporary photographic compositions are lighting references, not historical paintings.
View collected reference imagesBuild it
- Let one lit image establish the mood
- Keep interface text evenly readable
- Reserve darkness for framing rather than hiding controls
Typography
Use solid, readable text beside the dramatic image. A serif can support the mood without needing a glow or shadow.
Watch out for
Equating any black background with tenebrism or obscuring navigation to create drama.
A working interpretation
Original CSS composition with the same content and controls used in every direction. Image-led styles need additional artwork for their full expression.
Open the full example →Hand it to an agent
Point your agent at this guide, or save the files below.
Check the result
- Confirm: let one lit image establish the mood.
- Confirm: keep interface text evenly readable.
- Confirm: reserve darkness for framing rather than hiding controls.
- Review specifically for: Equating any black background with tenebrism or obscuring navigation to create drama.