Colors
A flexible color palette used to put emphasis on information and show hierarchy.
UI Color Aliases
UI colors are aliases for base color values to simplify and create a common usage pattern.
| Description | Token | Example |
|---|---|---|
ui primary darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-darker)
$token-color-ui-primary-darker
Mapped to: {color.theme.blue.9.value}
|
|
ui primary darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-dark)
$token-color-ui-primary-dark
Mapped to: {color.theme.blue.7.value}
|
|
ui primary basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-base)
$token-color-ui-primary-base
Mapped to: {color.theme.blue.6.value}
|
|
ui primary lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-light)
$token-color-ui-primary-light
Mapped to: {color.theme.blue.5.value}
|
|
ui primary lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-lighter)
$token-color-ui-primary-lighter
Mapped to: {color.theme.blue.1.value}
|
|
ui primary lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-primary-lightest)
$token-color-ui-primary-lightest
Mapped to: {color.theme.blue.0.value}
|
|
ui success darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-darker)
$token-color-ui-success-darker
Mapped to: {color.theme.green.9.value}
|
|
ui success darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-dark)
$token-color-ui-success-dark
Mapped to: {color.theme.green.7.value}
|
|
ui success basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-base)
$token-color-ui-success-base
Mapped to: {color.theme.green.6.value}
|
|
ui success lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-light)
$token-color-ui-success-light
Mapped to: {color.theme.green.5.value}
|
|
ui success lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-lighter)
$token-color-ui-success-lighter
Mapped to: {color.theme.green.1.value}
|
|
ui success lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-success-lightest)
$token-color-ui-success-lightest
Mapped to: {color.theme.green.0.value}
|
|
ui warning darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-darker)
$token-color-ui-warning-darker
Mapped to: {color.theme.yellow.9.value}
|
|
ui warning darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-dark)
$token-color-ui-warning-dark
Mapped to: {color.theme.yellow.7.value}
|
|
ui warning basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-base)
$token-color-ui-warning-base
Mapped to: {color.theme.yellow.6.value}
|
|
ui warning lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-light)
$token-color-ui-warning-light
Mapped to: {color.theme.yellow.5.value}
|
|
ui warning lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-lighter)
$token-color-ui-warning-lighter
Mapped to: {color.theme.yellow.1.value}
|
|
ui warning lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-warning-lightest)
$token-color-ui-warning-lightest
Mapped to: {color.theme.yellow.0.value}
|
|
ui error darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-darker)
$token-color-ui-error-darker
Mapped to: {color.theme.red.9.value}
|
|
ui error darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-dark)
$token-color-ui-error-dark
Mapped to: {color.theme.red.7.value}
|
|
ui error basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-base)
$token-color-ui-error-base
Mapped to: {color.theme.red.6.value}
|
|
ui error lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-light)
$token-color-ui-error-light
Mapped to: {color.theme.red.5.value}
|
|
ui error lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-lighter)
$token-color-ui-error-lighter
Mapped to: {color.theme.red.1.value}
|
|
ui error lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-error-lightest)
$token-color-ui-error-lightest
Mapped to: {color.theme.red.0.value}
|
|
ui default darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-darker)
$token-color-ui-default-darker
Mapped to: {color.theme.gray.9.value}
|
|
ui default darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-dark)
$token-color-ui-default-dark
Mapped to: {color.theme.gray.7.value}
|
|
ui default basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-base)
$token-color-ui-default-base
Mapped to: {color.theme.gray.6.value}
|
|
ui default lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-light)
$token-color-ui-default-light
Mapped to: {color.theme.gray.5.value}
|
|
ui default lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-lighter)
$token-color-ui-default-lighter
Mapped to: {color.theme.gray.1.value}
|
|
ui default lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-ui-default-lightest)
$token-color-ui-default-lightest
Mapped to: {color.theme.gray.0.value}
|
|
font darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-dark)
$token-color-font-dark
|
{color.theme.gray.9.value}
|
font basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-base)
$token-color-font-base
|
{color.theme.gray.8.value}
|
font lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-light)
$token-color-font-light
|
{color.theme.gray.7.value}
|
font lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-lighter)
$token-color-font-lighter
|
{color.theme.gray.6.value}
|
font whitePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-white)
$token-color-font-white
|
{color.base.white.value}
|
font errorPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-error)
$token-color-font-error
|
{color.ui.error.base.value}
|
font successPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-success)
$token-color-font-success
|
{color.ui.success.base.value}
|
font warningPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
var(--token-color-font-warning)
$token-color-font-warning
|
{color.ui.warning.base.value}
|
Additional Colors
Base and theme colors used to generate the core UI colors are also available.
| Description | Token | Value | Example |
|---|---|---|---|
color base white |
var(--token-color-base-white)
$token-color-base-white
|
#ffffff | |
color base black |
var(--token-color-base-black)
$token-color-base-black
|
#000000 | |
color theme blue 0 |
var(--token-color-theme-blue-0)
$token-color-theme-blue-0
|
#e5f5fb | |
color theme blue 1 |
var(--token-color-theme-blue-1)
$token-color-theme-blue-1
|
#ccecf8 | |
color theme blue 2 |
var(--token-color-theme-blue-2)
$token-color-theme-blue-2
|
#99d9f1 | |
color theme blue 3 |
var(--token-color-theme-blue-3)
$token-color-theme-blue-3
|
#66c6ea | |
color theme blue 4 |
var(--token-color-theme-blue-4)
$token-color-theme-blue-4
|
#4cbce7 | |
color theme blue 5 |
var(--token-color-theme-blue-5)
$token-color-theme-blue-5
|
#19a9e0 | |
color theme blue 6 |
var(--token-color-theme-blue-6)
$token-color-theme-blue-6
|
#00a0dd | |
color theme blue 7 |
var(--token-color-theme-blue-7)
$token-color-theme-blue-7
|
#0090c6 | |
color theme blue 8 |
var(--token-color-theme-blue-8)
$token-color-theme-blue-8
|
#0080b0 | |
color theme blue 9 |
var(--token-color-theme-blue-9)
$token-color-theme-blue-9
|
#00709a | |
color theme indigo 0 |
var(--token-color-theme-indigo-0)
$token-color-theme-indigo-0
|
#edf2ff | |
color theme indigo 1 |
var(--token-color-theme-indigo-1)
$token-color-theme-indigo-1
|
#dbe4ff | |
color theme indigo 2 |
var(--token-color-theme-indigo-2)
$token-color-theme-indigo-2
|
#bac8ff | |
color theme indigo 3 |
var(--token-color-theme-indigo-3)
$token-color-theme-indigo-3
|
#91a7ff | |
color theme indigo 4 |
var(--token-color-theme-indigo-4)
$token-color-theme-indigo-4
|
#748ffc | |
color theme indigo 5 |
var(--token-color-theme-indigo-5)
$token-color-theme-indigo-5
|
#5c7cfa | |
color theme indigo 6 |
var(--token-color-theme-indigo-6)
$token-color-theme-indigo-6
|
#4c6ef5 | |
color theme indigo 7 |
var(--token-color-theme-indigo-7)
$token-color-theme-indigo-7
|
#4263eb | |
color theme indigo 8 |
var(--token-color-theme-indigo-8)
$token-color-theme-indigo-8
|
#3b5bdb | |
color theme indigo 9 |
var(--token-color-theme-indigo-9)
$token-color-theme-indigo-9
|
#364fc7 | |
color theme green 0 |
var(--token-color-theme-green-0)
$token-color-theme-green-0
|
#ebfbee | |
color theme green 1 |
var(--token-color-theme-green-1)
$token-color-theme-green-1
|
#d3f9d8 | |
color theme green 2 |
var(--token-color-theme-green-2)
$token-color-theme-green-2
|
#b2f2bb | |
color theme green 3 |
var(--token-color-theme-green-3)
$token-color-theme-green-3
|
#8ce99a | |
color theme green 4 |
var(--token-color-theme-green-4)
$token-color-theme-green-4
|
#69db7c | |
color theme green 5 |
var(--token-color-theme-green-5)
$token-color-theme-green-5
|
#51cf66 | |
color theme green 6 |
var(--token-color-theme-green-6)
$token-color-theme-green-6
|
#40c057 | |
color theme green 7 |
var(--token-color-theme-green-7)
$token-color-theme-green-7
|
#37b24d | |
color theme green 8 |
var(--token-color-theme-green-8)
$token-color-theme-green-8
|
#2f9e44 | |
color theme green 9 |
var(--token-color-theme-green-9)
$token-color-theme-green-9
|
#2b8a3e | |
color theme yellow 0 |
var(--token-color-theme-yellow-0)
$token-color-theme-yellow-0
|
#fff9db | |
color theme yellow 1 |
var(--token-color-theme-yellow-1)
$token-color-theme-yellow-1
|
#fff3bf | |
color theme yellow 2 |
var(--token-color-theme-yellow-2)
$token-color-theme-yellow-2
|
#ffec99 | |
color theme yellow 3 |
var(--token-color-theme-yellow-3)
$token-color-theme-yellow-3
|
#ffe066 | |
color theme yellow 4 |
var(--token-color-theme-yellow-4)
$token-color-theme-yellow-4
|
#ffd43b | |
color theme yellow 5 |
var(--token-color-theme-yellow-5)
$token-color-theme-yellow-5
|
#fcc419 | |
color theme yellow 6 |
var(--token-color-theme-yellow-6)
$token-color-theme-yellow-6
|
#fab005 | |
color theme yellow 7 |
var(--token-color-theme-yellow-7)
$token-color-theme-yellow-7
|
#f59f00 | |
color theme yellow 8 |
var(--token-color-theme-yellow-8)
$token-color-theme-yellow-8
|
#f08c00 | |
color theme yellow 9 |
var(--token-color-theme-yellow-9)
$token-color-theme-yellow-9
|
#e67700 | |
color theme red 0 |
var(--token-color-theme-red-0)
$token-color-theme-red-0
|
#fff5f5 | |
color theme red 1 |
var(--token-color-theme-red-1)
$token-color-theme-red-1
|
#ffe3e3 | |
color theme red 2 |
var(--token-color-theme-red-2)
$token-color-theme-red-2
|
#ffc9c9 | |
color theme red 3 |
var(--token-color-theme-red-3)
$token-color-theme-red-3
|
#ffa8a8 | |
color theme red 4 |
var(--token-color-theme-red-4)
$token-color-theme-red-4
|
#ff8787 | |
color theme red 5 |
var(--token-color-theme-red-5)
$token-color-theme-red-5
|
#ff6b6b | |
color theme red 6 |
var(--token-color-theme-red-6)
$token-color-theme-red-6
|
#fa5252 | |
color theme red 7 |
var(--token-color-theme-red-7)
$token-color-theme-red-7
|
#f03e3e | |
color theme red 8 |
var(--token-color-theme-red-8)
$token-color-theme-red-8
|
#e03131 | |
color theme red 9 |
var(--token-color-theme-red-9)
$token-color-theme-red-9
|
#c92a2a | |
color theme gray 0 |
var(--token-color-theme-gray-0)
$token-color-theme-gray-0
|
#f8f9fa | |
color theme gray 1 |
var(--token-color-theme-gray-1)
$token-color-theme-gray-1
|
#f1f3f5 | |
color theme gray 2 |
var(--token-color-theme-gray-2)
$token-color-theme-gray-2
|
#e9ecef | |
color theme gray 3 |
var(--token-color-theme-gray-3)
$token-color-theme-gray-3
|
#dee2e6 | |
color theme gray 4 |
var(--token-color-theme-gray-4)
$token-color-theme-gray-4
|
#ced4da | |
color theme gray 5 |
var(--token-color-theme-gray-5)
$token-color-theme-gray-5
|
#adb5bd | |
color theme gray 6 |
var(--token-color-theme-gray-6)
$token-color-theme-gray-6
|
#868e96 | |
color theme gray 7 |
var(--token-color-theme-gray-7)
$token-color-theme-gray-7
|
#495057 | |
color theme gray 8 |
var(--token-color-theme-gray-8)
$token-color-theme-gray-8
|
#343a40 | |
color theme gray 9 |
var(--token-color-theme-gray-9)
$token-color-theme-gray-9
|
#212529 |