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.
How to use the Style Guide ->
Typography
Typeface
Roboto
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Font size: 56px / 3.5rem | Line height: 120%
Heading-style-h1 in Webflow styleguide
Heading 1
Font size: 48px / 3rem | Line height: 120%
Heading-style-h2 in Webflow styleguide
Heading 2
Font size: 40px / 2.5rem | Line height: 120%
Heading-style-h3 in Webflow styleguide
Heading 3
Font size: 32px / 2rem | Line height: 130%
Heading-style-h4 in Webflow styleguide
Heading 4
Font size: 24px / 1.5rem | Line height: 140%
Heading-style-h5 in Webflow styleguide
Heading 5
Font size: 20px / 1.25rem | Line height: 140%
Heading-style-h6 in Webflow styleguide
Heading 6
Font size: 20px / 1.25rem
Line height: 150%
Text large Extra bold
Text large Bold
Text large Semi bold
Text large Medium
Text large Normal
Text large Light
Font size: 18px / 1.125rem
Line height: 150%
Text medium Extra bold
Text medium Bold
Text medium Semi Bold
Text medium Medium
Text medium Normal
Text medium Light
Font size: 16px / 1rem 
Line height: 150%
Text regular Extra bold
Text regular Bold
Text regular Semi Bold
Text regular Medium
Text regular Normal
Text regular Light
Font size: 14px / 0.875rem 
Line height: 150%
Text small Extra bold
Text small Bold
Text small Semi Bold
Text small Medium
Text small Normal
Text small Light
Font size: 12px / 0.75rem 
Line height: 150%
Text tiny Extra bold
Text tiny Bold
Text tiny Semi Bold
Text tiny Medium
Text tiny Normal
Text tiny Light
Tip
To update text and color styles quickly, use the Batch Styler plugin.
Batch Styler Plugin ->
Primary Color
Aa
Guardian Green
#78be16
Aa
Dew Drop
#048dd2
Aa
Deep Water
#004b94
Aa
Sun Beam
#ffe100
Color
Aa
Black
#000000
Aa
White
#FFFFFF
Aa
Light Grey
#F4F4F4
Shadows
xxsmall
xsmall
small
medium
large
xlarge
xxlarge