Colors

The font color on the palettes below are aligned with the accessibility act and must be adhered to.

Primary Green

#97cc04

Secondary Green

#66a301

Dark Green

#2c7300

Teal

#00a0af

Medium Teal

#1f8191

Dark Teal

#05576f

Darkest Teal/Text

#012831

Blue

#1976d2

Medium Blue

#1565c0

Dark Blue

#0d4781

Darkest Blue

#081235

Light Gray

#e6e7e8

Additional shades are based off the Material Design Color System.

Fonts

The primary font family is Roboto.
https://fonts.google.com/specimen/Roboto

Light (300)
Regular (400)
Medium (500)

Hero H1 60px

H1 2.8125rem / 45px

H2 2.25rem / 36px

H3 1.96875rem / 31.5px

H4 1.6875rem / 27px

H5 1.40625rem / 21.5px

H6 1.125rem / 18px

Paragraph Text | 1.125rem / 18px

“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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.check-list

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list .list-smaller

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list check-list-green

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list .check-list-green .list-smaller

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list check-list-blue

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list .check-list-blue .list-smaller

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list check-list-teal

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list .check-list-teal .list-smaller

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list check-list-teal-dark

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

.check-list .check-list-teal-dark .list-smaller

Excepteur sint occaecat cupidatat non proident
Sed ut perspiciatis unde omnis iste natus error
Ut enim ad minima veniam, quis

Website Component Library

All block components include settings that place a connecting graphical element at the top and bottom (or both) to connect sectional content and guide the user’s eye.

See Elements

Buttons and Links

.btn-cta

Digital Guide