CaddyA Framer template by Ajoy

Style guide.

How Caddy is put together.

Colours, type, components and the CMS, and what to change first to make this template yours.

CaddyA Framer template by Ajoy

Style guide.

How Caddy is put together.

Colours, type, components and the CMS, and what to change first to make this template yours.

CaddyA Framer template by Ajoy

Style guide.

How Caddy is put together.

Colours, type, components and the CMS, and what to change first to make this template yours.

Set up.
In an afternoon.

First

Rename the business: the navigation, footer and Closing section live in the Main layout; every other word is on its page or in the CMS.

Then

Change the colours in the colour styles (Page, Ink, Accent, and Deep light, Deep and Deep shadow, which the panel gradient runs across). Everything, including the code components, reads them.

Then

Swap the photos: CMS items for visits, services, kit and journal; the Photo layers on pages for the rest.

Last

Set where the Contact form sends its answers in the form’s settings, and set the site language in Site settings.

Colours.
Fourteen styles, one theme.

Change a colour style and every layer and code component that uses it follows.

Page

#E9E8E4

Surface

#F3F2EF

Ink

#18181A

Body

#4A4A4E

Muted

#86868A

Line

#D3D2CD

Deep light

#3F8487

Deep

#2A6168

Deep shadow

#1B4049

Deep raised

#33707A

Deep line

#52808A

On deep

#F2F7F5

On deep body

#C9DCDA

On deep muted

#9DBBBC

Accent

#8FD1C2

Accent deep

#3D7A6D

Other palettes.
Values to copy into the colour styles.

Each changes the three Deep styles; the panels follow.

Dusk

Deep light #7479CB

Deep #565CB1

Deep shadow #3D4391

Plum

Deep light #8A6198

Deep #644478

Deep shadow #432C57

Black

Deep light #262626

Deep #141414

Deep shadow #0C0C0C

Type.
Rethink Sans, regular and medium.

Every text layer uses one of these styles. Change the font in the styles, and in the Font family control of the code components.

Display · h1 (hero and page titles)

Thursday, 12:40.

Closing · h2

Dust shows in the light.

Statement · h2 (section heads)

Prices by the plan.

Title · h3

Regular clean

Prose heading · h2 in articles

What every visit covers

Lead

You get two names, not a rota.

Body

Dust falls, so a visit starts at the ceiling and ends on the floors.

Small

Thursdays in Lincoln Square

Nav

Services

Button

Book a clean

Big figure

3 h 40 min

Figure

$168

Components.
What each one does, and where to edit it.

Polished (code)

Home hero and every page head. A room photo standing on a polished floor; the reflection is buffed sharp as you scroll. Edit the photo and the plate in the CMS or the Page head.

Visit clock (code)

The hero’s figures and clock line. Reads In at, Out at and Rooms and times from the featured visit.

Top to bottom (code)

How a visit runs, on the home page. Edit the heights and jobs as one line each: height | job | detail.

Pill line (code)

The introduction headline with photos in the words. Write [1] and [2] where the photos go.

Service row (code)

One row per service; the surface photo wipes open on hover.

Kit item (code)

The caddy tiles; each squares up as the row comes into view.

Plan picker, Week strip, Questions (code)

Read the Plans, Areas and Questions collections through hidden Feed lists next to them. The plan picker shows each room as a photo: set one photo per kind of room in its controls.

Note card (code)

The note left on the counter; fed by a visit.

Sun room and Sun heading (code)

The Closing. As it scrolls in, the sun swings up from the floor and lights the heading word by word. Type the two lines in Sun heading; on Sun room, put Sun from on the window of your photo.

Page head, Button, Submit, Navigation

Canvas components with Desktop, Tablet and Phone variants.

Collections.
What each one feeds.

Visits

The hero (the Featured one), the notes on the home page, Visit notes and each visit’s page.

Services

Home services rows, Services and each service’s page.

Plans

Prices by the plan.

Kit

The caddy.

Areas

Where we clean, by day.

Questions

Before your first clean, on Home and Prices.

Journal

Journal rows and posts.

Team

The people, on About.

Legal

Style guide.

Style guide.

Style guide.

Set up.In an afternoon.

Set up.In an afternoon.

Colours.Fourteen styles, one theme.

Colours.Fourteen styles, one theme.

Other palettes.Values to copy into the colour styles.

Other palettes.Values to copy into the colour styles.

Type.Rethink Sans, regular and medium.

Type.Rethink Sans, regular and medium.

Components.What each one does, and where to edit it.

Components.What each one does, and where to edit it.

Collections.What each one feeds.

Collections.What each one feeds.

Set up.
In an afternoon.

Set up.
In an afternoon.

Colours.
Fourteen styles, one theme.

Colours.
Fourteen styles, one theme.

Other palettes.
Values to copy into the colour styles.

Other palettes.
Values to copy into the colour styles.

Type.
Rethink Sans, regular and medium.

Type.
Rethink Sans, regular and medium.

Components.
What each one does, and where to edit it.

Components.
What each one does, and where to edit it.

Collections.
What each one feeds.

Collections.
What each one feeds.