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