PolarisDesign
These are the principles that shape how we design all the experiences across the Shopify admin.
Colors
Our color system builds on the recognition of the Shopify brand colors to make the admin interface more usable.
Data visualizations
Visualizations surface patterns in data, and provide immediate answers to a single, specific question.
Icons
Icons in the Shopify admin act as visual aids to help merchants complete tasks. They’re simple, informative, and build on the visual language of the design system.
Illustrations
The Shopify admin uses a precise illustration style to help merchants quickly and clearly understand how things work across every experience.
Interaction states
Interaction states communicate the status of an element in the interface, establish confidence once an action is taken, and suggest the ability (or inability) to interact with the element.
Layout
Polaris layout components let you quickly build custom layouts without writing CSS code.
Sounds
We use sound to communicate information and to enhance how merchants experience the Shopify admin. Sound patterns make interactions easier and more predictable.
Space
Space is the distance between objects in your design. It should be used to complement the purpose of a page, by creating hierarchy and helping the content become more useful and understandable.
Typography
Typography helps establish hierarchy and communicate important content by creating clear visual patterns.