Colors

$brand-purple
$brand-blue-light
$brand-blue
$brand-teal
$brand-yellow
$brand-orange
$brand-pink
$body-gray-darkest
$body-gray
$body-gray-light

Typography

H1 header

(<767px) 30px/30px, (1024-768px) 48px/48px, (1025-1440px) 60px/60px, (1441-1920px) 72/72px

H2 header

(<767px) 24px/30px, (1024-768px) 30px/30px, (1025-1440px) 30px/30px, (1441-1920px) 48/48px

H3 header

(<767px) 21px/28px, (1024-768px) 24px/30px, (1025-1440px) 24px/30px, (1441-1920px) 30/30px

H4 header

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

H5 header

(<767px) 18px/28px, (1024-768px) 18px/28px, (1025-1440px) 21px/30px, (1441-1920px) 21/30px

H6 header

(<767px) 16px/24px, (1024-768px) 16px/24px, (1025-1440px) 16px/24px, (1441-1920px) 18/30px

Body, Large (aka Lead Body)

(<767px) 18px/24px, (1024-768px) 21px/30px, (1025-1440px) 21px/30px, (1441-1920px) 21/30px

Body

(<767px-1440px) 16px/24px, (1441-1920px) 18/30px

Body, Small

(<767px-1440px) 14px/24px, (1441-1920px) 16/34px

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
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 (graphic)
  • List item goes here
  • Another list item goes here that wraps to two lines lrem ipsum dolor sit amet
  • List item goes here
Block Quote Example

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. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id. Vivamus vestibulum nibh fermentum mauris aliquet, vitae tincidunt ante pellentesque. Integer malesuada posuere sagittis.

“Cras non lacinia augue. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est. Nulla at nibh a nisl consequat suscipit quis id neque. Nunc interdum ipsum dolorat ante semper.”

John Doe, Company Name

Buttons & Links

Forms

Default Form Example

Checkbox

Radio

Active Form Example

Checkbox

Radio

Tables

Column 1 Title Column 2 Title Column 3 Title
Item 1 Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 2 Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 3 Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 4 Item 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 5 Item 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 6 Item 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Speak with an expert

Just provide us with a few details and we’ll be in touch to discuss your needs