style guide

Colour Palette

Primary colours
secondary colours

Typography

heading style

Heebo

This is Headline 1

Headline 1

font size: 36px • character spacing: 0.5 • line height: 57px

This is Headline 2

headline 2

font size: 32px • character spacing: 0.5 • line height: 39px

This is Headline 3

HEADLINE 3

font size: 24px • character spacing: 0.5 • line height: 29px

This is Headline 4

HEADLINE 4

font size: 18px • character spacing: 0.5 • line height: 27px

This is Headline 5

HEADLINE 5

FONT SIZE: 14PX • CHARACTER SPACING: 2 • LINE HEIGHT: 24PX

This is Headline 6

HEADLINE 6

font size: 14px • character spacing: 2 • line height: 24px

body style

Muli

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.

default paragraph

FONT SIZE: 16PX • CHARACTER SPACING: 0 • LINE HEIGHT: 24PX

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.

small paragraph

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

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.

emphasis text

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

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.

caption text

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

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.

block quote

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

Forms & Buttons

form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
default buttons
Button Text

solid button

Button Text

outline button

text button

text button

reversed buttons
Button Text

solid button

Button Text

outline button

text button

text button

Icons

Icon set

Icons are supplied in 64×64 dimension in pixel perfect form to ensure proper scaling and usability in every screen sizes.