Style guide.
How this template is put together.

For whoever is making Safelight their own. Work down the setup list, then use the rest as a reference. This page is hidden from search engines; delete it before you launch if you prefer.

Setup

Six steps, about an afternoon.

1

1

Name

Name

Change the wordmark in the Navigation component and in the footer of the Site Layout template, then the site title and icons in Site settings.

Change the wordmark in the Navigation component and in the footer of the Site Layout template, then the site title and icons in Site settings.

2

2

Colour

Colour

Open the colour styles and change Accent first. Every style has a light and a dark value; change both.

Open the colour styles and change Accent first. Every style has a light and a dark value; change both.

3

3

Type

Type

Every text style uses Switzer. Change the font on the text styles, then set the same family in the Font control of Shelf, Look Compare and Shelf Tunnel.

Every text style uses Switzer. Change the font on the text styles, then set the same family in the Font control of Shelf, Look Compare and Shelf Tunnel.

4

4

Products

Products

Replace the twelve items in the Products collection. Each Cover feeds the hero shelf, the shop grid, the product page and the closing shelf.

Replace the twelve items in the Products collection. Each Cover feeds the hero shelf, the shop grid, the product page and the closing shelf.

5

5

Checkout

Checkout

Paste each product’s checkout address into its Checkout Link field, and point the three Get all access buttons (navigation, pricing, closing) at your bundle checkout.

Paste each product’s checkout address into its Checkout Link field, and point the three Get all access buttons (navigation, pricing, closing) at your bundle checkout.

6

6

Forms and legal

Forms and legal

Choose where the contact and newsletter forms send submissions, replace the placeholder copy in the Legal collection, and write your own FAQs.

Choose where the contact and newsletter forms send submissions, replace the placeholder copy in the Legal collection, and write your own FAQs.

Colours

Fifteen colour styles. Light value first, dark value second.

Paper

#F5F4F0 · #0D0D0C

Surface

#FFFFFF · #171715

Sunken

#ECEAE3 · #1F1F1C

Ink

#141413 · #F4F3EF

Muted

#6B6962 · #A19F97

Subtle

#9C9A92 · #6F6D66

Line

Ink 10% · White 12%

Line Strong

Ink 18% · White 22%

Accent

#FF4B1F · #FF5A2E

On Accent

#FFFFFF · #FFFFFF

Inverse

#141413 · #1C1C1A

On Inverse

#F5F4F0 · #F4F3EF

On Inverse Muted

62% of On Inverse

Inverse Line

14% of On Inverse

Glass

White 74% · #171715 74%

Type

Fifteen text styles, all in Switzer. Sizes are desktop / tablet / phone.

Display · 88 / 64 / 44 · the home headline (shown here as a copy)

Looks and sound

Looks and sound

Looks and sound

Closing Heading · 112 / 72 / 44 · the closing scene

Take the whole shelf.

Heading 2 · 56 / 44 / 34 · section headings

Fresh from the darkroom.

Heading 3 · 30 / 26 / 24 · card headings

Works where you already edit

Title · 19 · names, questions, small headings

Portside 400

Price · 56 / 48 / 44 · prices and figures

$149

Lead · 19 / 18 / 17 · introductions

Presets, LUTs, film grain, overlays and sound design, built on real shoots.

Body · 16 · running text

Every pack includes a commercial licence for unlimited personal and client projects.

Small · 14 · notes and captions

Prices in US dollars. Tax is added at checkout where it applies.

Label · 13 · labels and meta

24 presets · .xmp .dng

Button · 15 · buttons, tabs and navigation

Browse the shop

Body Strikethrough · 16 · the old price

$343

Article Heading · 28 · headings inside journal posts and legal pages

Protect the highlights, then lift

Article Body · 18 · text inside journal posts and legal pages

Film handles overexposure gracefully and digital does not.

Heading 1 · 72 / 56 / 40 · page titles. The title of this page is set in it.

Other palettes

Three ready-made alternatives. Copy the values into the colour styles of the same name.

Cobalt

Paper #F2F4F7 · #0C0E12
Surface #FFFFFF · #15181E
Sunken #E4E8EE · #1D2129
Ink #101319 · #F1F3F7
Muted #5F6672 · #9AA1AE
Accent #2F5BFF · #5B7DFF

Moss

Paper #F2F3EE · #0D0F0C
Surface #FFFFFF · #161914
Sunken #E5E8DE · #1E221B
Ink #141712 · #F1F3EC
Muted #636A5C · #9CA394
Accent #3E7C4F · #5FA171

Rose

Paper #F6F3F2 · #0F0C0C
Surface #FFFFFF · #191515
Sunken #EDE6E4 · #221C1C
Ink #171313 · #F5F1F0
Muted #6E6462 · #A69B99
Accent #E0245E · #F0477A

Components

What each one does and where to change it.

Button

Button

Six variants: Primary, Dark, Outline, Light, On Accent, On Accent Outline. Each has a hover state.

Six variants: Primary, Dark, Outline, Light, On Accent, On Accent Outline. Each has a hover state.

Title, Link and Arrow on the instance.

Title, Link and Arrow on the instance.

Navigation

Navigation

Desktop, Phone and Phone Open. The phone menu opens as a drop-down panel.

Desktop, Phone and Phone Open. The phone menu opens as a drop-down panel.

Open the component to change the wordmark and links.

Open the component to change the wordmark and links.

Product Card

Product Card

Cover, badge, title, price, tagline and what the pack includes. Compact is the phone version.

Cover, badge, title, price, tagline and what the pack includes. Compact is the phone version.

Bound to the Products collection wherever it appears.

Bound to the Products collection wherever it appears.

Filter Tab

Filter Tab

A category pill with Default and Active states.

A category pill with Default and Active states.

Fed by the Categories collection on Home and Shop.

Fed by the Categories collection on Home and Shop.

Review Card

Review Card

A quote with avatar, name, role and the product it is about.

A quote with avatar, name, role and the product it is about.

Reviews collection.

Reviews collection.

FAQ Row

FAQ Row

An accordion row that opens and closes.

An accordion row that opens and closes.

FAQs collection.

FAQs collection.

Submit Button

Submit Button

Form button with Default, Pending and Success states.

Form button with Default, Pending and Success states.

Label on the instance; the states are variants.

Label on the instance; the states are variants.

Shelf

Shelf

The hero. Two rows of covers on a tilted plane that lies flat as the page scrolls, with tabs that regrade every cover.

The hero. Two rows of covers on a tilted plane that lies flat as the page scrolls, with tabs that regrade every cover.

Select it on Home: size, rows, tilt, drift, looks and Font are in the panel.

Select it on Home: size, rows, tilt, drift, looks and Font are in the panel.

Shelf Item

Shelf Item

An invisible feed. One sits in each hidden collection list and hands a product to Shelf or Shelf Tunnel with the same Group name.

An invisible feed. One sits in each hidden collection list and hands a product to Shelf or Shelf Tunnel with the same Group name.

Layers panel: Hero › Shelf › Shelf Feed, and Closing › Tunnel Feed.

Layers panel: Hero › Shelf › Shelf Feed, and Closing › Tunnel Feed.

Look Compare

Look Compare

A before and after slider. Tabs mode on Home; One look mode on product pages, where the grade comes from the product’s Demo Grade.

A before and after slider. Tabs mode on Home; One look mode on product pages, where the grade comes from the product’s Demo Grade.

Before photo, looks, labels and Font in the panel.

Before photo, looks, labels and Font in the panel.

Shelf Tunnel

Shelf Tunnel

The closing scene. Covers fly past, one per product lines up as a straight shelf, then the text settles in.

The closing scene. Covers fly past, one per product lines up as a straight shelf, then the text settles in.

Site Layout › Closing. The text is the Closing Content layer; turn the scene off per page with the Closing switch on the page.

Site Layout › Closing. The text is the Closing Content layer; turn the scene off per page with the Closing switch on the page.

Collections

Six collections. Everything repeatable comes from one of them.

Products

Products

Hero shelf, both shop grids, product pages, the More from the shop row and the closing shelf.

Hero shelf, both shop grids, product pages, the More from the shop row and the closing shelf.

Cover, Price, Category, Badge, Checkout Link, Highlights. Turn on Look Demo to show the slider on a product page.

Cover, Price, Category, Badge, Checkout Link, Highlights. Turn on Look Demo to show the slider on a product page.

Categories

Categories

The filter tabs on Home and Shop, and the category on each product.

The filter tabs on Home and Shop, and the category on each product.

Add a category and a tab appears.

Add a category and a tab appears.

Reviews

Reviews

The two rows of reviews on Home. The first four run in the top row, the next four in the second.

The two rows of reviews on Home. The first four run in the top row, the next four in the second.

Quote, Name, Role, Avatar, Product.

Quote, Name, Role, Avatar, Product.

FAQs

FAQs

The accordion on Home.

The accordion on Home.

Question and Answer.

Question and Answer.

Journal

Journal

The Journal page and each post.

The Journal page and each post.

Body is rich text; Date sets the order.

Body is rich text; Date sets the order.

Legal

Legal

Licence, Privacy policy and Terms of sale.

Licence, Privacy policy and Terms of sale.

Placeholder copy. Replace all three before selling.

Placeholder copy. Replace all three before selling.

House rules

Keep to these and new pages will look like the old ones.

1

Headings are two-tone: the first line in Ink, the second in Subtle. No italics for emphasis.

2

Labels, counters and navigation are in sentence case, never uppercase.

3

Accent is for one thing per screen: a button, a badge or a price.

4

Anything that links has a hover state. Cards and rows fade; nothing zooms.

5

The pricing cards, the Inside cards on Home and the About page are plain layers, not CMS content.

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