Style guide · Offcut
The kit, on one page.
Every colour, type style and component in Offcut. Change a token or style in Framer and the whole site follows.
Colour styles
Ink
Text, buttons
Cobalt
Accent, links
Paper
Page
Paper deep
Panels
Muted
Secondary text
Rule
Hairlines
Pencil
Notes
On cobalt
Text on accent
On dark
Text on ink
Text styles
Hero
Hero · Cut to fit
Title
Title · Work, trimmed
H2
H2 · A section heading
H3
H3 · A card heading
Body L
Body L · Lead paragraph, set a little larger than body.
Body
Body · The default paragraph, readable at any width.
Body Muted
Body Muted · Secondary copy.
Button
Button · Start a project
Label
Label · Small caps label
Price
Price · $2,400
Pencil Note
Pencil Note · scribbled aside
Numeral
01
Components
Sprint
€6,800
most booked
2 weeks · 10 working days
One focused problem, solved end to end
Two designers, full time
A 15-minute check-in every morning
Files, fonts and a handover call
One round of fixes after launch