Home
DESIGN.mdStar on GitHub

Shopify

The all-in-one commerce platform to start, run, and grow a business.

Online Store Shopify POS Shop Pay Sidekick Shopify Payments Polaris
Signature — Admin Orders
Ordersacme-store.myshopify.com
0 selected
OrderDateCustomerTotal PaymentFulfillmentItems
Colors
Primary — commerce green
green#008060CTAs, Paid, success, bag
green-hover#006E52Hover / pressed
green-deep#004C3FDeep accent
aloe#C1FBD4Success badge bg
legacy-lime#95BF47Heritage bag — not UI
Surfaces
coal-black#02090ADark page (hero)
shade-90#18181BDark cards
white#FFFFFFLight cards, admin
shade-10#F4F4F5Light page
shade-20#E4E4E7Borders, fills
Text & neutrals
shade-ink#0E0E10Headings, marketing CTA
shade-60#52525BBody (light)
shade-50#71717AMuted, metadata
shade-40#A1A1AABody (dark)
Semantic — Polaris tones
success#008060Paid, Fulfilled
attention#B98900Pending, Unfulfilled
critical#D82C0DError, destructive
info#2C6ECBLinks, highlight
Typography — PolySans · Neue Haas Grotesk · IBM Plex Mono
display
PolySans · 700
Shopify
56px700
h1
PolySans · 600
Be the next AI all-star
34px600
h2
PolySans · 600
Your brand has entered the chat
22px600
body-lg
Neue Haas · 400
The all-in-one commerce platform to start, run, and grow a business.
17px400
body-sm
Neue Haas · 400
Meet your secret weapon, Sidekick.
13px400
mono
IBM Plex Mono · 400
shopify theme push --store acme-store
12pxmono
Components
Buttons
Status badges
Paid Pending Refunded
Fulfilled Unfulfilled Error
Shopify CLI
Radius
4px
8px
12px
Guardrails
DO
Use commerce green #008060 for primary actions and Paid / Fulfilled / success — white text on it in both themes
Keep the shopping-bag mark green — it's the one constant across every rebrand
Set headings in PolySans, UI in Neue Haas Grotesk, code in IBM Plex Mono — one role each
Use amber for Pending / Unfulfilled and green for Paid / Fulfilled — never the reverse
Follow Polaris: pill status badges, horizontal-only table separators, plain-English copy
DON'T
Use the legacy lime #95BF47 for interactive elements — it's heritage, not a UI action color
Put dark text on the green button — commerce green takes white text always
Tint dark surfaces navy — Shopify's dark is coal-black #02090A, near-neutral
Set body or UI in PolySans — it's display only; Neue Haas Grotesk owns the UI
Invent order data — use real order numbers, realistic totals, and Polaris badge tones