Style Guide
Edit these styles and UI elements here and the changes will be reflected throughout the library. To update text, colour and shadow styles, use the Figma styles panel on the right hand side of your screen. To update UI elements, edit the master components on this page.
Typography
Typeface
PP Agrandir Variable
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Font: PP Agrandir Variable | Weight: Regular | Font size: 72px | Line height: 110%
Heading-style-h1 in Webflow styleguide

Heading 1

Font: PP Agrandir Variable | Weight: Regular | Font size: 48px | Line height: 110%
Heading-style-h2 in Webflow styleguide

Heading 2

Font: PP Agrandir Variable | Weight: Regular | Font size: 36px | Line height: 110%
Heading-style-h3 in Webflow styleguide

Heading 3

Font: SPP Agrandir Variable | Weight: Regular | Font size: 24px | Line height: 130%
Heading-style-h4 in Webflow styleguide

Heading 4

Font: PP Agrandir Variable | Weight: Regular | Font size: 18px | Line height: 140%
Heading-style-h5 in Webflow styleguide
Heading 5
Font: PP Agrandir Variable

Weight: Regular

Font size: 14px

Line height: 150%
Body Regular
Font: PP Agrandir Variable

Weight: Medium

Font size: 14px

Line height: 150%
Body Regular / Button
Font: PP Agrandir Variable

Weight: Regular

Font size: 18px
Line height: 150%
Body Large
Font: PP Agrandir Variable

Weight: Regular

Font size: 24px
Line height: 140%
Body Hero
Font: PP Agrandir Variable

Weight: Medium

Font size: 36px

Line height: 140%
Quote / Bold
Font: PP Agrandir Variable

Weight: Italic

Font size: 48px

Line height: 140%
Quote / Italic
Color
Aa
Surface / Default
#FFFFFF
Aa
Surface / 1 Light Eucalyptus
#F5F4F3
Aa
Text / Default
#202223
Aa
Text / Subdued
#A2A4A4
Aa
Text On Dark / Default
#FFFFFF
Aa
Icon / Default
#202223
Aa
Icon on Dark / Default
#FFFFFF
Aa
Action Primary / Default
#6B7D7F
Aa
Action Primary / Hover
#5F7173
Aa
Action Primary / Pressed
#536466
Aa
Action Primary / Depressed
#445456
Aa
Action Primary / Disabled
#E9E9E9
Aa
Action Secondary / Default
#FFFFFF
Aa
Action Secondary / Hover
#5F7173
Aa
Action Secondary / Pressed
#536466
Aa
Action Secondary / Depressed
#445456
Aa
Action Secondary / Disabled
#E9E9E9
Aa
Border / Default
#1B1C1C
Aa
Border / Disabled
#D3D3D3
Aa
Border on Dark / Default
#FFFFFF
UI Elements
Buttons
Primary
Secondary
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Book Now
Text Fields
Title
Placeholder
Title
Select one...
Title
Type your message...