Style guide

How this template is built, and where to change it.

A reference for whoever edits this site. Delete this page, and its link in the footer, when you no longer need it.

Setup

1. Your name

Change the Name text in the Navigation component, the Text of the Focus Word in the footer, the Text of the Preloader, the copyright line, and the site title in Site settings.

2. Your series

CMS, Series. Each item needs a title, a cover, a location, a year, a summary and up to eleven frames. Tick Featured on four to six items to put them in the hero.

3. The rest of the content

CMS, Prints, Commissions, Clients, Journal, Testimonials, FAQs and Legal. Every list on the site reads from one of these.

4. Colours

Assets, Styles. Change Ground, Ink, Muted and Accent first; every page and component follows. Three ready palettes are listed below.

5. Typeface

Change the font on the text styles. Then select each code component and type the same family name into its Font family control.

6. The form

Contact page, select the form, and choose where enquiries are sent in the form settings. Until you do, they arrive in this project’s Framer inbox.

Colours

Ground

#0A0A0A · Page background

Panel

#141413 · Raised areas, form states

Ink

#ECE9E2 · Headings, links, buttons

Muted

#8E8B84 · Body text, second tone of headings

Line

14% Ink · Hairlines

Line strong

38% Ink · Input underlines, link underlines

Accent

#F0C445 · Scale marker, kept frame

On photo

#F4F2EC · Text over photographs

Scrim

55% Ground · Shade over photographs

Type

Display · Switzer

Coastlines, crews

Page title · Switzer

Six series, each kept to twelve frames.

Statement · Switzer

Booking for spring 2027.

Heading L · Switzer

Three kinds of work

Heading M · Switzer

Night ferries

Heading S · Switzer

Made with medium format

Body L · Switzer

She trained as a printer in Oslo and still proofs every commission on paper.

Body · Switzer

Car decks, saloons and wakes on the overnight coastal crossings.

Small · Switzer

Updated 1 September 2026

Label · Switzer

Commissioned by

Other palettes

Selenium

A cool blue-black. Ground #090B0E, Panel #12151A, Ink #E6EAEE, Muted #858B93, Accent #7FB2FF.

Sepia

A warm brown-black. Ground #0E0B08, Panel #17130F, Ink #EFE7DA, Muted #94897A, Accent #E0A458.

Safelight

Neutral black with a red marker. Ground #0B0808, Panel #151111, Ink #EFE6E3, Muted #94837F, Accent #E5483A.

Components

Rack Focus

The hero scene. Prints at different depths; scroll pulls focus. Home, Hero. Shows the Featured series.

Focus Scale

The lens distance scale under the hero headline. One clickable stop per featured series.

Contact Sheet

Home, Work. A list of series beside the sheet of the selected one. Columns and arrangement are set per breakpoint.

Long Gallery

Home, Prints. A pinned room with prints in facing pairs. Use an odd number of prints for one on the end wall.

Focal Scene

Home, Commissions. A pinned list beside one photograph that zooms between items. The big label is the Focal Length field.

Focus Image

Any photograph that drifts and comes into focus: portraits, covers and cards on every page.

Focus List

Client names as large type; scroll or the pointer pulls focus. Home and About.

Compare

The as shot / as printed drag line on Home. Two photos and two labels.

Focus Word

The fitted name in the footer and the soft 404. Type any text.

Feed

Invisible. One sits in each hidden CMS list and hands its items to a scene with the same group name. Leave these in place.

Navigation

Canvas component with Desktop, Phone and Phone open variants. Edit the links inside it.

Button, Submit Button, FAQ Row

Canvas components. Button has Solid and Line variants; Submit Button has Pending, Success and Failed; FAQ Row opens and closes.

Preloader

In the Site layout template. A contact sheet of twelve frames is counted through, one is marked as the kept frame, and that frame opens until it is the whole page. About a second and a half, once per session; it waits a little longer if the photos on the first screen are still loading. Type any text, choose the Kept frame, or switch Once per session off to see it on every load.

Overrides (Focus.tsx)

withFocusTrack on the Hero section, withVisibleHeight on Focus pin, withVisibleViewport on the Navigation, withHideOnScroll on its fixed layer. Leave them applied.

Framer Skills

Four saved instructions for Framer’s Agent: the always-on design rules, plus baryta-add-cms-item, baryta-new-page and baryta-rebrand.

Collections

Series

Hero (Featured), contact sheet, Work page and each series page. Frames is the list of other pictures on the sheet.

Prints

The print room on Home and the Prints page.

Commissions

The zoom scene on Home, the Commissions page and each commission page.

Clients

The focus list on Home and About.

Journal

The Journal page and each note.

Testimonials

Kind words on the Commissions page.

FAQs

Questions on the Contact page.

Legal

Privacy and Terms. Placeholder copy; replace it before you publish.