x

Style Guide

Powered by the team at HUSL

Colors

$darker-purple

$purple

$neutral

$green

$blue

$orange

Typography

H1 header

(>1025px) 48px/60px, (1024-768px) 48px/48px, (<767px) 30px/30px

H2 header

(>1025px) 30px/30px, (1024-768px) 30px/30px, (<767px) 24px/30px

H3 header

(>1025px) 24px/30px, (1024-768px) 24px/30px, (<767px) 21px/28px

H4 header

(>1025px) 21px/30px, (1024-768px) 21px/30px, (<767px) 18px/28px

H5 header

(>1025px) 18px/28px, (1024-768px) 18px/28px, (<767px) 18px/28px

H6 header

(>1025px) 16px/24px, (1024-768px) 16px/24px, (<767px) 16px/24px

Lead body

(>1025px) 21px/30px, (1024-768px) 21px/30px, (<767px) 18px/28px

Body

18px/24px

  • Unordered bullet list item goes here
  • Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
  • Unordered bullet list item goes here
  1. Ordered bullet list item goes here
  2. Ordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
  3. Ordered bullet list item goes here
  • Unordered bullet list item goes here
  • Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
  • Unordered bullet list item goes here

Block quote example. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est.

John Doe

Forms

Short description lorem ipsum: