Polaris is changing
The Shopify admin has a new look and feel, with an updated color palette, icons, and more. In the coming months, these changes will be reflected throughout Polaris.
Refreshed visual styles. A clean, simple style makes things feel approachable and efficient.
Faster performance. Elegant code and lightweight assets means pages load more quickly.
Future-friendliness. Built for flexibility, design tokens and new infrastructure let us iterate easily across experiences.
Purposeful brand presence. Being intentional about when the Shopify brand comes forward, and when it takes a backseat, directs the focus to where it matters most.
Familiarity across experiences. New patterns and guidelines help us design a wide variety of experiences that still always feel like Shopify.
The new palette for admin experiences consolidates interface colors to clearly communicate things like interactive state, hierarchy, and emphasis of elements on the screen. Shopify’s brand colors are less prominent, which lets merchants concentrate on their own brand and business.
Referring to colors by the role they play in the UI makes things easy to modify and customize later. It also extends the color system so it works across any touchpoint at Shopify.
More information about the color system is available in the polaris-tokens GitHub repository.
The color system is designed within the HSLuv color space to generate themes that meet WCAG 2.1 compliant contrast ratios. Higher contrast makes things easier to find and identify. It also makes interactive elements easier to use.
The admin’s new illustration style is more purposeful, literal, and consistent. It helps merchants quickly and clearly understand what’s in front of them. Illustrations are used in fewer places, and take up less space on the page. They direct focus to where it matters, and minimize distraction.
A flattened perspective simplifies the composition and makes the graphic easier to understand.
Illustrations with low intensity colors are easy to see in a wide variety of environments.
Geometric and straightforward shapes that share continuing and intersecting lines create a sense of unity within the space.
The Polaris icon system has a new visual style. Icons are filled instead of outlined, and optically adjusted for balance and clarity. They’re constructed using keylines, which keeps visual weights consistent across the entire set. This helps improve legibility in both digital and physical environments, and works in a variety of lighting conditions and background colors.
20×20 system icons are primarily used in navigation to support wayfinding.
16×16 system icons are used inline to add clarity to an action.
System spot icons reinforce messaging in product experiences that are seen more than once.
Shapes have been refined to increase layout flexibility, reduce friction points, and create a sense of continuity. These changes unify interface elements across admin experiences. Visual design is all about rounded rectangles with gradually reduced corner radiuses, nesting formations, and proportional spacing between elements and containers. This gives things a consistent visual style and minimizes distractions.
Nested shapes have gradually proportional corner radiuses.
Consistent space between shapes creates visual rhythm.
Usage of space and shapes is economical and purposeful.
The new design language has seven layers of depth, expressed as shadows. This gives us more three dimensional space to work with, and more flexibility to indicate subtle—but crucial—distinctions. Different depths clearly communicate different interactive states.
Pressed elements can travel to negative depth values.
Depth is used to differentiate between different layers of the interface, like in modals.
Motion style attributes have been developed to unify animation throughout the interface. Elements move with efficiency and fluidity, creating an experience that feels both familiar and professional.
UI elements move with pleasingly simple detail and focus on the task. Assistance and simplicity make the interface feel easy and approachable.
UI elements move swiftly and confidently towards clear destinations. Control and precision make the interface feel capable and reliable.
UI elements feel connected. Forces influence each other and demonstrate momentum, giving things a subtle resemblance to real‑life dynamics.
Using the new design
The best way to get familiar with using the new design for admin experiences is to check out the UI kit.
If you work at Shopify, use the Admin Figma UI kit (web).
When Polaris version 6.0 is released later this year, these design changes will become the default for Polaris components. Until then, use these components to apply the new design to your projects:
App provider enables sharing global settings throughout the hierarchy of your application. On the app provider component page, select the With the new design enabled example to learn how to wrap your code.
Theme provider is a child of the app provider component, but can be used on its own. Check out the theme provider component page documentation to learn about how to use it in your development work.