Design

Design elements such as color, typography, iconography, and form fields that are used to communicate the brand look and feel.

Colors

PRIMARY
 

Dark Red #A30606R:163 G:6 B:6

 

Yellow #FDBF38 R:253 G:191 B:56

 

Dark Gray #3C3C43 R:60 G:60 B:67

 

Dark Red Hover #BD0808 R:189 G:8 B:8

 

Yellow Hover #FFC954 R:255 G:201 B:84

 

Dark Gray Hover#656A70 R:101 G:106 B:112

NEUTRALS
 

White #FFFFFF R:255 G:255 B:255

 

Barely Gray #F5F5F5 R:245 G:245 G:245

 

Light Gray #E9E9E9 R:233 G:233 B:233

 

Stroke Gray #CCCCCC R:204 G:204 B:204

 

Medium Gray #ADADAD R:173 G:173 B:173

 

Dark Gray #3C3C43 R:60 G:60 B:67

 

Black #000000 R:0 G:0 B:0

ACCENT
 

Logo Red #DA1A32R:218 G:26 B:50

 

Dark Blue #135F96 R:19 G:95 B:150

 

Logo Red Hover #EB1D36R:235 G:29 B:54

 

Dark Blue Hover #004073 R:0 G:64 B:115

UTILITY
 

Alert Red #C2172D R:194 G:23 B:45

 

Success Green #108A27 R:16 G:138 B:39

 

Accent Blue #007DB6 R:0 G:125 B:182

 

Alert Red Hover #D71C34 R:215 G:28 B:52

 

Success Green Hover #26A93F R:38 G:169 B:63

 

Accent Blue Hover #048BC9 R:4 G:139 B:201

FontAwesome Fonts

FontAwesome Regular -
FontAwesome Pro Light -
FontAwesome Pro Regular -
FontAwesome Pro Solid -

Typography

Montserrat

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789!@£$%^&*()

  • Bold
  • ExtraBold

Roboto

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789!@£$%^&*()

  • Thin
  • Light

Open Sans

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789!@£$%^&*()

  • Light
  • Regular
  • Bold
 

Header Styles

LARGE VIEWPORT

Display / Header 1Monsterrat ExtraBold / 2.8em / 3.3em Leading / #3C3C43

Header 2Roboto Thin / 2.8em / 3.2em Leading / #000000

Header 3Roboto Light / 1.9em / 2.7em Leading / #000000

Header 4Roboto Light / 1.6em / 2.4em Leading / #000000T

Header 5Open Sans Bold / 1.3em / 2em Leading / #000000
Header 6Monsterrat ExtraBold / 1em / 1.3em Leading / #000000
SMALL VIEWPORT
 

Display / Header 1Monsterrat ExtraBold / 1.6em / 2.1em Leading / #3C3C43

Header 2Roboto Thin / 1.7 / 2em Leading / #000000

Header 3Roboto Light / 1.6em / 3.3em Leading / #000000

Header 4Roboto Light / 1.3em / 1.7em Leading / #000000

Header 5Open Sans Bold / 1.3em / 1.7em Leading / #000000
Header 6Monsterrat ExtraBold / 1.3em / 1.7em Leading / #000000
 

Body Type Styles

LARGE VIEWPORT
 

Body Copy -- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum provident, earum quibusdam sit, dolorum iusto laudantium repudiandae sint odio facilis expedita veritatis, reprehenderit natus et error fugiat. Open Sans Regular / 1em / 2em Leading/ #000000

Body Copy Alternate -- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum provident, earum quibusdam sit, dolorum iusto laudantium repudiandae sint odio facilis expedita veritatis, reprehenderit natus et error fugiat.Open Sans Regular / 1em / 1.7em / #000000

Caption/Fine Print -- Lorem ipsum dolar sit amet Open Sans Regular / .8em / 1em Leading / #000000

SMALL VIEWPORT
 

Body Copy -- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum provident, earum quibusdam sit, dolorum iusto laudantium repudiandae sint odio facilis expedita veritatis, reprehenderit natus et error fugiat. Open Sans Regular / 1em / 1.6em Leading/ #000000

Caption/Fine Print -- Lorem ipsum dolar sit amet Open Sans Regular / .9em / 1.1em Leading / #000000

 

Lists

UNORDERED LIST
  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

ORDERED LIST
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Table

Lorem IpsumLabelShort LabelMedium Label
Lorem IpsumLabelShort LabelMedium Label
Lorem IpsumLabelShort LabelMedium Label
Lorem IpsumLabelShort LabelMedium Label
Lorem IpsumLabelShort LabelMedium Label

Iconography

CUSTOM ICONS

Form Fields

 
This field is required

Alerts

Example Error Alert with a sample link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Example Warning Alert with a sample link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Example Confirmation Alert with a sample link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Example Info Alert with a sample link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

LINKS & BUTTONS

LIGHT BACKGROUND
TEXT LINK
 

Lorem ipsum dolor sit amet inline text link consectetur adipiscing elit.

 
Primary CTA
   
Secondary CTA
   
Tertiary CTA
   
Quarternary CTA
   
Inactive CTA
DARK BACKGROUND
 
Text Link
 

Lorem ipsum dolor sit amet inline text link consectetur adipiscing elit.

 
Secondary CTA (Red or Gray Background)
   
 
Text Link
 

Lorem ipsum dolor sit amet inline text link consectetur adipiscing elit.

 
Secondary CTA (Red or Gray Background)
   

EXTERNAL LINKS & BUTTONS

TEXT LINK
 

Lorem ipsum dolor sit amet inline text link consectetur adipisicing elit. Maxime, neque. Repudiandae repellat ab sit a exercitationem labore sed nesciunt reiciendis repellendus odit ipsam asperiores illum eos qui corrupti id dicta eius odio neque, dignissimos tempore praesentium ex ipsa? inline text link Suscipit illum nobis ducimus eius asperiores quisquam blanditiis pariatur harum. Placeat itaque repudiandae eaque sapiente dolores nostrum eveniet dolorem aut autem, assumenda atque repellendus quis laborum nisi.

 
CTA BUTTON
Text Link
 

Lorem ipsum dolor sit amet inline text link consectetur adipisicing elit. Maxime, neque. Repudiandae repellat ab sit a exercitationem labore sed nesciunt reiciendis repellendus odit ipsam asperiores illum eos qui corrupti id dicta eius odio neque, dignissimos tempore praesentium ex ipsa? inline text link Suscipit illum nobis ducimus eius asperiores quisquam blanditiis pariatur harum. Placeat itaque repudiandae eaque sapiente dolores nostrum eveniet dolorem aut autem, assumenda atque repellendus quis laborum nisi.

 
CTA BUTTON