Shopify Polaris

Also called: Polaris, Shopify admin look, Polaris Uplift

Shopify’s merchant admin: a grey canvas, dense white cards, black bevelled buttons, a black top bar and green for every success.

“Merchant admin”Platform Design SystemsEra: 2017 → today (2023 “Uplift” refresh)TrustworthyFriendlySerious

Open full screen ↗

shopify-polaris / landingEN

shopify-polaris / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md8pxRadius lg12pxRadius xl16pxDensity×0.85Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

grey admin canvasblack bevelled buttonsblack top bardense white cardssoft tinted status badgesgreen successdashed filter pillsInter at small sizes

Polaris is built for merchants who live in their admin all day. The canvas is light grey (#F1F1F1), content sits in compact white cards with 12px corners and a subtle bottom bevel instead of borders, and the primary button is near-black with a tactile inner highlight. A black top bar with a centred search frames everything; the side navigation is a slightly darker grey. Status is spoken in soft tinted badges, and green means money in, orders fulfilled and goals met.

Best for

E-commerce back offices and order management
Merchant / seller dashboards and marketplaces
Apps and plugins that live inside Shopify
Inventory, POS and fulfilment tools

Avoid for

Consumer-facing storefronts that need brand personality
Editorial or luxury marketing pages
Playful games and kids products

✓ Do

Group everything in white 12px cards on the #F1F1F1 canvas with 12–16px padding
Use the near-black #303030 bevel button for the one primary action per card
Speak status with tinted badges: green #CDFEE1, yellow #FFEF9D, red #FEDAD9, blue #E0F0FF

✕ Don't

Don’t use colourful primary buttons — primary is black, green is reserved for success
Don’t add borders around cards; rely on the bevel shadow
Don’t use large display type or airy spacing inside the admin

Not to be confused with

Enterprise SaaS →Enterprise SaaS is navy/indigo with a dark sidebar and ruled tables; Polaris has a black top bar, a light grey sidebar, black bevelled buttons and green success.Fluent 2 →Fluent 2 uses a blue brand button, acrylic blur and pill indicators; Polaris uses black bevelled buttons, solid grey surfaces and tinted badges.Data-Dense Dashboard →Data-dense dashboards cram charts edge to edge; Polaris stays card-based and task-oriented with generous touch targets.

On mobile

Mirror the Shopify mobile app: grey canvas, full-width white cards with 12px corners, a black featured card, tinted status badges in every list row and a plain white bottom bar whose active tab is simply darker. Keep buttons bevelled — the press-in inset reads well under a thumb.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinInter · 600/700

The quick brown fox

Heading · ThaiAnuphan · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinInter · 400/500/600

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Anuphan is a loopless, low-contrast Thai sans with Inter’s open apertures and even colour, so dense admin screens read as one typeface in both scripts.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 8px · lg 12px · xl 16px · pill 999px`
Border	`1px`
Shadow	`0 1px 0 0 rgba(26,26,26,0.07), inset 0 -1px 0 0 rgba(0,0,0,0.10), inset 1px 0 0 0 rgba(0,0,0,0.05), inset -1px 0 0 0 rgba(0,0,0,0.05)`
Display	`clamp(2.25rem, 4.6vw, 3.6rem)`
Motion	`150ms cubic-bezier(0.25, 0.1, 0.25, 1)`
Density	`×0.85`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Shopify Polaris (shopify-polaris) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Anuphan:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 12px;
  --background: #F1F1F1;
  --foreground: #303030;
  --card: #FFFFFF;
  --card-foreground: #303030;
  --popover: #FFFFFF;
  --popover-foreground: #303030;
  --primary: #303030;
  --primary-foreground: #FFFFFF;
  --secondary: #047B5D;
  --secondary-foreground: #FFFFFF;
  --muted: #F7F7F7;
  --muted-foreground: #616161;
  --accent: #F7F7F7;
  --accent-foreground: #303030;
  --destructive: #C70A24;
  --border: #E3E3E3;
  --input: #E3E3E3;
  --ring: #303030;
  --chart-1: #2C6ECB;
  --chart-2: #29845A;
  --chart-3: #8051FF;
  --chart-4: #E8A70E;
  --chart-5: #C3447E;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #303030;
  --sidebar-primary: #303030;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F7F7F7;
  --sidebar-accent-foreground: #303030;
  --sidebar-border: #E3E3E3;
  --sidebar-ring: #303030;
}

.dark {
  --background: #1A1A1A;
  --foreground: #F1F1F1;
  --card: #262626;
  --card-foreground: #F1F1F1;
  --popover: #262626;
  --popover-foreground: #F1F1F1;
  --primary: #F1F1F1;
  --primary-foreground: #1A1A1A;
  --secondary: #2EA36A;
  --secondary-foreground: #06140D;
  --muted: #2E2E2E;
  --muted-foreground: #B5B5B5;
  --accent: #2E2E2E;
  --accent-foreground: #F1F1F1;
  --destructive: #FF8B7E;
  --border: #3D3D3D;
  --input: #3D3D3D;
  --ring: #F1F1F1;
  --chart-1: #6FA3F2;
  --chart-2: #4BC385;
  --chart-3: #B49BFF;
  --chart-4: #F0C24A;
  --chart-5: #F08BB8;
  --sidebar: #262626;
  --sidebar-foreground: #F1F1F1;
  --sidebar-primary: #F1F1F1;
  --sidebar-primary-foreground: #1A1A1A;
  --sidebar-accent: #2E2E2E;
  --sidebar-accent-foreground: #F1F1F1;
  --sidebar-border: #3D3D3D;
  --sidebar-ring: #F1F1F1;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Shopify Polaris (shopify-polaris) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Anuphan:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #F1F1F1;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F7F7;
  --color-text: #303030;
  --color-text-muted: #616161;
  --color-primary: #303030;
  --color-on-primary: #FFFFFF;
  --color-secondary: #047B5D;
  --color-on-secondary: #FFFFFF;
  --color-accent: #8051FF;
  --color-border: #E3E3E3;
  --color-success: #047B5D;
  --color-warning: #8F6900;
  --color-danger: #C70A24;
  --color-chart-1: #2C6ECB;
  --color-chart-2: #29845A;
  --color-chart-3: #8051FF;
  --color-chart-4: #E8A70E;
  --color-chart-5: #C3447E;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 0 rgba(26,26,26,0.07);
  --shadow-md: 0 1px 0 0 rgba(26,26,26,0.07), inset 0 -1px 0 0 rgba(0,0,0,0.10), inset 1px 0 0 0 rgba(0,0,0,0.05), inset -1px 0 0 0 rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 16px -4px rgba(26,26,26,0.22), 0 0 0 1px rgba(26,26,26,0.06);
  --font-heading: "Inter", "Anuphan", system-ui, sans-serif;
  --font-body: "Inter", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #1A1A1A;
  --color-surface: #262626;
  --color-surface-2: #2E2E2E;
  --color-text: #F1F1F1;
  --color-text-muted: #B5B5B5;
  --color-primary: #F1F1F1;
  --color-on-primary: #1A1A1A;
  --color-secondary: #2EA36A;
  --color-on-secondary: #06140D;
  --color-accent: #B49BFF;
  --color-border: #3D3D3D;
  --color-success: #4BC385;
  --color-warning: #F0C24A;
  --color-danger: #FF8B7E;
  --color-chart-1: #6FA3F2;
  --color-chart-2: #4BC385;
  --color-chart-3: #B49BFF;
  --color-chart-4: #F0C24A;
  --color-chart-5: #F08BB8;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Shopify Polaris (shopify-polaris). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Anuphan:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9451,
            0.9451
          ],
          "hex": "#f1f1f1"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9686,
            0.9686
          ],
          "hex": "#f7f7f7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1882,
            0.1882,
            0.1882
          ],
          "hex": "#303030"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3804,
            0.3804,
            0.3804
          ],
          "hex": "#616161"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1882,
            0.1882,
            0.1882
          ],
          "hex": "#303030"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.4824,
            0.3647
          ],
          "hex": "#047b5d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.502,
            0.3176,
            1
          ],
          "hex": "#8051ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8902,
            0.8902
          ],
          "hex": "#e3e3e3"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.4824,
            0.3647
          ],
          "hex": "#047b5d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.4118,
            0
          ],
          "hex": "#8f6900"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7804,
            0.0392,
            0.1412
          ],
          "hex": "#c70a24"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.4314,
            0.7961
          ],
          "hex": "#2c6ecb"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1608,
            0.5176,
            0.3529
          ],
          "hex": "#29845a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.502,
            0.3176,
            1
          ],
          "hex": "#8051ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.6549,
            0.0549
          ],
          "hex": "#e8a70e"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7647,
            0.2667,
            0.4941
          ],
          "hex": "#c3447e"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.102,
            0.102
          ],
          "hex": "#1a1a1a"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.149,
            0.149
          ],
          "hex": "#262626"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.1804,
            0.1804
          ],
          "hex": "#2e2e2e"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9451,
            0.9451
          ],
          "hex": "#f1f1f1"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7098,
            0.7098,
            0.7098
          ],
          "hex": "#b5b5b5"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9451,
            0.9451
          ],
          "hex": "#f1f1f1"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.102,
            0.102
          ],
          "hex": "#1a1a1a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.6392,
            0.4157
          ],
          "hex": "#2ea36a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.0784,
            0.051
          ],
          "hex": "#06140d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.6078,
            1
          ],
          "hex": "#b49bff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.2392,
            0.2392
          ],
          "hex": "#3d3d3d"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2941,
            0.7647,
            0.5216
          ],
          "hex": "#4bc385"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.7608,
            0.2902
          ],
          "hex": "#f0c24a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5451,
            0.4941
          ],
          "hex": "#ff8b7e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.6392,
            0.949
          ],
          "hex": "#6fa3f2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2941,
            0.7647,
            0.5216
          ],
          "hex": "#4bc385"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.6078,
            1
          ],
          "hex": "#b49bff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.7608,
            0.2902
          ],
          "hex": "#f0c24a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.5451,
            0.7216
          ],
          "hex": "#f08bb8"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.102,
              0.102
            ],
            "hex": "#1a1a1a",
            "alpha": 0.07
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.102,
              0.102
            ],
            "hex": "#1a1a1a",
            "alpha": 0.07
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.05
          },
          "offsetX": {
            "value": 1,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.05
          },
          "offsetX": {
            "value": -1,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.102,
              0.102
            ],
            "hex": "#1a1a1a",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 16,
            "unit": "px"
          },
          "spread": {
            "value": -4,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.102,
              0.102,
              0.102
            ],
            "hex": "#1a1a1a",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 150,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.1,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.85
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!