Style Guide
Type Scaling
DESKTOP
Heading 1
Montserrat, Semibold 56
Heading 2
Montserrat, Semibold 48
Heading 3
Montserrat, Semibold 40
Heading 4
Montserrat, Semibold 32
Heading 5
Montserrat, Semibold 24
Heading 6
Montserrat, Semibold 20
TABLET
Heading 1
Montserrat, Semibold 56
Heading 2
Montserrat, Semibold 48
Heading 3
Montserrat, Semibold 40
Heading 4
Montserrat, Semibold 32
Heading 5
Montserrat, Semibold 24
Heading 6
Montserrat, Semibold 20
MOBILE
Heading 1
Montserrat, Semibold 40
Heading 2
Montserrat, Semibold 32
Heading 3
Montserrat, Semibold 24
Heading 4
Montserrat, Semibold 20
Paragraph
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Open Sans, Regular 24
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Open Sans, Regular 20
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Open Sans, Regular 18
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Open Sans, Regular 16
Colour
*To change the colours, update the variables accordingly.
DC9746
E4DCCB
F5F1E9
1C1B1A
Section Padding
*Change breakpoints to see the change in size.
*You can also combine section paddings by adding "t" for top and "b" for bottom; e.g. padding-section-t184-b144
*You can also combine section paddings by adding "t" for top and "b" for bottom; e.g. padding-section-t184-b144
padding-section-224
padding-section-184
padding-section-144
padding-section-112
padding-section-96
padding-section-80
padding-section-64
Buttons
*Use the component and update accordingly.
Dropdown
*Use the component and update accordingly.
Dropdown Label
Dropdown Label
Dropdown Label