Headings
Heading H1
H1 - Syne - 700 - 38px - 1.2
Heading H2
H2 - Syne - 700 - 38px - 1.2
Heading H3
H3 - Syne - 700- 38px - 1.2
Heading H4
H4 - Syne - 700 - 38px - 1.2
Heading H5
H5 - Syne - 700 - 38px - 1.2
Heading H6
H6 - Syne - 700 - 38px - 1.2
Typography
Typography style guide - all texts
Paragraph
main-paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
p - Public Sans - 400 - 24px - 1.2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
p - Public Sans - 400 - 32px - 1.5 | .extended-lh
Texts
Paragraph Regular
p - Public Sans - 400 - 14px - 1.2
p - Public Sans - 400 - 14px - 1.5 | .extended-lh
Bold
strong - Public Sans - 700 - 14px - 1.2
Italic
italic - Public Sans - 700 - 14px - 1.2
Lists
- List Item 1
- List Item 2
- List Item 3
ul - Public Sans - 400 - 14px - 1.2
- List Item 1
- List Item 2
- List Item 3
ol - Public Sans - 400 - 14px - 1.2
Colours
Colors
Warm Colours
Cards
buttons
Utilities
Typography style guide - all texts
Paddings
Padding Large
.padding-large | 30px
Padding Medium
.padding-medium | 20px
Padding Small
.padding-small | 10px
Padding Vertical Large
.padding-vertical-large | 30px
Padding Vertical Medium
.padding-vertical-medium | 20px
Padding Vertical Small
.padding-vertical-small | 10px
Padding Horizontal Large
.padding-horizontal-large | 30px
Padding Horizontal Medium
.padding-horizontal-medium | 20px
Padding Horizontal Small
.padding-horizontal-small | 10px
Margins
Margin Large
.margin-large | 30px
Margin Medium
.margin-medium | 20px
Margin Small
.margin-small | 10px
Margin Vertical Large
.margin-vertical-large | 30px
Margin Vertical Medium
.margin-vertical-medium | 20px
Margin Vertical Small
.margin-vertical-small | 10px
Margin Horizontal Large
.margin-horizontal-large | 30px
Margin Horizontal Medium
.margin-horizontal-medium | 20px
Margin Horizontal Small
.margin-horizontal-small | 10px
