Template / Style guide
Style guide.
Every color, type style and component in Swish. Change a style once in Assets and the whole site follows.
01
Colors
Color styles live in Assets. Accent is the only loud color: use it for actions, totals and the selected state.
Parquet
#DDBA8A
Page background
Ink
#121212
Text, borders, panels
Cream
#F2E6D3
Text on ink
Accent
#FF5B14
Actions and highlights
Muted on parquet
#4B4237
Secondary text
Muted on ink
Cream 70%
Secondary text on ink
Line on parquet
Ink 35%
Dividers
Line on ink
Cream 16%
Dividers on ink
Disabled
#6E604D
Taken slots
Wood ball
#C8965A
Footer balls
Ink hover
#2B2B2B
Hover on ink
Bar fill
#1E1E1E
Booking bar
02
Typography
Three families, each with one job. Big Shoulders shouts, Barlow explains, JetBrains Mono labels.
Display / H1 Hero
Big Shoulders 900 · 89px
Find a court.
Display / H2
Big Shoulders 900 · 89px
Book in five taps.
Display / H2 Panel
Big Shoulders 900 · 72px
Run it back.
Display / 52
Big Shoulders 900 · 52px
Chicago
Display / 32
Big Shoulders 900 · 32px
Pier 2 Rooftop
Body / Lead
Barlow 500 · 19px
Rooftops, gyms and park courts in 14 US cities.
Body / Body
Barlow 500 · 17px
Book by the hour, split the cost, or join an open run.
Body / Label
Barlow 700 · 17px
Players splitting
Body / Button
Barlow 700 · 16px
Book a court
Mono / Mono
JetBrains Mono 500 · 13px
Free cancellation up to 24 hours before.
03
Components
Native Framer components with variants. Pick the variant in the right panel, never restyle a single copy.
Button on parquet
Button on ink panel
Chip
Code components
City map, Booking module and FAQ board are code components. Their content and colors are edited in the right panel. The Guide explains each one.