Colors

Overview

In the Alza Design System (ADS), we have two main types of colors: Basic Colors and Semantic Colors. These colors serve different purposes in our design system and help create a cohesive, user-friendly experience across our applications.

Basic Colors

Basic colors represent the fundamental color palette used throughout the design system. They remain consistent across both light and dark modes.

Basic Color Palette

neutral

#FFFFFF

100

#F2F2F2

200

#E6E6E6

300

#CCCCCC

400

#B3B3B3

500

#757575

600

#4D4D4D

700

#333333

800

#1A1A1A

900

#000000

blueLight

100

#E5F4FD

200

#CCEAFA

300

#99D4F5

400

#66BFF1

500

#33A9EC

600

#0094E7

700

#0074B5

800

#00598B

900

#0E2B61

blueDark

100

#EFF3FD

200

#D9E4F9

300

#B2C3E5

400

#8BA3D1

500

#6482BC

600

#3D62A8

700

#164194

800

#0F2B61

900

#0A1D42

steel

100

#F1F3F5

200

#DDE1E7

300

#BEC6D1

400

#9EABBC

500

#7A8AA1

600

#344661

700

#29374D

800

#212C3D

900

#161D29

violet

100

#EADAF5

200

#CEB6DE

300

#B191C7

400

#956DB1

500

#78489A

600

#5C2483

700

#4A1D69

800

#38164F

900

#250E34

green

100

#EFFBE7

200

#DFF6D0

300

#BFEDA0

400

#9EE571

500

#7EDC41

600

#5ED312

700

#48A10E

800

#387F0B

900

#1C3E05

yellow

100

#FEF9D2

200

#FDF988

300

#FCE649

400

#FFD538

500

#FFCA05

600

#D1A500

700

#997900

800

#665000

900

#332800

MKT

#F8E923

orange

100

#FFF2E5

200

#FFE4CC

300

#FFC999

400

#FFAF66

500

#FF9433

600

#FF7900

700

#CC6300

800

#994900

900

#663000

red

100

#F9E8E8

200

#F3D1D1

300

#E8A2A3

400

#DC7474

500

#D14546

600

#C51718

700

#911112

800

#760E0E

900

#4F090A

b2b

100

#E8F7F3

200

#D2EFE8

300

#A1DECE

400

#73CEB7

500

#43BD9E

600

#389F84

700

#2C7D68

800

#215E4F

900

#174036

Semantic Colors

Semantic colors are used to convey meaning in the user interface. These colors are context-driven and help users quickly understand the significance of elements, such as success messages, warnings, or errors. Each semantic color has both light and dark mode variants to ensure accessibility and visual consistency across different themes.

Semantic Color Palette

text

headlineNeutral

#1A1A1A

#FFFFFF

headlineNeutralOnDark

#FFFFFF

#000000

headlinePositive

#387F0B

#5ED312

headlineWarning

#FF7900

headlineNegative

#C51718

#E1B100

bodyNeutral

#333333

#E6E6E6

bodyNeutralOnDark

#FFFFFF Opacity 90%

bodyAdditional

#757575

#B3B3B3

bodyDisabled

#757575

#E1B100

bodyPositive

#387F0B

#5ED312

bodyWarning

#FF7900

#E1B100

bodyNegative

#C51718

#E1B100

bodyCurrentPrice

#C51718

#DC7474

bodyOriginalPrice

#757575

#B3B3B3

availability

inStock

#387F0B

#5ED312

forOrder

#164194

#B2C3E5

account

bronze

#994900

#E1B100

silver

#4D4D4D

#E1B100

gold

#997900

#E1B100

benefit

#164194

#B2C3E5

b2b

#389F84

#E1B100

isic

#389F84

#E1B100

alzaPlus

#FF7900

alzaPremium

#911112

#E1B100

link

primary

#164194

#B2C3E5

secondary

#333333

#E6E6E6

tertiary

#757575

#B3B3B3

positive

#387F0B

#5ED312

negative

#C51718

#E1B100

background

primary

#FFFFFF

#333333

secondary

#F2F2F2

#1A1A1A

tertiary

#E6E6E6

#000000

dark

#1A1A1A

#E1B100

disabled

#E6E6E6

#E1B100

selected

#EFF3FD

#0A1D42

dialog

#000000 Opacity 80%

#000000 Opacity 90%

positiveLight

#EFFBE7

#1C3E05

positiveDark

#5ED312

negativeLight

#F9E8E8

#E1B100

negativeDark

#C51718

warningLight

#FEF9D2

#665000

warningDark

#FCE649

#E1B100

brandLight

#D9E4F9

#29374D

brandDark

#164194

#B2C3E5

alzaPlus

#FF7900

alzaPlusLight

#FFF2E5

#663000

border

neutral

#000000 Opacity 16%

brand

#D9E4F9

#344661

positive

#BFEDA0

#E1B100

warning

#FFD538

#997900

negative

#E8A2A3

#E1B100

focused

#3D62A8

#B2C3E5

selected

#164194

#B2C3E5

alzaPlus

#FF7900

#994900

Light and Dark Mode Variants

To support both light and dark modes, the semantic colors are defined with separate values for each mode. This ensures that all elements are readable and visually consistent across different environments.