Style guide

How this template is put together. Read it once before you change anything.

Everything on the site comes from the CMS, the colour styles and the text styles listed here.

Everything on the site comes from the CMS, the colour styles and the text styles listed here.

Setup

Seven steps, about an afternoon.

1. Replace the buildings

1. Replace the buildings

Open the Buildings collection. Each item is one column in the skyline: a photo, a name, a neighborhood and the number of homes. Drag the items to change the order on desktop.

Open the Buildings collection. Each item is one column in the skyline: a photo, a name, a neighborhood and the number of homes. Drag the items to change the order on desktop.

2. Set the tallest building

2. Set the tallest building

Select a Skyline column on Home and on Buildings and set “Full height at” to the Homes of your largest building. Columns are drawn in proportion to it.

Select a Skyline column on Home and on Buildings and set “Full height at” to the Homes of your largest building. Columns are drawn in proportion to it.

3. Update the counts

3. Update the counts

The headlines on Home and Buildings, one figure, one article and the About intro quote totals such as “400 homes in ten buildings”. Change them when your buildings change. In An owner’s month, the heading, the tall column and the hours in the list must all give the same total.

4. Rewrite the year

4. Rewrite the year

The Months collection has twelve items. Give each a photo, a title and one or two sentences. The current month always opens first.

The Months collection has twelve items. Give each a photo, a title and one or two sentences. The current month always opens first.

5. Check the fees

5. Check the fees

Fees appear on the Services page, in the FAQ collection and in the Fee field of each service. Keep them the same in all three, and in one currency.

Fees appear on the Services page, in the FAQ collection and in the Fee field of each service. Keep them the same in all three, and in one currency.

6. Connect the form

6. Connect the form

Select the form on the Contact page and choose where submissions are sent. Then send yourself a test.

Select the form on the Contact page and choose where submissions are sent. Then send yourself a test.

7. Replace the legal copy

7. Replace the legal copy

The three Legal items are marked as placeholder copy. Replace them with your own text before you publish.

The three Legal items are marked as placeholder copy. Replace them with your own text before you publish.

Colours

Fourteen colour styles. Change a style and every page follows.

Paper #F2F3F1

Page background

Surface #FAFAF9

Light button

Ink #111417

Headings, ground lines

Body #474C50

Paragraphs

Faint #84898D

Captions and labels

Quiet #9A9E9F

Second half of headings

Line #D8DBD8

Hairlines

Accent #B4472E

Main button, this month

Accent hover #9A3A24

Main button on hover

Ink hover #2C3237

Dark button on hover

On accent #FFFFFF

Text on the accent

On photo #FFFFFF

Text placed on a photo

On photo quiet white 66%

Second tone on a photo

Line on photo white 36%

Hairlines on a photo

Type

Satoshi throughout. The Skyline column and Year line take the same name in their Font family control, and the footer wordmark and the form inputs carry the font on the layer. Sizes are desktop / tablet / phone.

Statement, 72 / 56 / 40. Display and Title are the same face for page titles.

Twelve rent days a year.

Heading 2, 48 / 40 / 32

One fee covers all of it.

Heading 3, 28 / 26 / 24

Rent and accounts

Heading 4, 20

When do I get paid?

Lead, 20 / 19 / 18

Sixty-four apartments around a courtyard, with one on-site superintendent.

Body, 17 / 17 / 16

Rent is collected on the 1st and paid to you on the 5th, with one statement per building.

Label, 15

Ask for a proposal

Small, 14

Queen Village

Stat, 56 / 46 / 38

97.5%

Article body, 18. Article heading and subheading sit above it.

Every boiler we manage is serviced and fired by October 20.

Other palettes

Three sets of values to paste into the Paper, Ink, Accent and Accent hover styles.

Chalk and ivy

Chalk and ivy

Paper #F3F2EC, Ink #14181A, Accent #2F6B4F, Accent hover #25563F

Paper #F3F2EC, Ink #14181A, Accent #2F6B4F, Accent hover #25563F

Fog and cobalt

Fog and cobalt

Paper #F1F3F5, Ink #101418, Accent #2747C7, Accent hover #1F3AA6

Paper #F1F3F5, Ink #101418, Accent #2747C7, Accent hover #1F3AA6

Sand and oxblood

Sand and oxblood

Paper #F4F1EA, Ink #17140F, Accent #7A2E2A, Accent hover #632421

Paper #F4F1EA, Ink #17140F, Accent #7A2E2A, Accent hover #632421

Components

What each one does and where to edit it.

Skyline column

Skyline column

Code component. One building in a skyline; its height follows the Homes number. Used for buildings on Home and Buildings, and for the two months and the thirty days on Home. Controls: Full height at, Shortest, Space kept, Word before, Unit, Rise, Focus.

Year line

Year line

Code component. The pinned year on Home. Heading, labels, colours and scroll length are controls. Months arrive from the Feed list beside it.

Code component. The pinned year on Home. Heading, labels, colours and scroll length are controls. Months arrive from the Feed list beside it.

Feed

Feed

Code component. Invisible. One sits in the hidden “Months feed” list and hands each month to Year line. Do not delete that list.

Code component. Invisible. One sits in the hidden “Months feed” list and hands each month to Year line. Do not delete that list.

Navigation

Navigation

Variants Desktop, Phone and Phone open. Edit links inside the component.

Variants Desktop, Phone and Phone open. Edit links inside the component.

Button

Button

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

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

Submit button

Submit button

Variants Default, Pending, Success and Failed. Used once, in the Contact form.

Variants Default, Pending, Success and Failed. Used once, in the Contact form.

FAQ item

FAQ item

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

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

Main layout

Main layout

The layout template: navigation, the closing section and the footer. Turn “Closing” off on a page to hide the closing section there.

The layout template: navigation, the closing section and the footer. Turn “Closing” off on a page to hide the closing section there.

Code overrides

Two, both on Home. “Open on scroll” on the Residents band makes the photo enter as a narrow column and open to full width. “Room for the navigation” on the Hero keeps it exactly one window tall under the navigation bar. Clear either in the layer’s Code Overrides.

Collections

Ten collections, the most this site plan allows.

Buildings

Buildings

The skylines on Home and Buildings, Building in focus (the item with Featured on), the Buildings list and every building page.

The skylines on Home and Buildings, Building in focus (the item with Featured on), the Buildings list and every building page.

Months

Months

The year on Home. Number runs from 1 to 12.

The year on Home. Number runs from 1 to 12.

Services

Services

Services on Home, the Services page and every service page.

Services on Home, the Services page and every service page.

Figures

Figures

The four figures on Home and About.

The four figures on Home and About.

Testimonials

Testimonials

Owners, on Home.

Owners, on Home.

FAQ

FAQ

Questions on Home and Services.

Questions on Home and Services.

Articles

Articles

Notes on Home, the Journal and every article page.

Notes on Home, the Journal and every article page.

Team

Team

The four people on About.

The four people on About.

Legal

Legal

The legal pages linked in the footer.

The legal pages linked in the footer.

Steps

Steps

Your first 30 days on Home. Day sets the height of each column.

Your first 30 days on Home. Day sets the height of each column.

Not in the CMS

Not in the CMS

Three short lists on Home are plain text layers: Owners we report to, the chores in An owner’s month, and the links on the Residents photo. Edit them on the canvas. They are kept out of the CMS so the site stays within ten collections.

Three short lists on Home are plain text layers: Owners we report to, the chores in An owner’s month, and the links on the Residents photo. Edit them on the canvas. They are kept out of the CMS so the site stays within ten collections.

Rules

Four habits that keep the pages consistent.

Hover

Hover

Every card, row or logo that links somewhere fades to 68% on hover. Buttons and text links change colour. Nothing zooms or moves.

Every card, row or logo that links somewhere fades to 68% on hover. Buttons and text links change colour. Nothing zooms or moves.

Ground line

Ground line

Skylines, figures, portraits and page titles stand on a full ink line. Hairlines in the Line colour separate rows.

Skylines, figures, portraits and page titles stand on a full ink line. Hairlines in the Line colour separate rows.

Headings

Headings

Headings are two-tone: the first sentence in Ink, the second in Quiet. No italics, no uppercase labels.

Headings are two-tone: the first sentence in Ink, the second in Quiet. No italics, no uppercase labels.

Accent

Accent

One accent colour, used for the main button and the current month only.

One accent colour, used for the main button and the current month only.

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