Design system
The parts Instant is made of.
Colours, type, components and layout rules in one place. Change a style in Assets and it changes here and on every page.
Colours
36 colour styles in six folders.
Each swatch shows the colour of the mode you are in. Switch the Safelight in the menu to see the darkroom values.
Base
Table
#F2EDE4 · dark #0B0808
Page background, the paper table
Table Deep
#E8E1D4 · dark #150D0C
Alternate sections
Grid
#141414 5% · dark #FF503C 5%
Fine grid on the table
Glow
#FFFFFF 90% · dark #FF2814 22%
Light-table glow
Text
#141210 · dark #F6DCD5
Main text
Text Soft
#5F5A52 · dark #B98478
Secondary text and labels
Rule
#141210 14% · dark #FF7864 18%
Lines and borders
Shadow
#14100C 30% · dark #000000 70%
Print and card shadows
Print Frame
#FBFBF8 · dark #2A1A18
The paper of every print
Print Ink
#1A1A1A · dark #FFD1C6
Captions on prints
Print Ink Soft
#6E6C66 · dark #C27E70
Exposure lines
Undeveloped
#1E2B2E · dark #120B0B
A print before it develops
Peg
#C9A27A · dark #5A2E26
Pegs on the drying line
Booth Strip
#111111 · dark #000000
Photo-booth strip
Tape
#F0E4C8 75% · dark #F0E4C8 75%
Tape on the About photo
Name On Photo
#FBF6EC · dark #FBF6EC
Your name over the hero photo
Booth Date
#C9C9C2 · dark #C9C9C2
Date on the booth strip
Accent
Accent
#C4321B · dark #FF3B22
Buttons, labels, the red bands
On Accent
#FFF6EC · dark #1A0806
Text on red
Lab Red
#A82E1A · dark #FF5A40
Stamps and the order number
Wall Accent
#FF6A4F · dark #FF5A40
Red labels on the dark wall
Envelope
Envelope
#E9D9B8 · dark #3A1C16
The booking envelope
Envelope Ink
#2A2218 · dark #FFD1C6
Text on the envelope
Flap Shade
#000000 16% · dark #000000 16%
Envelope flaps
Series
Salt
#2470A0 · dark #1C0F0D
Pack card, blue
On Salt
#F6EFE3 · dark #FFD1C6
Text on blue
Night
#161112 · dark #120A0A
Pack card, night
On Night
#F6E6DE · dark #FFD1C6
Text on night
Butter
#EEB53A · dark #24120F
Pack card, yellow
On Butter
#1A1408 · dark #FFD1C6
Text on yellow
Tomato
#C4321B · dark #3A0D07
Pack card, red
On Tomato
#FFF3E8 · dark #FFD1C6
Text on red card
Darkroom
Darkroom Wall
#121010 · dark #060404
Dark sections (the drying line)
On Wall
#F2EDE4 · dark #FFD1C6
Text on the dark wall
Series Panel
#1C0F0D · dark #1C0F0D
Series panels in darkroom mode
Series Panel Ink
#FFD1C6 · dark #FFD1C6
Their text in darkroom mode
Type
28 text styles, five screen sizes each.
Every style already has a size for Large, Desktop, Laptop, Tablet and Phone. Pick a new font in a style and it carries through everywhere.
Hero
118px desktop · 52px phone
Display
84px desktop · 42px phone
Series Title
64px desktop · 40px phone
Title
34px desktop · 28px phone
Kit
22px desktop · 20px phone
Twin-lens 6×6
Price
40px desktop · 36px phone
Logo
26px desktop · 24px phone
Clients
24px desktop · 20px phone
Footer Name
220px desktop · 84px phone
Lead
19px desktop · 17px phone
Body
17px desktop · 16px phone
Body Ink
17px desktop · 16px phone
Small
15px desktop · 15px phone
Button
15px desktop · 15px phone
Nav
14px desktop · 16px phone
Text Link
15px desktop · 15px phone
Label
12px desktop · 11px phone
Meta
12px desktop · 11px phone
Accent Label
12px desktop · 11px phone
Mono
18px desktop · 16px phone
Hand
24px desktop · 21px phone
Section
128px desktop · 56px phone
About Title
104px desktop · 52px phone
Box Number
150px desktop · 96px phone
Box Title
36px desktop · 30px phone
Box Price
30px desktop · 28px phone
Story
20px desktop · 18px phone
Story Heading
40px desktop · 30px phone
Components
Effects with settings, not code.
Select any of them on the canvas and change it in the right panel. The list says what each one does and what you can set.
Hero Print
The first screen: one big instant print with your name, a tagline and a red shutter that develops the next photo.
Settings
Items (photo, caption, exposure, Focus X, Focus Y), Name, Label, Tagline, Pack Size, Offset, Min Photo, Tilt, Flash
Instant Print
One print with a caption and an exposure line. Develops from grey the first time it is seen; red in the darkroom until hovered.
Settings
Image, Caption, Exposure, Format (square, wide, tall), Tilt, Develop, colours, fonts
Drying Line
Prints hanging on a line with wooden pegs, swaying a little. Drag or swipe to see more.
Settings
Items, Square Width, Wide Width, Content Width, Sway, Line, Peg
Series Panel
A series as a full-colour panel with its number in outline, the text and four prints. In a list they stack as you scroll.
Settings
Number, Title, Summary, Photos 1–4, Colour, Colour Ink, Dark Colour, Dark Ink, Link, Title Tag
Booth Strip
A photo-booth strip of up to four frames with the date printed at the bottom.
Settings
Photos 1–4, Date, Tilt, Black And White, Strip, Date Color
Marquee
The band of words that runs across the Home.
Settings
Words, Speed, Size, Fill, Text, Font
Photo Type
Your name cut out of a photo that pans slowly, used in the footer.
Settings
Text, Image, Dark Image, Size, Pan, Tag, Font
Light Table & Film Grain
The paper table behind every page and the grain on top. Both are the same component with a different Layer.
Settings
Layer, Grid, Glow, Cell, Grain
Safelight
The darkroom switch in the menu. Remembers each visitor’s choice.
Settings
Label, Compact, Text, Border, Off, On, Mono Font
Buttons
Solid, Line and Small, each with a hover state. The booking form uses its own Submit Button with Loading, Success and Error states.
Settings
Variant, Label, Link
Navigation
The menu: Desktop, Tablet and Phone, plus the open drawer on tablets and phones.
Settings
Edit the links inside the component
Print Pile & Print Scatter
Two spare layouts, not used on the pages: a pile you click through and prints scattered on the table.
Settings
Items and the print look
Layout
A few rules keep every page in the same voice.
Follow them when you add a section and it will look like it was always there.
Width
Content is 1,328 px wide (1,720 on Large screens), with 40 px at the sides, 24 on tablets and 16 on phones. Coloured bands run edge to edge.
Spacing
Sections breathe 100 px top and bottom on desktop, a bit less on smaller screens. Headings sit 20–40 px above their content.
Prints
Paper frame, a 3–6° tilt and a long soft shadow. Captions in the hand font, exposure lines in mono.
Corners
Cards and panels use 22–30 px corners; buttons and the menu switch are pills.
Type
Gloock for headings, Hanken Grotesk for reading, DM Mono for labels and Covered By Your Grace for captions.
Darkroom
Every colour style has a darkroom value. Prints switch to the red safelight tint and light up when hovered or tapped.