These color tokens serve as a standardized way to reference colors in UI Kit React,
ensuring consistency and efficiency in design implementation.
Core Color Tokens
Red
| | Name | Value |
| |
--ui-kit-color-red-100 | #FFF0E8 |
| |
--ui-kit-color-red-200 | #FEDFD5 |
| |
--ui-kit-color-red-300 | #FFBCAD |
| |
--ui-kit-color-red-400 | #FA7A64 |
| |
--ui-kit-color-red-500 | #E54A32 |
| |
--ui-kit-color-red-600 | #B83525 |
| |
--ui-kit-color-red-700 | #822824 |
| |
--ui-kit-color-red-800 | #592728 |
| |
--ui-kit-color-red-900 | #402629 |
| |
--ui-kit-color-red-1000 | #2B2123 |
| |
--ui-kit-color-red-accent | #FF4747 |
Orange
| | Name | Value |
| |
--ui-kit-color-orange-100 | #FFF2E8 |
| |
--ui-kit-color-orange-200 | #FFE4D1 |
| |
--ui-kit-color-orange-300 | #FAC096 |
| |
--ui-kit-color-orange-400 | #F5964E |
| |
--ui-kit-color-orange-500 | #D67022 |
| |
--ui-kit-color-orange-600 | #A35214 |
| |
--ui-kit-color-orange-700 | #7A4518 |
| |
--ui-kit-color-orange-800 | #573B23 |
| |
--ui-kit-color-orange-900 | #3D2F22 |
| |
--ui-kit-color-orange-1000 | #2B241D |
| |
--ui-kit-color-orange-accent | #FF8B33 |
Yellow
| | Name | Value |
| |
--ui-kit-color-yellow-100 | #FFF6E5 |
| |
--ui-kit-color-yellow-200 | #FFEECC |
| |
--ui-kit-color-yellow-300 | #FFDD99 |
| |
--ui-kit-color-yellow-400 | #FABF5A |
| |
--ui-kit-color-yellow-500 | #E09C24 |
| |
--ui-kit-color-yellow-600 | #AC771B |
| |
--ui-kit-color-yellow-700 | #7A581D |
| |
--ui-kit-color-yellow-800 | #574323 |
| |
--ui-kit-color-yellow-900 | #403521 |
| |
--ui-kit-color-yellow-1000 | #2B261D |
| |
--ui-kit-color-yellow-accent | #FFB83D |
Green
| | Name | Value |
| |
--ui-kit-color-green-100 | #F2FFF0 |
| |
--ui-kit-color-green-200 | #E0FCDE |
| |
--ui-kit-color-green-300 | #B9EDBD |
| |
--ui-kit-color-green-400 | #83DB9C |
| |
--ui-kit-color-green-500 | #47C47D |
| |
--ui-kit-color-green-600 | #2D8556 |
| |
--ui-kit-color-green-700 | #28704C |
| |
--ui-kit-color-green-800 | #2E5940 |
| |
--ui-kit-color-green-900 | #283B2D |
| |
--ui-kit-color-green-1000 | #222923 |
| |
--ui-kit-color-green-accent | #56F09E |
Slate
| | Name | Value |
| |
--ui-kit-color-slate-100 | #F2F9FC |
| |
--ui-kit-color-slate-200 | #E1EEF5 |
| |
--ui-kit-color-slate-300 | #CCDEE8 |
| |
--ui-kit-color-slate-400 | #A9C4D4 |
| |
--ui-kit-color-slate-500 | #82A7BA |
| |
--ui-kit-color-slate-600 | #658B9E |
| |
--ui-kit-color-slate-700 | #486878 |
| |
--ui-kit-color-slate-800 | #344852 |
| |
--ui-kit-color-slate-900 | #283338 |
| |
--ui-kit-color-slate-1000 | #1F2426 |
| |
--ui-kit-color-slate-accent | #47C2FF |
Cobalt
| | Name | Value |
| |
--ui-kit-color-cobalt-100 | #EBF5FF |
| |
--ui-kit-color-cobalt-200 | #D1E8FF |
| |
--ui-kit-color-cobalt-300 | #9ECBFF |
| |
--ui-kit-color-cobalt-400 | #66A3FF |
| |
--ui-kit-color-cobalt-500 | #4176FA |
| |
--ui-kit-color-cobalt-600 | #304DDB |
| |
--ui-kit-color-cobalt-700 | #263AAD |
| |
--ui-kit-color-cobalt-800 | #1C2674 |
| |
--ui-kit-color-cobalt-900 | #171952 |
| |
--ui-kit-color-cobalt-1000 | #0E0E33 |
| |
--ui-kit-color-cobalt-accent | #47A3FF |
Purple
| | Name | Value |
| |
--ui-kit-color-purple-100 | #F9F2FF |
| |
--ui-kit-color-purple-200 | #F2E5FF |
| |
--ui-kit-color-purple-300 | #D7BAF5 |
| |
--ui-kit-color-purple-400 | #AD82D8 |
| |
--ui-kit-color-purple-500 | #9163BF |
| |
--ui-kit-color-purple-600 | #774BA3 |
| |
--ui-kit-color-purple-700 | #5D407A |
| |
--ui-kit-color-purple-800 | #48335C |
| |
--ui-kit-color-purple-900 | #31253D |
| |
--ui-kit-color-purple-1000 | #271F2E |
| |
--ui-kit-color-purple-accent | #C285FF |
Magenta
| | Name | Value |
| |
--ui-kit-color-magenta-100 | #FFF2F4 |
| |
--ui-kit-color-magenta-200 | #FFE5EA |
| |
--ui-kit-color-magenta-300 | #FFC7D3 |
| |
--ui-kit-color-magenta-400 | #E5859F |
| |
--ui-kit-color-magenta-500 | #BF5878 |
| |
--ui-kit-color-magenta-600 | #A34B6B |
| |
--ui-kit-color-magenta-700 | #863E5C |
| |
--ui-kit-color-magenta-800 | #5E3146 |
| |
--ui-kit-color-magenta-900 | #3D2531 |
| |
--ui-kit-color-magenta-1000 | #2E2126 |
| |
--ui-kit-color-magenta-accent | #FF5CAA |
Charcoal
| | Name | Value |
| |
--ui-kit-color-charcoal-100 | #f9fafa |
| |
--ui-kit-color-charcoal-200 | #f1f3f5 |
| |
--ui-kit-color-charcoal-300 | #DFE6EB |
| |
--ui-kit-color-charcoal-400 | #C8D3DE |
| |
--ui-kit-color-charcoal-500 | #ABB9C7 |
| |
--ui-kit-color-charcoal-600 | #7E8E9E |
| |
--ui-kit-color-charcoal-700 | #556575 |
| |
--ui-kit-color-charcoal-800 | #405261 |
| |
--ui-kit-color-charcoal-900 | #314351 |
| |
--ui-kit-color-charcoal-1000 | #253642 |
| |
--ui-kit-color-charcoal-1100 | #1d2b36 |
| |
--ui-kit-color-charcoal-1200 | #131B24 |
Clay
| | Name | Value |
| |
--ui-kit-color-clay-100 | #FAF8F7 |
| |
--ui-kit-color-clay-200 | #F5F2F0 |
| |
--ui-kit-color-clay-300 | #EDE8E6 |
| |
--ui-kit-color-clay-400 | #DED5D1 |
| |
--ui-kit-color-clay-500 | #C2B4AC |
| |
--ui-kit-color-clay-600 | #9E8F88 |
| |
--ui-kit-color-clay-700 | #8A7B74 |
| |
--ui-kit-color-clay-800 | #756963 |
| |
--ui-kit-color-clay-900 | #574F4B |
| |
--ui-kit-color-clay-1000 | #4A4441 |
| |
--ui-kit-color-clay-1100 | #33302E |
| |
--ui-kit-color-clay-1200 | #262423 |
Semantic Color Tokens
Basics
| | Name | Value |
| |
--ui-kit-color-basics-white | #ffffff |
| |
--ui-kit-color-basics-black | #000000 |
| |
--ui-kit-color-basics-magenta | #ff00ff |
| |
--ui-kit-color-basics-cyan | #00ffff |
Action
| | Name | Value |
| |
--ui-kit-color-action-default | #304DDB |
| |
--ui-kit-color-action-hovered | #263AAD |
| |
--ui-kit-color-action-pressed | #1C2674 |
| |
--ui-kit-color-action-disabled | #ABB9C7 |
Text
| | Name | Value |
| |
--ui-kit-color-text-headline | #131B24 |
| |
--ui-kit-color-text-dark | #314351 |
| |
--ui-kit-color-text-default | #405261 |
| |
--ui-kit-color-text-light | #556575 |
| |
--ui-kit-color-text-disabled | #7E8E9E |
Success
| | Name | Value |
| |
--ui-kit-color-success-text | #2E5940 |
| |
--ui-kit-color-success-background-dark | #2D8556 |
| |
--ui-kit-color-success-icon | #47C47D |
| |
--ui-kit-color-success-border | #47C47D |
| |
--ui-kit-color-success-background-light | #F2FFF0 |
Error
| | Name | Value |
| |
--ui-kit-color-error-text | #B83525 |
| |
--ui-kit-color-error-background-dark | #B83525 |
| |
--ui-kit-color-error-icon | #FF4747 |
| |
--ui-kit-color-error-border | #E54A32 |
| |
--ui-kit-color-error-background-light | #feeae7 |
Warning
| | Name | Value |
| |
--ui-kit-color-warning-text | #A35214 |
| |
--ui-kit-color-warning-background-dark | #A35214 |
| |
--ui-kit-color-warning-icon | #FFB83D |
| |
--ui-kit-color-warning-border | #FABF5A |
| |
--ui-kit-color-warning-background-light | #FFF6E5 |
Info
| | Name | Value |
| |
--ui-kit-color-info-text | #263AAD |
| |
--ui-kit-color-info-background-dark | #304DDB |
| |
--ui-kit-color-info-icon | #4176FA |
| |
--ui-kit-color-info-border | #4176FA |
| |
--ui-kit-color-info-background-light | #EBF5FF |