Shopify
shopify.comPolaris: a calm, merchant-focused admin with a deep green brand, clear cards and plain-spoken copy.
An independent summary of Shopify's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Shopify. Color values are approximate.
Overview
Shopify's Polaris system serves merchants who run their business all day in the admin. It prefers clarity, predictable layouts and helpful empty states.
Color
| Role | Value | Use |
|---|---|---|
| Shopify green | #008060 | Brand and primary actions |
| Text | #202223 | Body |
| Subdued | #6D7175 | Secondary text |
| Surface | #F6F6F7 | Page background |
Typography
Inter in the admin at 13–14px. Headings are semibold; numbers in analytics are large and tabular.
Spacing and layout
Cards on a light gray page, grouped into one- and two-column layouts with consistent 16–20px padding.
Components
- Cards with header, sections and footer actions.
- Index tables with bulk actions and filters.
- Empty states with illustration and one action.
- Banners for info, success, warning and critical states.
Do
- Write labels as plain verbs (Save, Add product).
- Give every empty state a next step.
Don't
- Don't put more than one primary button per page section.
- Don't rely on color alone for status.
Prompt for your agent
Style this interface in the spirit of Shopify's design language, without copying its logo or brand assets.
Polaris: a calm, merchant-focused admin with a deep green brand, clear cards and plain-spoken copy.
Follow the color roles, type and component notes in this DESIGN.md.