Style Guide

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

Other HTML Tags
HTML tags define default text styles.
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
text-3xl

The quick brown fox jumps over the lazy dog

text-2xl

The quick brown fox jumps over the lazy dog

text-xl

The quick brown fox jumps over the lazy dog

text-xl-2

The quick brown fox jumps over the lazy dog

text-lg

The quick brown fox jumps over the lazy dog

text-lg-2

The quick brown fox jumps over the lazy dog

text-base

The quick brown fox jumps over the lazy dog

text-sm

The quick brown fox jumps over the lazy dog

text-sm-1

The quick brown fox jumps over the lazy dog

text-xs

The quick brown fox jumps over the lazy dog

Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
text-style-italic
text-style-italic
text-style-quote
text-style-quote
text-style-uppercase
text-style-uppercase
text-style-lowercase
text-style-lowercase
text-style-link
Text Link
text-style-no_wrap
text-style-no_wrap
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
blog-rich-text

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote
projects-rich-text

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Colors
Color Palette
is-black
is-white
is-yellow
is-black-50
Background Color
Manage recurring background colors.
background-color-black
background-color-white
background-color-yellow
background-color-black-50
Text Color
Manage recurring text colors.
text-color-white
text-color-white
text-color-black
text-color-black
text-color-black-900
text-color-black-900
text-color-black-800
text-color-black-800
text-color-black-700
text-color-black-700
text-color-black-600
text-color-black-600
text-color-black-500
text-color-black-500
text-color-black-400
text-color-black-400
text-color-black-300
text-color-black-300
text-color-purple
text-color-yellow
Link Components
nav-link
footer-link
button-circle-yellow
Send a quote
Button
Buttons With Icons
nav-button
button
Button ArrowButton Arrow
button-normal
Button
Form Elements
field-label
form-input
form-input
is-text-area
form-input
is-select-input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.