Design

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

Colors

ACCENT TEAL
 

Teal teal #00838F

 

Teal 80 medium-teal #339CA5

 

Teal 60 desaturate-teal #66B5BC

 

Teal 40 light-teal #99CDD2

 

Teal 20 ultra-light-teal #CCE6E9

ACCENT GREEN
 

Green green #9BD732

 

Green 80 medium-green #AFDF5B

 

Green 60 desaturate-green #C3E784

 

Green 40 light-green #D7EFAD

 

Green 20 ultra-light-green #EBF7D6

ACCENT ORANGE
 

Orange orange #F26B23

 

Orange 80 medium-orange #F48950

 

Orange 60 desaturate-orange #F7A67B

 

Orange 40 light-orange #FFCBA5

 

Orange 20 ultra-light-orange #FFE5D2

ACCENT RED
 

Red red #DE002E

 

Red 80 medium-red #E53358

 

Red 60 desaturate-red #EB6682

 

Red 40 light-red #F299AB

 

Red 20 ultra-light-red #F8CCD5

Fonts

FontAwesome 5 Regular -
FontAwesome 5 Solid -
FontAwesome 5 Brands -

Fonts

FontAwesome 5 Regular -
FontAwesome 5 Solid -
FontAwesome 5 Brands -

Text Styles

Default/Bold Font Weight Headings

For all service line and campaigns Bold weight font headline and titles can be used

Headline 1Primary Font Bold / 70px / 78px / Sentence Case


Headline 2 Primary Font Bold / 48px / 56px / Sentence Case


Headline 3 Primary Font Bold / 36px / 42px / Sentence Case


Headline 4 Primary Font Bold / 24px / 32px / Sentence Case


Headline 5 Primary Font Bold / 20px / 28px / Sentence Case

Headline 6 Primary Font Bold / 16px / 24px / Sentence Case

Paragraph 1 Primary Font Regular / 18px / 32px / Sentence Case


Paragraph 2 (Default) Primary Font Regular / 16px / 24px / Sentence Case


Paragraph 3 Primary Font Regular / 18px / 24px / Sentence Case


Citation Primary Font Regular / 12px / 18px / Sentence Case


Footnote Primary Font Regular / 12px / 20px / Sentence Case


Black Font Weight Headings

For exceptional/unique campaigns ex. Status go, Annual report, Careers etc. Black eight font can be used

Headline 1Primary Font Black / 70px / 78px / Sentence Case


Headline 2 Primary Font Black / 48px / 56px / Sentence Case


Headline 3Primary Font Black / 36px / 42px / Sentence Case


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

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.