Typography

Text Size Variations


H1

Type Something

Barlow Bold / 48 / 6
Line height: Auto
Paragraph spacing: 0


H2

Type Something

Barlow Bold / 40 / 5
Line height: Auto
Paragraph spacing: 0


H3

Type Something

Barlow Bold / 21 / 3
Line height: Auto
Paragraph spacing: 0


H4

Type Something

Barlow Medium / 17 / 3
Line height: Auto
Paragraph spacing: 0


H5

Type Something

Anonymous Pro Bold / 14 / 2
Line height: Auto
Paragraph spacing: 0


H6

Type Something

Barlow Medium / 12 / 3
Line height: Auto
Paragraph spacing: 0


Paragraph Text

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.

Secondary Paragraph Text

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. 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.

Link

This is a paragraph with a text link to show the hover state


Typography

Alignment


The quick brown fox jumped over the lazy dog.


The quick brown fox jumped over the lazy dog.


The quick brown fox jumped over the lazy dog.

Typography

Font Family


Anonymnous Pro: This is the default text size with no class added. 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. 


Barlow: This is the default text size with no class added. 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. 


Typography

Font Weight

For a font weight to work it needs to be included in the font. Some fonts have all variations like Open Sans or System UI. Others do not so make sure the relevant font weight is added to Webflow


The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

Typography

Transform


The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.


Colours

Black #000000
Transparency: 100%
Used for: Buttons, copyright banner

White #FFFFFF
Transparency: 100%

Dark grey #BBB9B9
Transparency: 100%
Used for: Banners

Grey #D8D8D8
Transparency: 100%
Used for: Outlines

Light grey #F3F3F3
Transparency: 100%
Used for: Banners, half-screen backgrounds on shop pages


Buttons

Button

W 200 / H 30
Anonymous Pro Bold / 16 / 2/ #FFFFFF
Fill #000000 / 100%

Button

W 200 / H 25
Anonymous Pro Regular / 12 / 2
Outline #D8D8D8 / 100%
Fill  #FFFFFF / 100%


Spacing

Normal Big

Candle Care

When using your candle

35
Used: Between headings and subheadings, between images and headings

Normal Small

When using your candle

The first burn is the most important

19
Used: Between subheadings and paragraph text, between images and headings

Large

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.

Reusing your glass jar

89
Used: Between sections of text, between text and banners, above every footer

Small

Reusing your glass jar

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.

7
Used: Between line breaks and text


Media

Spruce: Evergreen native to Scandinavia
A green, woody, balsamic note with a fresh undertone