Styles

Typography

Fonts

DM Sans

Headings + Body

Weights: Light (300), Normal (400), Medium (500)

Headings

H1 Special Hero Heading
Class
H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
title-xlarge
Class
title-large
Class
title-regular
Class
title-medium
Class
title-small
Class
title-xsmall
Class

Body

paragraph-large

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

Body
Paragraphs

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

paragraph-regular

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

paragraph-small

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

paragraph-xsmall
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

Heliotrope

#CC85FF
u-bg-purple

Midnight

Midnight

#0C0823
u-bg-midnight

Midnight (700)

#555265
u-bg-midnight-700

Midnight (500)

#858391
u-bg-midnight-500

Midnight (200)

#CECED3
u-bg-midnight-200

Midnight (100)

#E7E6E9
u-bg-midnight-100

Ghost

Ghost

#F8F8FF
u-bg-ghost

Ghost (800)

#C9C8D3
u-bg-ghost-800

Ghost (700)

#B1B0BD
u-bg-ghost-700

Ghost (600)

#9A98A7
u-bg-ghost-600

Ghost (500)

#828091
u-bg-ghost-500

Ghost (200)

#3B384F
u-bg-ghost-200

Ghost (100)

#242039
u-bg-ghost-100

Text

Aa

Highlight

#CC85FF
u-text-highlight
Aa

Midnight

#0C0823
u-text-midnight
Aa

Midnight (700)

#555265
u-text-midnight-700
Aa

Ghost

#F8F8FF
u-text-ghost
Aa

Ghost (800)

#C9C8D3
u-text-ghost-800

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-0.5
margin-top: 0.5em;
u-mt-1
margin-top: 1em;
u-mt-1.5
margin-top: 1.5rem;
u-mt-2
margin-top: 2rem;
u-mt-3
margin-top: 3em;

Bottom

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

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mt-auto
margin-top: auto;
u-mb-auto
margin-bottom: auto;

Padding

Top

u-pt-0
padding-top: 0;
u-pt-1
padding-top: 1;
u-pt-1.5
padding-top: 1.5;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-1
padding-bottom: 1;
u-pb-1.5
padding-bottom: 1.5;

Other

u-p-0
padding: 0;

Text

Alignment

u-text-center
text-align: center;
u-text-right
text-align: right;
u-text-left
text-align: left;

Weight

u-text-regular
text-weight: regular;
u-text-bold
text-weight: bold;
u-text-medium
text-weight: medium;
u-text-semibold
text-weight: SemiBold;

Clamping

u-text-clamp-1
Multiple properties

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.

u-text-clamp-2
Multiple properties

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.

u-text-clamp-3
Multiple properties

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.

Wrapping

u-text-balance
text-wrap: balance;

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

u-text-pretty
text-wrap: pretty;

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

Overflow

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;

Display + position

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;

Responsive modifiers

u-md-d-none
display: none; (Tablet down)
u-sm-d-none
display: none; (Mobile (L) down)
u-xs-d-none
display: none; (Mobile only)
u-md-d-block
display: block; (Tablet down)
u-sm-d-block
display: block; (Mobile (L) down)
u-xs-d-block
display: block; (Mobile only)

Size

u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;

Aspect ratio

u-aspect-1x1
Multiple properties
u-aspect-16x9
Multiple properties
u-aspect-4x3
Multiple properties

Helpers

u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties

Layout

Section

section

Container

container

Grid

col
col
col
col
col
col
col
col
col
col

Grid - Desktop

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

Grid - Tablet

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

Grid - Mobile Landscape

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

Grid - Mobile Portrait

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

Align columns

row
row-align-center
col
col
col
row
row-align-end
col
col
col

Justify columns

row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col

Reorder columns

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

Gap modifiers

Medium gap (set from Grid Gap - MD variable)

row
row-gap-md
col
col
col
col
col
col

Small gap (set from Grid Gap - SM variable)

row
row-gap-sm
col
col
col
col
col
col

No gap

row
row-gap-0
col
col
col
col
col
col

Other columns modifiers

Shrink Column

col
col-shrink
col