created:12/30/2020
updated:12/30/2020
loc
163
comments
6%
ETradeColor
Color item displaying the color as a block with values for hex, class, and sass can be copied to clipboard on hover. Design inspired by E-Trade Design System.
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
id | description | |
|---|---|---|
aria-allowed-role | Ensures role attribute has an appropriate value for the element... | |
aria-hidden-focus | Ensures aria-hidden elements do not contain focusable elements... | |
color-contrast | Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds... |
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text