Style Guide
A living reference for colours, typography, and the building blocks used across the site — kept in sync as the design grows.
Text Styles
Heading One
Heading 1 · Coconat 400 · 72px
Heading One B
Heading 1b · Coconat 400 · 130px
Footer Heading
Heading 1c · Coconat 400 · 130px
Heading Two
Heading 2 · Coconat 400 · 48px
Heading Three
Heading 3 · Coconat 400 · 26px
Heading Four
Heading 4 · Coconat 400 · 22px
Heading Five
Heading 5 · Coconat 400 · 18px
Heading Six
Heading 6 · Coconat 400 · 16px
Body copy for paragraphs and descriptions.
Body · Satoshi 500 · 16px
Body 2 copy for paragraphs and descriptions.
Body 2 · Satoshi 500 · 14px
Body 3 copy for paragraphs and descriptions.
Body 3 · Satoshi 500 · 10px
Colours
Red
Red 01
#FFE3D9
Red 02
#F59D7D
Red 03
#DF4A25
Red 04
#A02521
Red 05
#450A08
Yellow
Yellow 01
#FCEDCF
Yellow 02
#E9C178
Yellow 03
#F3B141
Yellow 04
#B57629
Yellow 05
#4F300B
Green
Green 01
#EAFCD4
Green 02
#ADD57C
Green 03
#749855
Green 04
#31492F
Green 05
#111A10
Neutral
White
#FAF2F0
White 02
#BFAAA4
Grey 01
#8A736D
Grey 02
#4F4542
Black
#121212
Components
Drop buttons, nav items, and other UI components here for reference.
Cards
Drop feature cards, pricing cards, and testimonial cards here for reference.
Style Guide
A living reference for colours, typography, and the building blocks used across the site — kept in sync as the design grows.
Text Styles
Heading One
Heading 1 · Coconat 400 · 72px
Heading One B
Heading 1b · Coconat 400 · 130px
Footer Heading
Heading 1c · Coconat 400 · 130px
Heading Two
Heading 2 · Coconat 400 · 48px
Heading Three
Heading 3 · Coconat 400 · 26px
Heading Four
Heading 4 · Coconat 400 · 22px
Heading Five
Heading 5 · Coconat 400 · 18px
Heading Six
Heading 6 · Coconat 400 · 16px
Body copy for paragraphs and descriptions.
Body · Satoshi 500 · 16px
Body 2 copy for paragraphs and descriptions.
Body 2 · Satoshi 500 · 14px
Body 3 copy for paragraphs and descriptions.
Body 3 · Satoshi 500 · 10px
Colours
Red
Red 01
#FFE3D9
Red 02
#F59D7D
Red 03
#DF4A25
Red 04
#A02521
Red 05
#450A08
Yellow
Yellow 01
#FCEDCF
Yellow 02
#E9C178
Yellow 03
#F3B141
Yellow 04
#B57629
Yellow 05
#4F300B
Green
Green 01
#EAFCD4
Green 02
#ADD57C
Green 03
#749855
Green 04
#31492F
Green 05
#111A10
Neutral
White
#FAF2F0
White 02
#BFAAA4
Grey 01
#8A736D
Grey 02
#4F4542
Black
#121212
Components
Drop buttons, nav items, and other UI components here for reference.
Cards
Drop feature cards, pricing cards, and testimonial cards here for reference.
Style Guide
A living reference for colours, typography, and the building blocks used across the site — kept in sync as the design grows.
Text Styles
Heading One
Heading 1 · Coconat 400 · 72px
Heading One B
Heading 1b · Coconat 400 · 130px
Footer Heading
Heading 1c · Coconat 400 · 130px
Heading Two
Heading 2 · Coconat 400 · 48px
Heading Three
Heading 3 · Coconat 400 · 26px
Heading Four
Heading 4 · Coconat 400 · 22px
Heading Five
Heading 5 · Coconat 400 · 18px
Heading Six
Heading 6 · Coconat 400 · 16px
Body copy for paragraphs and descriptions.
Body · Satoshi 500 · 16px
Body 2 copy for paragraphs and descriptions.
Body 2 · Satoshi 500 · 14px
Body 3 copy for paragraphs and descriptions.
Body 3 · Satoshi 500 · 10px
Colours
Red
Red 01
#FFE3D9
Red 02
#F59D7D
Red 03
#DF4A25
Red 04
#A02521
Red 05
#450A08
Yellow
Yellow 01
#FCEDCF
Yellow 02
#E9C178
Yellow 03
#F3B141
Yellow 04
#B57629
Yellow 05
#4F300B
Green
Green 01
#EAFCD4
Green 02
#ADD57C
Green 03
#749855
Green 04
#31492F
Green 05
#111A10
Neutral
White
#FAF2F0
White 02
#BFAAA4
Grey 01
#8A736D
Grey 02
#4F4542
Black
#121212
Components
Drop buttons, nav items, and other UI components here for reference.
Cards
Drop feature cards, pricing cards, and testimonial cards here for reference.