Cinematic Noir: a website graded like a film still

Cinematic Noir treats a website as a film. Each screen is a scene. The palette is graded: deep teal or midnight, with a single warm light. Titles are sharp serifs, set like opening credits. Words arrive in time, like subtitles, as you scroll.

It is the style for stories that happen after dark.

The specimen, for a fictional ninety-seat cinema that only screens after midnight, shows the essentials: "Doors at midnight." in a heavy serif over a slow field of marbled orange and black, two lines of plain information, and a strip of screening times along the bottom like a film's edge.

Where it comes from

Film noir is the name French critics gave to the dark American crime films of the 1940s and 1950s: hard shadows, single light sources, rain on streets, cigarette smoke in projector beams. Its lighting, chiaroscuro, comes from painting.

The palette comes from modern colour grading. Many contemporary films push shadows toward teal and skin tones toward orange, because the two sit on opposite sides of the colour wheel and make each other glow. Cinematic Noir borrows that pairing on purpose.

What defines it

Palettes

None of these grounds is pure black, and none of the inks is pure white. Off-black and off-white feel like film; pure black and white feel like a screen.

Type

• Display: Gloock. Sharp wedge serifs and heavy contrast, in one weight. It looks best big, which is how it should be used.
• Text: Erode. A contemporary serif from Fontshare with soft wedges, set at generous sizes for reading on dark grounds.

Two serifs keep the voice literary. On a dark ground, slightly larger text and looser leading help long passages read comfortably.

Motion and depth

Motion is slow and timed, like editing:

• Liquid fields: marbled pigment rivers with a satin sheen move slowly behind titles and react to the cursor.
• Grain gradients: soft fields of colour drifting under film grain.
• Word reveals timed like subtitles, so statements arrive at reading pace.
• Pinned chapters that hold a scene while its story plays out, then release.
• An ink trail on the closing call to action, the cursor leaving smoke behind it.

The ocean expedition in the community takes the idea further: the page is the water column, the light fails as you descend, and below 1,000 metres your cursor is the only lamp.

A typical page, section by section

Every site is designed for its own idea, so treat this as a sketch, not a template. A page in this style often runs like this:

1. The opening shot. A full-height scene: one title over a slow field of light, and the essential facts in small type.
2. The story in chapters, pinned, each revealing its lines at reading pace.
3. The rail, a horizontal sequence of stills, works or nights.
4. A line held on screen, like a subtitle in silence: one quote, one sentence.
5. The credits: names, roles and times set like the end of a film.
6. The closing call, with the cursor leaving an ink trail, then the name, small, like a last frame.

Who it suits

More on these in the use cases for event websites and music artist websites.

How it goes wrong

• Dark for the sake of dark. A black page with white text is not cinematic. It needs a grade, a light source and a story.
• Video backgrounds as a shortcut. Autoplaying stock footage is heavy, generic and hard to read over. Real-time fields are lighter and belong to the site.
• Pinning forever. A scene that holds the screen too long makes visitors feel trapped. Chapters end.
• Grey text on navy. Muted text on dark grounds is the most common contrast failure. Every ink is checked.
• Motion that never rests. Slow is the point. With reduced motion switched on, every scene becomes a composed still.

What to prepare

• The story in beats. Five to eight moments, from the opening shot to the closing call. The agent will propose them, but your own instinct for the arc is the best starting point.
• The practical facts: dates, times, places, prices.
• Any stills you own, from a film, a venue or a performance. Graded to the palette, real images make the scenes specific.

Making it yours

• "A cinema that only opens after midnight. Ninety seats, no trailers, coffee until four."
• "A documentary release. The site should feel like the first five minutes of the film."
• "A cocktail bar behind an unmarked door. People should feel let in on a secret."

For the scroll mechanics behind this style, read animated websites and the guide to accessible motion. For the daylight version of the same drama, Editorial Luxe. For living forms in deep colour, Organic Biomorph. For titles that move, Kinetic Type.