Style Guide

Color Palette

Zekelman Red

#E41837

Zekelman Dark Red

#931903

Zekelman Black

#231F20

Zekelman Gray

#6A6A6C

Light Gray

#E5E5E8

White

#FFFFFF

Deep

#203E45

Shade

#33636E

Main

#407D8A

Seafoam

#79A3AD

Mist

#C5D7DB

Glacier

#E9F1F3

Accent

#01CCE1

Deep gradient

linear-gradient(80deg, var(--c-deep) 15%, #43727b 52%, #41919f 82%);

Font Family

Gotham Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Gotham Bold Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Gotham Book

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Gotham Book Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Typography

1rem = 10px

Mobile

Tablet

Desktop

Headline 1
Light

Mobile

color: #203E45

font-family: Gotham Book

font-size: 4rem

font-style: normal

font-weight: 300

letter-spacing: -0.3rem

line-height: 0.8

margin-bottom: 3rem

text-transform: uppercase

Tablet

font-size: 4rem

margin-bottom: 4rem

Desktop

font-size: 7.8rem

margin-bottom: 5rem

Headline 1
Bold

Mobile

color: #203E45;

font-family: Gotham Book;

font-size: 4rem;

font-style: normal;

font-weight: 300;

letter-spacing: -0.3rem;

line-height: 0.8;

margin-bottom: 3rem;

text-transform: uppercase;

Tablet

font-size: 4rem;

margin-bottom: 4rem;

Desktop

font-size: 7.8rem;

margin-bottom: 5rem;

Headline 2
Lorem ipsum dolor

Mobile

color: #203E45;

font-family: Gotham Book;

font-size: 4rem;

font-style: normal;

font-weight: 300;

letter-spacing: -0.3rem;

line-height: 0.9;

margin-bottom: 3rem;

text-transform: uppercase;

Tablet

font-size: 4rem;

margin-bottom: 4rem;

Desktop

font-size: 7.8rem;

margin-bottom: 5rem;

Headline 3
Lorem ipsum dolor

Mobile

color: #33636E;

font-family: Gotham Bold;

font-size: 3.5rem;

font-style: italic;

font-weight: 300;

letter-spacing: -0.3rem;

line-height: 0.9;

margin-bottom: 3rem;

text-transform: uppercase;

Tablet

font-size: 4rem;

margin-bottom: 4rem;

Desktop

font-size: 4.5rem;

Headline 4
Lorem ipsum dolor

Mobile

color: #203E45;

font-family: Gotham Book;

font-size: 3.5rem;

font-style: italic;

font-weight: 700;

letter-spacing: -0.3rem;

line-height: 0.9;

margin-bottom: 3rem;

text-transform: uppercase;

Tablet

font-size: 4rem;

margin-bottom: 4rem;

Desktop

font-size: 4.5rem;

margin-bottom: 5rem;

Headline 5
Lorem ipsum dolor

Mobile

color: #407D8A;

font-family: Gotham Book;

font-size: 2.6rem;

font-style: italic;

font-weight: 300;

letter-spacing: -0.2rem;

line-height: 0.8;

margin-bottom: 3rem;

text-transform: none;

Tablet

font-size: 2.8rem;

line-height: 0.9;

Desktop

font-size: 3rem;

margin-bottom: 4rem;

Headline 6
Lorem ipsum dolor

Mobile

color: #203E45;

font-family: Gotham Book;

font-size: 2.4rem;

font-style: italic;

font-weight: 700;

letter-spacing: -0.2rem;

line-height: 1.2;

margin-bottom: 3rem;

text-transform: uppercase;

Tablet

font-size: 2.6rem;

margin-bottom: 3rem;

Desktop

font-size: 2.8rem;

margin-bottom: 4rem;

Headline 7
Lorem ipsum dolor

Mobile

color: #203E45;

font-family: Gotham Bold;

font-size: 2rem;

font-style: normal;

font-weight: 700;

letter-spacing: -0.2rem;

line-height: 1.2;

margin-bottom: 2rem;

text-transform: none;

Tablet

font-size: 2.1rem;

margin-bottom: 2rem;

Desktop

font-size: 2.3rem;

margin-bottom: 4rem;

Paragraph Text

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, pariatur est? Aperiam hic deleniti dolorum?

Mobile

color: #6C6F70;

font-family: Gotham Book;

font-size: 1.5rem;

font-style: normal;

font-weight: 300;

letter-spacing: 0;

line-height: 1.5;

margin-bottom: 2rem;

margin-top: 2rem;

text-transform: none;

Tablet

font-size: 1.6rem;

Desktop

font-size: 1.8rem;

margin-bottom: 3rem;

Form Elements


This field is required.
This field is required.