Design

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

Colors

PRIMARY

Footer, Secondary Color dark-navy-blue #0E152A

 

Banner Dark BG navy-blue #101E49

 

Primary Accent pacific-blue #0849C6

 

Banner Light BG sky-blue #E7F4FB

 

Banner Light BG2, Striping sandy-blue #F6F6F7

NEUTRALS
 

Copy black #000000

 

Form Fields black-60 #686B6B

 

Disabled black-15 #DBDDDD

 

Default BG white #FFFFFF

UI
 

Error error #D00946

 

Error BG error-bg #FFF2F2

 

Warning warning #C44700

 

Warning BG warning-bg #FFF6E5

 

Confirmation confirmation #007955

 

Confirmation BG confirmation-bg #E9F4ED

Fonts

Proxima Nova Regular - The quick brown fox jumps over the lazy dog
Proxima Nova Regular Italic - The quick brown fox jumps over the lazy dog
Proxima Nova Bold - The quick brown fox jumps over the lazy dog
Proxima Nova Extra Bold - The quick brown fox jumps over the lazy dog
Lora Regular - The quick brown fox jumps over the lazy dog
Lora Regular Italic - The quick brown fox jumps over the lazy dog
Lora Bold - The quick brown fox jumps over the lazy dog

 

FontAwesome 5 Regular -
FontAwesome 5 Brands -

 

Activate Icons -

Text Styles

Large Hero TextProxima Nova Bold / 70px / Letter Spacing -.75 / Title Case


Headline 1Proxima Nova Bold / 45px / Title Case


Headline 2Proxima Nova Regular / 30px / Title Case


Headline 3Proxima Nova Bold / 24px / Title Case


Headline 4Proxima Nova Bold / 18px / Title Case


Headline 5Proxima Nova Regular / 21px / Title Case

Headline 6Proxima Nova Regular / 18px / Title Case

Paragraph LargeLora Regular / 22px / Title Case


ParagraphLora Regular / 18px / Sentence Case


Paragraph SmallLora Regular / 14px / Sentence Case


EYEBROWProxima Nova Regular / 14px / Letter Spacing: 7 / Uppercase


EYEBROW SMALLProxima Nova Regular / 12px / Letter Spacing: 5 / Uppercase


 

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 Ipsum Label Short Label Medium Label
Lorem Ipsum Label Short Label Medium Label
Lorem Ipsum Label Short Label Medium Label
Lorem Ipsum Label Short Label Medium Label
Lorem Ipsum Label Short Label Medium Label

Iconography

INDUSTRY ICONS
CommunicationBusiness TieSecurityIdea

Form Fields

TEXT FIELD
TEXT AREA
EMAIL
PHONE
PASSWORD
DROPDOWN

Please make a selection

MULTISELECT

Please make a selection; use the Command or Control key to select more than one option.

CHECKBOXES
RADIO BUTTONS

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.