Colors
A collection of colors and color aliases for use across the design system and components.
Accessibility
The colors in this design system must meet
WCAG 2.1 Level AA guidelines
(a contrast ratio of at least 4.5:1) for 14px to 16px text/icons.
Color tokens
The following color tokens are provided by the design system. Each color token may have one or more aliases. Using color aliases is preferred because it allows the design system to be extended in a consistent way.
| Color | Token | Alias tokens |
|---|---|---|
'identity-10' |
||
'identity-20' |
||
'identity-30' |
'identity-dark' |
|
'identity-40' |
||
'identity-50' |
'identity' |
|
'identity-60' |
||
'identity-70' |
'identity-light' |
|
'identity-80' |
||
'identity-90' |
||
'accent-10' |
||
'accent-20' |
||
'accent-30' |
'accent-dark' 'button-default-active' |
|
'accent-40' |
'button-default-hover' |
|
'accent-50' |
'accent' 'button-default' |
|
'accent-60' |
||
'accent-70' |
'accent-light' |
|
'accent-80' |
||
'accent-90' |
||
'orange-10' |
||
'orange-20' |
||
'orange-30' |
'orange-dark' |
|
'orange-40' |
||
'orange-50' |
'orange' |
|
'orange-60' |
||
'orange-70' |
'orange-light' |
|
'orange-80' |
||
'orange-90' |
||
'yellow-10' |
||
'yellow-20' |
||
'yellow-30' |
'yellow-dark' |
|
'yellow-40' |
||
'yellow-50' |
'yellow' |
|
'yellow-60' |
||
'yellow-70' |
'yellow-light' |
|
'yellow-80' |
||
'yellow-90' |
||
'green-10' |
||
'green-20' |
||
'green-30' |
'green-dark' 'button-success-active' |
|
'green-40' |
'button-success-hover' |
|
'green-50' |
'green' 'button-success' |
|
'green-60' |
||
'green-70' |
'green-light' |
|
'green-80' |
||
'green-90' |
||
'red-10' |
||
'red-20' |
||
'red-30' |
'red-dark' 'button-danger-active' |
|
'red-40' |
'button-danger-hover' |
|
'red-50' |
'red' 'button-danger' |
|
'red-60' |
||
'red-70' |
'red-light' |
|
'red-80' |
||
'red-90' |
||
'blue-10' |
||
'blue-20' |
||
'blue-30' |
'blue-dark' |
|
'blue-40' |
||
'blue-50' |
'blue' |
|
'blue-60' |
||
'blue-70' |
'blue-light' |
|
'blue-80' |
||
'blue-90' |
||
'gray-10' |
'text-dark' |
|
'gray-20' |
||
'gray-30' |
'gray-dark' |
|
'gray-40' |
||
'gray-50' |
'gray' 'button-disabled' |
|
'gray-60' |
||
'gray-70' |
'gray-light' 'border' |
|
'gray-80' |
||
'gray-90' |
'text-light' |
Using color tokens
| Context | Usage | Example |
|---|---|---|
| SCSS function | color(color) |
color('identity') |
| SCSS mixin Background color |
@include background-color(color); |
@include background-color('accent'); |
| SCSS mixin Text color |
@include text-color(color); |
@include text-color('gray-dark'); |
| SCSS mixin Border color |
@include border-color(color); |
@include border-color('button-default'); |
| CSS class Background color |
.uw-background-color-color |
.uw-background-color-accent |
| CSS class Text color |
.uw-text-color-color |
.uw-text-color-gray-dark |
| CSS class Border color |
.uw-border-color-color |
.uw-border-color-button-default |