Grid

.grid
grid
0 REM
grid
cc-2col
0 REM
grid
cc-3col
0 REM
grid
cc-4col
0 REM
grid
cc-5col
0 REM
grid
cc-6col
0 REM

Cell

.cell
cell
0 REM
cell
gap-025
0.25 REM
cell
gap-05
0.5 REM
cell
gap-075
0.75 REM
cell
gap-1
1 REM
cell
gap-125
1.25 REM
cell
gap-150
1.5 REM
cell
gap-175
1.75 REM
cell
gap-2
2 REM
cell
gap-3
3 REM
cell
gap-4
4 REM
cell
gap-5
5 REM
cell
gap-6
6 REM
cell
gap-7
7 REM
cell
gap-8
8 REM
cell
gap-10
10 REM

Headers

Unstyled
H1 Headings
0 REM

Element

H2 Headings
0.25 REM

Element

H3 Headings
0.5 REM

Element

H4 Headings
0 REM

Element

H5 Headings
0.25 REM
Element
H6 Headings
0.5 REM
Element

Heading Sizes

.h1
.h2
.h3
.h4
.h5
.h6
h1
8.125 REM

Element

h2
4.6875 REM

Element

h3
3.9375 REM

Element

h4
2.25 REM

Element

h5
1.3125 REM
Element
h6
0.875 REM
Element
→ Scaled by 1.250 - Major Third

Paragraph Sizes

p
.xlp
.lp
.sp
.xsp
XLP
1 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

LP
1 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

paragraph
1 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

SP
1 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

XSP
1 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

→ Scaled by 1.200 - Minor Third

Other Typography

.eyebrow
ol
ul
li
eyebrow
1 REM

Lorem ipsum

All Ordered Lists
1 REM
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
1 REM
  • Example Unordered List
  • Example Unordered List

Font Weights

.u-light
.u-medium
.u-semibold
.u-bold
u-light
300

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-medium
500

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-semibold
600

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-bold
700

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

→ Scaled by 1.200 - Minor Third

Text Alignment

.u-text
u-text-center
text-align: center;
u-text-right
text-align: right;
u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;

Background Colors

.u-bg-*
u-bg-primary
#ef654f
u-bg-secondary
#f0b51c
u-bg-tertiary
#048980
u-bg-quaternary
#134e8f
u-bg-white
#FFFFFF
u-bg-soft-white
#dfddd6
u-bg-light-grey
#9e9c97
u-bg-dark-grey
#31312f
u-bg-matte-black
#212121
u-bg-black
#000000

Text Colors

.u-tc-*
u-tc-primary
#ef654f
This is some text inside of a div block.
u-tc-secondary
#f0b51c
This is some text inside of a div block.
u-tc-tertiary
#048980
This is some text inside of a div block.
u-tc-quaternary
#134e8f
This is some text inside of a div block.
u-tc-white
#FFFFFF
This is some text inside of a div block.
u-tc-soft-white
#dfddd6
This is some text inside of a div block.
u-tc-light-grey
#9e9c97
This is some text inside of a div block.
u-tc-dark-grey
#31312f
This is some text inside of a div block.
u-tc-matte-black
#212121
This is some text inside of a div block.
u-tc-black
#000000
This is some text inside of a div block.

Buttons

.btn
btn
btn
cc-alt
btn
cc-white
btn
cc-black
btn
cc-icon
btn
cc-icon
cc-alt
btn
cc-icon
cc-white
btn
cc-icon
cc-black
btn
cc-small
btn
cc-small
cc-alt
btn
cc-small
cc-white
btn
cc-small
cc-black
btn
cc-full
btn
cc-full
cc-alt
btn
cc-full
cc-white
btn
cc-full
cc-black
btn
cc-outline
btn
cc-outline
cc-alt
btn
cc-outline
cc-white
btn
cc-outline
cc-black
btn
cc-text
btn
cc-alt
btn
cc-white
btn
cc-black

Forms

.formblock

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Margin

.u-m
Top
u-mt-0
none
u-mt-1
1em
u-mt-2
2em
u-mt-3
3em
u-mt-4
4em
u-mt-auto
Auto
Bottom
u-mb-0
None
u-mb-1
1em
u-mb-2
2em
u-mb-3
3em
u-mb-4
4em
u-mb-auto
Auto
Left/Right
u-m-0
None
u-mlr-auto
Auto
u-ml-1
1em
u-ml-1
1em
u-mr-1
2em
u-mr-1
2em

Padding

.u-p
Top
u-pt-0
none
u-pt-1
1em
u-pt-2
2em
u-pt-3
3em
u-pt-4
4em
Bottom
u-pb-0
None
u-pb-1
1em
u-pb-2
2em
u-pb-3
3em
u-pb-4
4em
Around
u-p-0
None
u-p-1
Auto
u-p-2
1em
u-p-3
1em
Left/Right
u-pl-1
None
u-pl-2
None
u-pl-3
None
u-pl-3
None
u-pr-1
None
u-pr-2
None
u-pr-3
None
u-pr-3
None

Utility

.u-*
text-align:
u-text-center
center
Placeholder
u-text-right
right
Placeholder
overflow:
u-overflow-hidden
hidden
Placeholder
u-overflow-visible
Visible
Placeholder
display:
u-d-none
none
Placeholder
u-d-block
block
Placeholder
u-d-flex
flex
Placeholder
position:
u-position-relative
relative
Placeholder
u-position-absolute
absolute
Placeholder
width/height
u-w-100
100% Width
Placeholder
u-h-100
100% Height
Placeholder
z-index
u-z-index-1
1
Placeholder
u-z-index-2
2
Placeholder
u-z-index-3
3
Placeholder
Cover
u-img-cover
1
u-link-cover
2
Open link
Ratio
u-ratio-1x1
1x1
u-ratio-2x3
2x3
u-ratio-3x2
3x2
u-ratio-16x9
16x9
u-ratio-2x1
2x1