Style guide.
How Coverage is put together.
Make it yours,
in this order.
Change Wren Mattsson in the Sidebar and the Navigation in the Main layout, in the footer, and the site title and description in Site settings.
Search the project for Wren to find every mention.
Edit the Work collection: title, channel, kind, runtime, views, year, poster, the full clip, a smaller phone clip, a six-second preview clip, summary, brief and the write-up.
Order sets the order everywhere. Clips should be muted MP4s, about ten seconds.
The first film marked Featured plays in the hero. The two lines of the headline are text in the Headline layer on the home page.
Turn on Punch-ins on the Coverage component for wide, medium and close cuts on scroll.
Shorts, Rates, Testimonials, Tests, Questions and Journal are collections; each one feeds a section, listed under Collections below.
Section names in the sidebar come from the section layer names.
The rows on About are a list on the Trim component: title, channel, minutes of footage and minutes kept.
The share kept is worked out for you.
The Brief form on Contact sends to whatever you set in Site settings, Forms.
Send one real test after setting it.
Change the colour styles and text styles below; every layer and component uses them.
Code components take colours and the font family as controls, already linked to the styles.
Colours,
nine styles, no hue.
Page
#080808
The page
Surface
#111111
Empty frames, film backgrounds
Ink
#F4F2ED
Headings, text, the current row
Muted
#9C9993
Body text, second line of headings
Faint
#5C5A56
Labels, numbers, small print
Line
Ink at 9%
Hairlines
Accent
#F4F2ED
Current number and marks. Same as Ink by default
On film
#F3F0EA
Text over footage
On film muted
Ink at 66%
Small text over footage
Type,
Pathway Extreme only.
Display
112 / 80 / 54. The hero headline, h1
I know when to cut in.
Page title
80 / 58 / 40. h1 on every other page
I know when to cut in.
Statement
76 / 56 / 40. Section headings, h2
I know when to cut in.
Heading
44 / 34 / 28. Journal titles, next film, h3
I know when to cut in.
Subheading
32 / 28 / 24. Headings inside write-ups, h2
I know when to cut in.
Title
26 / 23 / 20. Film and rate names, h4
I know when to cut in.
Figure
34 / 28 / 24. Large numbers
24 min
Lead
21 / 19 / 17
I know when to cut in.
Article
18 / 18 / 17. Write-up paragraphs
I know when to cut in.
Body
16
I know when to cut in.
Button
15. Text links
I know when to cut in.
Nav
15
I know when to cut in.
Side nav
Small
14. Captions and facts
I know when to cut in.
Label
13. Field labels and counters
I know when to cut in.
Other palettes,
values to copy.
Paste these into the colour styles to change the whole site. Footage looks best graded towards the new page colour.
Page #090D14, Surface #0F1520, Ink #EAECEF, Muted #8D96A4, Faint #4C5563, Line rgba(234, 236, 239, 0.09), Accent #C8A56E
Page #120A0C, Surface #1B1013, Ink #F2E9DF, Muted #A8928A, Faint #5E4846, Line rgba(242, 233, 223, 0.09), Accent #D7A07C
Page #0A100D, Surface #111915, Ink #EEE9DD, Muted #94A096, Faint #4E5A52, Line rgba(238, 233, 221, 0.09), Accent #CBB07A
Components,
what each one does.
The hero film. It starts as a cinema band under the headline and opens to full screen as the page scrolls. One sits in the hero’s Featured films list.
Edit the Work collection; Punch In On says where the subject sits, and the closed band frames it. Controls: Cinema band, Frame the subject, Band top, Scroll to open, Scroll per cut, Punch-ins.
Work on the home page: a monitor beside a numbered list. The row at the middle of the screen plays on the monitor; hovering a row jumps to it. One sits in each Work item.
Stack below sets the width under which the monitor moves above the list.
A muted film with its poster that plays while on screen. Used on the Work page, film pages, Shorts and the sidebar reel.
Film saturation and Corner radius are controls.
What gets cut on About: footage in against minutes on screen. Each bar trims down as its row scrolls up.
Edit the Films list on the component.
The length scale in each rate row, from six seconds to three hours.
Shortest and Longest come from the Rates collection.
Voices on the home page: the quote arrives a beat before its picture, while the section is pinned.
Edit the Testimonials collection. Face sits keeps the face clear of the quote.
One thumbnail test: choose A or B to see each version and the click-through it earned.
Edit the Tests collection.
Questions as the chapter list of a video, with the answer beside it. On phones the answer opens under its question.
Edit the Questions collection.
On this page, in the sidebar: lists every section on the page by its layer name and marks the one on screen.
Rename a section layer to rename its entry. Leave out hides one.
The reel on the home page: one camera move across the wide picture while the section is pinned.
Change the picture on the World layer.
Shorts on the home page: the three columns move at different speeds.
The home page Rates rows slide in, thumbnail tests land at an angle, the questions wipe on and the journal cover pulls back.
Remove an override to keep that section still.
Hero height on phones, the top bar’s background after the hero, phone menu links on iOS, and the sidebar reel hidden on short windows.
Canvas pieces: the top bar for tablet and phone (Desktop, Phone, Phone open), the sidebar in the Main layout for desktop, and the form button with Sending, Sent and Not sent.
Change links and labels on each one.
Collections,
what each one feeds.
The hero (Featured), the Bin on the home page, the Work page and every film page.
Shorts on the home page.
Rates on the home page and the Rates page.
Voices on the home page.
Thumbnails on the home page.
Questions on the home page and the Rates page.
Journal on the home page, the Journal page and every post.
Privacy policy and Terms of work, linked from the footer. Placeholder copy: replace it before you publish.