For the person editing this site

Style guide, and how to make it yours.

Everything on this site is driven by colour styles, text styles, eight CMS collections and a handful of components. Change those and the pages follow.

Setup

Six steps, about an afternoon.

1. Name and colours

Open Assets, then Styles. Change Paper, Ink, Body, Quiet, Muted and Line. Every page, component and scroll scene reads them.

2. Typeface

Change the font on the text styles. Then set the Font family control on Lift, Room Row, Roll Number, Level Badge, Lit Text and Stay Bar to the same family name.

3. Your levels

Edit the Levels collection: numeral, name, short name, one line, photo. The hero ride, the Levels page and the level pages follow; any number of levels works. The six levels in the footer strip and the level labels on Home are text, so change those by hand.

4. Your rooms

Edit the Rooms collection. Size, sleeps and price are numbers; the pages add the units and the currency.

5. Booking

The Stay Bar sits on Home, on Rooms and in the closing section. Paste your booking engine’s address into its Booking link and it receives the arrival date, the departure date and the guests. Left as it is, it opens Contact with those three fields filled in. Set where the form sends in the form’s settings.

6. Details

Replace the address, telephone and email in the footer, the phone menu and the Contact page. Replace the two legal pages with your own text.

Colour styles

Thirteen styles, one accent.

Paper

#F4F3EF · The page

Surface

#FAF9F6 · Hover on light buttons

Ink

#1C1B1A · Headings, buttons

Body

#57534E · Paragraphs

Quiet

#A09D97 · Second tone of headings

Muted

#767169 · Labels and small text

Line

Ink at 14% · Hairlines

Accent

#2E5E6E · Form sent state

On accent

#FFFFFF · Text on accent

On photo

#FFFFFF · Text on photographs

On photo quiet

White at 74% · Second tone on photos

Line on photo

White at 36% · Hairlines on photos

Ink hover

#3D3A37 · Dark button hover

Text styles

General Sans, regular and medium.

Display · Page titles, 84 / 64 / 44

Start at the top and work down to the sea.

Title · Titles from the CMS, 64 / 48 / 36

Start at the top and work down to the sea.

Statement · Large second headings, 64 / 48 / 36

Start at the top and work down to the sea.

Heading 2 · Section headings, 44 / 36 / 30

Start at the top and work down to the sea.

Heading 3 · Card and row titles, 28 / 26 / 23

Start at the top and work down to the sea.

Heading 4 · Small headings, 19 / 19 / 18

Start at the top and work down to the sea.

Figure · Level numerals, 112 / 88 / 64

5 4 3 2 1 0

Note · Guest book quotes, 26 / 24 / 22

Start at the top and work down to the sea.

Lead · Introductions, 20 / 19 / 18

Start at the top and work down to the sea.

Article body · Long text, 18

Start at the top and work down to the sea.

Body · Paragraphs, 16

Start at the top and work down to the sea.

Nav · Navigation and links, 15

Start at the top and work down to the sea.

Label · Labels, 14 medium

Start at the top and work down to the sea.

Small · Captions and meta, 14

Start at the top and work down to the sea.

Other palettes

Three more, as values to copy.

Limestone (this one)

Paper #F4F3EF · Ink #1C1B1A · Body #57534E · Quiet #A09D97 · Muted #767169 · Accent #2E5E6E

Plaster

Paper #F7F2EC · Ink #2A211B · Body #5E5148 · Quiet #B2A498 · Muted #85766A · Accent #9A4F32

Harbour

Paper #EFF2F3 · Ink #14212B · Body #47555F · Quiet #97A4AD · Muted #677680 · Accent #1F5F7A

Olive

Paper #F3F3EC · Ink #1E211A · Body #50554A · Quiet #A3A698 · Muted #74786A · Accent #5C6B3A

Components

What each one does, and where to edit it.

Lift

The hero ride. One instance sits in each item of the Levels list on Home. Headline, scroll distance, gaps and colours are controls on that instance.

Code · Home, Hero

Room Row

A row of the room index; the rows share one photo window that rides to the row you point at.

Code · Home and Rooms

Roll Number

A figure whose digits roll into place the first time it is seen.

Code · Home, Intro

Level Badge

The level in the navigation. Follows the Lift, then the Level Marks.

Code · Navigation

Level Mark

Invisible marker. Place one in a section or page header and set its level.

Code · any page

Lit Text

A statement that turns from quiet to ink as you scroll.

Code · Home, The house

Stay Bar

Arrival, departure and guests in one ruled row. The button carries the three answers to the Booking link: in the address for a booking engine, into the form for the Contact page.

Code · Home, Rooms, Closing

Stay prefill

Override on the contact form. Writes the stay chosen in a Stay Bar into the fields named Arriving, Leaving and Guests. Keep those three field names.

Code · Booking.tsx

Motion overrides

Drift, arrive, step, open, track, stage, ride up, ride down, active row and late. Applied to photos, rows and the gallery; no settings. Late holds a photo back until the page is near it. With reduced motion everything stands still and the gallery becomes a plain grid.

Code · Motion.tsx

Navigation

Desktop, Phone and Phone open variants. Edit the links in all three.

Canvas

Button

Primary, Light and Outline, each with a hover.

Canvas

Question

Closed and Open. The Questions list fills it.

Canvas

Submit button

Default, Pending, Success and Failed states of the contact form.

Canvas

Collections

Eight collections, and what each feeds.

Levels

The hero ride, the Levels page, each level page, the footer strip.

6 items

Rooms

The room index on Home and Rooms, each room page.

6 items

Gallery

The two-column scene on Home. Right Column decides the side.

10 items

Guest notes

The guest book on Home.

3 items

Journal

Journal page, post pages, the three latest on Home.

3 items

Questions

The accordion on Home and Contact.

5 items

Team

The list on The house.

4 items

Legal

2 items

Not in the CMS

Tonight’s menu, the day list, the seasons table and the included list are plain text layers: select the row and type.

Agent skills

Four skills, for Framer’s Agent.

default

Always on. The design rules: styles, the one h1, two-tone headings, hairlines, hover, how levels are written, and what must not break.

Always

mezzanine-add-content

Adds or edits levels, rooms, gallery photos, guest notes, journal posts, questions, team and legal pages, with every field filled.

On request

mezzanine-add-page

Adds a page with the page header, the breakpoints and the spacing of the others, and puts it in the navigation.

On request

mezzanine-rebrand

Changes the name, contact details, place, colours or typeface everywhere they appear, code component controls included.

On request