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.
| Color | Name | Value | Description |
|---|---|---|---|
| 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 | #FDFCFF | dropdown 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 | #D0D5DD | textbox normal state | |
| dark-gray-420 | #DCDBDD | ||
| dark-gray-450 | #F4F2F4 | ||
| dark-gray-500 | #9fa1a7 | ||
| dark-gray-505 | #A0A2A7 | ||
| dark-gray-510 | #908E96 | textbox 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.
| Color | Name | Value | Description |
|---|---|---|---|
| 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.
| Color | Name | Value | Description |
|---|---|---|---|
| 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.
| Color | Name | Value | Description |
|---|---|---|---|
| red | #d25151 | ||
| error-red | #E5484D | ||
| red-opacity | rgba(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.
| Color | Name | Value | Description |
|---|---|---|---|
| light-green | rgba(61, 205, 88, 0.1) | ||
| light-green-hover | rgba(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.
| Color | Name | Value | Description |
|---|---|---|---|
| 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.
| Color | Name | Value | Description |
|---|---|---|---|
| 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.
| Color | Name | Value | Description |
|---|---|---|---|
| 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.
| Color | Name | Value | Description |
|---|---|---|---|
| zeigo-bight-grey | #E9E8EA | ||
| zeigo-dark-grey | #545454 | var(--Typography-Medium) | |
| warning | #FF9900 | ||
| warning-5 | #fdf1df |