Skip to content
Wilderness Logo

Styleguide

Sections

Styleguide





Colours




Primary

Secondary

Tertiary

Quaternary

Grey Extra Dark

Grey Dark

Grey

Grey Light

Validation Error

Validation Success





Typography




Heading H0
Lorem ipsum dolor sit amet

Font: Montserrat Black | Line height: 90% | Letter spacing: -0.02em



Heading H1
Lorem ipsum dolor sit amet

Font: Montserrat Black | Line height: 90% | Letter spacing: -0.02em



Heading H2
Lorem ipsum dolor sit amet

Font: Montserrat Black | Line height: 90% | Letter spacing: -0.02em



Heading H3
Lorem ipsum dolor sit amet

Font: Montserrat Black | Line height: 90% | Letter spacing: -0.02em



Heading H4
Lorem ipsum dolor sit amet
Font: Montserrat Black | Line height: 90% | Letter spacing: -0.02em



Heading H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Black | Line height: 100% | Letter spacing: -0.02em



Heading H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Black | Line height: 100% | Letter spacing: -0.02em



Heading Eyebrow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Black | Line height: 100% | Letter spacing: 0.05em



Content Extra Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Medium | Line height: 150% | Letter spacing: -0.01em



Content Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Medium | Line height: 150% | Letter spacing: -0.01em



Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Medium | Line height: 150% | Letter spacing: -0.01em



Content Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Medium | Line height: 150% | Letter spacing: -0.01em



Content Extra Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Montserrat Medium | Line height: 150% | Letter spacing: -0.01em




Icons








Buttons






Icon button
















Form




This is a form
Radio field
Checkbox field

Error message

  • Error message list item
  • Error message list item

Success message

  • Success message list item
  • Success message list item




Space




xs
s
m
l
xl
2xl
3xl
4xl
5xl




CMS Content





H1 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H5 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An ordered list is a list in where the sequence of items is important

Big text

Small text

Bold text

Italic text

Footnote text which is the smallest text that can be used

Anchor link

This text contains subscript text.

This text contains superscript text.

Primary brand colour highlight text

Primary brand colour highlight text

Secondary brand colour highlight text

Secondary brand colour highlight text

Dark colour highlight text

Dark colour highlight text