primary 100
primary 150
primary 200
primary 300
primary 400
primary 500
primary 600
primary 700
primary 800
primary 900
secondary-300
secondary-500
secondary-700
secondary-800
accent-300
accent-500
gray-100
gray-200
gray-200-cool
gray-300
gray-500
gray-600
gray-700
gray-800
gray-900

h1 & .heading-1: Lorem ipsum dolor sit.

h2 & .heading-2: Lorem ipsum dolor sit.

h3 & .heading-3: Lorem ipsum dolor sit.

h4 & .heading-4: Lorem ipsum dolor sit.

h5 & .heading-5: Lorem ipsum dolor sit.
h6 & .heading-6: Lorem ipsum dolor sit.
Kicker

text-18 paragraph: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, voluptatibus perferendis recusandae error unde repudiandae. Iste ab eius quibusdam inventore?

paragraph: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, voluptatibus perferendis recusandae error unde repudiandae. Iste ab eius quibusdam inventore?

text-14 paragraph: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, voluptatibus perferendis recusandae error unde repudiandae. Iste ab eius quibusdam inventore?

  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list
  • This is a list

Note: Buttons with svgs must wrap text in span.

primary
primary primary-arrow
primary with svg
primary with svg