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

#A7A7A7

500

#6E6E6E

600

#4D4D4D

700

#242424

800

#121212

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

#91B7FF

400

#6696E0

500

#4B7CD1

600

#3163C2

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

#472100

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

#121212

#FFFFFF

headlineNeutralOnDark

#FFFFFF

#000000

headlineGreen

#387F0B

#5ED312

headlineOrange

#FF7900

headlineRed

#C51718

#00FF37

bodyNeutral

#242424

#E6E6E6

bodyNeutralOnDark

#FFFFFF Opacity 90%

bodyAdditional

#6E6E6E

#A7A7A7

bodyPlaceholder

#A7A7A7

bodyDisabled

#A7A7A7

#00FF37

bodyGreen

#387F0B

#5ED312

bodyOrange

#FF7900

#00FF37

bodyRed

#C51718

#00FF37

bodyCurrentPrice

#C51718

#DC7474

bodyOriginalPrice

#6E6E6E

#A7A7A7

availability

inStock

#387F0B

#5ED312

forOrder

#164194

#91B7FF

account

bronze

#CC6300

#00FF37

silver

#4D4D4D

#00FF37

gold

#997900

#00FF37

benefit

#164194

#91B7FF

b2b

#389F84

#00FF37

isic

#389F84

#00FF37

alzaPlus

#FF7900

alzaPremium

#911112

#00FF37

link

primary

#164194

#91B7FF

secondary

#242424

#E6E6E6

tertiary

#6E6E6E

#A7A7A7

positive

#387F0B

#5ED312

negative

#C51718

#00FF37

background

primary

#FFFFFF

#242424

secondary

#F2F2F2

#121212

tertiary

#E6E6E6

#000000

dark

#121212

#00FF37

disabled

#E6E6E6

#00FF37

selected

#EFF3FD

#0A1D42

dialog

#000000 Opacity 80%

#000000 Opacity 90%

positiveLight

#EFFBE7

#1C3E05

positiveDark

#5ED312

negativeLight

#F9E8E8

#00FF37

negativeDark

#C51718

warningLight

#FEF9D2

#665000

warningDark

#FCE649

#00FF37

brandLight

#D9E4F9

#29374D

brandDark

#164194

#91B7FF

alzaPlus

#FF7900

alzaPlusLight

#FFF2E5

#472100

border

neutral

#000000 Opacity 16%

#FFFFFF Opacity 16%

brand

#D9E4F9

#344661

positive

#BFEDA0

#00FF37

warning

#FFD538

#997900

negative

#E8A2A3

#00FF37

focused

#3163C2

#91B7FF

selected

#164194

#91B7FF

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.