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

Buttons

Types of CTA buttons used throughout the website.

Use this buttons in dark backgrounds.

[Primary] btn [Secondary] btn [Secondary] btn [Secondary] btn [Secondary] btn

Read full case study

Back to top

Use this buttons in light backgrounds.

[Primary] btn [Secondary] btn [Secondary] btn [Secondary] btn [Secondary] btn

Read full case study

Back to top

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.

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