Style guide · for whoever edits this site
What Morrow is made of
01
Colour
Seven colour styles, under Assets > Colors. Change one and every layer that uses it changes with it. Grease pencil is the one accent: keep it for the loop, the current frame and links that matter.
Paper
rgb(242, 239, 233)
Ink
rgb(20, 20, 19)
Muted
rgb(110, 106, 99)
Line
rgba(20, 20, 19, 0.14)
Grease pencil
rgb(210, 49, 31)
Night
rgb(14, 14, 13)
Paper dim
rgba(242, 239, 233, 0.62)
02
Type
Instrument Serif for titles, Geist for reading and Geist Mono for labels and frame numbers, all from Google Fonts. Six text styles, under Assets > Text.
Display · Instrument Serif 76
Salt Roads
Heading 2 · Instrument Serif 56
A few commissions a year
Heading 3 · Instrument Serif 34
The edit, online, within ten days
Lead · Geist 21
Long projects made over seasons, most of them on film.
Body · Geist 16
Every quote is a fixed price for the whole job: days on location, editing, delivery and the rights you need.
Label · Geist Mono 11
Frame 14A · Bay of Cádiz · 2025
03
Motion
Contact sheet (Home)
The signature. The sheet pins, the grease-pencil loop draws round one frame, the others dim and that frame grows to fill the screen. Code component ContactSheet.tsx: pick the frame, title, link and pencil colour in its controls.
Series viewer
Click a photo on a series page to step through the series full screen. The withSeriesViewer override on the gallery grid (SeriesViewer.tsx).
Reveals
Text and photos rise 24 to 32 px and fade in as they enter the screen: 0.9 s, ease 0.22, 1, 0.36, 1. Change them in each layer’s Appear effect.
Smooth scroll
Wheel scrolling eases on desktop. Touch, keyboard and reduced-motion visitors get normal scrolling. The Smooth scroll layer in the Site layout has one Smoothness control.
04
Spacing and layout
Breakpoints
Desktop from 1200 px, tablet 810 to 1199, phone up to 809. Every page has all three.
Sections
120 px above and 120 to 140 px below on desktop, 96 on tablet, 64 to 88 on phone. Sides 40, 28 and 20 px. Content stops at 1280 px wide.
Photos
Gallery photos sit in a grid of 3, 2 and 1 columns with 16 px gaps. Upload at least 1600 px on the long side; Framer makes the smaller sizes.