Style Guide

Typography
HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Size Variations

Heading XXL

Heading XL

Heading Large

Heading Medium

Heading Small

Heading XSmall

Heading XXSmall

Eyebrow heading

Text Size Variations

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

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

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

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

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

Rich Text Elements
Content Rich Text

Heading 1

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

Heading 2

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

Heading 3

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

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

Heading 4

Heading 5
Policy Rich Text

Heading 1

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

Heading 2

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

Heading 3

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 4

Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Heading 5

Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Text Weights
text-weight-bold
text-weight-medium
text-weight-normal
text-weight-light
Text Alignment
text-align-left
text-align-center
text-align-right
Text Colors
text-color-black
text-color-white
text-color-green
text-color-grey
text-color-recipe-blue
text-color-recipe-bright
Colors
Color Swatches
black
#000000
white
#FFFFFF
DEEP BLUE SEA
#1D4453
BREEZE
#F5F9FA
WET SAND
#B8A66A
LINEN
#F9F6EF
OCEAN
#356679#30364d
GOLDEN BROWN
#7E6F39
SAND
#DCD0A9
MIST
#F2F2F2
IRON
#434343
Background Colors

.background-color-white

.background-color-blue-sea

.background-color-mist

.background-color-breeze

.background-color-linen

UI Elements
Form Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons

.icon-xsmall

.icon-small

.icon-medium

.icon-large

Divider Lines
line-light
line-dark
Border Box (Radius & Shadows)

border-box.white

border-box.dark

Accordion Interactions (FAQ, meez Story, etc)

accordion-item

A Lorem ipsum dolor sit amet elit?
Spacing & Layout
Container Widths
.container (no max width)
.container-large
.container-medium
.container-small
Padding Direction
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding-horizontal
.padding-vertical
Padding Size
.padding-0
.padding-tiny
.padding-xxsmall
.padding-xsmall
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
Margin Size
.margin-0
.margin-tiny
.margin-xxsmall
.margin-xsmall
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
Margin Direction
.margin-top
.margin-bottom
.margin-left
.margin-right
.margin-horizontal
.margin-vertical
Responsiveness (these don't work yet)
.hide - hide on all devices
.hide-tablet - hide starting from tablet resolution
.hide-mobile-landscape - hide starting from mobile landscape resolution
.hide-mobile-portrait - hide starting from mobile portrait resolution
.show - display on all devices
.show-tablet - display starting from tablet resolution
.show-mobile-landscape - display starting from mobile landscape resolution
.show-mobile-landscape - display starting from mobile landscape resolution
.show-mobile-portrait - display starting from mobile portrait resolution
Exceptions & Misc Styles
.100vh-min - will make the minimum height 100vh, for full-height pages with 1 offer (ex. the referral page)
.sticky-wrap - div with position:sticky. Sticks top at 100px (below nav); used for aside-menus (ex. press and partnership page)
.box-shadow - add to divs, box borders and images for consistent box shadow (rgba(48, 54, 77, 0.2)
Max-widths
.max-width-full
.max-width-full-tablet
.max-width-full-mobile-landscape
max-width-full-mobile-portrait
.max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge
Section Layouts
2 Column Grids
2-column-grid
1:1 ratio, 6rem spacing
3-column-grid
1:1:1 ratio
3rem spacing
4-column-grid
1:1:1 ratio
1.5rem spacing
Ex. Checkmark bar
2 Column Add-On Classes
.left-large
1:0.75 ratio, 6rem spacing
.right-large
0.75:1 ratio, 6rem spacing
.right-larger
0.5:1 ratio, 6rem spacing
.right-largest
0.25:1 ratio, 6rem spacing
List / Bullet Grids
3-column-grid-list
3-column-grid-list
3-column-grid-list
3-column-grid-list
3-column-grid-list
3-column-grid-list