Elbow

Services

Work

Prices

Areas

Journal

About

651 555 0142

Book a visit

Elbow

Menu

Services

Work

Prices

Areas

Journal

About

651 555 0142

Answered by a plumber, seven to seven

Book a visit

Style guide

Style guide

How this template is put together,
and where to change things.

Everything on the site comes from a colour style, a text style, a component or the CMS. Change it there and it changes everywhere.

Set it up

Set it up

1. Name

1. Name

Type your business name over Elbow in the Navigation component and in the Footer of Main layout. Then change the page titles in each page’s settings.

Type your business name over Elbow in the Navigation component and in the Footer of Main layout. Then change the page titles in each page’s settings.

2. Phone number

2. Phone number

651 555 0142 appears in the navigation, the phone menu, the hero, the closing section, the phone call button, the Emergency page, the Contact page and the footer. Replace each one, and its tel: link.

3. Colours

3. Colours

Open Assets, then Styles. Change Accent first, then Paper and Ink if you want a different mood. Every layer follows.

Open Assets, then Styles. Change Accent first, then Paper and Ink if you want a different mood. Every layer follows.

4. Type

4. Type

Every text layer uses a text style. To change the typeface, change the font in each style. The face here is Mona Sans.

Every text layer uses a text style. To change the typeface, change the font in each style. The face here is Mona Sans.

5. Content

5. Content

Open the CMS and edit Jobs, Services, Areas, Plans, Articles, Team, Testimonials, FAQ and Legal. Tick Featured on one Job to put its photo in the hero.

6. The form

6. The form

On the Contact page, select the form and choose where submissions are sent. Send yourself one test.

On the Contact page, select the form and choose where submissions are sent. Send yourself one test.

7. Small print

7. Small print

The two Legal pages hold placeholder copy. Replace it with text your own lawyer has checked.

The two Legal pages hold placeholder copy. Replace it with text your own lawyer has checked.

Colours

Colours

Paper

#F1F1EC. Page background

Surface

#F8F8F4. Form fields, light buttons

Ink

#14191C. Headings, labels, dark buttons

Body

#535A5E. Paragraphs and small text

Quiet

#98A0A2. Second half of two-tone headings

Line

Ink at 14%. Hairlines

Accent

#0F5964. Primary button

Accent hover

#0B4650. Primary button, hovered

Ink hover

#2B3438. Dark button, hovered

On accent

#FFFFFF. Text on buttons

On photo

#FFFFFF. Text placed on photographs

Other palettes

Other palettes

Copper

Copper

Paper #F3EFE9, Ink #1C1714, Quiet #A39A92, Accent #A4532B, Accent hover #873F1E

Paper #F3EFE9, Ink #1C1714, Quiet #A39A92, Accent #A4532B, Accent hover #873F1E

Slate

Slate

Paper #EEF0F1, Ink #12171B, Quiet #939BA3, Accent #2B4A6B, Accent hover #1F3852

Paper #EEF0F1, Ink #12171B, Quiet #939BA3, Accent #2B4A6B, Accent hover #1F3852

Moss

Moss

Paper #F0F1EA, Ink #171A14, Quiet #9A9F92, Accent #3E5B36, Accent hover #2F4729

Paper #F0F1EA, Ink #171A14, Quiet #9A9F92, Accent #3E5B36, Accent hover #2F4729

Type

Type

Display

76 / 56 / 44

We run the pipe.

We run the pipe.

Display H2

76 / 56 / 44

Something dripping?

Something dripping?

Title

64 / 50 / 38

Recent work.

Recent work.

Statement

56 / 44 / 34

Six services, priced first.

Six services, priced first.

Heading 3

30 / 26 / 24

We find the shut-off

We find the shut-off

Heading 4

21 / 20 / 19

Leaks and burst pipes

Leaks and burst pipes

Lead

22 / 20 / 18

A fixed price before any wall is opened.

A fixed price before any wall is opened.

Body

17 / 16 / 16

Found, isolated and repaired, usually the same day.

Found, isolated and repaired, usually the same day.

Small

14

Plumbing and heating, Saint Paul

Plumbing and heating, Saint Paul

Label

15, medium

Book a visit

Book a visit

Figure

56 / 46 / 36

40 min

40 min

Article body

19 / 18 / 17

Every house has one valve that turns off all the water.

Every house has one valve that turns off all the water.

The pipe

PipeRun is the one code component. Select it, swap the Photo and pick a Shape. Thickness, Flow and Runs in are in the same panel.

Example of the S-curve shape

S-curve

Example of the U-bend shape

U-bend

Example of the Length shape

Length

Example of the Whole photo shape

Whole photo

Components

Components

Navigation

Navigation

Component with Desktop, Phone and Phone open. Links, phone number and button are inside it. Used in Main layout.

Component with Desktop, Phone and Phone open. Links, phone number and button are inside it. Used in Main layout.

Button

Button

Primary, Dark and Light, each with a hover state. Label and Link are controls.

Primary, Dark and Light, each with a hover state. Label and Link are controls.

FAQ item

FAQ item

Closed and Open. Question and Answer come from the FAQ collection.

Closed and Open. Question and Answer come from the FAQ collection.

Submit button

Submit button

Default, Sending, Sent and Not sent. Used by the form on Contact.

Default, Sending, Sent and Not sent. Used by the form on Contact.

PipeRun

PipeRun

The photo in a pipe-shaped window. Shapes: S-curve, U-bend, Length, Whole photo.

The photo in a pipe-shaped window. Shapes: S-curve, U-bend, Length, Whole photo.

Hero scene

Hero scene

On the home page the frame Hero scene pins the hero while the pipe opens. Its overrides are in Scene; leave them attached.

On the home page the frame Hero scene pins the hero while the pipe opens. Its overrides are in Scene; leave them attached.

Main layout

Main layout

Navigation, page content, closing section and footer, plus a call button that shows on phones after the first screen. Each page has a Closing switch to hide the closing section.

Collections

Collections

Jobs

Jobs

Work page and job pages, the rack on Home, and the hero photo (the Featured job). Each job points at one Service and one Area.

Services

Services

Services page and service pages, and the list on Home.

Services page and service pages, and the list on Home.

Areas

Areas page and area pages, the list on Home, and the Area of each job.

Plans

The three care plans on Prices.

Articles

Articles

Journal, article pages and the three notes on Home.

Journal, article pages and the three notes on Home.

Team

Team

The people on About.

The people on About.

Testimonials

Testimonials

The Reviews page, and the first three on Home.

FAQ

FAQ

Questions on Home, Services and Prices.

Legal

Legal

Privacy policy and Terms of service. Placeholder copy.

Privacy policy and Terms of service. Placeholder copy.

Not in the CMS

Not in the CMS

The four figures, the four visit steps and the contact details are plain text layers.

The four figures, the four visit steps and the contact details are plain text layers.

Agent skills

Agent skills

Always on

Always on

The design-system rules: which colour, text and link styles to use, the section pattern, and what must not be broken. Framer Agent applies them to every request.

The design-system rules: which colour, text and link styles to use, the section pattern, and what must not be broken. Framer Agent applies them to every request.

elbow-add-job

elbow-add-job

Adds a job to the Jobs collection with every field filled, linked to its service and its area.

elbow-add-page

elbow-add-page

Builds a new page from the site’s existing sections, with all three breakpoints.

Builds a new page from the site’s existing sections, with all three breakpoints.

elbow-rebrand

elbow-rebrand

Changes the name, colours, typeface, phone number, address and hours everywhere they appear.

Changes the name, colours, typeface, phone number, address and hours everywhere they appear.

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