Craftable Design System

Colors

Color system built out of main brand colors and adjusted for variety of interfaces.

CSS Tokens SASS Tokens Style Dictionary Component Types

Primary

Colors that are used most frequently across all pages and components.

Null

Blue

#006bad

Blue - darker

#173a7b

Blue - lighter

#4f95d9

Yellow

#ffab00

Yellow - darker

#eb9439

Yellow - lighter

#ffc66b

Secondary

Colors that are used most frequently across all pages and components.

Null

Green Lighter

#68cb88

Secondary Green

#54b873

Green Secondary Darker

#009142

Teal

#62c2cd

Teal- darker

#00a0aa

Teal- lighter

#3bdce6

Secondary Red

#f07036

Secondary Red Dark

#c44740

Secondaty Red Light

#ff7b7b

Red

#d85b54

Border

Colors that are used most frequently across all pages and components.

Null

Base

rgba(0, 0, 57, .15)

Dark

rgba(0, 0, 57, .3)

Darker

rgba(0, 0, 57, .3)

Darkest

rgba(0, 0, 57, .8)

Invert

rgba(200, 200, 200, .2)

Light

rgba(200, 200, 200, .4)

Lighter

rgba(255, 255, 255, .4)

Lightest

#ffffff

Gradients

Colors that are used most frequently across all pages and components.

Transparent

rgba(0, 0, 0, 0)

Blue –> Green

linear-gradient(180deg, rgba(39, 109, 177, .14) 0%, rgba(19, 180, 190, 0) 100%)

Light-blue

Colors that are used most frequently across all pages and components.

Background

#f2f6fa

Neutral

Colors that are used most frequently across all pages and components.

Null

White

#ffffff

Gray 100

#f8f8f8

Gray 200

#e5e5e5

Gray 300

#cccccc

Gray 400

#aaaaaa

Gray 500

#888888

Gray 600

#6e6e6e

Gray 700

#555555

Gray 800

#333333

Gray 900

#191919

Black

#000000

Text

Colors that are used most frequently across all pages and components.

Null

Hard

#02094b

Base

rgba(2, 9, 75, .8)

Soft

rgba(2, 9, 75, .7)

Muted

rgba(2, 9, 75, .35)

Hard [invert]

#ffffff

Base [invert]

rgba(255, 255, 255, .85)

Soft [invert]

rgba(255, 255, 255, .65)

Muted [invert]

rgba(255, 255, 255, .45)