Schedule a demo with a solution architect

Style Guide

Powered by the team at HUSL

Breakpoints

Colors

$Spot Logo Pink #FF00CE
$White #FFFFFF
$Spot Light Blue #BDDEFC
$Spot Logo Blue #26A3FF
$Spot Sky Blue #0086FF
$Spot Mid Blue #0B3FDB
$Spot Logo Dark Blue #1E1E9A
$Spot Turquoise #00A8BF
$Spot Orange #FFA000
$Spot Purple #7731FF
$Body Text #333333
$Spot Black #000000

Typography

H1 header

(>1025px) 60px/100%, (1024-768px) 50px/120% (<767px) 34px/120% 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.

H2 header

(>1025px) 48px/120%, (1024-768px) 40px/120%, (<767px) 28px/120%px 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.

H3 header

(>1025px) 36px/100%, (1024-768px) 30px/110%, (<767px) 26px/120% 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.

H4 header

(>1025px) 26px/120%, (1024-768px) 24px/120% (<767px) 22px/120% 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.

H5 header

(>1025px) 20px/120%, (1024-768px) 20px/120%, (<767px) 18px/120% 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.

H6 header

(>1025px) 18px/120%, (1024-768px) 18px/120%, (<767px) 14px/120% 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.

Lead body

(>1025px) 22px/150% | 20px paragraph spacing, (1024-768px) 20px/150%, (<767px) 14px/120% Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor.

Body

(>1025px) 18px/150% | 20px paragraph spacing, (1024-768px) 16px/150%, (<767px) 14px/120% 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.

Small Body

(>1025px) 16px/150% | 20px paragraph spacing, (1024-768) 14px/150% (<767px) 12px/150% 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.

Bullet List (unordered)
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Unordered List, Arrows
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Bullet List (ordered)
  1. List item goes here
  2. Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  3. List item goes here
Bullet List (unordered)
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Unordered List, Arrows
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Bullet List (ordered)
  1. List item goes here
  2. Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  3. List item goes here

Buttons & Links

Primary
Button large Button medium Button small
Primary Blue
Button large Button medium Button small
Secondary
Button large Button medium Button small
Tertiary
Learn more
Hyperlinks

Other colors (Optional): Note – they can select other brand colors but this should be more rarely used than the primary styles.

Button small Button small Button small
Primary
Button large Button medium Button small
Primary Blue
Button large Button medium Button small
Secondary
Button large Button medium Button small
Tertiary
Learn more
Hyperlinks

Forms