Color Tokens
Complete color token system, including the original documented palette and new tokens proposed based on Quartz SB for design system migration.
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 | Token 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 | Token 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 | Token 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-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 | Token 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-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 | Token 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 | Token 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 | Token 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 | Token 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 | Token Name | Value | Description |
|---|---|---|---|
| --zeigo-bight-grey | #E9E8EA | ||
| --zeigo-dark-grey | #545454 | var(--Typography-Medium) | |
| --warning | #FF9900 | ||
| --warning-5 | #fdf1df |