Style guide
The design system
Every colour, text style and component in this template, on one page.
Colour
The palette
Paper
Paper 2
Sand
Sand Soft
Sand Tint
Sand Ink
Olive
Olive Deep
Ink
Muted
Line
Type
Judson, Inter and Licorice
Display 120
Page title 78
Heading 2 at 56
and the italic accent
Heading 3 at 30
since 2014
Lead paragraph, 19px Inter, used under every heading.
Body copy, 16px Inter, the workhorse of the template.
Eyebrow
Spacing
One scale for section padding, grid gaps and stacks.
Space 1
8px · icon gaps
Space 2
16px · inside a stack
Space 3
24px · page gutter, small gaps
Space 4
40px · grid gaps, card padding
Space 5
72px · under a section heading
Space 6
120px · section padding
Space 7
180px · hero and footer padding
Buttons, links and pills
Pill shaped throughout. The solid ones carry the drawn arrow.
Buttons
pill shaped, the solid ones carry the arrow icon
Book a free class
Sand
Light
See the schedule
Links
same size and colour, one carries the arrow
All six classes
All six classes
Pills
sentence case on a hairline, olive when it has to shout
All levels
60 min
4 min read
Members only
Components
Buttons, tags and cards
Primary
Ghost
Small
Tag
Unlimited
Unlimited classes
Any class on the schedule
Studio access & equipment
10% off workshops & retreats
€75
per month
Choose this plan
Photography
Photos carry the design: full bleed bands, a gallery that opens a lightbox and an Instagram row.
Bands run full bleed with a darkened overlay, the gallery re-flows when it is filtered and every tile opens in the lightbox.
Icons
One line weight throughout: 1.5px, round caps. The interface set drawn for this template, plus the four flowers from the studio brand.
arrow
chevron
close
menu
plus
check
phone
pin
clock
heart
sparkle
lotus
person
Decoration
Shape and motion
Four radii, one shadow, one easing curve.
Radius
10px inputs, 18px small cards, 30px photos and panels, pill buttons
10
18
30
pill
Shadow
photos only, never on the paper itself
card
hero
Motion
cubic-bezier(.2,.7,.2,1) everywhere
Entrances 0.9 to 1.3s, hovers 0.3 to 0.45s. Sections reveal with a stagger per card, photos drift inside their frame as you scroll, and everything stops at prefers-reduced-motion.