Template guide
Everything you can change, and where it lives.
Instant is built so you can make it yours without code. Start with colours and fonts, then add your series and notes in the CMS. Most changes take a few minutes.
2
CMS collections
36
colour styles
28
text styles
12
components with settings
5
screen sizes
Make it yours
Start with colour and type.
01
Colours
36 colour styles in six folders: Base for the paper table and text, Print for the frames and ink, Accent for the red, Envelope for the booking form, Series for each series colour and Darkroom for the dark sections. Each one has a light and a darkroom value.
Where
Assets → Colors
02
Fonts & sizes
Gloock for titles, Hanken Grotesk for text and DM Mono for labels, set in 28 text styles with a size for every screen. The handwriting on the prints is Covered By Your Grace: change it in each print’s Hand Font.
Where
Assets → Text Styles
03
Your name
The name sits in four places: the logo in the menu, the big name on the hero photo, the photo-filled name in the footer and the copyright line. The hero also holds your label and tagline.
Where
Navigation component, Home → Hero Print, Main Layout
04
Menu & footer
The menu, the phone drawer, the footer, the paper texture and the film grain live in one layout that every page uses. Edit them once.
Where
Pages → Main Layout
05
Screen sizes
Every page has five sizes: Large (1800 px and up), Desktop, Laptop, Tablet and Phone. Edit Desktop first; the others follow unless you change something on them.
Where
The breakpoints above each page
06
Email & links
Your email shows on the booking section and in the footer. Instagram, Are.na and Email in the footer are plain links: point them at your own pages.
Where
Home → Book, Main Layout → Footer
Your photos
Most of the site comes from the CMS.
07
Series
Each series is a CMS item with its own page: the colour panel, a contact sheet of four photos, the story and the next series. Colour and Ink set the panel; a darker panel is used in the darkroom. The Home shows the first four.
Where
CMS → Series
08
Journal
Notes have a cover, two more photos with captions, a category and a date. The newest one leads the Journal page and the Home shows the latest three.
Where
CMS → Journal
09
Hero photos
The first screen is one big instant print. Its Items hold up to 24 photos, each with a caption, an exposure line and a focus (the part kept in view on phones); the red shutter takes the next one. Pack Size sets the “Exposure 1 of 10” count.
Where
Home → Hero Print → Items
10
Drying line
The prints hanging on the line are the Drying Line’s Items: photo, caption, exposure and a Wide switch for landscape prints. Visitors drag or swipe the line.
Where
Home → Drying Line → Items
11
Packs & prices
The three packs are plain layers on the Home: number of exposures, title, price, what is included and the button. Change the text in place; the two small prints on each pack are regular print components.
Where
Home → Packs
12
Booking form
The lab envelope is a native Framer form. Select it to choose where requests go, and edit the options of “What are we shooting?”. The order number in the corner is plain text.
Where
Home → Book → Order Form
Effects & launch
The film tricks have settings too.
13
Developing prints
Prints fade in from grey the first time they scroll into view. Turn it off per print with Develop. The hero develops as the page opens.
Where
Select a print → Develop
14
Darkroom mode
The Safelight switch in the menu turns the site into a darkroom and remembers the choice. Prints take a red safelight tint until you hover them. Darkroom colours are the dark values of each colour style.
Where
Menu → Safelight; Assets → Colors
15
Keep the small script
Site Settings → Custom Code holds a short script that applies the visitor’s saved mode before the page is drawn, so a darkroom visit never flashes light. Keep it.
Where
Site Settings → General → Custom Code
16
Other effects
The red word band, the photo-filled name in the footer, the booth strip, the paper texture and the film grain are components with colour, size and speed settings.
Where
Select one → right panel
17
Accessibility
Text colours pass WCAG AA (4.5:1) in both modes, the form fields have labels, and series panels deepen their colour on their own when the text would get too light.
Where
Assets → Colors
18
Before you publish
Add your favicon, social image and site title, then check each page’s title and description. Turn search engines on in Site Settings when you are ready, and keep this guide and the design system page hidden.
Where
Site Settings and each page’s settings
Ready?
Load your own film.
Back to the home page