Colors

Complete library color system, including the current palette in use and migration roadmap towards new Quartz SB tokens according to ZUD documentation.

Whites and Grays

These whites and grays provide a neutral foundation for the user interface. They offer subtle variations that create depth and visual interest without distracting from the primary content.

ColorNameValueDescription
white#fff
off-white#FCFAFF
white-10#FFFFFF
white-20#FFFFFF
white-30#FCFCFC
white-40#D4D4D4
white-50#C7B0CE
white-60#F0EFF3
light-gray#bbbbbb
gray#f3f6fb
gray-70#6D6D6D
light-gray-10#eeecec
light-gray-200#F2F2F2
light-gray-300#e2e1e1
dark-gray-10#6f6f70
dark-gray-20#FAFAFA
dark-gray-30#FEFEFE
dark-gray-40#FDFCFFdropdown item hover state
dark-gray-50#f8fbff
dark-gray-70#868686
dark-gray-100#f3f6fc
dark-gray-200#eef0f6
dark-gray-250#3C2658
dark-gray-280#EEEDEF
dark-gray-300#e1e3e9
dark-gray-350#8F8F8F
dark-gray-405#BEC1C6
dark-gray-410#D0D5DDtextbox normal state
dark-gray-420#DCDBDD
dark-gray-450#F4F2F4
dark-gray-500#9fa1a7
dark-gray-505#A0A2A7
dark-gray-510#908E96textbox hover state
dark-gray-515#86848D
dark-gray-545#76797E
dark-gray-580#6F6F6F
dark-gray-585#696969
dark-gray-590#6F6E77
dark-gray-650#626569
dark-gray-700#171717
dark-gray-750#171717
dark-gray-800#43454a
dark-gray-850#2a1a2f
dark-gray-900#222428

Purple

These purples are the primary brand colors for Zeigo. They evoke feelings of creativity and luxury and can be used for backgrounds, text, and accents.

ColorNameValueDescription
zeigo-purple#3A2456
purple-650#383A3D
purple-600#18191B
purple-550#1D122B
purple-500#2A1A2F
purple-400#684299
purple-390#7046a4
purple-350#7E498F
purple-300#9460A4
purple-250#910DB2
purple-200#643B72
purple-180#b997e7
purple-160#c6b2cd
purple-150#DECFF2
purple-40#3a245666
purple-20#F6F4F7
purple-15#f7eff9
purple-10#F6F2FC

Blue

These blues are used to communicate a sense of calmness and trust. They can be used as backgrounds, text, or accents to create a consistent and harmonious user experience.

ColorNameValueDescription
neo-blue#0b3b6b
sky-blue#42b4e6
blue-1#E8E8EA
blue-2#FAF7FA
blue-5#F9F8F9
blue-10#F1EBF9
blue-15#F1EBF9
blue-20#F3FBFF
blue-25#f2f6ff
blue-40#E6F4F2
blue-45#ede6ef
blue-50#dae1ec
blue-45#bfc9d9
blue-50#97a6be
blue-100#97a6be
blue-200#7084a4
blue-350#0894B3
green-380#0F8AB2
blue-400#516a93
blue-500#305283
blue-550#3a9abf
blue-600#2a4a7b
blue-650#0F8AB2
blue-800#1D122B
blue-850#4963EA
blue-950#011e4c
blue-1000#082A39
light-blue-20#DDF2FA

Red

These reds are used to communicate alerts and errors. They provide a clear visual cue to the user that something needs their attention.

ColorNameValueDescription
red#d25151
error-red#E5484D
red-opacityrgba(210, 81, 81, 0.2)
error-input#f9a4a4
red-100#DC3D43
red-90#CD2B31
red-10#EEEEEE
red-5#f5f5f5
red-80#D55B5B
red-70#D25151
red-10#D25151
red-20#dca5a5

Greens

These greens are used to communicate success states and positive actions. They provide clear feedback to users when operations complete successfully.

ColorNameValueDescription
light-greenrgba(61, 205, 88, 0.1)
light-green-hoverrgba(61, 205, 88, 0.15)
lime#9ee6ab
lime-green-hover#adf3ba
dark-green#009530
dark-green-hover#1fb04e
green-100#D9F3EE
green-500#30A46C
green-700#0E9888
life-green-700#00a01c

Dark

These shades of black provide a sophisticated and modern feel. The subtle differences between them allow for versatile use throughout the user interface.

ColorNameValueDescription
black#000000
zeigo-black#18191B
zeigo-black-400#1A1523
near-black-600#333333

Aqua

The aqua colors are a vibrant variety of blue, designed to evoke feelings of tranquility and assurance. These shades work well as backgrounds, text elements, and accents, contributing to a consistent user experience.

ColorNameValueDescription
aqua-700#209cd1
aqua-600#0083bc
aqua-400#0F84B2

Violet

The violet colors offer a unique purple tone, crafted to bring a sense of creativity and calm. Ideal for backgrounds, text, and accents, these shades ensure a smooth and engaging user experience.

ColorNameValueDescription
violet-10#EFECF4
violet-5#E4E2E4

Miscellaneous

This is a set of "Miscellaneous" colors that offer a unique purple tone, crafted to bring a sense of creativity and calm. Ideal for backgrounds, text, and accents, these shades ensure a smooth and engaging user experience.

ColorNameValueDescription
zeigo-bight-grey#E9E8EA
zeigo-dark-grey#545454var(--Typography-Medium)
warning#FF9900
warning-5#fdf1df