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
Block Quote
Block Quote

Color

Background

Black

#1d1c1a
Background Black

Dark Gray

#707070
Background Dark Gray

Mid Gray

#cecece
Background Mid Gray

Light Gray

#f7f7f7
Background Light Gray

White

#ffffff
Background White

Text

Aa

Black

#1d1c1a
Text Black
Aa

Dark Gray

#707070
Text Dark Gray
Aa

Mid Gray

#cecece
Text Mid Gray
Aa

Light Gray

#f7f7f7
Text Light Gray
Aa

White

#ffffff
Text White

Components

Buttons

Button

Default

Button
Button

Default

Button
Combo Secondary
Button

Secondary

Button
Combo Light
Link

Nav Link

Nav Link
Action

Nav CTA

Nav Link
Combo CTA
Link

Footer Link

Footer Link
Text

Text Link

All Links

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