DESIGN.md — Shopify

Overview

Shopify's design system (Polaris) is one of the most comprehensive in the industry, built to serve millions of merchants across wildly different use cases. The signature green conveys growth and commerce, while a carefully neutral admin UI keeps focus on merchant data.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#008060	Primary green, CTAs
color-brand-dark	#004C3F	Pressed states, dark accents
color-bg	#FFFFFF	Page background
color-surface	#F6F6F7	Card backgrounds, inputs
color-text-sub	#6D7175	Secondary text

Typography

Role	Family	Size	Weight
Display	ShopifySans	42px	700
Heading	ShopifySans	24px	600
Body	ShopifySans	14px	400
Caption	ShopifySans	12px	400

Components

Resource List

• Table of products/orders with bulk actions
• Checkbox column, sortable headers
• Pagination footer with per-page selector

Polaris Card

• White bg, 8px radius, subtle shadow
• Header with title + action link
• Sectioned body with dividers

App Bridge Banner

• Full-width banner for embedded app context
• Status icon (info/success/warning/critical)
• Dismiss button and optional action

Do's and Don'ts

Do

• Use Polaris components — never custom-build what Polaris provides
• Use green for primary actions (Save, Add product)
• Test all layouts at 320px — merchants use mobile heavily

Don't

• Don't use more than one primary button per section
• Don't override Polaris spacing tokens
• Don't place destructive actions next to primary actions without spacing