Typography

General Sans

Headings + Body

Type: Sans Serif
Weights: Normal (400), Medium (500)
H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

h1
Class
h2
Class
h3
Class
h4
Class
paragraph-1.5

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

paragraph-1.25

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

paragraph

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

paragraph-0.9

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

eyebrow
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Primary

#d14424
u-bg-primary

Black

#1d1c1a
u-bg-black

Dark Gray

#302f2c
u-bg-darkgray

Mid Gray

#888680
u-bg-midgray

Light Gray

#dfddd6
u-bg-lightgray

White

#ffffff
u-bg-white
Aa

Primary

#d14424
u-text-primary
Aa

Black

#1d1c1a
u-text-black
Aa

Dark Gray

#302f2c
u-text-darkgray
Aa

Mid Gray

#888680
u-text-midgray
Aa

Light Gray

#dfddd6
u-text-lightgray
Aa

White

#FFFFFF
u-text-white

Components

Default

btn

Default + Icon Right

btn

Default + Icon Left

btn

Secondary

btn
cc-secondary

Secondary + Icon Right

btn
cc-secondary

Secondary + Icon Left

btn
cc-secondary

Default Light

btn
cc-light

Default Light + Icon Right

btn
cc-light

Default Light + Icon Left

btn
cc-light

Secondary Light

btn
cc-secondary
cc-light

Secondary Light + Icon Right

btn
cc-secondary
cc-light

Secondary Light + Icon Left

btn
cc-secondary
cc-light

Text Link

All Links

Text Link Light

u-text-white
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Default

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

Heading 1

Heading 2

Heading 3

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.

Image caption here
Block quote (same font size as paragraph-1.25)

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Inline code

Superscript

Subscript

This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.

Utilities

Top

u-mt-0
margin-top: 0;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-auto
margin-top: auto;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-1
margin-bottom: 1em;
u-mb-2
margin-bottom: 2em;
u-mb-3
margin-bottom: 3em;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1em;
u-ml-1
margin-left: 1em;

Top

u-pt-0
padding-top: 0;
u-pt-1
padding-top: 1em;
u-pt-2
padding-top: 2em;
u-pt-3
padding-top: 3em;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-1
padding-bottom: 1em;
u-pb-2
padding-bottom: 2em;
u-pb-3
padding-bottom: 3em;

Other

u-p-0
padding: 0;
u-p-1
padding: 1em;
u-text-center
text-align: center;
u-text-right
text-align: right;
u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;
u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-d-inline-flex
display: inline-flex;
u-position-relative;
position: relative;
u-position-sticky;
position: sticky;
u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;
u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties

Layout

section
container
col
col
col
col
col
col
col
col
col
col
col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12
col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12
col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12
col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12
row
row-align-center
col
col
col
row
row-align-end
col
col
col
row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col
col
col-lg-first
col
col-md-first
col
col-sm-first
col
col-xs-first
col
col-lg-last
col
col-md-last
col
col-sm-last
col
col-xs-last

Shrink Column

col
col-shrink
col

Gutterless Column

row
row-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters

Assets

Rosemary

Basil

Tarragon

Onion

Circles

Garlic clove

Garlic bulb

Parsley

Thyme

Facebook

Instagram

Twitter

I have exported and moved all the assets from the Figma board here to help speed up the development process. Images have been compressed and added to the asset panel with SVGs available here.