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.

Preview of visual changes to Polaris, showcasing an admin interface and a mobile view

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.


Colors

Collage of colors representing the new Polaris color system

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.

Diagram presenting color roles in the ui

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.

Preview of the new Shopify color palette

Accessibility

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.


Illustrations

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.

Example showing flat illustration style

A flattened perspective simplifies the composition and makes the graphic easier to understand.

Illustration presenting different ways of using color in illustrations with contrasting colors

Illustrations with low intensity colors are easy to see in a wide variety of environments.

Illustration presenting good usage of simple shapes in illustrations

Geometric and straightforward shapes that share continuing and intersecting lines create a sense of unity within the space.


Icons

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.

Four icons presenting the new 20 by 20 system icons used in the side navigation

20×20 system icons are primarily used in navigation to support wayfinding.

Preview of four new 16 by 16 icons used in a dropdown menu

16×16 system icons are used inline to add clarity to an action.

Preview of a larger spot icon used in an empty state interface

System spot icons reinforce messaging in product experiences that are seen more than once.


Shapes

Collage of different interface elements representing various shapes used in the UI

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.

Diagram representing nesting shapes in interface elements

Nested shapes have gradually proportional corner radiuses.

Diagram showing consistent spacing between different elements of the interface

Consistent space between shapes creates visual rhythm.

Diagram showing optimal use of space between interface elements

Usage of space and shapes is economical and purposeful.


Depth

Seven circles representing seven layers of depth, going from deepest to highest

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.

Two buttons presenting a default, neutral depth state and a pressed, inset state

Pressed elements can travel to negative depth values.

A modal window with a strong shadow on top of a sudbued interface

Depth is used to differentiate between different layers of the interface, like in modals.


Motion

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.

Elegance

UI elements move with pleasingly simple detail and focus on the task. Assistance and simplicity make the interface feel easy and approachable.

Accuracy

UI elements move swiftly and confidently towards clear destinations. Control and precision make the interface feel capable and reliable.

Fluidity

UI elements feel connected. Forces influence each other and demonstrate momentum, giving things a subtle resemblance to real‑life dynamics.


Using the new design

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).

Development

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.