Skip to main content

XL Header

class="text--xl"

H1 Header

class="text--h1"

H2 Header

class="text--h2"

H3 Header

class="text--h3"
Eyebrow
class="text--eyebrow"

[Large Body] - Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Quae, expedita officia mollitia.

Iusto delectus laboriosam facilis harum optio molestiae cupiditate atque sed fugiat id, blanditiis provident rerum et, ipsa obcaecati. Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Quae, expedita officia mollitia, iusto delectus laboriosam facilis harum optio molestiae cupiditate atque sed fugiat id, blanditiis provident rerum et, ipsa obcaecati. Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Quae, expedita officia mollitia, iusto delectus laboriosam facilis harum optio molestiae cupiditate atque sed fugiat id, blanditiis provident rerum et, ipsa obcaecati.

class="text--lg"

[Regular Body] - Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illo eum, quos consequuntur cum, unde ipsam possimus sapiente minima hic dignissimos, magni exercitationem asperiores deserunt tempore fuga quia eaque reiciendis.

class="text--base"

Subtext

class="text--sub" LG Text Links
class="links--lg" Link / Button
class="links--base" Footer Links
class="links--footer"

[Links Base inline w/ text]: Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Error commodi eum quam rerum eaque expedita nesciunt, explicabo vero ex saepe cumque quae accusamus at nisi libero, qui inventore provident, aliquid!

Unordered Lists

Ordered Lists

  1. Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Error commodi eum quam rerum eaque expedita nesciunt, explicabo vero ex saepe cumque quae accusamus at nisi libero, qui inventore provident, aliquid!
  2. Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Error commodi eum quam rerum eaque expedita nesciunt, explicabo vero ex saepe cumque quae accusamus at nisi libero, qui inventore provident, aliquid!
  3. Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Error commodi eum quam rerum eaque expedita nesciunt, explicabo vero ex saepe cumque quae accusamus at nisi libero, qui inventore provident, aliquid!

Buttons on Light

Learn More class="btn" class="btn -ml-4"
class="btn" class="btn -ml-4"
Large Text Link class="btn-links--lg"
class="btn-links--lg"
Menu Links class="btn-links--menu"
class="btn-links--menu"
Solid Buttons class="btn-solid" class="btn-solid -ml-4"

Buttons on Dark

Learn More class="btn-dark" class="btn-dark -ml-4"
class="btn-dark" class="btn-dark -ml-4"
Large Text Link class="btn-links--lg-dark"
class="btn-links--lg-dark"
Footer Links class="btn-links--menu-dark"
class="btn-links--menu-dark"

Brand Colors

Brand Text Colors

text-black
text-white
text-gray
text-gray-200
text-gray-400
text-gray-500
text-tan
text-tan-200
text-yellow
text-yellow-200
text-purple
text-purple-200
text-teal
text-teal-200
text-teal-700
text-blue
text-blue-200
text-rose
text-green
text-pink
Sign up for the latest news from
Design For Social Innovation
Email Signup
Back to Top