Handoff 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

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

Transparent

rgba(0, 0, 0, 0)

Border-

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

Null

Base

rgba(100, 100, 100, .15)

Dark

rgba(100, 100, 100, .3)

Darker

rgba(0, 0, 0, .3)

Darkest

rgba(0, 0, 0, .6)

Invert

rgba(200, 200, 200, .2)

Light

rgba(200, 200, 200, .4)

Lighter

rgba(255, 255, 255, .4)

Lightest

rgba(255, 255, 255, .75)

Extra-

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

Null

Info

#307abf

Info - darker

#286aa7

Info - lighter

#4a98e0

Success

#198754

Success - darker

#167b4c

Success - lighter

#2fa870

Warning

#ffc107

Warning - darker

#e0aa09

Warning - lighter

#ffce39

Danger

#dc3545

Danger - darker

#c32b3a

Danger - lighter

#f35d6c

Neutral

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

Gray 600

#6e6e6e

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 700

#555555

Gray 800

#333333

Gray 900

#191919

Black

#000000

Primary-

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

Blue

#0073e6

Blue - darker

#0f69c1

Blue - lighter

#258cf2

Secondary-

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

Null

Purple

#4c34b6

Purple - darker

#3b2794

Purple - lighter

#7158dd

Blue

#134872

Blue - darker

#103e62

Blue - lighter

#2e6a99

Text-

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

Null

Hard

#000000

Base

rgba(0, 0, 0, .8)

Soft

#555555

Muted

rgba(85, 85, 85, .8)

Hard [invert]

#ffffff

Base [invert]

rgba(255, 255, 255, .85)

Soft [invert]

rgba(255, 255, 255, .65)

Muted [invert]

rgba(255, 255, 255, .45)