8x8 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.

Dark Gray

#3a3a3b

Off White

#ebeae1

White

#ffffff

Secondary

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

Null

Vibrant Green

#c9dc50

Deep Green

#72ad6c

Vibrant Teal

#8ab8af

Deep Teal

#04888a

Vibrant Orange

#ffb500

Deep Orange

#f37944

Vibrant Purple

#d28dd3

Deep Purple

#816aae

Primitive

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

Green

Green 100

#def164

Green 200

#c9dc50

Green 300

#b6e175

Green 400

#9ad36e

Green 500

#81c469

Green 600

#72ad6c

Green 700

#53963b

Green 800

#426e21

Green 900

#283b0d

Orange

Orange 100

#fcffc7

Orange 200

#fff7ad

Orange 300

#ffe38f

Orange 400

#ffb500

Orange 500

#f3a244

Orange 600

#f37944

Orange 700

#f56e00

Orange 800

#b86e00

Orange 900

#755800

Purple

Purple 100

#fbd0e9

Purple 200

#f3b5e6

Purple 300

#e69de7

Purple 400

#d28dd3

Purple 500

#a275c7

Purple 600

#816aae

Purple 700

#7540a0

Purple 800

#68277c

Purple 900

#551556

Teal

Teal 100

#b5e4db

Teal 200

#8ab8af

Teal 300

#73bcb3

Teal 400

#30b6ab

Teal 500

#1aa39e

Teal 600

#04888a

Teal 700

#0f5c5a

Teal 800

#0f3935

Teal 900

#0a1917

Neutral

Neutral 100

#ffffff

Neutral 200

#f4f3ee

Neutral 300

#ebeae1

Neutral 400

#c8c8bd

Neutral 500

#aba999

Neutral 600

#8d887e

Neutral 700

#6c6862

Neutral 800

#57554e

Neutral 900

#3a3a3b

Neutral 950

#26252a

Text

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

Primary

#3a3a3b

White

#ffffff