Polaris· Design Systempolaris.shopify.com

Shopify's design system · admin UI

The design system behind Shopify.

Polaris is the product language of a platform that helps 2 million+ merchants run their businesses. Every pattern is tested against real commerce flows — checkout, orders, inventory, reports.

Color Palette27 tokens

background#ffffff

surface#ffffff

surface-secondary#f6f6f7

surface-tertiary#f1f1f1

bg-fill#303030

ink#1c1e1e

ink-inverted#ffffff

text-secondary#616161

text-subdued#767676

text-disabled#b3b3b3

primary#004c3f

primary-hover#003d33

primary-subtle#f1f8f4

on-primary#ffffff

success#008060

success-bg#dff8eb

warning#b98900

critical#d72c0d

info#156be8

border#e1e3e5

border-strong#ccc4c4

border-subdued#f0f0f0

shadow-soft#ededed

shadow-medium#e6e6e6

shadow-strong#d9d9d9

shadow-modal#bfbfbf

table-row-line#e9e9e9

Buttons

TypographyGoogle Font

Albert Sansbrand uses Inter

display-hero

Selling made simple.

58.448px · 700 · -2.63px

display-large

Merchant-first design

28.832px · 700 · 0px

Polaris is the product language of a platform that helps 2 million+ merchants run their businesses. Every pattern is tested against real commerce flows — checkout, orders, inventory, reports.

22.784px · 700 · -0.342px

p-button__content · padding: 12px 24px

22.784px · 450 · -0.57px

body-large

Polaris is the product language of a platform that helps 2 million+ merchants run their businesses. Every pattern is tested against real commerce flows — checkout, orders, inventory, reports.

20.256px · 450 · 0px

IconsSolar

Set: Solar · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Merchant-first design

Polaris is the product language of a platform that helps 2 million+ merchants run their businesses. Every pattern is tes…

Design System

none

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Merchant-first design

Polaris is the product language of a platform that helps 2 million+ merchants run their businesses. Every pattern is tested against real commerce flows — checkout, orders…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesign SystemPolaris

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Polaris.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Polaris tokens
export const theme = {
  primary: "#004c3f",
  radius: "6px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Polaris is what happens when a design system has to serve 2 million shop owners and stay consistent.

Polaris · Design System