# Shopify Polaris > Shopify’s merchant admin: a grey canvas, dense white cards, black bevelled buttons, a black top bar and green for every success. - Nickname: Merchant admin - Also called: Polaris, Shopify admin look, Polaris Uplift - Category: Platform Design Systems - Moods: Trustworthy, Friendly, Serious - Industries: E‑commerce, SaaS, Startup & Tech, Food & Restaurant - Style page: https://uilingo.dev/styles/shopify-polaris/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Shopify Polaris" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Shopify’s merchant admin: a grey canvas, dense white cards, black bevelled buttons, a black top bar and green for every success. Design keywords: grey admin canvas, black bevelled buttons, black top bar, dense white cards, soft tinted status badges, green success, dashed filter pills, Inter at small sizes. ## Visual language Shopify's merchant admin after the 2023 Polaris refresh: a light grey canvas (#F1F1F1) under a solid black top bar with a centred search, a slightly darker grey side navigation, and compact white cards with 12px corners that are separated by a soft bottom bevel rather than borders. The primary button is near-black with a tactile inner highlight, secondary buttons are white with a grey bottom edge, and everything is set small (13–14px Inter) and dense but never cramped. Colour is functional: tinted status badges, a single focus blue, and green for anything that means success or money in. ## Signature details (must be visible) - Black #1A1A1A top bar, 56px tall, with a dark #303030 search field centred in it; the sidebar brand block continues the black so bar and nav meet - Primary button: linear-gradient(180deg, transparent 63%, rgba(255,255,255,.15)), #303030 with inset shadows 0 -1px 0 1px rgba(0,0,0,.8), 0 0 0 1px #303030, 0 .5px 0 1.5px rgba(255,255,255,.25); pressed = inset 0 3px 0 #000 - Secondary button: white with inset 0 -1px 0 #B5B5B5, 0 0 0 1px rgba(0,0,0,.1), 0 .5px 0 1.5px #fff — a visible bottom lip - Cards: white, 12px radius, no border, 0 1px 0 rgba(26,26,26,.07) plus faint inset side and bottom bevel lines, 16px padding - Tinted status badges, 8px radius: success #CDFEE1/#0C5132, attention #FFEF9D/#4F4700, critical #FEDAD9/#8E0B21, info #E0F0FF/#00527C, with a tiny progress-circle glyph - Filter pills with a 1px dashed #8A8A8A border; the selected one turns solid #E3E3E3 - Metric titles underlined with a dotted line (definition hint); 2px #005BD3 outline for keyboard focus - Green (#29845A / #047B5D) reserved for success, progress and money ## Design tokens — use these exact values Colours (light mode): - background #F1F1F1 - surface #FFFFFF - surface-2 #F7F7F7 - text #303030 - text-muted #616161 - primary #303030 (text on it #FFFFFF) - secondary #047B5D (text on it #FFFFFF) - accent #8051FF - border #E3E3E3 - success #047B5D · warning #8F6900 · danger #C70A24 - chart series #2C6ECB, #29845A, #8051FF, #E8A70E, #C3447E Radius: sm 6px, md 8px, lg 12px, xl 16px, pill 999px Border width: 1px Shadows: sm `0 1px 0 0 rgba(26,26,26,0.07)`, 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)`, lg `0 8px 16px -4px rgba(26,26,26,0.22), 0 0 0 1px rgba(26,26,26,0.06)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.85 density Motion: 150ms cubic-bezier(0.25, 0.1, 0.25, 1) ## Typography (Latin + Thai) - Headings: Inter 600/700 with Thai fallback Anuphan 600/700 - Body: Inter 400/500/600 with Thai fallback Anuphan 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Anuphan:wght@400;500;600;700&display=swap - CSS stacks: heading `"Inter", "Anuphan", system-ui, sans-serif`; body `"Inter", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.25rem, 4.6vw, 3.6rem), heading weight 700, heading tracking -0.02em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Inputs: white, 1px #8A8A8A border, 8px radius, 32–34px tall, 13–14px text; hover darkens border and tints fill #F7F7F7; focus = 2px #005BD3 outline offset 1px - Side navigation: #EBEBEB column, 13px 600-weight items with 18px icons; active item is a white raised pill (shadow 0 1px 0 rgba(26,26,26,.07)) - Tabs: no underline — rounded 8px buttons, the selected one filled #E3E3E3 - Segmented button group: one bevelled white strip with 1px dividers; selected segment pressed-in with inset 0 2px 1px rgba(26,26,26,.18) - Index table: header row filled #F7F7F7 with rounded ends, 12px sentence-case headers, 9px rows, hover row #F7F7F7, status badge in the last column - Checkbox 16px with 4px radius and #8A8A8A border, checked black; radio = thick 5px black ring - Banners/alerts: tinted backgrounds by tone, 12px radius, no border - Featured / CTA surfaces: black #1A1A1A with a green radial glow from one corner and a green bevelled button - Charts: 2px blue (#2C6ECB) current line with a dotted comparison series, light grid, funnel bars in blue tints ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → stats → showcase → testimonials → pricing → faq → cta. Feature section as grid. Landing pages borrow the admin look: black top bar, split hero with a bold 700 Inter headline, a black bevel primary and white bevel secondary button, and the product shot framed as a Shopify admin window (black strip with a centred search pill on a grey #EBEBEB frame). Sections alternate grey canvas and white bands; features are a dense 4-column grid of small cards with grey icon tiles, stats sit in cards, pricing highlights the recommended plan in black, FAQ is a single card with ruled rows, CTA is black with a green glow. The dashboard is the real thing: black top bar, grey sidebar, compact KPI cards with dotted-underlined labels, revenue line, funnel, activity and an orders index table with tinted badges. ## Content Use realistic product copy (fictional brand) suited to: E-commerce back offices and order management. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Colourful brand-tinted primary buttons — the primary is black; green is for success only - Visible 1px borders around every card instead of the bevel shadow - Big hero typography, airy spacing or pill-shaped cards - Blur, glass or gradients on surfaces (only the small black-to-green glow on featured blocks) - Navy or indigo shells — that reads as generic enterprise SaaS - Uppercase table headers or heavy rules ## Stack notes One self-contained HTML file with a