Digital Style Guide

Use this page as the one source of truth for all digital design styles in this website.

Font Styles

Header 1

Header 2

Header 3

Body Copy

Roboto font | Size: 50 | Line height: 65 | Letter spacing: 0 | Color: Black

Roboto font | Size: 40 | Line height: 55 | Letter spacing: 0 | Color: Black

Roboto font | Size: 30 | Line height: 40 | Letter spacing: 0 | Color: Black

Avenir Next font | Size: 25 | Line height: 35 | Letter spacing: 0 | Color: Black

Examples of font styles in use

Header 3 Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Another Header 3 Example

  • Bullet Point List Item 1
  • Bullet Point List Item 2, with two lines of text lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
  • Bullet Point List Item 3
    • Sub-Item Example 1
    • Sub-Item Example 2, with two lines of text lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
    • Sub-Item Example 3
      • Deep Nested Item 1
      • Deep Nested Item 2
  • Bullet Point List Item 4

Colors

Core Palette

#18A6D7
#FFFFFF
#000000

Extended Palette

#13556D
#3576B8
#575757
#959595
#F5F5F5

Buttons

Primary Button

Linear gradient: #3576B8 to #17497C

Border color: #245D97

Font color: #FFFFFF

Font size: 25

Font: Avenir Next Demi Bold

Height: 56px

Border: 2px

Boarder radius: 2px

Color: #18A6D7

Border color: #18A6D7

Font color: #FFFFFF

Font size: 25

Font: Avenir Next Demi Bold

Height: 56px

Border: 2px

Border radius: 2px

Secondary Button

Color: #FFFFFF

Border Color: #3576B8

Font color: #3576B8

Font Size: 25

Font: Avenir Next Demi Bold

Height: 56px

Border: 2px

Border radius: 2px

Color: #3576B8

Border color: #3576B8

Font color: #FFFFFF

Font size: 25

Font: Avenir Next Demi Bold

Height: 56px

Border: 2px

Boarder radius: 2px

Linear gradient: #3576B8 to #17497C

Border color: #245D97

Font color: #FFFFFF

Font size: 30

Font: Avenir Next Demi Bold

Height: 110px

Border: 1px

Boarder radius: 2px

Color: #F2F2F2

Border color: #FFFFFF

Chevron color: #FFFFFF

Chevron stroke: 2px

Width: 50px

Border: 2px

Border radius: 2px

Linear gradient: #3576B8 to #17497C

Border color: #245D97

Chevron color: #FFFFFF

Chevron stroke: 2px

Width: 50px

Border: 2px

Border radius: 2px

Linear gradient: #398BA9 to #1B495A

Border color: #2D7995

Chevron color: #FFFFFF

Chevron stroke: 2px

Width: 50px

Border: 2px

Border radius: 2px

Iconography

Line art. Single color

Graphic Elements

Dots & Gradients

Imagery

Examples of Images

Script