Shopify Polaris

Styleplatform/system

shopify polaris, merchant admin, commerce, checkout, web components, app home. Best for Shopify admin apps, merchant tools, checkout, customer accounts, POS, and extensions.

shopify polaris merchant admin commerce checkout web components app home

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Shopify Polaris

Keywords: shopify polaris, merchant admin, commerce, checkout, web components, app home
Primary colours: Shopify admin semantic tokens and merchant brand accents
Secondary colours: System semantic tokens; product brand accents
Effects & animation: Purposeful admin feedback and restrained transitions
Best for: Shopify admin apps, merchant tools, checkout, customer accounts, POS, and extensions
Do not use for: Generic marketing sites or products outside Shopify surfaces

## Prompt keywords
Design a Shopify Polaris merchant workflow using official web components, admin-native hierarchy, clear actions, semantic status feedback, and consistent commerce patterns. Keep scope tied to Shopify surfaces.

## CSS / technical
design tokens, semantic color, component states, focus-visible, reduced motion

## Implementation checklist
Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior

## Design system variables
--color-primary, --color-surface, --color-on-surface, --radius-control, --motion-duration, --focus-ring

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source