Design Blueprint · v1.0 · scanned

The Shopify Polaris
design system.

Merchant-first warmth — near-black primary, soft pastel status surfaces, and a tactile depressible button.

Browse components Color tokens

warmtactilemerchantneutral-boldpolishedaccessible

#303030

★

primary

01

Foundations

Logomark

s

Shopify Polaris

Disk + wordmark. Always pair with at least 8px of clearspace. Use #303030 background or invert for dark surfaces.

Voice

+Merchant-first, plain-spoken, warm, ambitious-but-grounded
+Short punchy declaratives
+Second-person ('you/your')
−jargon-as-drama
−hype
−FOMO

Design principles

→Near-black primary, green reserved for success only.
→Soft pastel surface tints for status (info, success, warning, caution, critical).
→Variable-weight Inter at 450/550/650 — slightly lighter than standard.
→Multi-layer inset button shadow for tactile, depressible feel.
→Dedicated 'magic' purple for AI suggestions.

Vibe · inspired by Shopify Polaris

Polaris (post-2023 Uplift) is monochrome at heart — primary action is near-black, not Shopify green. Green is reserved for success states. Inter at variable weights 450/550/650 makes it feel a notch lighter than typical SaaS. Soft pastel surfaces (mint, peach, sky, blush) tint status banners. The primary button uses a famously complex multi-layer inset shadow that gives it a tactile, depressible feel — a signature worth keeping. A dedicated purple is reserved for AI (Sidekick).

Comparable to: Shopify, Stripe Dashboard (warmer cousin), modern Mailchimp

02

Color system

Primary scale

active

#1A1A1A

default

#303030

disabled

mix

hover

#1A1A1A

text_on_brand ★

#FFFFFF

Neutrals

White

#FFFFFF

Bg

#F1F1F1

Surface

#FFFFFF

Border

#E3E3E3

Muted

#616161

Ink

#303030

Semantic

Success

#10B981

Warning

#F59E0B

Danger

#EF4444

Info

#60A5FA

Brand accents

Primary

#303030

Secondary

#7C3AED

Accent

#10B981

Highlight

#F59E0B

03

Typography

Display · 64 / 0.95 / -0.03 / 800

Dream big and build fast on Shopify.

H1 · 44 / 1.05 / -0.03 / 700

Your brand has entered the chat.

H2 · 30 / 1.15 / -0.02 / 700

Meet your secret weapon, Sidekick.

H3 · 20 / 1.3 / -0.01 / 700

Real-time observability for every layer.

Lead · 18 / 1.55 / 400

A friendly intro paragraph that sits below a hero headline and explains the value in plain language.

Body · 15 / 1.55 / 400

Standard body copy. Most page content sits at this size. Generous line height keeps long passages readable, and the typeface reads as warm.

Caption · 12 / 1.4 / 500 · uppercase

Section label · metadata · table headers

Mono · 13 / 1.5 / 500

// sample

Weights

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800

04

Tokens · spacing, radius, shadow

Spacing

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

12 · 48px

16 · 64px

Radius

2 · sm

6 · md

8 · lg

12 · xl

16 · 2xl

∞ · pill

Shadow

sm

card

lift

05

Components

Buttons · variants

Buttons · sizes

Buttons · with icon

Form controls

Email

Search

With error

This value isn't valid.

Textarea

Method

Precision

16-bit (recommended) 8-bit 4-bit

Advanced

Enable telemetry Auto-save drafts Beta features

Anonymous metrics

Help improve the product.

Slider

Max steps 200

Total iterations. Use 0 to run unlimited.

Dropdown menus

Closed (trigger)

Open

Badges & tags

Active Pro Done Beta Deprecated New Running Live v1.0.0 shopify-polaris

Avatars

JR

DK

AL

MP

SL

JR

DK

AL

+4

DK

KPI cards

Higher conversions

15%

High-intent shoppers

250M+

Commerce apps

21,000+

vs. last period

Metric

—

this month

Feature cards

Data tokens

One source of truth: colors, type, spacing, radius, shadow. Generated artifacts derive from a single JSON.

Components

Buttons, inputs, cards, tables, alerts — every recipe keyed to the brand's CSS variables.

Observability

Real-time charts, status, and KPIs. Live data layouts that survive long sessions and dense tables.

Complex card · domain object

Running #shopify-polaris-482

Live deployment · production cluster

Started 14m ago · 7.5k / 12k steps · ETA 9m

Loss

1.04

Throughput

2,412

Memory

14.2 GB

Learning rate

5e-5

62%7,520 / 12,000

Pricing cards

Free

For tinkering and learning.

$0/ month

✓1 project
✓Community support
✓Open-source core

Pro

For serious work.

$49/ month

✓Up to 10 projects
✓Priority support
✓Advanced features

Enterprise

For teams at scale.

Custom

✓Unlimited everything
✓Dedicated success
✓SLA + SSO + audit

Data table

ID	Name	Status	Metric	Owner	Updated
#482	production-deploy	Running	1.04	JR Jon R.	14m ago
#481	data-pipeline	Done	0.87	DK Daniel K.	2h ago
#480	backfill-2026	Paused	1.22	AL Alex L.	5h ago
#479	notifications	Failed	—	MP Maya P.	1d ago
#478	scratch	Draft	—	JR Jon R.	2d ago

Showing 1–5 of 42

…

Alerts & banners

Deployment complete.

All checks passed. Live in production after 14m 28s.

Memory approaching limit.

14.2 / 16 GB used. Consider scaling up before the next batch.

Run #479 failed.

CUDA out of memory at step 312. View logs for full stack trace.

New version available.

v1.1.0 dropped today. Drop-in compatible with your current config.

Tabs

Underline

Pill (segmented)

Chip filter

Modal / dialog

Toasts

Run started

#482 · production cluster

!

Checkpoint saved

step-7000.bin · 2.1 GB

Tooltips

Progress & loaders

Linear

Build62%

Download28%

Memory89%

Circular

Processing

7,520 of 12,000

ETA 9m 22s

Skeleton

Code & terminal

main.ts TS

import shopify from "shopify-polaris"

const result = await shopify.deploy({
  env: "production",
  tag: "v1.0",
  timeout: 3600,
})

// Deploy in seconds

● ~/shopify-polaris $ zsh

$ shopify-polaris deploy --tag v1.0
  ✓ Validated config (4.0K)
  ✓ Resolved dependencies (24)
  ⚡ Starting deployment…

  step    elapsed  status
  ────    ───────  ──────
  0500    0:14     ✓
  1000    0:28     ✓
  7520    9:22     ← live

Charts

Throughput

requests / sec

7d

Loss

live run

▼ 0.38

Allocation

Compute 9.2G
Storage 3.2G
Network 1.8G

Empty state

No items yet

Kick off your first project to see it appear here. We'll keep you posted as things happen.

Breadcrumbs & pagination

…

06

Patterns · app shell

Dashboard

Good afternoon, Jon

Higher conversions

15%

Active

3

Metric

—

Recent activity

07

Usage · do & don't

Do

✓Use near-black for primary actions, not green.
✓Use the 'magic' purple specifically for AI features.
✓Use the variable Inter weights 450/550/650 — it's a signature.

Don't

✗Don't make primary actions green — that's reserved for success states.
✗Don't flatten the primary button — its inset shadow is a Polaris signature.
✗Don't conflate 'warning' (orange) and 'caution' (yellow) — they're distinct.

Best for

E-commerce admin and merchant tools
Multi-tenant admin dashboards with dense data
B2B SaaS that needs to feel professional but not cold
Products with AI-suggestion features (the purple is built for it)

Avoid for

Brands that need to feel maximalist or expressive
Editorial/serif-driven products
Dark-first products (Polaris is light-first)

08

Accessibility

Contrast ratios. WCAG AA target ≥ 4.5 for body text, ≥ 3 for large text or UI components.

Foreground	Background	Contrast	Use
#303030	#F1F1F1	11.69 · AAA	Body, headings
#616161	#F1F1F1	5.48 · AA	Secondary text
#303030	#F1F1F1	11.69 · AAA	Brand actions (button bg)
#FFFFFF	#303030	13.2 · AAA	Brand button (text on primary)
#EF4444	#F1F1F1	3.33 · AA Large	Danger states

The Shopify Polarisdesign system.

Foundations

Color system

Typography

Tokens · spacing, radius, shadow

Components

Data tokens

Components

Observability

Live deployment · production cluster

Free

Pro

Enterprise

Recent activity

Confirm deployment?

No items yet

Patterns · app shell

Good afternoon, Jon

Usage · do & don't

Accessibility

The Shopify Polaris
design system.