Typography

Fonts

DM Sans

Headings + Body

Type: Sans Serif
Weights: Normal (400), Medium (500)
Source: Google Fonts

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
H1 Heading
Class
H2 Heading
Class
H3 Heading
Class
H4 Heading
Class
H5 Heading
Class
H6 Heading
Class

Body

Paragraph 1.50

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 1.10

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

Background

Primary

#375a67
Background Primary

Secondary

#e5eff1
Background Secondary

Accent

#b18069
Background Accent

Black

#1d1c1a
Background Black

Dark Gray

#302f2c
Background Dark Gray

Mid Gray

#888680
Background Mid Gray

Light Gray

#dfddd6
Background Light Gray

White

#ffffff
Background White

Text

Aa

Primary

#375a67
Text Primary
Aa

Secondary

#e5eff1
Text Seconday
Aa

Accent

#b18069
Text Accent
Aa

Black

#1d1c1a
Text Black
Aa

Dark Gray

#302f2c
Text Dark Gray
Aa

Mid Gray

#888680
Text Mid Gray
Aa

Light Gray

#dfddd6
Text Light Gray
Aa

White

#FFFFFF
Text White

Components

Buttons

Button

Default

Button
Button

Secondary

Button
Combo Secondary
Button

Light

Button
Combo Light
Text

Text Link

All Links
Text

Text Link Light

Text White

Forms

*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.

Card

Default

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

Prevent Style Clean Up

Utilities

Margin

Top

Margin Top 0
margin-top: 0;
Margin Top 1
margin-top: 1em;
Margin Top 2
margin-top: 2em;
Margin Top 3
margin-top: 3em;
Margin Top Auto
margin-top: auto;

Bottom

Margin Bottom 0
margin-bottom: 0;
Margin Bottom 1
margin-bottom: 1em;
Margin Bottom 2
margin-bottom: 2em;
Margin Bottom 3
margin-bottom: 3em;

Other

Margin 0
margin: 0;
Margin Left Right Auto
margin: 0 auto; (centers element)
Margin Right 1
margin-right: 1em;
Margin Left 1
margin-left: 1em;

Padding

Top

Padding Top 0
padding-top: 0;
Padding Top 1
padding-top: 1em;
Pading Top 2
padding-top: 2em;
Padding Top 3
padding-top: 3em;

Bottom

Padding Bottom 0
padding-bottom: 0;
Padding Bottom 1
padding-bottom: 1em;
Padding Bottom 2
padding-bottom: 2em;
Padding Bottom 3
padding-bottom: 3em;

Other

Padding 0
padding: 0;
Padding 1
padding: 1em;

Alignment

Text Center
text-align: center;
Text Right
text-align: right;

Overflow

Overflow Hidden
overflow: hidden;
Overflow Visible
overflow: visible;

Display + position

Display None
Display Block
display: block;
Display Flex
display: flex;
Position Relative
position: relative;

Size

Width 100
width: 100%;
Height 100
height: 100%;
Min Height 100VH
min-height: 100vh;

Helpers

Image Cover
Multiple properties
Link Cover
Multiple properties
Aspect 1x1
Multiple properties
Z Index 1
Multiple properties
Screen Reader Only
Multiple properties
Screen Reader Only
Border
Multiple properties

Layout

Section

Section

Container

Container

Grid

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Grid - Desktop

Column
Desktop 1
Column
Desktop 11
Column
Desktop 2
Column
Desktop 10
Column
Desktop 3
Column
Desktop 9
Column
Desktop 4
Column
Desktop 8
Column
Desktop 5
Column
Desktop 7
Column
Desktop 6
Column
Desktop 6
Column
Desktop 12

Grid - Tablet

Column
Tab 1
Column
Tab 11
Column
Tab 2
Column
Tab 10
Column
Tab 3
Column
Tab 9
Column
Tab 4
Column
Tab 8
Column
Tab 5
Column
Tab 7
Column
Tab 6
Column
Tab 6
Column
Tab 12

Grid - Mobile Landscape

Column
Landscape 1
Column
Landscape 11
Column
Landscape 2
Column
Landscape 10
Column
Landscape 3
Column
Landscape 9
Column
Landscape 4
Column
Landscape 8
Column
Landscape 5
Column
Landscape 7
Column
Landscape 6
Column
Landscape 6
Column
Landscape 12

Grid - Mobile Portrait

Column
Portrait 1
Column
Portrait 11
Column
Portrait 2
Column
Portrait 10
Column
Portrait 3
Column
Portrait 9
Column
Portrait 4
Column
Portrait 8
Column
Portrait 5
Column
Portrait 7
Column
Portrait 6
Column
Portrait 6
Column
Portrait 12

Align columns

Row
Row Align Center
Column
Column
Column
Row
Row Align End
Column
Column
Column

Justify columns

Row
Row Justify End
Row
Row Justify Center
Row
Row Justify Around
Row
Row Justify Between

Reorder columns

Column
Column Desktop First
Column
Column Tab First
Column
Column Landscape First
Column
Column Portrait First
Column
Column Desktop Last
Column
Column Tab Last
Column
Column Landscape Last
Column
Column Portrait Last

Other columns modifiers

Shrink Column

Column
Column Shrink
Column

Gutterless Column

Row
Row No Gutters
Column
Column No Gutters
Column
Column No Gutters
Column
Column No Gutters
Column
Column No Gutters