Colors

Color distinguishes our brand and helps us create consistent experiences across touchpoints.

The colors are classified based on names. Each color is represented by two HTML classes. One for the text color and the other for the background color.

When creating classes for a new color, duplicate the zs-section below and replace (do not rename) the class names on elements with text-{color name}-{scale unit} and bg-{color name}-{scale unit} with text-{new color name}-{scale unit} and bg-{new color name}-{scale unit} respectively.

  /**
   * Class naming convention for text color.
   */
  .text-{color name}-{scale unit}
  
  /**
   * Class naming convention for background color.
   */
  .bg-{color name}-{scale unit}

Blue
Status Colors
Gray
Neutrals

Brand Colors

Primary Brand Color — Blue

https://hihayk.github.io/scale/#4/5/70/96/0/-11/100/52/182180/24/33/128/white

Text Class:

aw-text-blue-50

BG Class:

aw-bg-blue-50

Hex Code:

#F5F5FC

Text Class:

aw-text-blue-100

BG Class:

aw-bg-blue-100

Hex Code:

#C4C4EB

Text Class:

aw-text-blue-200

BG Class:

aw-bg-blue-200

Hex Code:

#9393D6

Text Class:

aw-text-blue-300

BG Class:

aw-bg-blue-300

Hex Code:

#6465BE

Text Class:

aw-text-blue-400

BG Class:

aw-bg-blue-400

Hex Code:

#3C41A1

Text Class:

aw-text-blue-500

BG Class:

aw-bg-blue-500

Hex Code:

#182180

Text Class:

aw-text-blue-600

BG Class:

aw-bg-blue-600

Hex Code:

#0E176F

Text Class:

aw-text-blue-700

BG Class:

aw-bg-blue-700

Hex Code:

#070E5C

Text Class:

aw-text-blue-800

BG Class:

aw-bg-blue-800

Hex Code:

#020846

Text Class:

aw-text-blue-900

BG Class:

aw-bg-blue-900

Hex Code:

#00032F

Brand Colors

Primary Brand Color — Purple

https://hihayk.github.io/scale/#4/5/69/95/0/16/39/0/AE21B0/174/33/176/white

Text Class:

aw-text-purple-50

BG Class:

aw-bg-purple-50

Hex Code:

#FAF3FC

Text Class:

aw-text-purple-100

BG Class:

aw-bg-purple-100

Hex Code:

#E7C4F1

Text Class:

aw-text-purple-200

BG Class:

aw-bg-purple-200

Hex Code:

#D798E4

Text Class:

aw-text-purple-300

BG Class:

aw-bg-purple-300

Hex Code:

#C96ED5

Text Class:

aw-text-purple-400

BG Class:

aw-bg-purple-400

Hex Code:

#BB47C4

Text Class:

aw-text-purple-500

BG Class:

aw-bg-purple-500

Hex Code:

#AE21B0

Text Class:

aw-text-purple-600

BG Class:

aw-bg-purple-600

Hex Code:

#901B92

Text Class:

aw-text-purple-600

BG Class:

aw-bg-blue-700

Hex Code:

#721673

Text Class:

aw-text-purple-800

BG Class:

aw-bg-purple-800

Hex Code:

#541055

Text Class:

aw-text-purple-900

BG Class:

aw-bg-purple-900

Hex Code:

#360A37

Status Colors

Text Class:

aw-text-success-50

BG Class:

aw-bg-success-50

Hex Code:

#E6FFED

Text Class:

aw-text-success-500

BG Class:

aw-bg-success-500

Hex Code:

#22C55E

Text Class:

aw-text-success-700

BG Class:

aw-bg-success-700

Hex Code:

#00832E

Text Class:

aw-text-warning-50

BG Class:

aw-bg-warning-50

Hex Code:

#FFFFE6

Text Class:

aw-text-warning-500

BG Class:

aw-bg-warning-500

Hex Code:

#FCD34D

Text Class:

aw-text-warning-700

BG Class:

aw-bg-warning-700

Hex Code:

#8C8112

Text Class:

aw-text-error-50

BG Class:

aw-bg-error-50

Hex Code:

#FFE6E6

Text Class:

aw-text-error-500

BG Class:

aw-bg-error-500

Hex Code:

#DC2626

Text Class:

aw-text-error-700

BG Class:

aw-bg-error-700

Hex Code:

#8C0000

Gray

Text Class:

aw-text-gray-50

BG Class:

aw-bg-gray-50

Hex Code:

#FAFAFA

Text Class:

aw-text-gray-100

BG Class:

aw-bg-gray-100

Hex Code:

#F4F4F5

Text Class:

aw-text-gray-200

BG Class:

aw-bg-gray-200

Hex Code:

#E4E4E7

Text Class:

aw-text-gray-300

BG Class:

aw-bg-gray-300

Hex Code:

#D4D4D8

Text Class:

aw-text-gray-400

BG Class:

aw-bg-gray-400

Hex Code:

#A1A1AA

Text Class:

aw-text-gray-500

BG Class:

aw-bg-gray-500

Hex Code:

#71717A

Text Class:

aw-text-gray-600

BG Class:

aw-bg-gray-600

Hex Code:

#52525B

Text Class:

aw-text-gray-700

BG Class:

aw-bg-gray-700

Hex Code:

#3F3F46

Text Class:

aw-text-gray-800

BG Class:

aw-bg-gray-800

Hex Code:

#27272A

Text Class:

aw-text-gray-900

BG Class:

aw-bg-gray-900

Hex Code:

#18181B

Neutrals

Text Class:

aw-text-white

BG Class:

aw-bg-white

Hex Code:

#FFFFFF

Text Class:

aw-text-black

BG Class:

aw-bg-black

Hex Code:

#000000

Text Class:

aw-text-transparent

BG Class:

aw-bg-transparent

Hex Code:

N/A

➤