Color
Maintaining consistent and engaging digital interfaces, whether applications or experiences, demands extended guidance around color usage. The following concepts are the foundation as we strive to achieve balance and harmony through our User Interface design.
Implementation
BDS uses tokens and themes to manage color. Tokens are role-based, and themes specify the color values that serve those roles.
Tokens
Tokens are a method of abstracting color by role or usage, independent of the actual color values. For a different theme, that same token could be mapped to a different hex value. Thus, tokens not only allow for more efficient color updates within a theme, but also enable easily switch between different themes.
A single token can be associated with multiple roles, but only if the color value is used consistently across those roles. This allows for uniform color application across themes while maintaining full styling flexibility.
Themes
There are two default themes. The light theme use White and Gray 10 backgrounds, and the dark theme use Gray 100 and Gray 90 backgrounds. Default color tokens are provided for each component based on the primary background color.
Tokens by theme
In some cases, it is helpful to apply light components to dark backgrounds or dark components to light backgrounds. This technique is useful to focus attention or create visual tension.
White
Core color tokens
| Token | Role | Value |
|---|---|---|
ui-background
| Default page background |
#FFFFFF
|
interactive-01
| Primary interactive color; Primary buttons |
#0F62FE
|
interactive-02
| Secondary interactive color; Secondary button |
#393939
|
interactive-03
| 4.5:1 AA contrast; Tertiary button |
#0F62FE
|
interactive-04
| 3:1 AA contrast; Selected elements; Active elements; Accent icons |
#0F62FE
|
danger
| Danger button background; 3:1 AA contrast |
#DA1E28
|
ui-01
| Container background on $ui-background; Secondary page background |
#F4F4F4
|
ui-02
| Container background on $ui-01; Light variant background |
#FFFFFF
|
ui-03
| Subtle border; Tertiary background |
#E0E0E0
|
ui-04
| 3:1 aa element contrast; Medium contrast border |
#8D8D8D
|
ui-05
| 4.5:1 aa element contrast; High contrast border; Emphasis elements |
#161616
|
decorative-01
| Light variant elements |
#E0E0E0
|
text-01
| Primary text; Body copy; Headers; Hover text color for $text-02 |
#161616
|
text-02
| Secondary text; Input labels |
#525252
|
text-03
| Placeholder text |
#A8A8A8
|
text-error
| Error message text |
#DA1E28
|
icon-01
| Primary icons |
#161616
|
icon-02
| Secondary icons |
#525252
|
field-01
| Default input fields; Fields on $ui-backgrounds |
#F4F4F4
|
inverse-01
| Inverse text color; Inverse icon color |
#FFFFFF
|
inverse-02
| High contrast backgrounds; High contrast elements |
#393939
|
support-01
| Error |
#DA1E28
|
support-02
| Success |
#24A148
|
support-03
| Warning |
#F1C21B
|
inverse-support-01
| Danger in high contrast moments |
#FA4D56
|
inverse-support-02
| Success in high contrast moments |
#42BE65
|
inverse-support-03
| Warning in high contrast moments |
#F1C21B
|
overlay-01
| Background overlay 50% |
#161616
|
Interactive color tokens
| Token | Role | Value |
|---|---|---|
focus
| Focus border; Focus underline |
#0F62FE
|
inverse-focus-ui
| Focus on high contrast moments |
#FFFFFF
|
hover-primary
| $interactive-01 hover |
#0353E9
|
hover-primary-text
| $interactive-01 text hover |
#054ADA
|
hover-secondary
| $interactive-02 hover |
#4C4C4C
|
hover-ui
| $ui-01 hover; $ui-02 hover; Transparent background hover |
#E5E5E5
|
hover-ui-light
| “Light” variant hover |
#E5E5E5
|
hover-selected-ui
| Selected row hover |
#CACACA
|
inverse-hover-ui
| Hover for $inverse-02 |
#4C4C4C
|
active-primary
| $interactive-01 active |
#002D9C
|
active-secondary
| $interactive-02 active; $inverse-01 active |
#6F6F6F
|
active-ui
| $ui-01 active; $ui-02 active |
#C6C6C6
|
selected-ui
| Selected UI elements |
#E0E0E0
|
skeleton-01
| Skeleton state of graphics |
#E5E5E5
|
skeleton-02
| Skeleton state of texts |
#C6C6C6
|
disabled-01
| Disabled fields; Disabled backgrounds; Disabled border |
#F4F4F4
|
disabled-02
| Disabled elements on $disabled-01; Disabled label; Disabled text on $disabled-01; Disabled icons; Disabled border |
#C6C6C6
|
Gray 100
Core color tokens
| Token | Role | Value |
|---|---|---|
ui-background
| Default page background |
#161616
|
interactive-01
| Primary interactive color; Primary buttons |
#0F62FE
|
interactive-02
| Secondary interactive color; Secondary button |
#6F6F6F
|
interactive-03
| 4.5:1 AA contrast; Tertiary button |
#FFFFFF
|
interactive-04
| 3:1 AA contrast; Selected elements; Active elements; Accent icons |
#4589FF
|
danger
| Danger button background; 3:1 AA contrast |
#DA1E28
|
ui-01
| Container background on $ui-background; Secondary page background |
#262626
|
ui-02
| Container background on $ui-01; Light variant background |
#393939
|
ui-03
| Subtle border; Tertiary background |
#393939
|
ui-04
| 3:1 aa element contrast; Medium contrast border |
#6F6F6F
|
ui-05
| 4.5:1 aa element contrast; High contrast border; Emphasis elements |
#F4F4F4
|
decorative-01
| Light variant elements |
#525252
|
text-01
| Primary text; Body copy; Headers; Hover text color for $text-02 |
#F4F4F4
|
text-02
| Secondary text; Input labels |
#C6C6C6
|
text-03
| Placeholder text |
#6F6F6F
|
text-error
| Error message text |
#FF8389
|
icon-01
| Primary icons |
#F4F4F4
|
icon-02
| Secondary icons |
#C6C6C6
|
field-01
| Default input fields; Fields on $ui-backgrounds |
#262626
|
inverse-01
| Inverse text color; Inverse icon color |
#161616
|
inverse-02
| High contrast backgrounds; High contrast elements |
#F4F4F4
|
support-01
| Error |
#FA4D56
|
support-02
| Success |
#42BE65
|
support-03
| Warning |
#F1C21B
|
inverse-support-01
| Danger in high contrast moments |
#DA1E28
|
inverse-support-02
| Success in high contrast moments |
#24A148
|
inverse-support-03
| Warning in high contrast moments |
#F1C21B
|
overlay-01
| Background overlay 50% |
#161616
|
Interactive color tokens
| Token | Role | Value |
|---|---|---|
focus
| Focus border; Focus underline |
#FFFFFF
|
inverse-focus-ui
| Focus on high contrast moments |
#0F62FE
|
hover-primary
| $interactive-01 hover |
#0353E9
|
hover-primary-text
| $interactive-01 text hover |
#A6C8FF
|
hover-secondary
| $interactive-02 hover |
#606060
|
hover-ui
| $ui-01 hover; $ui-02 hover; Transparent background hover |
#353535
|
hover-ui-light
| “Light” variant hover |
#525252
|
hover-selected-ui
| Selected row hover |
#4C4C4C
|
inverse-hover-ui
| Hover for $inverse-02 |
#E5E5E5
|
active-primary
| $interactive-01 active |
#002D9C
|
active-secondary
| $interactive-02 active; $inverse-01 active |
#393939
|
active-ui
| $ui-01 active; $ui-02 active |
#525252
|
selected-ui
| Selected UI elements |
#393939
|
skeleton-01
| Skeleton state of graphics |
#353535
|
skeleton-02
| Skeleton state of texts |
#393939
|
disabled-01
| Disabled fields; Disabled backgrounds; Disabled border |
#262626
|
disabled-02
| Disabled elements on $disabled-01; Disabled label; Disabled text on $disabled-01; Disabled icons; Disabled border |
#525252
|