# Shopify Polaris (Shopify Polaris)

> Shopify's UI framework for giving products, orders, payments and customers one commerce language. Cards and sections separate decisions, while short status and action language helps a merchant keep the store moving.

- IndexStyle No.547 — https://indexstyle.org/styles/shopify-polaris
- Kind: Style · Family: Platform Screen Languages · Era: 2017–
- Mood: Trust, Intimacy, Technique
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- White cards stacked on a pale ground
- Green used as success or forward motion
- Title, status and primary action gathered at the top
- Compact badges for product, order and payment states

## Best used for

- Management screens that connect order status to the next operational action
- Giving business tools a calm, humane voice without losing rigor

## Composition recipe

- Typography & lettering: Lead with the page title and primary action; split status and explanation into badge and body text.
- Layout & structure: Stack white cards on a pale ground, with one business decision per card.
- Material & texture: Use neutrals as the base, green for success and progress, and red only for danger.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F1F2F3
- The colour it is remembered by: #008060
- Text and outlines: #202223

## What to avoid

Putting everything in a card removes the order of the page. Define the workflow and primary action outside the cards first.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: White cards stacked on a pale ground
- [ ] Visible in the piece: Green used as success or forward motion
- [ ] Visible in the piece: Title, status and primary action gathered at the top
- [ ] Visible in the piece: Compact badges for product, order and payment states
- [ ] The layout follows: Stack white cards on a pale ground, with one business decision per card.
- [ ] The lettering follows: Lead with the page title and primary action; split status and explanation into badge and body text.
- [ ] The material and surface follow: Use neutrals as the base, green for success and progress, and red only for danger.
- [ ] The colour relation holds: #F1F2F3 as ground, #008060 carrying the style, #202223 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Atlassian Design System (Atlassian Design System)** — A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable. → https://indexstyle.org/styles/atlassian-design-system
- **Bento Grid (ベントーグリッド)** — Divides different kinds of information into independent boxes, giving the whole picture at a glance. → https://indexstyle.org/styles/bento-grid

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=shopify-polaris+atlassian-design-system

## Further study

- Shopify admin page structure
- Commerce status labels
- Polaris as Web Components

## Reference works

- Shopify Developers — Polaris — https://shopify.dev/docs/api/polaris

## Source of record

- Shopify Developers — Polaris — https://shopify.dev/docs/api/polaris

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/shopify-polaris
- Image-generation prompt (legally clean): https://indexstyle.org/styles/shopify-polaris/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)