Style guide

How Cutaway is put together, and how to make it yours.

Start here

Seven steps, about an afternoon.

1. Name

Change the word Cutaway in the Navigation component (Wordmark layer) and in the footer of the Main layout template. Set the site title and description in Site settings.

2. Colours

Open Assets, Styles. Change Background, Text and Accent first; everything on the site follows. Three ready palettes are listed below.

3. Type

Every text style uses Host Grotesk. Change the font on the text styles and the whole site changes with them.

4. Work

In the CMS, open Work. Each project needs a Final Frame and an On Set Photo. Tick Featured on two to five projects to put them in the home page hero, newest first. The five newest projects also cut past in the preloader.

5. The rest of the CMS

Services, Team, Testimonials, FAQs, Journal and Legal each feed the sections named below. Replace the demo items; no layout work is needed.

6. Contact form

Select the form on the Contact page and choose where submissions go (email, a sheet or a webhook) in the form’s settings.

7. This page

Keep it as a reference or delete it, then remove its link from the footer.

Colours

Eight colour styles. Nothing on the site uses a loose colour.

Background

#0B0B0C

Surface

#141415

Text

#EFECE6

Text muted

#8F8C86

Line

Text at 14%

Accent

#FF4A2E

On media

#F4F1EB

Scrim

Near black at 72%

Other palettes

Three sets of values to copy into the colour styles.

Tungsten

Warm, for brands that light with practicals

Background

#0C0A08

Surface

#17130F

Text

#F2EBDD

Text muted

#9A8F7E

Accent

#F2A33A

Daylight

Cool, for clean product and tech work

Background

#0A0C0E

Surface

#12161A

Text

#E9EEF2

Text muted

#8A949C

Accent

#5CC8FF

Paper

A light version. Also set Line to #121212 at 14%

Background

#F3F0EA

Surface

#E8E4DC

Text

#121212

Text muted

#6B6862

Accent

#E8401C

Type

Fifteen text styles, twelve shown here.

Split headline

We shoot it.

Display

Tell us what you need

Heading L

Shot by us. Cut by us.

Heading M

The people who shoot your film cut it.

Heading S

Grade and finishing

Body L

One crew shoots it and the same people cut it.

Body

A first cut inside a week, then two rounds of notes.

Label

On set · Final cut · 1:30

Small

Article heading

Where the sun goes

Article subheading

The brief

Article body

We visit at the hour we plan to shoot.

Components

Six canvas components and four code files.

Navigation

Desktop, Phone and Phone open variants. Edit the wordmark and the four links inside the component. It sits in the Main layout template, so every page gets it.

Tag

The dot and label used for On set and Final cut. Two variants: a red dot and a plain dot. The label is a text control.

Button

The filled button. Label and Link controls; it turns the accent colour on hover.

Arrow link

The underlined text link with an arrow. Label and Link controls.

FAQ row

One question that opens and closes. Question and Answer come from the FAQs collection.

Submit button

The form button, with Pending, Success and Failed states. Change the wording of each state inside the component.

Intercut (code)

Overrides for the split screen. withCutStrip moves the Final cut half of the hero; withDriftUp and withDriftDown slide paired photos; the two viewport overrides keep the hero the right height on phones. No content lives in code.

SiteChrome (code)

withShowAfterScroll fades in the bar behind the navigation once you scroll; withVisibleViewport fits the phone menu to the visible screen.

Preloader (code)

Two code files, Preloader and PreloaderFrame. On the first page a visitor opens, the five newest projects cut past in a small frame, then the frame opens onto the page. Under a second, once per session, then it removes itself. It is the layer Preloader in the Main layout template. Its photos and titles come from Final Frame and Title in the Work collection; colours and Font family are controls on the layers inside. Delete the Preloader layer to go without.

Collections

Seven collections. Change the content and the pages follow.

Work

The home hero (Featured items), the preloader (the five newest), the Work grids, each project page and its next project link. Photos: Final Frame and On Set Photo.

Services

The two service lists (Side decides the column), each service page and its Included list.

Team

The people on the home page and the Studio page. Side decides On set or In the suite.

Testimonials

The client quotes on the home page, in Order.

FAQs

The questions on the home page and the Services page, in Order.

Journal

The three newest posts on the home page, the Journal page and each post.

Legal

The legal pages linked in the footer. The demo text is placeholder copy.

The hero

How the split screen works, in case you want to change it.

What you see

The left half is a plain list of On set photos that scrolls with the page. The right half is pinned and its Final cut frames move down as the left moves up.

What feeds it

Work items with Featured ticked. The left list is sorted newest first and the right list oldest first, so each pair lines up. Keep both lists on the same filter.

What to edit

Headlines: the two text layers named Headline left and Headline right. Captions: the Tag and text layers inside each panel. Photos: only in the CMS.

What to leave

The Hero layer must stay a section, and the Final cut strip must keep its override. Remove either and the right half stops moving.

Camera operator carrying a stabiliser rig through beams of light

You bring the story.

A woman standing in an underground car park

We shoot it and cut it.

Start a project

hello@cutaway.studio