headings

Colossus

800 Font-Weight / 7 Rem Font-Size / 1.1- Line-Height

Colossus Light

100 Font-Weight / 7 Rem Font-Size / 1.1- Line-Height / -0.5 Rem Letter-Spacing

Uber

800 Font-Weight / 6 Rem Font-Size / 1.1- Line-Height

Uber Light

100 Font-Weight / 6 Rem Font-Size / 1.1- Line-Height / -0.3 Rem Letter-Spacing

Hero

800 Font-Weight / 5 Rem Font-Size / 1.1- Line-Height

Hero Light

100 Font-Weight / 5 Rem Font-Size / 1.1- Line-Height / -0.2 Rem Letter-Spacing

Sub Hero

800 Font-Weight / 3.5 Rem Font-Size / 1.1- Line-Height

Sub Hero Light

100 Font-Weight / 3.5 Rem Font-Size / 1.1- Line-Height

Heading H1

Nitro heading number one when it has multiple lines of text will look like this. More text was needed to make it wrap to a second line.

700 Font-Weight / 2.25 Rem Font-Size / 1.15- Line-Height

Heading H1 Bold

Nitro heading number one when it has multiple lines of text will look like this. More text was needed to make it wrap to a second line.

800 Font-Weight / 2.25 Rem Font-Size / 1.15- Line-Height

Heading H2

Nitro heading number two when it has multiple lines of text will look like this. More text was needed to make it wrap to a second line.

700 Font-Weight / 1.75 Rem Font-Size / 1.2- Line-Height

Heading H2

Nitro heading number two when it has multiple lines of text will look like this. More text was needed to make it wrap to a second line.

800 Font-Weight / 1.75 Rem Font-Size / 1.2- Line-Height

Heading H3

Nitro heading number three when it has multiple lines of text will look like this. More text was needed to make it wrap to a second line.

700 Font-Weight / 1.25 Rem Font-Size / 1.3- Line-Height

Heading H4

Nitro heading number two when it has multiple lines of text will look like this. Even more text was needed to make it wrap to a second line since this text is getting rather small relative to the other text styles in this style guide.

700 Font-Weight / 1 Rem Font-Size / 1.35- Line-Height

Heading H5

Nitro heading number two when it has multiple lines of text will look like this. Even more text was needed to make it wrap to a second line since this text is getting rather small relative to the other text styles in this style guide.

700 Font-Weight / 0.85 Rem Font-Size / 1.4- Line-Height

Heading H6

Nitro heading number two when it has multiple lines of text will look like this. And finally the largest amount of extraneous text was needed to make it wrap to a second line since this text is getting rather small relative to the other text styles in this style guide.

700 Font-Weight / 0.75 Rem Font-Size / 1.12- Line-Height

Label

600 Font-Weight / 1.5 Rem Font-Size / 1.2- Line-Height

label bold

800 Font-Weight / 1.5 Rem Font-Size / 1.2- Line-Height

label small

600 Font-Weight / 1.2 Rem Font-Size / 1.15- Line-Height

label small Bold

800 Font-Weight / 1.2 Rem Font-Size / 1.15- Line-Height

label Xsmall small

600 Font-Weight / 0.9 Rem Font-Size / 1.1- Line-Height

label Xsmall small bold

800 Font-Weight / 0.9 Rem Font-Size / 1.1- Line-Height

sub headings

Sub Heading Big

500 Font-Weight / 1.5 Rem Font-Size / 1.2- Line-Height

Sub Heading

500 Font-Weight / 1.35 Rem Font-Size / 1.2- Line-Height

Sub Heading Small

500 Font-Weight / 1.2 Rem Font-Size / 1.15- Line-Height

Sub Heading xSmall

500 Font-Weight / 0.9 Rem Font-Size / 1.1 Line-Height

paragraphs

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.

200 Font-Weight / 1.1 Rem Font-Size / 1.45- Line-Height / Paragraph Large

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.

700 Font-Weight / 1.1 Rem Font-Size / 1.45- Line-Height / Paragraph Large -Bold

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.

200 Font-Weight / 1 Rem Font-Size / 1.45- Line-Height / Paragraph

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.

700 Font-Weight / 1 Rem Font-Size / 1.45- Line-Height / Paragraph - Bold

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.

200 Font-Weight / 0.9 Rem Font-Size / 1.3- Line-Height / Paragraph Small

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.

700 Font-Weight / 0.9 Rem Font-Size / 1.3- Line-Height / Paragraph Small - Bold

Elements

• Lorem ipsum dolor
• Suspendisse varius enim in dolor interdum
• Duis cursus, eros commodo diam
• Dolor interdum nulla ut
• Aenean faucibus nibh et justo

400 Font-Weight / 1 Rem Font-Size / 1.8- Line-Height / List

Resources

• Lorem ipsum dolor
• Suspendisse varius enim in dolor interdum
• Duis cursus, eros commodo diam
• Dolor interdum nulla ut
• Aenean faucibus nibh et justo

400 Font-Weight / 1 Rem Font-Size / 1.8- Line-Height / List

Colors

Orange
#eb713d

Light Orange
#fde0d7

Dark Blue
#2c3a44

Off Black
#1e1e1e

Gray
#545454

Light Gray
#f7f7f7

White
#ffffff

Red
Notification Text
#c90000

Pink
Notification Bkg
#fccaca

Dark Green
Notification Text
#33633f

Light Green
Notification Bkg
#dcf2e4