Shopify Polaris
Also called: Polaris, Shopify admin look, Polaris Uplift
Shopify’s merchant admin: a grey canvas, dense white cards, black bevelled buttons, a black top bar and green for every success.
Design keywords
Say these words to ask for this style.
Polaris is built for merchants who live in their admin all day. The canvas is light grey (#F1F1F1), content sits in compact white cards with 12px corners and a subtle bottom bevel instead of borders, and the primary button is near-black with a tactile inner highlight. A black top bar with a centred search frames everything; the side navigation is a slightly darker grey. Status is spoken in soft tinted badges, and green means money in, orders fulfilled and goals met.
Best for
- E-commerce back offices and order management
- Merchant / seller dashboards and marketplaces
- Apps and plugins that live inside Shopify
- Inventory, POS and fulfilment tools
Avoid for
- Consumer-facing storefronts that need brand personality
- Editorial or luxury marketing pages
- Playful games and kids products
✓ Do
- Group everything in white 12px cards on the #F1F1F1 canvas with 12–16px padding
- Use the near-black #303030 bevel button for the one primary action per card
- Speak status with tinted badges: green #CDFEE1, yellow #FFEF9D, red #FEDAD9, blue #E0F0FF
✕ Don't
- Don’t use colourful primary buttons — primary is black, green is reserved for success
- Don’t add borders around cards; rely on the bevel shadow
- Don’t use large display type or airy spacing inside the admin
Not to be confused with
On mobile
Mirror the Shopify mobile app: grey canvas, full-width white cards with 12px corners, a black featured card, tinted status badges in every list row and a plain white bottom bar whose active tab is simply darker. Keep buttons bevelled — the press-in inset reads well under a thumb.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.