Zeta Design System
Dark mode

Color System (work in progress)

Overview
Prototype
Implementation
Accessibility
Resources

The color palette cultivates a uniform and identifiable coherence across a diverse range of digital products and interfaces. This coherence is anchored in a set of clearly defined guidelines on how to navigate the Zeta color component library within the parameters of dark and light themes.

Color anatomy

Our neutral gray (warm and cool) family takes center stage in the default themes, utilizing subtle variations in value to create clear demarcations between different zones of content.

Meanwhile, our core blue family serves as the primary action color throughout all of our products and experiences. We carefully and intentionally incorporate additional colors sparingly to achieve a harmonious overall design specially when switching product themes to adress all of our sub products.

Full color pallette contrast

Here is the full color pallette we currently use. To create a consistent harmonious color system, color palettes must be created using a defined algorithm that takes into account all dimensions -Hue, Saturation, Brightness. There are some inconsistencies to our current library but we are currently working on and we will be proposing a new one that meets these criteria soon. Please use this tool to generate new color themes per dedicated usage: Colorbox.io

Color
New color proposal
Blue
Green
Red
Orange
Purple
Yellow
Teal
Pink
Gray warm
Gray cool
Color token
HEX
Accessibility*
Accessibility*
color-zeta--blue-100
#101b25
AAA 16.07
AAA 17.42
color-zeta--blue-90
#002c58
AAA 13.99
AAA 13.99
color-zeta--blue-80
#004d99
AAA 7.68
AAA 8.33
color-zeta--blue-70
#0061c2
AA 5.55
AAA 6.02
color-zeta--blue-60
#0073e6
FAIL 4.22
AA 4.57
color-zeta--blue-50
#198cff
FAIL 3.11
FAIL 3.37
color-zeta--blue-40
#7ebeff
AAA 8.47
FAIL 1.96
color-zeta--blue-30
#b7dbff
AAA 11.56
FAIL 1.44
color-zeta--blue-20
#e2f1ff
AAA 14.47
FAIL 1.15
color-zeta--blue-10
#f1f8ff
AAA 15.54
FAIL 1.07
Color token
HEX
Accessibility*
Accessibility*
color-zeta--green-100
#081711
AAA 16.98
AAA 18.41
color-zeta--green-90
#00331E
AAA 12.98
AAA 14.07
color-zeta--green-80
#005F38
AAA 7.19
AAA 7.80
color-zeta--green-70
#006D3F
AA 5.94
AAA 6.44
color-zeta--green-60
#00864F
FAIL 4.28
AA 4.64
color-zeta--green-50
#00AB64
FAIL 2.76
FAIL 3.00
color-zeta-green-40
#84DAB6
AAA 10.05
FAIL 1.66
color-zeta--green-30
#BEEFDB
AAA 13.12
FAIL 1.27
color-zeta--green-20
#D8FFEF
AAA 15.43
FAIL 1.08
color-zeta--green-10
#ECFFF7
AAA 16.01
FAIL 1.04
Color token
HEX
Accessibility*
Accessibility*
color-zeta--red-100
#220F11
AAA 16.93
AAA 18.35
color-zeta--red-90
#520008
AAA 14.22
AAA 15.42
color-zeta--red-80
#8F000E
AAA 8.91
AAA 9.66
color-zeta--red-70
#B50012
AA 6.52
AAA 7.06
color-zeta--red-60
#D70015
AA 4.97
AA 5.38
color-zeta--red-50
#E12A3D
FAIL 4.21
AA 4.57
color-zeta-red-40
#FF8692
AAA 7.19
FAIL 2.31
color-zeta--red-30
#FFB3BB
AAA 9.84
FAIL 1.69
color-zeta--red-20
#FFE1E4
AAA 13.58
FAIL 1.23
color-zeta--red-10
#FFF0F1
AAA 15.04
FAIL 1.11
Color token
HEX
Accessibility*
Accessibility*
color-zeta--orange-100
#1E1100
AAA 17.06
AAA 18.50
color-zeta--orange-90
#402600
AAA 12.96
AAA 14.04
color-zeta--orange-80
#915400
AA 5.58
AA 6.05
color-zeta--orange-70
#AE6500
FAIL 4.16
AA 4.51
color-zeta--orange-60
#C87500
FAIL 3.23
FAIL 3.50
color-zeta--orange-50
#EF8B00
AA 6.63
FAIL 2.51
color-zeta-orange-40
#FFA21F
AAA 8.27
FAIL 2.01
color-zeta--orange-30
#FFB348
AAA 9.34
FAIL 1.78
color-zeta--orange-20
#FFD292
AAA 11.79
FAIL 1.41
color-zeta--orange-10
#FFE7C6
AAA 13.86
FAIL 1.20
Color token
HEX
Accessibility*
Accessibility*
color-zeta--purple-100
#180F22
AAA 17.14
AAA 18.58
color-zeta--purple-90
#260052
AAA 16.09
AAA 17.44
color-zeta--purple-80
#43008F
AAA 11.85
AAA 12.84
color-zeta--purple-70
#5500B5
AAA 9.43
AAA 10.23
color-zeta--purple-60
#6400D6
AAA 7.71
AAA 8.36
color-zeta--purple-50
#7E0CFF
AA 5.73
AA 6.21
color-zeta-purple-40
#CEA4FF
AAA 8.22
FAIL 2.02
color-zeta--purple-30
#E6D1FF
AAA 11.83
FAIL 1.41
color-zeta--purple-20
#EFE1FF
AAA 13.38
FAIL 1.24
color-zeta--purple-10
#F7F0FF
AAA 14.94
FAIL 1.11
Color token
HEX
Accessibility*
Accessibility*
color-zeta--yellow-100
#181400
AAA 17.01
AAA 18.44
color-zeta--yellow-90
#352B00
AAA 12.94
AAA 14.03
color-zeta--yellow-80
#766200
AA 5.51
AA 5.97
color-zeta--yellow-70
#8D7400
FAIL 4.18
AA 4.53
color-zeta--yellow-60
#A38600
FAIL 3.25
FAIL 3.52
color-zeta--yellow-50
#C3A000
AA 6.61
FAIL 2.52
color-zeta-yellow-40
#DAB300
AAA 8.26
FAIL 2.01
color-zeta--yellow-30
#FFD71D
AAA 11.88
FAIL 1.40
color-zeta--yellow-20
#FFEA89
AAA 13.77
FAIL 1.21
color-zeta--yellow-10
#FFF7D4
AAA 15.45
FAIL 1.08
Color token
HEX
Accessibility*
Accessibility*
color-zeta--teal-100
#0A1616
AAA 17.01
AAA 18.44
color-zeta--teal-90
#003535
AAA 12.41
AAA 13.46
color-zeta--teal-80
#005B5B
AAA 7.32
AAA 7.93
color-zeta--teal-70
#017474
AA 5.16
AA 5.60
color-zeta--teal-60
#018786
FAIL 4.03
FAIL 4.36
color-zeta--teal-50
#25BBBB
AAA 7.05
FAIL 2.36
color-zeta-teal-40
#7DE8E8
AAA 11.55
FAIL 1.44
color-zeta--teal-30
#BCFBFB
AAA 14.52
FAIL 1.15
color-zeta--teal-20
#D9FFFF
AAA 15.61
FAIL 1.07
color-zeta--teal-10
#FFF7D4
AAA 16.09
FAIL 1.03
Color token
HEX
Accessibility*
Accessibility*
color-zeta--pink-100
#2E001E
AAA 17.07
AAA 18.50
color-zeta--pink-90
#47002D
AAA 14.84
AAA 16.08
color-zeta--pink-80
#640040
AAA 11.99
AAA 13.00
color-zeta--pink-70
#840054
AAA 9.19
AAA 9.96
color-zeta--pink-60
#AB006D
AA 6.56
AAA 7.11
color-zeta--pink-50
#E0008F
FAIL 3.62
AA 4.60
color-zeta-pink-40
#FE78CD
AA 6.96
FAIL 2.39
color-zeta--pink-30
#FF94D8
AAA 8.30
FAIL 2.00
color-zeta--pink-20
#FFE3F5
AAA 13.91
FAIL 1.20
color-zeta--pink-10
#FFF7FC
AAA 15.81
FAIL 1.05
Color token
HEX
Accessibility*
Accessibility*
color-zeta--gray-warm-100
#151519
AAA 16.80
AAA 18.20
color-zeta--gray-warm-90
#202020
AAA 15.03
AAA 16.29
color-zeta--gray-warm-80
#313131
AAA 12.00
AAA 13.01
color-zeta--gray-warm-70
#585858
AA 6.56
AAA 7.11
color-zeta--gray-warm-60
#858585
FAIL 3.40
AAA 13.01
color-zeta--gray-warm-50
#B9B9B9
AAA 8.48
FAIL 1.96
color-zeta--gray-warm-40
#DEDEDE
AAA 12.37
FAIL 1.35
color-zeta--gray-warm-30
#EDEDED
AAA 14.21
FAIL 1.17
color-zeta--gray-warm-20
#F7F7F7
AAA 15.53
FAIL 1.07
color-zeta--gray-warm-10
#FAFAFA
AAA 15.94
FAIL 1.04
Color token
HEX
Accessibility*
Accessibility*
color-zeta--gray-cool-100
#0C0D0E
AAA 17.95
AAA 19.45
color-zeta--gray-cool-90
#1D1E23
AAA 15.35
AAA 16.64
color-zeta--gray-cool-80
#2C2F36
AAA 12.36
AAA 13.40
color-zeta--gray-cool-70
#545963
AA 6.49
AAA 7.03
color-zeta--gray-cool-60
#7A8190
FAIL 3.61
FAIL 3.91
color-zeta--gray-cool-50
#8D95A3
FAIL 2.78
FAIL 3.02
color-zeta--gray-cool-40
#CED2DB
AAA 10.99
FAIL 1.51
color-zeta--gray-cool-30
#E0E3E9
AAA 12.94
FAIL 1.29
color-zeta--gray-cool-20
#F3F6FA
AAA 15.35
FAIL 1.08
color-zeta--gray-cool-10
#F8FBFF
AAA 16.03
FAIL 1.04

Soon coming

Alerts

Current alert colors.

color-zeta--positive
(green 60)
#00864F
FAIL 4.28
AA 4.64

Possitive

color-zeta--negative
(red 60)
#D70015
AA 4.97
AA 5.38

Negative

color-zeta--warning
(orange 60)
#C87500
FAIL 3.23
FAIL 3.50

Warning

color-zeta--info
(blue-60)
#0073e6
FAIL 4.22
AA 4.57

Info

Layering

to do