Colors
Core Colors
Core colors are the non-brand, default colors in our system, usually used to signify different states. Errors, alerts and status gems are example uses of core colors. In general, marketplaces will not customize these colors.
Red
$red
#E33D51
rgb(277, 61, 81)
hsl(353, 75%, 56%)
Red, Error, Delete, Danger, No
Yellow
$yellow
#F1E540
rgb(241, 229, 64)
hsl(56%, 86%, 60%)
Warning, Caution, Pause, Maybe
Green
$green
#76BD22
rgb(118, 189, 34)
hsl(87, 70%, 44%)
Success, Start, Go, Correct, Yes, On
Blue
$blue
#009ABF
rgb(0, 154, 191)
hsl(192, 100%, 37%)
FYI, Non-critical, Positive, Information
Black
$black
#2D2D2D
rgb(45, 45, 45)
hsl(0, 0%, 18%)
Neutral, Off, Deactivated, Disabled
White
$white
#FFFFFF
rgb(255, 255, 255)
hsl(0, 100%, 100%)
Neutral
Core Grays
Core grays create the default base for the look and feel of the framework. Consisting of only 6 tints of $black, this set of colors should address all interface styling needs. This limited palette helps reduce visual noise and make the branded primary, secondary and emphasis colors stand out. Adjust the $black interface color to adjust the core gray color values.
Deep Gray
$gray1
#474747
rgb(71, 71, 71)
hsl(0, 0%, 28%)
Primary Text
Dark Gray
$gray2
#707070
rgb(112, 112, 112)
hsl(0, 0%, 44%)
Secondary Text, Dark Border
Gray
$gray3
#CACACA
rgb(202, 202, 202)
hsl(0, 0%, 79%)
Tertiary Text, Default Border
Mid Gray
$gray4
#EAEAEA
rgb(234, 234, 234)
hsl(0, 0%, 92%)
Light Border, Default Button
Light Gray
$gray5
#F4F4F4
rgb(244, 244, 244)
hsl(0, 0%, 96%)
Header/Footer Container, Background
Faint Gray
$gray6
#F9F9F9
rgb(249, 249, 249)
hsl(0, 0%, 98%)
Light Background
Brand Colors
Brand colors are the colors derived from the marketplace brand used in our UI. Marketplaces should customize these colors. Primary, secondary and emphasis colors highlight elements that call for action, such as links and buttons.
Primary Color
$color-primary
#006080
rgb(0, 96, 128)
hsl(195, 100%, 25%)
Use the primary color for main calls-to-action, usually only once or twice on a page. This color signals that an important change will take place, such as a button that redirects the user to a new page.
Secondary Color
$color-secondary
#009ABF
rgb(0, 154, 191)
hsl(192, 100%, 37%)
Use the secondary color for secondary calls-to-action, often in many places on a page. This color signals that a minor change will take place, such as an action that allows the user to stay on the same page, including modal dialogs and AJAX interactions.
Emphasis Color
$color-emphasis
#76BD22
rgb(118, 189, 34)
hsl(87, 70%, 44%)
Use the emphasis color to call attention to the most important actions in the marketplace UI, such as "Buy Now" buttons. Because this color is usually bright and attention-demanding, use it sparsely on a page. It can be the same color as $color-primary.