Thres

Timetable

Classes

Coaches

Membership

Journal

First class free

Thres
Thres

Style guide

Make it yours
in an afternoon.

Where to start, the colours and type, what each component does and which collection feeds which page. Unlink or delete this page before you launch.

Where to start, the colours and type, what each component does and which collection feeds which page. Unlink or delete this page before you launch.

1. Name the studio

Change the word in the Navigation component, the footer wordmark and the line under it. Page titles and descriptions are in each page’s settings.

Change the word in the Navigation component, the footer wordmark and the line under it. Page titles and descriptions are in each page’s settings.

2. Set your accent

Open Assets, Styles and change two colour styles: Live and Live tint. Buttons, the open day, photo washes and the class clock follow. Three ready palettes are below.

Open Assets, Styles and change two colour styles: Live and Live tint. Buttons, the open day, photo washes and the class clock follow. Three ready palettes are below.

3. Swap the photographs

Photos for the week, classes, coaches and articles are CMS fields. Colour photos are fine: the Zone photo component shows them in black and white. A few are set on the layer itself: Zones, Inside a class and Book on Home, the lead photo and The room on Studio, and the photo on Visit.

Photos for the week, classes, coaches and articles are CMS fields. Colour photos are fine: the Zone photo component shows them in black and white. A few are set on the layer itself: Zones, Inside a class and Book on Home, the lead photo and The room on Studio, and the photo on Visit.

4. Write your week

CMS, Days: seven items, one per day. Class, time, coach, zone and photo. The hero reads them; tick Rest Day for a day you are closed.

CMS, Days: seven items, one per day. Class, time, coach, zone and photo. The hero reads them; tick Rest Day for a day you are closed.

5. Fill the timetable

CMS, Sessions: one item per class time. Pick the Class and the Coach, type the day and time, and set Day Order (1 for Monday to 6 for Saturday).

CMS, Sessions: one item per class time. Pick the Class and the Coach, type the day and time, and set Day Order (1 for Monday to 6 for Saturday).

6. Point the forms somewhere

Select the form in Book on Home and the form on Visit, and choose where submissions go. Send one test.

Select the form in Book on Home and the form on Visit, and choose where submissions go. Send one test.

7. Check the numbers in text

A few sentences state counts and are plain text: “Six classes.” on Home and Classes, “Four coaches” on Home, Coaches and Studio, “Twenty-six classes from Monday to Saturday” on Timetable, and the counted figures on Home and Studio.

A few sentences state counts and are plain text: “Six classes.” on Home and Classes, “Four coaches” on Home, Coaches and Studio, “Twenty-six classes from Monday to Saturday” on Timetable, and the counted figures on Home and Studio.

Colour

One accent,
and the greys around it.

Every fill uses one of these colour styles. Change a style and the whole site follows.

Every fill uses one of these colour styles. Change a style and the whole site follows.

Canvas

#EEEEEB

Page background

Card

#FFFFFF

Cards and pills

Ink

#0D0D0E

Headings, main button

Body

#4A4C50

Paragraphs

Muted

#74767A

Small labels

Soft

#A9ABAE

Second line of a heading

Line

Ink at 9%

Hairlines

Night

#0A0A0B

The dark cards

On night

#FFFFFF

Text on Night

On night muted

White at 64%

Paragraphs on Night

On night soft

White at 40%

Second line on Night

Night line

White at 14%

Hairlines on Night

Night card

White at 8%

Panels on Night

Live

#FF4A33

The accent

Live tint

#FFDCD6

Pale accent

1 Recover

#9FAAB8

Per zone mode only

2 Base

#4C86FF

Per zone mode only

3 Tempo

#1FC47F

Per zone mode only

4 Thres

#FFB21F

Per zone mode only

5 Max

#FF4A33

Per zone mode only

Three other accents

To use one, open Assets, Styles and type its two values into Live and Live tint. Each keeps black text readable on the accent.

Cobalt

Live #5B8DFF

Live tint #DCE6FF

Pine

Live #2BB37D

Live tint #D4F0E3

Amber

Live #FFB21F

Live tint #FFEBC2

Type

Switzer,
in two weights.

Sixteen text styles. Set a style on a layer and leave the font, size and spacing alone.

Sixteen text styles. Set a style on a layer and leave the font, size and spacing alone.

Display

84px · 500 · h1

Train by heart

Heading

64px · 500 · h2

Six classes

Title

40px · 500 · h3

One honest number

Subtitle

28px · 500 · h4

Thres intervals

Card title

21px · 500 · h5

Engine: row and ride

Lead

18px · 400

Every day has a heart-rate zone and a class built for it.

Every day has a heart-rate zone and a class built for it.

Body

16px · 400

Stations rotate between the sled, the ropes and the bike. Rest is two minutes, and you will use all of it.

Stations rotate between the sled, the ropes and the bike. Rest is two minutes, and you will use all of it.

Small

14.5px · 400

Zone 4 · Thres · 45 min

Label

15px · 500

Book a first class

Book a first class

Numeral

92px · 400

149

149

Stat

38px · 500

26

Quote

30px · 500

I stopped guessing in week two.

I stopped guessing in week two.

Article title

60px · 500 · h1

Zone two feels too easy

Article heading

32px · 500 · h2

Why easy days matter

Article subheading

23px · 500 · h3

What to do on Monday

Article body

18px · 400

Most of a good week is spent at a pace you could talk through.

Most of a good week is spent at a pace you could talk through.

Components

What each part does,
and where to edit it.

Select an instance and its controls are in the right panel. Code components are listed by their file name, under Assets, Code.

Primary

Zone

Outline

Zone

Light

Night outline

Button

Component

Five looks: Primary, Zone, Outline, Light and Night outline, each with a hover and a pressed state.

Five looks: Primary, Zone, Outline, Light and Night outline, each with a hover and a pressed state.

Label and Link on the instance. Colours come from the styles.

Label and Link on the instance. Colours come from the styles.

Navigation

Component

The three pills at the top: logo, links and the booking button. Becomes a menu button on tablets and phones.

The three pills at the top: logo, links and the booking button. Becomes a menu button on tablets and phones.

Double-click to edit the links. It lives in the layout Site, so one edit changes every page.

Double-click to edit the links. It lives in the layout Site, so one edit changes every page.

Question

Component

One row of the questions list. Opens and closes on a click.

One row of the questions list. Opens and closes on a click.

Text comes from CMS, Questions.

Text comes from CMS, Questions.

Submit

Component

The form button, with Pending, Success and Failed states.

The form button, with Pending, Success and Failed states.

The wording of each state is on its variant.

The wording of each state is on its variant.

Week strip

Code · WeekStrip

The hero: seven days as photo slats, today open. On phones, day tabs over a card you can swipe.

The hero: seven days as photo slats, today open. On phones, day tabs over a card you can swipe.

Content is CMS, Days. Open size, Arrows, Photo lag, Zone mark and the wording are controls.

Content is CMS, Days. Open size, Arrows, Photo lag, Zone mark and the wording are controls.

Day feed

Code · DayFeed

A hidden list inside Hero that hands the Days collection to the week strip.

A hidden list inside Hero that hands the Days collection to the week strip.

Leave it in place. To change the week, edit Days.

Leave it in place. To change the week, edit Days.

Zone dial

Code · ZoneDial

The heart-rate card on Home: pick an age and a zone, read the beats per minute.

The heart-rate card on Home: pick an age and a zone, read the beats per minute.

Zones opens the five rows: name, feel and readout. Start age and Start zone set how it loads.

Zones opens the five rows: name, feel and readout. Start age and Start zone set how it loads.

Zone label

Code · ZoneLabel

The pill above the headline that names the open day and its zone.

The pill above the headline that names the open day and its zone.

Text, Rest day and Before load hold the sentences. Use {day} and {zone}.

Text, Rest day and Before load hold the sentences. Use {day} and {zone}.

Zone meter

Code · ZoneMeter

Writes a zone as words: “Zone 3”. On class cards, coach chips and the timetable.

Writes a zone as words: “Zone 3”. On class cards, coach chips and the timetable.

Zone is bound to the CMS. Word, Dot after and Text colour change the look. Look can switch to five dashes.

Zone is bound to the CMS. Word, Dot after and Text colour change the look. Look can switch to five dashes.

Zone photo

Code · ZonePhoto

A photograph shown in black and white that drifts as the page scrolls and takes the accent on hover.

A photograph shown in black and white that drifts as the page scrolls and takes the accent on hover.

Photo, Focus across and Focus down. Drift sets how far it moves; 0 keeps it still.

Photo, Focus across and Focus down. Drift sets how far it moves; 0 keeps it still.

Phase ring

Code · PhaseRing

The class clock on Home: a timer that walks through the five phases of a class.

The class clock on Home: a timer that walks through the five phases of a class.

One instance per phase card: Phase, Minutes and Zone. Pace sets the speed. Repeats sets once or looping.

One instance per phase card: Phase, Minutes and Zone. Pace sets the speed. Repeats sets once or looping.

Count up

Code · CountUp

A figure that counts to its value when it comes into view.

A figure that counts to its value when it comes into view.

Value, Starts at, Seconds and Delay.

Value, Starts at, Seconds and Delay.

Zone pin

Code · ZonePin

Tells the page which zone a class or coach page belongs to.

Tells the page which zone a class or coach page belongs to.

Zone is bound to the CMS. Nothing to edit.

Zone is bound to the CMS. Nothing to edit.

Zone theme

Code · ZoneTheme

One hidden instance in the layout Site. Publishes the accent to the code components.

One hidden instance in the layout Site. Publishes the accent to the code components.

Colours: One colour (as shipped) or Per zone, which uses the five zone styles.

Colours: One colour (as shipped) or Per zone, which uses the five zone styles.

Smooth scroll

Code · SmoothScroll

One hidden instance in the layout Site. Eases a mouse wheel; trackpads and touch are left alone.

One hidden instance in the layout Site. Eases a mouse wheel; trackpads and touch are left alone.

Smooth scroll turns it off. Glide sets how soft it is.

Smooth scroll turns it off. Glide sets how soft it is.

Content

Eight collections,
and what they feed.

Add, remove and reorder items in the CMS. The pages redraw themselves.

Add, remove and reorder items in the CMS. The pages redraw themselves.

Days

7 items

The week strip in the Home hero.

The week strip in the Home hero.

One item per day, Order 1 to 7. Zone is a number from 1 to 5. Rest Day closes a day.

One item per day, Order 1 to 7. Zone is a number from 1 to 5. Rest Day closes a day.

Classes

6 items

Class cards on Home and Classes, each class page, and the class name and zone on every timetable row.

Class cards on Home and Classes, each class page, and the class name and zone on every timetable row.

Zone and Zone Name travel together: 3 and Tempo.

Zone and Zone Name travel together: 3 and Tempo.

Coaches

4 items

Coach cards on Home, Coaches and Studio, and each coach page.

Coach cards on Home, Coaches and Studio, and each coach page.

Home Zone is a number from 1 to 5.

Home Zone is a number from 1 to 5.

Sessions

26 items

The Timetable page, When it runs on a class page and On the floor this week on a coach page.

The Timetable page, When it runs on a class page and On the floor this week on a coach page.

Each item points to one Class and one Coach.

Each item points to one Class and one Coach.

Stories

4 items

The member stories on Home.

Before and After are numbers; Unit is the word after them.

Before and After are numbers; Unit is the word after them.

Questions

6 items

The questions on Home and Membership.

The questions on Home and Membership.

Question and Answer, plain text.

Question and Answer, plain text.

Journal

4 items

The Journal page and each article.

The Journal page and each article.

Featured puts one article at the top.

Featured puts one article at the top.

Legal

2 items

Privacy and Terms, linked from the footer.

Privacy and Terms, linked from the footer.

Body is rich text.

Body is rich text.

Good to know

Small things
that save an hour.

Motion

Photographs drift on scroll, cards arrive in order and the class clock runs once. All of it stops for visitors who ask their device for reduced motion. Browsers without scroll timelines show still photographs.

Photographs drift on scroll, cards arrive in order and the class clock runs once. All of it stops for visitors who ask their device for reduced motion. Browsers without scroll timelines show still photographs.

One accent

The site ships with one colour. Zone theme, Colours, Per zone brings back a colour for each zone, using the styles 1 Recover to 5 Max.

The site ships with one colour. Zone theme, Colours, Per zone brings back a colour for each zone, using the styles 1 Recover to 5 Max.

Layout

Every page uses the layout Site, which holds the navigation and the footer. Pages have three sizes: Desktop 1200, Tablet 810 and Phone 390.

Every page uses the layout Site, which holds the navigation and the footer. Pages have three sizes: Desktop 1200, Tablet 810 and Phone 390.

Light only

There is no dark theme. The two black cards are a colour style, Night, and stay black.

There is no dark theme. The two black cards are a colour style, Night, and stay black.

This page

The footer links here under Small print. Remove that link, or delete the page, before you launch.

The footer links here under Small print. Remove that link, or delete the page, before you launch.

Back to the home page

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