Style Guide

Typography

Standard Fonts and Sizing

Heading H1 (or .heading--alpha)

Heading H2 (or .heading--beta)

Heading H3 (or .heading--gamma)

Heading H4 (or .heading--delta)

Body Text

Small Body Text

Colours

Standard Site Colours

Orange
(.xxxx-orange)

Primary
(.xxxx-primary)

Gray
(.xxxx-gray)
Gray Light
(.xxxx-gray-light)
Gray Lighter
(.xxxx-gray-lighter)

Icons

Custom icons set up as a web font

arrow-down
arrow-left
arrow-right
arrow-up
icon-blinds
icon-close
icon-email
icon-facebook
icon-instagram
icon-location
icon-measure
icon-menu
icon-phone
icon-quality
icon-search
icon-star
icon-youtube

Markdown

Apply class .markdown to the parent container of editable content.
This will avoid the need to add tailwind classes on everything and retains consistency.

Heading 1 (or .heading--alpha)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra justo nec ultrices. Dictum sit amet justo donec enim diam vulputate.

Morbi leo urna molestie at elementum eu facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis. Orci nulla pellentesque dignissim enim sit amet. In vitae turpis massa sed elementum tempus egestas sed sed. Molestie ac feugiat sed lectus. Sit amet massa vitae tortor condimentum lacinia.

Heading 2 (or .heading--beta)

Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Cursus eget nunc scelerisque viverra mauris in aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada.

Heading 3 (or .heading--gamma)

Ornare lectus sit amet est. Mattis pellentesque id nibh tortor id aliquet lectus proin. Ut eu sem integer vitae. Tristique senectus et netus et malesuada. Sit amet facilisis magna etiam tempor. Vitae ultricies leo integer malesuada nunc vel. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque.

  • Nunc lobortis mattis aliquam faucibus purus in
  • Feugiat sed lectus vestibulum
  • Lectus vestibulum mattis ullamcorper

Heading 4 (or .heading--delta)

Varius vel pharetra vel turpis nunc eget lorem dolor. Venenatis tellus in metus vulputate eu scelerisque felis. Fringilla est ullamcorper eget nulla facilisi etiam.

  1. Nunc lobortis mattis aliquam faucibus purus in
  2. Feugiat sed lectus vestibulum
  3. Lectus vestibulum mattis ullamcorper

Mi bibendum neque egestas congue quisque egestas diam in. Tincidunt lobortis feugiat vivamus at augue eget arcu. Nibh sit amet commodo nulla facilisi nullam vehicula.