Design System

Typography

Titles

Title 1: Flama Extra Bold, 60px

Examples

stat number

Title 2: Flama Bold, 36px

Example Classes

H2 centered

Principles Title Heading

Title 3: Flama Bold, 32px

Example Classes

Page Subheading

Title 4: Flama Bold, 24px

Example Classes

heading no margin / 24px

Title 5: Flama Bold, 18px

Example Classes

Principles Bullet Text

Dashboard heading

Title 6: Flama Bold, 16px

Example Classes

Principles Heading Home

Event Date

Title 7: Flama Bold, 14px

Example Classes

Event Name

event archive heading

Title 8: Roboto, 14px

Example Classes

CFO name

Body Text

Body 1: Roboto Light, 19.2px

Example Classes

Principles Text Container

Body 2: Roboto Light, 18px

Example Classes

Body 2: Roboto Light, 18px / stat label

Body 3: Roboto Light, 16px

Example Classes

Body 3: Roboto Light, 16px / Analysis Table Text

Body 3: Roboto Light, 16px / Banner Content Principles Text

Body 3: Roboto Light italic, 16px / Principles Link Text

Body 4: Roboto Light, 14px

Example Classes

Body 4: Roboto Light, 14px / CFO body text

Body 4: Roboto Light, 14px / Description Chevron Block

Body 4: Roboto Light, 14px / CFO caption

Body 4: Roboto Light italic, 14px / CFO quote

Body 5: Roboto Light, 12px

Example Classes

Body 5: Roboto Light italic, 12px / Dashboard Bar Chart Label

Button Text

Button Text 1: Flama Bold, 16px

Example Classes

Button Text 2: Flama Bold, 14px

Example Classes

Colors

Primary

Blue 1: UNGC Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Blue 2: Royal Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Blue 3: Cornflower Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Blue 4: Light Steel Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Primary Hover

Blue 1: UNGC Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Blue 2: Royal Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Blue 3: Cornflower Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Blue 4: Light Steel Blue

Default
H 216 / S 63 / B 31
Hex: #1e3250

Secondary

Teal

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Goldenrod

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Crimson

Default
H 216 / S 63 / B 31
Hex: #1e3250

Secondary Hover

Teal

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Goldenrod

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Crimson

Default
H 216 / S 63 / B 31
Hex: #1e3250

Grays

Black

Default
H 216 / S 63 / B 31
Hex: #1e3250

Gray 1: Dark Slate Gray

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Gray 2: Dark Gray

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Gray 3+: UNGC footer background

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Gray 4: Gainsboro

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

White

Default
H 216 / S 63 / B 31
Hex: #1e3250

Hover
H 216 / S 62 / B 42
Hex: #28426a

Buttons

LARGE

PRIMARY

SECONDARY

OUTLINED

TEXT

Enabled

Icon

Hover

Disabled

MEDIUM

PRIMARY

SECONDARY

OUTLINED

TEXT

Enabled

Icon

Hover

Disabled

Grids

992px up / 12 columns / col 60 gutter 20

768-991px / 12 columns / col 44 gutter 20

767px down / 2 columns / col 100% gutter 20

Container 12 columns: 960px / 748px

Container 10 columns: 800px / 620px

Container 14 columns: 1120px

Container 16 columns: 1280px

Container 18 columns: 1440px

Container 20 columns: 1600px

Container 22 columns: 1760px

Container 24 columns: 1920px