The Cinematic Language · Lesson 1 of 11
What makes a site cinematic
9 minute read
Cinematic is not a filter you add at the end. It is a small set of decisions made together: a dark stage, dramatic light, real depth, oversized type and film texture.
The cinematic DNA
| Element | The move |
|---|---|
| Color | Near-black dark mode (#0a0a0b) with one single accent color |
| Light | Dramatic lighting: single key light, volumetric glow, rim light |
| Depth | Parallax, layers, shallow depth of field |
| Typography | Oversized display type with tight leading, thin supporting sans |
| Texture | Film grain, subtle noise, edge vignette |
| Atmosphere | Haze, fog, dust particles, mood |
| Finish | Glassmorphism, soft shadows, glow, premium restraint |
Every prompt in this course carries three to five of these strands. That consistency is why the results feel directed rather than generated: the same DNA shows up in the hero, the pricing, the footer.
Do this
- Memorize the seven strands. When a generated page feels off, diagnose which strand is missing rather than regenerating blindly.
- Fix one accent color before you prompt anything, and repeat it in every prompt for the project.
- Treat grain and vignette as the finishing pass; they unify layers that were generated separately.
Knowledge check
A generated hero looks flat and 'templatey'. Which DNA strands are most likely missing?