Website Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Based on MAST CSS framework

Margins

u-mb-0
u-mb-5
u-mb-10
u-mb-16
u-mb-20
u-mb-20-sm (mobile landscape and lower)
u-mb-30
u-mb-36
u-mb-40
u-mb-40-md (tablet and lower)
u-mb-48
u-mb-50
u-mb-60
u-mb-80
u-mb-100
u-mb-128
u-mb-130
u-mb-160
u-mt-16
u-mt-30
u-mt-48
u-mt-60
u-mt-80
u-mt-100
u-mt-128

Typography

The different text sizes used throughout the site.

Headings

Size: 5rem
Class name: h-xxxxl

Heading XXXXL

Size: 5rem
Class name: h-xxxl

Heading XXXL

Size: 4rem
Class name: h-xxl

Heading XXL

H1
Size: 3rem
Class name: h-xl

Heading 1

H2
Size: 2.5rem
Class name: h-lg

Heading 2

H3
Size: 2.1rem
Class name: h-md

Heading 3

H4
Size: 1.8rem
Class name: h-sm

Heading 4

H5
Size: 1.2rem
Class name: h-xs
Heading 5
H6
Size: 1rem
Class name: h-xxs
Heading 6

Subheadings

Size: 2.5rem
Class name: subhead-xxxxl

Subhead xxxxl

Size: 2rem
Class name: subhead-xxxl

Subhead xxxl

Size: 1.8rem
Class name: subhead-xxl

Subhead xxl

Size: 1.6rem
Class name: subhead-xl

Subhead xl

Size: 1.25rem
Class name: subhead-lg

Subhead lg

Size: 1.2rem
Class name: subhead-md

Subhead md

Size: 1rem
Class name: subhead-standard

Subhead standard

Size: 0.8rem
Class name: subhead-sm

Subhead sm

Body / Paragraph

Size: 1.4rem
Class name: paragraph-xl

Paragraph xl

Size: 1.125rem
Class name: paragraph-lg

Paragraph lg

Size: 1rem
Class name: paragraph-md

Paragraph md

Quote

Size: 1.8rem
Class name: quote-p-xxxl

Quote paragraph xxxl

Size: 1.5rem
Class name: quote-p-xxl

Quote paragraph xxl

Size: 1.5rem
Class name: quote-p-xl

Quote paragraph xl

Brand colors

The different weights of brand colors used throughout the website.
Class name example: (bg-color-*)

Core colors

Brighter Aqua
#51e2ef
Berry
#e24745
Warm Amber
#ff9e1b
Indigo
#5b6aff

True neutrals

Ghost white
#f9f9f9
Graphite
#1E1919

Background color

Cream
#f4e9e1

Gradients

Berry &
Indigo
Aqua &
Warm Amber

Design Elements

Design elements used to frame text for a polished, structured layout.
Class name: text-oval-outline_wrap
Class name: text-rounded-outline_wrap
Class name: text-bttm-outline_wrap
Use these content outline in light backgrounds.
link-block-ocean
link-block-ocean
link-block-black
Read full case study
a white arrow pointing to the right
Class name: text-oval-outline_wrap
Class name: text-rounded-outline_wrap
Class name: text-bttm-outline_wrap

Grids

Different grid layouts to use across our site.

Desktop Wide

col-lg-1
col-lg-2
col-lg-3
col-lg-4
col-lg-5
col-lg-6
col-lg-7
col-lg-8
col-lg-9
col-lg-10
col-lg-11
col-lg-12

Desktop *Base Breakpoint

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Tablet

col-md-1
col-md-2
col-md-3
col-md-4
col-md-5
col-md-6
col-md-7
col-md-8
col-md-9
col-md-10
col-md-11
col-md-12

Mobile Landscape

col-sm-1
col-sm-2
col-sm-3
col-sm-4
col-sm-5
col-sm-6
col-sm-7
col-sm-8
col-sm-9
col-sm-10
col-sm-11
col-sm-12

Mobile Portrait

col-xs-1
col-xs-2
col-xs-3
col-xs-4
col-xs-5
col-xs-6
col-xs-7
col-xs-8
col-xs-9
col-xs-10
col-xs-11
col-xs-12

Align Columns

row-align-center
row-align-end

Justify Columns

row-justify-start
row-justify-end
row-justify-center
row-justify-between
row-justify-around
row-center

Row Vertical

row-lg-v
row-v
row-md-v
row-sm-v
row-xs-v