Color → Palettes and roles

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

Global palette

The Polaris color palette includes 12 colors, each with 16 shades. These colors are assigned different roles in the Shopify admin to convey specific meanings and serve distinct purposes.

The global palette is built using HSLuv Lightness values. HSLuv is a color space that stands for "Hue, Saturation, Lightness (L), and perceptual uniformity." It is designed to address the limitations of traditional color spaces, such as RGB and HSL, by providing more perceptually uniform and intuitive color representation. It aims to ensure that color transformations, such as lightening or darkening, are visually consistent and predictable to the human eye.

Considering this, the Polaris color palette maintains uniformity in shades within each hue. Consequently, colors like Red 12 and Blue 12 will have identical contrast ratios when paired with the same color, such as Gray 1. This simplifies the process of styling color roles by easily substituting hues as necessary.


Pick two colors
Pick two colors

Contrast ratio

AA Text

AA Interactive

Color roles

A color role is composed of a collection of tokens that represent different parts of the UI. Each color role follows the same logic for all tokens, but not all tokens are defined for each color role.

Color roles like default will have all tokens defined, because the default color role offers the baseline color for all elements in the Shopify admin. Roles like critical or information will only have a selection of tokens defined, as these roles are usually applied to specific, smaller and more specialized components like badges or banners.

More information about tokens and their usage can be found under Using color.

Color role schemas


The default role is used to style the entire Shopify admin and is considered to be the baseline theme for all experiences. This role defines default, secondary and tertiary visual hierarchy for a variety of components and are used when communicating default statuses, neutral messaging and common merchant data.

Visual of default colors being used
A card on a background with customer information

Use the default role for the default admin experience and messaging. Use secondary and tertiary for any additional details.

A card that has all secondary roles applied to it

Use secondary and tertiary tokens to style entire, complex surfaces.

A card with different sections within that use secondary and tertiary surface colors to create visual separation

Use secondary and tertiary colors to create visual separation within complex components.


Brand is used to pull additional focus on main actions in the UI. This role is used across the admin to guide merchants to the most intended interactions when many options are available.

Brand color palette
A card with multiple actions, the main one being in the primary color theme and the others being secondary and tertiary

Use brand color to guide merchants to a primary action, especially with default, secondary or tertiary roles.

A card with multiple primary buttons, each with different actions

Use multiple brand roles in the same area, this can confuse merchants as to which action is the most appropriate in the current context.


Info is used to convey important bits of information in the admin. Info is the catch-all color role when it comes to giving more attention to information that can benefit the merchant, like tips, promotions, or incentives.

Info color palette
A card that has a “First month free” badge using the info color role

Use info to grab attention on information that is not part of the typical admin experience.

A card with a title and text that are using the info color role just for decoration

Use info on multiple elements that need attention in the same component. This dilutes attention on what matters most.

A banner that shares a warning message that needs immediate action

Use info to share statuses or messages that require immediate attention from the merchant. Instead, use warning or critical roles.


Success is used to confirm that an action has been completed successfully. Success can also be used to convey confirmation messages or statuses that are positive and that do not require any immediate action from the merchant.

Success color palette
A success message appearing because of a successful interaction

Use success to tell merchants that everything is OK.

A success badge used above a title to denote a special, limited time offer

Use success to entice merchants or to share special offers.


Caution is used to show information that does not need immediate attention from merchants, as well as incomplete or unstarted statuses. Caution is often used before a piece of information becomes more severe.

Caution color palette
A caution badge that shows what products are unfulfilled

Use caution to share statuses that have stalled or have not started, but are not blocked due to errors.

A caution badge that announces an new feature in the admin

Use caution for announcements.


Warning is used to tell merchants that something needs their attention. Warning is also used to convey statuses that are in-progress, pending, or that could require merchant intervention. Warning is the strongest, non-blocking color role in the admin.

Warning color palette
A warning badge used for showing partially paid and partially fulfilled statuses

Use warning for elements that require merchant intervention.

A warning banner that announces that this section of the admin is under construction and it’s coming soon

Use warning for “under construction” or “coming soon” messaging.


Critical is used as the color of highest importance. Elements using critical must convey messaging that implies that an action is impossible, blocked, or has resulted in an error.

Critical color palette
A form field that has missing content resulting in an error

Use critical when the UI calls for immediate action or errors in the UI.

A critical colored icon of a heart used to show a liked product

Use critical for less important, non-actionable or contradicting messaging.


Magic is used on elements that denote the usage of artificial intelligence or any other type of automation technology that saves merchant’s time while performing tasks.

Magic color palette
A magic indicator to generate text for the description of a product

Use magic for UI like the Sidekick icon or the Shopify Magic indicator.

A card styled entirely with magic, including borders shadows

Use magic as a “pop of color” to differentiate elements in the admin, or to present new features.


The emphasis color role is used to indicate areas of focus within the UI and to highlight active elements in editors.

Emphasis color palette
The theme editor with a focused element ready to be edited

Use emphasis to show merchants what is currently selected in editors like the theme editor.

A non-interactive card with an emphasis colored outline

Use emphasis to pivot a merchant’s attention to content that is not interactive.


Transparent is used on elements that have low visual affordance, and to minimize visual noise in information-heavy interfaces. This color is mainly used on smaller elements that have secondary roles.

Transparent color palette
A list of “Edit” and “Delete” transparent icon buttons  in a product list

Use transparent on elements that are repeating across the admin, like edit buttons.

A card with only transparent buttons at the bottom right corner

Use the transparent color role on elements that require higher affordances like buttons that have text labels.


The inverse color role offers the possibility of styling elements in situations where a darker theme is necessary. Inverse is used sparingly in the admin, and on specific elements that frame the Shopify admin, like the top bar.

Inverse color palette
The admin’s top bar

Use inverse on larger elements, like the top bar.

A notification for a special offer in the bottom right of the admin window

Use inverse to grab a merchant’s attention on a specific element.

Specialized roles

Specialized roles are used in specific components that require detailed visual distinctions for a variety of reasons, like accessibility and high complexity components.


The input color role is reserved for form elements. Input ensures that form elements will adhere to WCAG color contrast accessibility standards and makes forms look uniform across the admin.

Input color palette
A form with a text input and complex select box

Use the input color role on form elements, or elements that behave like other form elements, like complex select boxes.

A card with a button styled with input colors

Use the input color role outside of a form. This can confuse merchants into thinking an element is part of a form when it isn’t.

Nav colors are reserved for the Shopify admin menu. The menu consists of specialized elements that are purpose-built to offer the best navigation experience, and therefore require a specific set of colors defined in the nav color role.

Nav color palette
The sidebar navigation of the admin

Use nav colors only for the Shopify admin menu, in all levels of navigation.

Tabs styled with navigation colors on top of an index page

Use nav colors for other navigational elements, like tabs or links. These should use the default color role.

    On this page