Style guide,
and how to make it yours.
Everything on this site is driven by the CMS, the colour styles and the text styles. This page lists them, and the few steps that turn the demo into your own site.
Set up in six steps.
2. Edit the scroll scenes
The hero is the Steps collection. Each step is a photo, a title, a line of text and a height. As the page scrolls, the scene moves from one photo to the next and counts the height down. Change, add or remove steps in the CMS and the hero follows. The strip of surveys on the home page is the Surveys collection. The closing scene at the end of most pages is one photograph between the two lines of the heading: select Opening photo in Main layout and pick a new one.
Every other photo is a normal image. Project photos are the Aerial field on each survey, service photos are the Image field on each service, and article covers are the Cover field. Any photo works; nothing is set up per photo. The demo photographs share one quiet colour grade: muted greens, slate blues and soft contrast. Yours will sit best if they are overcast or lightly desaturated.
Change the colour styles and text styles in the Assets panel and the whole site follows. The hero scene and the survey strip each have a Font family control: type the same family name there.
Colours are ten styles.
Paper
#F4F4F1. Page background.
Surface
#FFFFFF. Cards, sheets and form fields.
Ink
#111418. Headings, buttons, behind photographs.
Body
#5B6066. Paragraphs and small text.
Faint
#9A9DA0. The second tone in headings.
Line
Ink at 13%. Hairlines and field borders.
Accent
#2457F5. Links on hover, the Accent button.
On accent
#FFFFFF. Text on the accent colour.
On photo
#FFFFFF. Text on photographs and on Ink.
Line inverse
White at 16%. Hairlines on a dark background.
Type is one family, Switzer.
What we do, from ridge to gutter.
Three other palettes to copy into the colour styles.
Paper #F5F1EA
Ink #1D1814
Body #6A5F57
Faint #A89F97
Accent #B4472C
Paper #F1F3EF
Ink #12201C
Body #56635E
Faint #98A39E
Accent #1F8571
Paper #F2F2F2
Ink #101010
Body #5E5E5E
Faint #A0A0A0
Accent #D93A26
Components and where to edit them.
The fly-down scene in the hero. On load the photo ends just inside the window, so the first screen is exactly one window tall. It then pins under the navigation while the page scrolls, moves through each step and counts the height down. Its steps are the Steps collection. Controls: label, unit, scroll per step, top gap, image width, behind photos, page background, font family and corner radius.
The row of survey photographs on the home page. It holds still in the middle of the window while the photographs pass sideways, with a progress line and a counter, and each photograph links to its survey. Its content is the Surveys collection. Controls: counter word, top gap, image width, colours, font family and corner radius.
An invisible helper that passes a CMS collection to a scene. It sits in the hidden lists named Steps feed and Surveys feed. There is nothing to edit in it.
The layout template that carries the navigation, the closing scene and the footer on every page. Pages can hide the closing scene with the Closing scene control. Its heading, button, phone link and three notes are normal layers.
Buttons, navigation and text links change colour. Cards and rows that link somewhere fade slightly. Nothing zooms or moves. To change the fade, select a card or row and edit its Hover effect.
Collections and what each one feeds.
The strip on the home page, the Surveys page and every survey page. The strip shows six surveys: Featured first, then the newest. Each survey has a Findings list, shown on its page as a plain list.
The service list on the home page and the Services page, in the order set by Order, and every service page with its price, time, warranty and included list.
The hero scene on the home page and the four steps on the Services page.