Style Guide

Typography

Primary
Spezia Serif

ÀÁÂÃABCDEFGHIJKLMNOPQRSTUVWXYZ àáâãäåabcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()+ ÆÇÈØ£×ßåæç
Aa
Secondary
Proxima Nova

ÀÁÂÃABCDEFGHIJKLMNOPQRSTUVWXYZ àáâãäåabcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()+ ÆÇÈØ£×ßåæç
Aa
Heading Sizes
font-family: 'Spezia Serif'
font-weight: 600 (Semi-bold)
font-size: 54px
line-height: 64px
letter-spacing: -5
Display 1 Max
font-family: 'Spezia Serif'
font-weight: 600 (Semi-bold)
font-size: 36px
line-height: 48px
letter-spacing: -15
Display 1 Min
font-family: 'Spezia Serif'
font-weight: 600 (Semi-bold)
font-size: 42px
line-height: 48px
letter-spacing: -2
Heading 1 Max
font-family: 'Spezia Serif'
font-weight: 600 (Semi-bold)
font-size: 28px
line-height: 32px
letter-spacing: 0
Heading 1 Min
font-family: 'Spezia Serif'
font-weight: 600 (Semi-bold)
font-size: 32px
line-height: 40px
letter-spacing: -2
Heading 2 Max
font-family: 'Spezia Serif'
font-weight: 600 (Semi-bold)
font-size: 24px
line-height: 32px
letter-spacing: -2
Heading 2 Min
font-family: 'Proxima Nova'
font-weight: 700 (Bold)
font-size: 28px
line-height: 32px
letter-spacing: 0
Heading 3 Max
font-family: 'Proxima Nova'
font-weight: bold 700
font-size: 22px
line-height: 24px
letter-spacing: 0
Heading 3 Min
font-family: 'Proxima Nova'
font-weight: 700 (Bold)
font-size: 20px
line-height: 24px
letter-spacing: 0
Heading 4
font-family: 'Proxima Nova'
font-weight: 700 (Bold)
font-size: 18px
line-height: 24px
letter-spacing: 0
Heading 5
Paragraphs
font-family: 'Proxima Nova'
font-weight: 400 (Regular)
font-size: 18px
line-height: 24px
Body Copy. A series of
sentences together which
make a paragraph.
font-family: 'Proxima Nova'
font-weight: 400 (Regular)
font-size: 14px
line-height: 20px
Caption. A series of sentences
together which make up a sentence.
List Styles
  • Primary Unordered list Item
    • Secondary Unordered list Item
      • Tertiary Unordered list Item
  • Primary Unordered list Item
  1. Primary Unordered list Item
    1. Secondary Unordered list Item
      1. Tertiary Unordered list Item
  2. Primary Unordered list Item

Colors

Primary
$color--blue
#092AB9
$color--blue-sky
#25C2F2
Secondary
$color--lime
#A4E45C
$color--yellow
#FAD00D
$color--lavender
#A772FF
$color--blue-navy
#072068
Neutrals
$color--gray-light
#D8DDDC
$color--white
#FFF
$color--black
#1B1B1B
Gradients
$gradient-one
$gradient-two
$gradient-three

Containers

Max Container

Class: "block-container--max"

The outer element of any blocks that visually touch the edges
  • Used in:
  • Logos Grid
  • Awardee Spotlight
  • Articles Block
  • CTAs
  • Footer

X-Large Container
Class: "block-container--xlarge"

The largest container for the inner part of blocks, aka the actual content
  • Used in:
  • Header
  • Hero
  • Video Block
  • Logos Grid
  • Links List
  • Newsletter Block
  • Timeline
  • Impact Numbers
  • Commitee Group Listing?
Large Container
Class: "block-container--large"

  • Used in:
  • Full width Image with Caption
  • Image / Text CTA
  • 3 or 4 column CTA
  • Accordion
  • Awardee Spotlight
  • CTA
Narrow Container
Class: "block-container--medium"

  • Used in:
  • WYSIWYG
  • Centered Quote

Buttons

Primary Button

Working button

Standard Button
Primary Button (Dark Background)

Working button

Standard Button
Secondary Button

Default

Button

Hover

Button

Active

Button

Focus

Button

Disabled

Button

Working button

Button
Pagination

Icons & Graphics

Form Elements

Search
Filter List

List Name (3)

Caret icon Caret Icon
Dropdown
Radio
Radio
Checkbox
Checkbox
Newsletter Sign-up Form
Form Field
Form Field Active
Form Field with Focus
Form Field with Error Message
Helpful Error Message
Completed Form Field
Message Field
Submit Button