Style guide.
Everything on the site comes from the colour styles, the text styles and eight CMS collections. Change them there and every page follows. This page is for you: keep it unlinked, or delete it before you go live.
Set up in six steps
1
Put your name on it
Change Nia Calloway in the Navigation component and the footer, then the site title and description in Site settings and each page’s settings.
2
Set your colours
The colour styles in the Assets panel each hold a light and a dark value. The swatches below follow them; Accent and Accent text carry the red.
3
Set your type
Hanken Grotesk is set once, in the text styles. If you change it, change Font family in each code component’s controls too.
4
Fill the CMS
Films, Services, Week, Reviews, Questions, Journal, Clients and Legal hold the copy and pictures that repeat. What each one feeds is listed below.
5
Point the contact form
Select the form on Contact and add your email under Send to. Nothing is sent anywhere until you do.
6
Swap the icons
Favicon, touch icon and social image are in Site settings, under General.
Colour
The site starts in light. The round button in the navigation switches to dark, and a visitor’s choice is kept on their device. App colours are the editing windows, the same in both.
Page
Light #F2F2F2 · Dark #000000
Surface
Light #F7F7F7 · Dark #0D0D0D
Raised
Light #FFFFFF · Dark #131313
Line
Light #E0E0E0 · Dark #262626
Ink
Light #1A1A1A · Dark #F3F2EF
Soft
Light #5C5C5C · Dark #A6A6A6
Muted
Light #6B6B6B · Dark #8C8C8C
Quiet
Light #8A8A8A · Dark #7A7A7A
Accent
Light #D9432C · Dark #FF6A4D
Accent text
Light #B5351F · Dark #FF7F63
On ink
Light #FFFFFF · Dark #000000
App/Window
Light #1C1C1C · Dark #111111
App/Raised
Light #252525 · Dark #1A1A1A
App/High
Light #2E2E2E · Dark #262626
App/Ink
Light #EDEDED · Dark #F0F0F0
App/Soft
Light #A3A3A3 · Dark #A6A6A6
Three other accents
Paste these into Accent and Accent text. Everything red on the site follows.
Cobalt
Accent #2F5BEA, dark #7C9BFF · Accent text #2448C2, dark #9DB4FF
Pine
Accent #1F7A55, dark #4FC28E · Accent text #17603F, dark #6FD3A4
Amber
Accent #C46A00, dark #FFB04D · Accent text #9E5500, dark #FFC27A
Type
Hanken Grotesk throughout, regular and medium. Each style has a desktop, tablet and phone size.
Display
Cut, colour, sound.
Display 2
Six hours to two.
Page title
Every stage, priced.
Heading
How a week runs.
Prose heading
Grading three cameras
Title
Fifty Thursdays
Subheading
Picture lock
Figure
02:20
Lead
Send the drives on Monday. The first cut is in your inbox by Wednesday.
Article
A weekly street interview show, edited every Monday and out every Thursday.
Body
Copied from the drives, checked and backed up twice before anything is cut.
Small
Masters, cut-downs and captions, checked and sent.
Label
Runtime
Nav
Work
Button
Book an edit
Wordmark
Nia Calloway
Components
Code components have plain controls in the right panel; the canvas components have their variants.
Workspace
The hero window. Its five tabs step on as you scroll. Film, client, figures, tab names and eight frames are in its controls; Start tab sets where it opens.
Queue
The Work section’s export queue: Queue header, Queue row and Queue monitor. Rows come from Films marked Featured; Pause stops it.
Service item, Effect controls
The Services panel. Rows come from Services and the panel shows the one picked.
Hot quote
The price sentence. Drag the red numbers; base price, per minute and per cut-down are controls.
Runtime scene, Runtime step
How a week runs: the runtime counts down as you scroll through the Week section. Steps come from Week, each with its runtime.
Caption reel, Caption cue
Reviews as burned-in subtitles. Cues come from Reviews.
Marker row
Questions as timeline markers, from Questions.
Appearance
The light and dark switch in the navigation.
Preloader
In and out marks, then the page, once per visit. It sits in the Site layout; set its runtime and length there, or delete it.
Mark, Lines
The logo glyph, and the ticked rows on service pages.
Navigation, Button, Arrow link, Submit button
Canvas components. Navigation has Desktop, Phone and Phone open; Button has Ink and Small; Submit button has Sending, Sent and Error.
Overrides
Visible height, Drift left and right, Reveal index, Hide when short, Caret and Eager image, all in Overrides.tsx.
Collections
Films
Work, each film’s page, the hero window and the Work queue (Featured).
Clients
The client names on Home and Studio.
Services
Services, each service’s page and the Services panel on Home.
Week
How a week runs on Home and Studio. Runtime is the film’s length after each step; Short name labels the step under the clip.
Reviews
The caption reel on Home.
Questions
The markers on Home and Services.
Journal
Journal, each post, and the latest posts on Home.
Legal
Privacy and Terms. Placeholder copy: replace it with your own.