Film Training Style
The look of savagelightstudios.com, set up for courses.
Charcoal and black like the site, cyan headings, the logo's glow and scanlines, and its red kept for consequences.
Colour
Every colour comes from the live site or the logo. Text pairs are checked against WCAG AA.
#111111Header and footer bars
#222222Page
#2C2C2CCards and choices
#003B5BButtons, feature blocks
#6EC1E4Headings, accent · 7.9:1
#00B4F0Focus, highlights · 6.7:1
#D3E0FFLinks · 12:1
#A79281Slates, rules · 5.4:1
#F06A4FConsequences · 5.2:1
Ratios are on charcoal. Ember is the logo's red, lifted slightly so it reads as text. It always comes with a label, never colour alone.
Type
Call Time Is 6 A.M.
Lesson and section titles
The site's menu and page titles. Used for titles, buttons and labels.
Heading in cyan, Roboto 600
Body text is Roboto Light on charcoal, as on the site's home page. It stays white for reading; cyan is for headings and the lede.
Logo
The glowing hand on black. On course pages it sits on the title screen only; the black bar carries the wordmark.
Savage Light Studios
Wordmark: Montserrat 700, uppercase, white, as in the site header.
Course parts
Slate
A clapperboard label that marks each lesson's scene and take.
Scene 3The LockupTake 1Buttons
Start the day Review the call sheet
Choices (branching scenario)
Callouts
Meters
Feature block
| Use | Do | Don't |
|---|---|---|
| Ember | Consequences, safety, "cut" | Decoration or links |
| Cyan | Headings, accent, active choice | Long body text |
| Scanlines | Title screens and heroes | Behind reading text |