Silent Film

A Design System in Silver & Sepia

Inspired by the flickering magic of 1920s cinema — intertitle typography, iris wipes, film grain, and the expressive power of images before sound. From Chaplin's tenderness to Murnau's shadows.

01 — Color Palette

The Palette of Light & Shadow

— ♦ —

Silver nitrate tones, sepia warmth, and the deep blacks of unexposed celluloid

Silver Nitrate Tones

Silver White #e8e4dc
Silver Light #d4cfc5
Silver Mid #b0a898
Silver Dark #7a7064
Silver Deep #4a4238

Sepia Tones

Sepia Cream #f0e6d2
Sepia Light #d8c8a8
Sepia Mid #c4a87a
Sepia Dark #8b7355
Sepia Deep #5c4a32

Film Stock

Film Black #0e0c0a
Near Black #1a1714
Charcoal #2a2520
Film Dark #3a332c
Film Frame #181410

Film Tint Accents

Tint Amber #d4a050
Tint Rose #b87878
Tint Blue #7090a8
Tint Green #6a8a6a
Projector Glow #fff8e0
02 — Typography

Words Without Sound

— ♦ —

When every word must earn its place on screen

Intertitle — IM Fell English SC
The Kiss of the Vampire
Display face for intertitle cards, hero headings, and dramatic moments. Based on 17th-century Fell Types, revived with the imperfections of metal letterpress.
Display — Della Respira
A Tale of Love and Shadows
Secondary display face for subtitles, decorative headings, and captions. Elegant serif with period-appropriate character.
Body — Lora
In the flickering light of the nickelodeon, audiences first discovered the power of moving pictures. No words were needed — only the universal language of expression, gesture, and shadow. The piano played on, translating emotion into melody, while silver images danced across the screen.
Lora — 400/500/600/700, italic. A well-balanced serif for extended reading at body sizes.
Caption
Scene 14, Take 3 — Interior, the grand ballroom. Fog machines at full power. Chaplin enters from stage left, wearing the oversized shoes.
Lora Italic, 0.8rem — for metadata, annotations, and production notes.

Type Scale

3rem Title
2.5rem Intertitle
2rem Display
1.75rem Section
1.25rem Heading
1rem Body
0.8rem Caption
03 — Spacing

The Rhythm of the Reel

— ♦ —

A consistent spatial cadence, measured in frames

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
24px
space-6
32px
space-7
48px
space-8
64px
space-9
96px
04 — Buttons

Action!

— ♦ —

Interactive elements styled as film production cues

Primary Actions

Secondary Actions

Ghost Buttons

Intertitle Button

Disabled States

05 — Forms

The Director's Notes

— ♦ —

Capturing input with the precision of a camera operator

06 — Cards

The Picture Gallery

— ♦ —

Content containers inspired by film frames and lobby cards

The Cabinet of Dr. Caligari

German Expressionist masterpiece with distorted sets and painted shadows. Directed by Robert Wiene, 1920.

The Gold Rush

Charlie Chaplin's beloved comedy of a lone prospector in the Klondike, starving and dreaming of rolls, 1925.

Nosferatu

The shadow of Count Orlok creeps up the staircase in Murnau's unauthorized Dracula adaptation, 1922.

Scene Cards (Intertitle Style)

Act I
— ♦ —

In which our hero arrives in the great city, penniless but full of dreams.

Act II
— ♦ —

The girl with the flower. A chance encounter that would change everything.

Act III
— ♦ —

The chase through the factory. Comedy and peril in equal measure.

07 — Alerts

Production Notes

— ♦ —

Messages from the set, styled as directorial cues

Director's Note: The lighting must cast long, angular shadows across the set. Reference the staircase scene from Nosferatu for the desired effect.
Action: Camera is rolling. The leading lady crosses from stage right, pauses at the window, then turns with an expression of sudden recognition.
Cut! The film has broken at the splice point. The projectionist will need a moment to repair the reel. Please remain in your seats.
Scene Change: Transition to the moonlit exterior. Blue tinting to be applied in post-production. Cue the pianist for a nocturne.
08 — Iris Wipes

The Iris Opens

— ♦ —

The signature transition of silent cinema — a circular reveal

The iris wipe was the most distinctive transition effect of silent film. A circular mask would open to reveal a new scene or close to end one, drawing the audience's eye to a focal point. Hover to see the iris open wider.

Iris Closed
Default State
Iris Open
Sepia Scene
09 — Film Tinting

Colour Before Colour

— ♦ —

Hand-tinted frames conveyed mood and time of day

Before color film existed, silent movies used chemical tinting and hand-painting to add emotional color to scenes. Sepia for warmth and interiors, blue for moonlight and night, amber for firelight, and rose for romance.

Sepia
Interiors, warmth, nostalgia
Amber
Candlelight, fireplaces, dawn
Blue
Night, moonlight, cold
Rose
Romance, passion, dreams
10 — Accompaniment

The Pianist Plays On

— ♦ —

Music cue cards for the theater pianist

Allegro Agitato

For chase scenes and moments of peril. Fast tempo, staccato left hand, tremolo in the right. Build intensity with ascending scales.

Andante Cantabile

For romantic interludes. Gentle, flowing melody in the upper register. Sustained pedal for warmth. Think Chopin nocturnes.

Mysterioso

For scenes of suspense and the uncanny. Diminished chords, chromatic passages, sudden silences. Low register rumbles for dread.

Comique

For slapstick and comic business. Bright, bouncy rhythms. Mickey-mousing the action: pratfalls get descending glissandos, chases get ragtime.

11 — Navigation

The Programme

— ♦ —

Wayfinding through the picture show

Horizontal Navigation

12 — Design Principles

The Cinematographer's Creed

— ♦ —

Guiding principles for the silent film aesthetic

I

Show, Don't Tell

Silent cinema's greatest lesson. Every element must communicate visually. If the design needs a label to explain itself, it has failed.

II

Embrace the Grain

Imperfection is character. Film scratches, flicker, and grain are not defects but signatures of a living medium. Let texture breathe.

III

Light Sculpts Form

Contrast is everything. Deep blacks and luminous highlights create drama. The space between light and dark tells the story.

IV

Every Frame Composed

No wasted space. Early cinematographers composed every shot as carefully as a painting. Apply the same intentionality to layout.

V

Emotion Through Restraint

With no dialogue, silent film actors conveyed entire narratives through gesture. Design with the same economy — less is always more.

VI

The Music Continues

A silent film is never truly silent. The piano accompaniment fills the air. Design should have rhythm, tempo, and the feeling of continuous movement.