Home / Style guide

Make it yours.

Everything on the site comes from a handful of styles, four CMS collections and a few components. Change them and every page follows.

01

Site settings and the Header / Footer

Site settings and the Header / Footer

Name, email, phone and navigation live in the Header and Footer components and the Main layout template. Edit them once; every page follows.

02

Colour styles

Colour styles

Signal, Signal 2 and Signal Text are the accent: change them in Assets → Colors and every highlight, button and tick follows. Ink, Fog, White, Slate and the Rule, Ink and Fog styles colour every line, border and muted text.

03

Text styles

Text styles

Display, Heading 1–4, Lead, Body, Label and Meta. Change the font or size once in Assets → Text and the whole site updates, per breakpoint.

04

CMS

CMS

Services, Case Studies, Insights and Team. Each entry becomes its own page; replace the sample content before you publish.

05

Logos and the not-now card

Logos and the not-now card

The client logos are the Logo Set component: edit them there and all three copies in the scrolling row follow. They spread across its width, so any number of logos keeps the loop seamless. The not-now card is the Not-now list component: on each instance set Label, Title, Item 1–5, State 1–5 (Keep, Stop or Off) and Summary.

06

Booking link

Booking link

Point the Pick a time button on Contact at your own Cal.com, Calendly or SavvyCal link.

07

Home hero spacing

Home hero spacing

The showcase photo starts where the arrow artwork ends, held by the Copy frame’s minimum height (392 on desktop, 356 on tablet, 352 on phone). If you resize or move the artwork, change these to match.

08

Motion

Motion

Effects come from MarginMotion in Assets → Code. They find their parts by layer name, so keep Arrow, Title, Hover photo, Track, Phases, Week and Bar if you restyle, and keep not-now rows as box, text and tag.

09

Sample flags

Sample flags

Dashed “Sample” pills mark invented figures, logos and quotes. Delete each one once its content is real.

Colour

Colour

A monochrome base and one accent.

A monochrome base and one accent.

Ink

#0E1015

Fog

#EFF0F2

White

#FFFFFF

Slate

#4D535D

Signal

#2442D8

Signal Bright

#8DA2FF

Type

Type

Fraunces for headings, Geist for reading, Geist Mono for data.

Fraunces for headings, Geist for reading, Geist Mono for data.

Display

Display

Decide.

Heading 1

Heading 1

What to stop

Heading 2

Heading 2

What we’re hired for

Heading 3

Heading 3

Positioning

Lead

Lead

We find the few decisions that matter and stay until they’re working.

Body

Body

Fixed fees, scoped to a decision and agreed in writing before we start.

Label

Mono label · 13px

Components

Components

Buttons, flags and the submit button are components with variants.

Buttons, flags and the submit button are components with variants.

Create a free website with Framer, the website builder loved by startups, designers and agencies.