Style Guide

Typography

XL

Heading XL

H1

Heading H1

H2

Heading H2

H3

Heading H3

H4

Heading H4

H5
Heading H5
H6
Heading H6
Large Text
The quick brown fox jumps over the lazy dog
Base Text
The quick brown fox jumps over the lazy dog
Small Text
The quick brown fox jumps over the lazy dog
Large Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada.

Base Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada.

Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada.

Text Weight 700
The quick brown fox jumps over the lazy dog

Rich Text

Heading H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper, ex at scelerisque rhoncus, turpis velit finibus tellus, vel gravida nibh magna id velit. Vestibulum placerat suscipit eros. Nam eu venenatis metus. This is a link.

Heading H2

Suspendisse nec nisl tempus dolor pulvinar laoreet. Integer iaculis ac dui et rhoncus. Curabitur luctus urna et leo commodo tristique. Aliquam et euismod justo, sed iaculis mauris. Nulla porttitor gravida tellus ac pretium.

  • Donec sed sapien molestie, consequat quam non, venenatis odio.
  • Sed eu dui et felis suscipit tempor.
  • Cras eget nulla at risus consequat ullamcorper et eu orci.

Vestibulum quam erat, volutpat vitae bibendum nec, maximus nec leo. Cras viverra ante dolor. Quisque eget turpis massa. Cras tincidunt pretium nisl imperdiet lacinia. Phasellus quis scelerisque sem. Morbi id mauris diam.

  1. Sed maximus lorem nec porttitor consectetur.
  2. Mauris a leo bibendum, facilisis dui sed, faucibus lacus.
  3. In sed libero vel metus vehicula vestibulum.

Heading H3

Vivamus non augue blandit, sollicitudin velit blandit, posuere orci. Sed ac lacus id mi faucibus scelerisque. Aenean ipsum orci, finibus id sagittis vel, rutrum vel leo. Etiam sed est nibh.

Quisque non velit a velit ultrices vestibulum. Vestibulum a lorem id urna vehicula porta. Pellentesque eu vestibulum mauris. Pellentesque gravida sodales risus ut vulputate.

Curabitur eleifend mi ante, id cursus dolor vehicula sed. Cras tincidunt felis ut eros pretium luctus. Nulla dapibus nisi in massa pharetra, et elementum libero feugiat.

Heading H4

Aliquam erat volutpat. Nam egestas lacinia justo, sit amet lacinia ex volutpat a. Nunc vel condimentum leo, ut consectetur eros.

Heading H5

Nulla eget rutrum odio. Fusce lobortis nunc at libero tempus, non suscipit lectus finibus. Vestibulum in ligula pharetra neque auctor ornare ultricies at mauris. Mauris pellentesque velit quam, a pharetra quam sodales in.

Heading H6

Curabitur vitae molestie metus. Suspendisse potenti. Nulla gravida felis enim, sed tincidunt urna feugiat sed.

Colors

Neutral 700
Neutral 600
Neutral 500
Neutral 400
Neutral 300
Neutral 200
Neutral 100
Neutral 50

Buttons

Primary
Button
Secondary
Button