Template
Style guide
The colours, type, buttons and fields every Oaken page is built from.
Version 1.0
Colours
Fourteen colours. Pages use them through the colour styles in the Assets panel, named by role.
Cream
#F1EDE6
Sand
#E6DFD3
Line
#D6CFC3
White
#FFFFFF
Ink
#191816
Night
#1B1A17
Coal
#34322E
Graphite
#3A3833
Smoke
#4A4741
Stone
#66615A
Ash
#A39C90
Clay
#9A5A3C
Sage
#7C8670
Mist
#C3CDD3
Typography
Geist for headlines and interface, Newsreader for editorial text. Sizes step down on tablet and phone, and the logo and wordmark styles appear in the navigation and footer.
H1 / All H1 Headings
Display/XL, Geist Light
Heading H1
H2 / All H2 Headings
Display/L, Geist Light
Heading H2
H3 / All H3 Headings
Display/M, Geist Light
Heading H3
H4 / All H4 Headings
Heading/M, Geist Regular
Heading H4
H5 / All H5 Headings
Heading/S, Geist Regular
Heading H5
H6 / All H6 Headings
Body/L, Geist Regular
Heading H6
Display/Mega
Geist Light, uppercase
Strong
Display/XL
Geist Light
Train for life
Display/L
Geist Light
Your first week
Display/M
Geist Light
Programs
Number/XL
Geist Light
+40
Number/L
Geist Light
12
Serif/XL
Newsreader Light
Strength you keep
Serif/L
Newsreader Light
We coach strength, mobility and recovery.
Serif/Quote
Newsreader Light
I lift more at 52 than at 30.
Heading/M
Geist Regular
Small groups, one coach
Heading/S
Geist Regular
Small groups, one coach
Body/L
Geist Regular
Eight people a class, so your coach sees every rep.
Body/M
Geist Regular
Barbells and kettlebells in groups of eight.
Body/S
Geist Regular
Saturday run club, 7:30
Body/S Medium
Geist Medium
Claim your free week
Rich text
Every element of a Rich Text block, styled by the text styles. Journal notes in the CMS use the same styles.
Heading 1, strength that lasts
Heading 2, coached in small groups
Heading 3, a plan written for you
Heading 4, eight people per class
Heading 5, slow progress, written down
Heading 6, open every day from 6:00
A paragraph sits under every heading. It holds bold text, italic text and a link to the timetable, so notes and legal pages read the same way as the rest of the site.
• An unordered list item
• A second item, kept short
• A third item to show the rhythm
1. An ordered list item
2. The second step
3. The third step
Strength is a skill. We teach it slowly, and it stays.
A figure with its caption, in Body/S and Text/Secondary.
Buttons and links
One pill in three styles, a text link and the labels used across the site.
Pill, dark
Pill, light
Pill, line
Text link
Section label
Programs
Menu
Menu
Form
Underlined fields and text choices, as on Contact and Free week.
Icons
Eleven line icons, from the Lucide set, at 16 px in a 40 px circle.
Arrow right
Arrow up right
Arrow up
Plus
Minus
Check
Close
Chevron down
Menu
Pause
Expand