Color → Palettes and roles
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.
Colors
Contrast ratio
—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](/images/design/colors/color-palettes-roles-roles@2x.png)
Default
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](/images/design/colors/color-palettes-roles-default@2x.png)
![A card on a background with customer information](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-default-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-default-dont%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-default-secondary-do%402x.png&w=1920&q=75)
Use secondary and tertiary colors to create visual separation within complex components.
Brand
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](/images/design/colors/color-palettes-roles-brand@2x.png)
![A card with multiple actions, the main one being in the primary color theme and the others being secondary and tertiary](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-brand-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-brand-dont%402x.png&w=1920&q=75)
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
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](/images/design/colors/color-palettes-roles-info@2x.png)
![A card that has a “First month free” badge using the info color role](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-info-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-info-dont%402x.png&w=1920&q=75)
Use info on multiple elements that need attention in the same component. This dilutes attention on what matters most.
Success
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](/images/design/colors/color-palettes-roles-success@2x.png)
![A success message appearing because of a successful interaction](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-success-do%402x.png&w=1920&q=75)
Use success to tell merchants that everything is OK.
![A success badge used above a title to denote a special, limited time offer](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-success-dont%402x.png&w=1920&q=75)
Use success to entice merchants or to share special offers.
Caution
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](/images/design/colors/color-palettes-roles-caution@2x.png)
![A caution badge that shows what products are unfulfilled](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-caution-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-caution-dont%402x.png&w=1920&q=75)
Use caution for announcements.
Warning
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](/images/design/colors/color-palettes-roles-warning@2x.png)
![A warning badge used for showing partially paid and partially fulfilled statuses](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-warning-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-warning-dont%402x.png&w=1920&q=75)
Use warning for “under construction” or “coming soon” messaging.
Critical
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](/images/design/colors/color-palettes-roles-critical@2x.png)
![A form field that has missing content resulting in an error](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-critical-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-critical-dont%402x.png&w=1920&q=75)
Use critical for less important, non-actionable or contradicting messaging.
Magic
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](/images/design/colors/color-palettes-roles-magic@2x.png)
![A magic indicator to generate text for the description of a product](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-magic-do%402x.png&w=1920&q=75)
Use magic for UI like the Sidekick icon or the Shopify Magic indicator.
![A card styled entirely with magic, including borders shadows](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-magic-dont%402x.png&w=1920&q=75)
Use magic as a “pop of color” to differentiate elements in the admin, or to present new features.
Emphasis
The emphasis color role is used to indicate areas of focus within the UI and to highlight active elements in editors.
![Emphasis color palette](/images/design/colors/color-palettes-roles-emphasis@2x.png)
![The theme editor with a focused element ready to be edited](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-emphasis-do%402x.png&w=1920&q=75)
Use emphasis to show merchants what is currently selected in editors like the theme editor.
![A non-interactive card with an emphasis colored outline](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-emphasis-dont%402x.png&w=1920&q=75)
Use emphasis to pivot a merchant’s attention to content that is not interactive.
Transparent
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](/images/design/colors/color-palettes-roles-transparent@2x.png)
![A list of “Edit” and “Delete” transparent icon buttons in a product list](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-transparent-do%402x.png&w=1920&q=75)
Use transparent on elements that are repeating across the admin, like edit buttons.
![A card with only transparent buttons at the bottom right corner](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-transparent-dont%402x.png&w=1920&q=75)
Use the transparent color role on elements that require higher affordances like buttons that have text labels.
Inverse
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](/images/design/colors/color-palettes-roles-inverse@2x.png)
![The admin’s top bar](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-inverse-do%402x.png&w=1920&q=75)
Use inverse on larger elements, like the top bar.
![A notification for a special offer in the bottom right of the admin window](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-inverse-dont%402x.png&w=1920&q=75)
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.
Input
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](/images/design/colors/color-palettes-roles-input@2x.png)
![A form with a text input and complex select box](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-input-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-input-dont%402x.png&w=1920&q=75)
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
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](/images/design/colors/color-palettes-roles-nav@2x.png)
![The sidebar navigation of the admin](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-nav-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Fcolors%2Fcolor-palettes-roles-nav-dont%402x.png&w=1920&q=75)
Use nav colors for other navigational elements, like tabs or links. These should use the default color role.