1
Typeface · Geist
4
Font weights
18
Colour tokens
47
Icons · Lucide
3
Breakpoints
01 · Typography
Typography
One typeface, four weights. Tight negative tracking on headings, generous line height on body. Saved as Tidemark text styles.
Typeface
Aa
Geist
Free on Google Fonts · used for every heading, body line, label and number in the template. In Framer: Fonts → Google → Geist.
Market smarter.
Market smarter.
Market smarter.
Market smarter.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
0123456789 £$€%×+−→↗ &@#?!
Display XL
CTA headline
Let’s go higher.
132px · Bold
96% line · -6% tracking
Display L
Hero headline
Market Smarter.
84px · Bold
106% line · -4% tracking
Heading 1
Section titles
Four ways we move.
64px · Bold
100% line · -4.5% tracking
Heading 2
Section titles (compact)
Simple pricing.
52px · Bold
106% line · -4% tracking
Heading 3
Statements, intros
One growth engine.
48px · Bold
118% line · -3.5% tracking
Heading 4
Quotes, feature leads
Tidemark talks revenue.
32px · SemiBold
128% line · -2.5% tracking
Heading 5
Card & step titles
Growth plan
24px · Bold
120% line · -2% tracking
Heading 6
Card headers, groups
Revenue by channel
18px · SemiBold
135% line · -1% tracking
Body L
Lead paragraphs
SEO, paid media and content for growth brands.
18px · Regular
155% line · 0% tracking
Body M
Body copy
Every channel is tied to revenue, and budget follows what works.
16px · Regular
155% line · 0% tracking
Body S
Card text, table rows
Search is returning 5.2× vs 3.9× on Meta.
14px · Regular
150% line · 0% tracking
Button
Buttons, links
Get a free growth audit
15px · SemiBold
120% line · 0% tracking
Label
Pills, nav, meta
Northwind Coffee · 6 months
14px · Medium
130% line · 0% tracking
Overline
Eyebrows, table headers
Day 14 · Growth plan
12px · SemiBold
130% line · +8% tracking
Micro
Chart axes, footnotes
1 Sep · £8k · Week 4
11px · Medium
130% line · 0% tracking
02 · Colour
Colour
A cobalt-and-sky palette on clean neutrals. Use exact HEX values below; every swatch is saved as a Tidemark colour style.
Primary
Cobalt
#2463EB
AA 5.2
Links, accents, active states, highlighted words
Royal
#1C54E0
AA 6.2
Gradient end, hover & pressed states
Sky Blue
#3B7BFF
AA 4.7
Gradient start, glows
Deep Blue
#0A3D9A
AA 9.8
Shadows, overlays on photography
Neutrals
Ink
#0A1630
AA 17.9
Headings, body text, dark buttons
Background
#F3F5F8
AA 16.4
Page & alternate section background
Surface
#F6F8FB
AA 16.9
Inputs, table headers, chips
White
#FFFFFF
AA 17.9
Cards, panels, text on blue
Sky tints
Tint
#EAF1FF
AA 15.8
Icon chips, selected states, info strips
Sky
#CFE2FF
AA 13.7
Accent words in headlines on blue
Mist
#A9CBFF
AA 10.8
Charts, secondary data
Air
#5B9DFA
AA 6.5
Charts, logo tide, gradient end
Status
Success
#16A34A
AA 5.4
Positive change, live dots
Success Text
#15803D
AA 5.0
Text on success background
Success BG
#E8F7EE
AA 16.2
Delta badges, status pills
Warning
#F59E0B
AA 8.4
Ratings, testing status
Warning BG
#FEF3C7
AA 16.1
Testing pill background
Error
#EF4444
AA 4.8
Notification dots, errors
Gradients
Button
#3B7BFF → #1C54E0 · 180°
Primary buttons, active toggles
Panel
#1E6CF0 → #5B9DFA · 180°
Dashboard frame, feature panels
Night
#123E9E → #0A1E55 → #050A1F
Footer night sky
Numbers
#1C54E0 → #6AA8FF · 90°
Hero metrics like +68%
Aa Growth
Primary text
Ink 100%
Aa Growth
Secondary text
Ink 60%
Aa Growth
Muted / captions
Ink 45%
Borders
Ink 8%
Aa Growth
Accent text
Cobalt
03 · Buttons
Buttons
One button component with five types, four states and three sizes, plus pill, icon and text-link styles. Every CTA on the site uses these.
Types × states
Component set: Button
Primary
Secondary
Dark
Ghost
Glass
Default
Hover
Pressed
Disabled
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Get a growth audit
Sizes
Get started
Large · 56px · 28/18 padding
Get started
Medium · 48px · 22/14 padding
Get started
Small · 36px · 14/9 padding
Pill & icon buttons
Explore services
Circles 44–64px · arrows nudge 2px on hover
Text links
View all
All case studies
Book 20 minutes with Mara
Hover: arrow moves 2px, underline draws in 200ms
