Replace Offhand in the navigation wordmark, the footer and each page’s title and description in Page settings.
Edit the colour styles in Assets. Each has a light and a dark value; the switch in the navigation and footer picks between them and remembers the choice.
Every text uses a text style set in SUSE. Change the font in a style and it changes everywhere. Code components take the font as a control, written as Framer loads it, for example SUSE Variable.
Clients, jobs, services, notes, team, questions and legal pages all come from the CMS. Changing a collection changes every page that shows it, the home hero included.
The home and contact forms use Framer’s form handling. Point them at your inbox or tool in each form’s settings before you publish.
To start in light, set Start in to Light on the theme switch in the navigation and in the footer.
Page
Light #EDF0EB, dark #0E2A2C
Raised
Light #E2E8E3, dark #133436
Ink
Light #0E2A2C, dark #EAF0EC
Body
Light #3A5351, dark #BFD0CB
Muted
Light #677F7B, dark #86A19C
Line
Light #C8D3CE, dark #24484A
Line strong
Light #8FA6A1, dark #3E6A6C
Grid
Light #D7DFDA, dark #173A3C
Hatch
Light #BCC9C3, dark #2B5153
Accent
Light #C9661B, dark #F2A65A
On accent
Light #FFFFFF, dark #0E2A2C
On photo
Light #F4F1EA, dark #F4F1EA
Graphite
Oxblood
Harbour
Display
88 / 64 / 46, h1
Statement
56 / 44 / 34, h2
Title
26 / 24 / 22, h3
Lead
19 / 18 / 17
Body
16 / 16 / 15
Small
14 / 14 / 13
Figure
44 / 38 / 32
Row
23 / 21 / 17
Nav
15
Button
15, medium
Desktop, Phone and Phone open variants. Links and the button live inside it.
Layout template Main
Primary and Secondary. On hover a second arrow crosses in and the arrow cell hatches.
Assets, Button
The submit button for both forms, with Pending, Success and Failed states.
Assets, Send button
Cells, rows and the closing band used across pages. Each hover is a fade or a hatch.
Assets
A job row that crosses from Yours to Ours as the page scrolls. The job marked Stays with you opens into its photo.
Home hero and each case page; edit Jobs or Client jobs in the CMS
Adds up the hours on each side as rows cross.
Above the hero and case rows
The dashboard picture with up to three floating cards. Clear a card to leave it out.
Home, Run room
Shows each service’s screen; on the home page the next screen wipes in with a hatched band.
Home and service pages; pictures come from Services in the CMS
The four-week process, the hours slider that picks a plan, and the small hour ruler.
Home and Services; edit plans and prices in the panel
Loads one image sized to its frame, shortly before it scrolls in.
About, Notes
Hatching and dots, the page grid lines, the footer’s hover grid, and the light and dark switch.
Layout template and sections
The home hero rows. Mark one job Stays with you; it opens into its photo.
Each case page’s rows. Pick the client in Client; four that cross and one that stays.
Case studies: the Work index, the home client cells and each case page.
Home services, the Services page, service pages and their screens.
Home quotes (the first four) and the quote on each case page, matched by Company.
The home questions.
The About page team rows.
The Notes page and note pages. Mark one Featured to lead the page.
Privacy, terms and cookies. Placeholder copy: replace it.