Colors
Shopify uses colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for merchants.
Guidelines
These guidelines are the framework upon which we have built our system for how color is used in Shopify.
Communication over decoration
Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Our use of color should be purposeful, rational, and should serve to support the purpose of the content.
Color should be accessible
When choosing colors, consider merchants who are color blind or who have low vision. Never use color alone to convey information.
Color should focus attention
The use of color should help bring attention to what matters most. Color should support the hierarchy of the page. Use restraint.
Color palette
Our color palette is built with our core principles and guidelines as its foundation.
Color combinations
Use the following as a guide for how and when to use colors from our palette together.
Do
Use any light background color with its corresponding text color
background-color: color('orange', 'light');
color: color('orange', 'text');Use any primary background color with white text
background-color: color('blue');
color: color('white');Use white background with any dark text color
background-color: color('white');
color: color('red', 'dark');Use any light background color with its corresponding dark color for an
action
background-color: color('yellow', 'light');
color: color('yellow', 'dark');Use white background with any of our primary colors for an icon
background-color: color('white');
color: color('orange');Don’t
Mix any color from the palette with a text color from a different part of the
palette.
background-color: color('yellow', 'light');
color: color('blue', 'text');Use low contrast
background-color: color('blue', 'light');
color: color('white');Use black as a background color
background-color: color('black');
color: color('white');Use any dark color as a background
background-color: color('red', 'dark');
color: color('white');Color usage
The following is a set of specific guidelines for when and how to use each color in our palette.
Do
Use indigo for block highlights
Use indigo for buttons
Use indigo for checkmarks and radio buttons
Use indigo to highlight form fields
Don’t
Use indigo for text links
Indigo is used to signify states in Shopify. We use it for buttons, quick search, highlights on forms, selected checkmarks, and radio buttons.
Do
Use purple for bar charts
Use purple for line charts
Don’t
Use purple for buttons
Use purple for percentage changes
Use purple for text links
Purple is used as our primary graphing color. It is not used in other types of data visualization such as trend signifiers.
Do
Use blue for information pips
Use blue for text links
Don’t
Use blue for buttons
Blue is used for contextual text links and information pips.
Do
Use teal for the second line in a comparison chart
Use teal for helpful banners
Do
Use teal for notification pills
Teal is our information color and is used sparingly in Shopify to draw attention to features or content such as notifications. It is also used as the secondary comparison color in line charts.
Do
Use green for positive trends
Use green for success banners
Use green for success pips
Don’t
Use green for bar charts
Use green for line charts
Green is used to signify positivity and transactions in Shopify, however it is not used to signify these things in charts.
Do
Use yellow for attention banners
Use yellow for low risk orders
Use yellow for unfulfilled pips
Don’t
Use yellow in comparison line charts
Yellow is used to draw attention to content that requires action, but is low priority.
Do
Use orange for medium risk orders
Use orange for warnings and attention pips
Do
Use orange for the third line in a comparison line
Orange is used to draw attention to content that requires action and should be attended to fairly soon. It is also used after purple and teal on line charts.
Do
Use red for negative trends
Use red for high risk orders
Use red for errors in form fields
Do
Use red for destructive buttons
Use red for critical banners
Red is used to draw attention towards elements and notifications that require critical attention. It may also be used to show negative trends, or destructive actions. Seeing this color can feel stressful to merchants. Use it sparingly.
Accessibility
It’s important for Shopify to meet all web accessibility standards. Polaris encourages meeting the minimum contrast ratios specified by WCAG 2.1 Level AA for text, icons, other indicators, and background colors.
Do
Minimal contrast ratio: 4.5
5.25
Grey on Black
4.88
Dark Grey on White
4.87
White on Indigo
6.16
Blue on Blue Light
Don’t
Fail
2.94
Dark Grey on Black
2.73
Grey on White
1.70
White on Yellow
1.92
Blue on Blue
Exceptions to this rule
These examples in our visual language break this rule in favor of hierarchy or communication benefits.
2.95-3.70
Light over Dark
Used to indicate importance.
Resources
Download the UI kit and color palette to start designing with Shopify Polaris.
