Style guide
Tokens and components
Everything on the site is built from these. Values are the project styles.
Colour
Background
#f2f4f8
Surface
#ffffff
Surface Soft
#e7ebf2
Text
#0e1726
Text Muted
#44506a
Line
#d9dee8
Accent
#d4421f
Accent Hover
#b53519
Navy
#12233f
Navy Soft
#1c3358
On Navy Muted
#b7c1d6
Accent on Navy
#ff8a6b
Type
Display / H1 / 92 / 68 / 48 / Bricolage Grotesque
Calm, precise dentistry
H2 / 56 / 44 / 36 / Bricolage Grotesque
Calm, precise dentistry
H3 / 32 / 28 / 24 / Bricolage Grotesque
Calm, precise dentistry
H4 / 24 / 22 / 20 / Bricolage Grotesque
Calm, precise dentistry
Lead / 21 / 19 / 18 / Figtree
Calm, precise dentistry
Body / 17 / 17 / 16 / Figtree
Calm, precise dentistry
Small / 14 / Figtree
Calm, precise dentistry
Mono / 12.5 / JetBrains Mono
Calm, precise dentistry
Buttons and tags
Prevention
New
On dark
Form states
Default
Helper text sits below.
Error
Please enter a valid email address.
FAQ item
Do you offer payment plans?
Yes, interest-free for up to 12 months on treatments over $500.
Icons (Phosphor)
arrow-up-right
phone
clock
map-pin
calendar-blank
tooth
shield-check
scan
credit-card
star
check
x
Radius and lines
4 px, cards
6 px, buttons
pill, tags only
Footer credit
The bottom bar of the footer carries a small, muted credit line with a link to the author. It is intentional and optional: the template is free, and you may delete the line from the Footer component.