Strong variants put emphasis on an element while subdued variants push them more into the background. Use variants to create hierarchy within the experience. Using these color roles correctly brings consistency across the admin, making it easier for merchants to work. Examples Applying tokens Using color rolesĬolors have assigned roles, which hold a specific meaning based on how they function within the interface. When there is no role, variant or state associated with a token those slots are omitted from the final token name. The element slot is the only one that is required. Hover, active, selected, disabled & focus This is the key descriptor of a token that communicates exactly what this token is to be used for.Ĭommunicates the state on which this token is applied.

Interactive, caution, success, primary, critical, info & magic This refers to the actual UI element being styled.Īssigned roles to specific colors to ensure consistent communication of color throughout the admin. These colors are then used to create semantic tokens that style both Polaris components and custom components within the Shopify admin. The Polaris color palette is composed of 8 different colors, each with 10 unique shades. Using the subdued and strong token variants is an easy way to change that hierarchy and draw a merchant's attention to the right place. Create heirarchyĬolor plays a key role in creating the overall hierarchy of a screen. For example, using an icon or a label in addition to using red, yellow, or green when communicating the status of something ensures that the status is visible to merchants who are color blind. However, you should never convey information using color alone. Sufficient contrast makes things easier to find, identify, and interact with for all merchants. The color system is designed to meet WCAG 2.1 contrast ratios. Color can help communicate things like hierarchy of information, interactive states, and distinct elements, all of which make it easier for merchants to get their work done. Reinforce the purpose of the pageĪlways use color that supports the purpose of the content and the overall goal of the page. Color is a powerful tool that helps merchants quickly navigate and manage their businesses in the Shopify Admin.

Spotify palette color meaning