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
Text Link Styles

This is the appearance of a link on light background.

This is the appearance of a visited link.

This is the appearance of a link that goes to an external website.

This is the appearance of a text link on a dark background.

This is a working text link.

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

Default

Standard Button

Hover

Standard Button

Active

Standard Button

Focus

Standard Button

Disabled

Standard Button

Working button

Standard Button
Primary Button (Dark Background)

Default

Standard Button

Hover

Standard Button

Active

Standard Button

Focus

Standard Button

Disabled

Standard Button

Working button

Standard Button
Secondary Button

Default

Button

Hover

Button

Active

Button

Focus

Button

Disabled

Button

Working button

Button
Social Share
Pagination

Icons & Graphics

Menu & Navigation
House shaped icon Magnify glass icon Chevron down icon
Social Icons
Research Areas
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Components
Molecules
Molecule Tall Sky Blue Molecule Tall Lime Molecule Wide Sky Blue Molecule Wide Lime

Form Elements

Search
Filter List

List Name (3)

Caret icon
Refine Results
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