Start here
Make it yours in an afternoon
Six things to change, in this order. Everything else follows from the styles and the CMS.
1
Name and contact
Change the brand in the Nav component, the footer text, and the email address in the footer and on the Apply page.
2
Photos
Swap photos in the CMS (Services, Results, Journal) and in the Behind component at the top of each page. Each Behind photo has an Outline: a white silhouette the same size as the photo.
3
Colours
Edit the colour styles below. The Behind component's Backdrop, Page and Ink controls take the same values.
4
Type
Anybody throughout. Change it in the text styles and in the Font and Text font controls of the Behind component.
5
The form
Connect the Apply form to your inbox in Framer's form settings. Nothing is sent anywhere until you do.
6
Checkout
The Get the programme button links to Apply. Point it at your own checkout link.
Colour styles
Six colours
One strong colour behind every portrait, ink on a white page, and one deeper cyan used sparingly for figures and small labels.
Cyan
#0094B8
The studio backdrop: hero, page heads and the photo band.
Cyan deep
#007A99
Accent for changes in the logbook and small section labels.
Ink
#0A1A22
Text, hairlines and the dark buttons.
White
#FFFFFF
The page, and type on cyan.
Muted
Ink at 60%
Secondary text: intros, notes, row details.
Hairline
Ink at 14%
Rules between rows.
Text styles
Anybody, wide
One variable family. Display runs at width 118; text styles sit closer to normal width. Sizes step down at each breakpoint.
Display
Aa
800, width 118, uppercase. 120 / 78 / 64 / 46 / 42 px.
Heading
Heading
800. 52 / 42 / 37 / 32 px.
Title
Title
700. 26 / 24 / 23 / 21 px.
Quote
Quote
650. 36 / 30 / 27 / 24 px.
Lead
Lead text for intros
600. 22 / 21 / 20 / 18 px.
Body
Body text for everything else
500. 17 / 16 px.
Label
Label for small notes
650. 14 / 13 px.
Figure
$1,140
800 with tabular figures. 56 / 48 / 43 / 38 px.
Components and collections
What feeds what
Code components are named in the Assets panel. Collections are in the CMS.
Behind
The portrait with the name behind it
Home hero: Frame on scroll, with Letterbox on load. Closing bookend on Home: Direction Open. Page heads: Hold the frame, Band. Client portraits: Studio backdrop. Each needs a photo and an outline of the same size. On a page head, pick a photo where her head is about a fifth of the photo's width, crop it so the chin sits a little above halfway, and set Focus Y near 50, so the whole face clears the band in a wide, short window.
Photo
Every other photo
Loads one file sized to its frame just before it scrolls in. Zoom crops in, for example to keep a logo out of frame.
Button
Light on cyan, Dark on white
The label and link are controls on each instance.
Offer
Three ways to train
Tabs for In person, Online and Both, each with its price and four lines.
Services
Coaching rows and pages
Name, line, photo, outline, Focus Y, who it's for, three phases and the body.
Results
Clients, logbook and stories
The numbers, check-ins, goal, quote, story and studio portrait for each client.
Testimonials
In their words
Name, quote, detail and the client it belongs to. Each take on Home borrows that client's photo, outline and first name from Results.
Journal
Notes
Title, word for the head, date, reading time, excerpt, cover and body. If the cover shows a person, add an Outline the same shape as the photo so the word sits behind them; otherwise leave it empty.
Legal
Privacy, terms, cookies
Placeholder copy. Replace it before launch.
Scroll scenes
Overrides on Home
Twelve weeks slides sideways, Every rep drifts its columns, In their words cuts from take to take. They find the layers named Strip, Column, Takes and Take, so keep those names.
SmoothScroll
Gentle wheel scrolling
Lives in the Site layout template. Touch, keys and the scrollbar stay native, and it switches off for visitors who ask for reduced motion.
Skills
For Framer's Agent
The default skill keeps the Agent inside these styles. Ask for brace-add-client, brace-add-page or brace-rebrand by name.