Skip to contentShopify logoPolaris

Color

Color highlights important areas, communicates status, urgency, and directs attention.

Color has purpose

The purpose of using color has to be clear. Color needs to support a message or status that needs to be easily identifiable by merchants.

A display of Polaris components like badges, menus and banners with different color roles

Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration.

This deliberate color coding facilitates merchants in identifying which parts of the user interface require focus and distinguishes them from the default features provided by the Shopify admin.

A list of badges that display paid, fulfilled, in progress, partially paid and unfulfilled states
Do

Use color to support different states merchants need to be informed about.

A Mdxcard with a pink border and a pink $99 trying to entice the merchant
Don't

Use color to decorate or to distract merchants from performing tasks.

Color has impact

The Shopify admin interface adopts a black and white color scheme, intentionally creating a neutral backdrop. By employing this monochromatic design, elements that incorporate color gain heightened visual impact and prominence.

Cards in a grayscale interface with colorful badges that serve as headings

The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues.

Create impact when using color by using appropriate shades to convey the importance of what is being communicated to merchants.

A modal with a bright red header and bright red button that stops the user from navigating away from a page with unsaved changes
Do

Use strong, vivid colors to grab attention to things that matter most.

A modal with a gray header and white button with red text that stops the user from navigating away from a page with unsaved changes
Don't

Contradict or diminish messaging by using subdued colors or grayscale.

Color is accessible

Polaris offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette.

These color relationships ensure that color contrasts remain consistent across every application of color and ensure proper legibility and understanding when it comes to combining texts with color and interactive shapes with various backgrounds.

A dialog box with various elements highlighted where color combinations used for these elements passes AA and AAA accessibility standards for contrast

Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify, and interact with.

An orange badge with an alert icon and text label in a table column that indicates that an item is almost out of stock
Do

Use color in conjunction with other discernible elements to amplify the message.

A text label in orange in a table column that indicates that an item is almost out of stock
Don't

Use color alone to convey meaning

    On this page