---
name: Shopify
description: "Polaris: a calm, merchant-focused admin with a deep green brand, clear cards and plain-spoken copy."
website: https://www.shopify.com
color: "#008060"
category: Commerce
icon: shopify
updated_at: "2026-10-29"
---

# Shopify — DESIGN.md

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