Style Guide

Powered by the team at HUSL

Colors

Deep Purple - color( deeppurple ): #2C2677

Medium Blue - color( mediumblue ): #4A3BD7

Neon Blue - color( neonblue ): #5465FF

Green - color( green ): #00B36B

Orange - color( orange ): #F46036

Blueish Black - color( blueishblack ): #0D0A30

Light Purple - color( lightpurple ): #D7D6E6

Light Gray - color( lightgray ): #F9F9F9

Light - color( light ): #FFF

Gray - color( gray ): #CCC

Dark - color( dark ): #000

Typography

H1 HP Hero

(>1440px) 140px/100%, (1440-1025px) 120px/90%, (1024-768px) 80px/90% (<767px) 58px/100%

H1 header

(>1025px) 56px/120%, (1024-768px) 50px/120%, (<767px) 44px/120%

H2 header

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

H3 header

(>1025px) 30px/110%, (1024-768px) 26px/110%, (<767px) 22px/110%

H3 header Large

(>1025px) 44px/120%, (1024-768px) 40px/120%, (<767px) 36px/120%

H4 header

(>1025px) 22px/110%, (1024-768px) 20px/110%, (<767px) 18px/110%

H5 header

(>1025px) 18px/140%, (1024-768px) 18px/140%, (<767px) 16px/140%

H6 header

(>1025px) 16px/140%, (1024-768px) 14px/140%, (<767px) 12px/140%

Lead body

(>1025px) 22px/30px, (1024-768px) 21px/30px, (<767px) 16px/22px

Body

16px/24px, (<767px) 14px/22px

Small

12px/16.8px

Unordered bullet list item - Option A
Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel interdum
Unordered bullet list item goes here

Unordered bullet list item - Option B
Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel interdum
Unordered bullet list item goes here

Ordered bullet list item goes here
Ordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. interdum
Ordered bullet list item goes here

Checklist item goes here
Checklist item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
Checklist item goes here
Checklist item goes here

Unordered bullet list item - Option A
Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel interdum
Unordered bullet list item goes here

Unordered bullet list item - Option B
Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel interdum
Unordered bullet list item goes here

Ordered bullet list item goes here
Ordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. interdum
Ordered bullet list item goes here

Checklist item goes here
Checklist item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
Checklist item goes here
Checklist item goes here

Blockquote

Egestas pretium aenean pharetra magna ac placerat vestibulum. Dui ut ornare lectus sit amet. Neque convallis a cras semper auctor neque vitae tempus quam.
Jane Doe, Chief Operating Officer, Company