Polaris is the interface language of Shopify's merchant admin: white cards rest on a #F1F1F1 canvas, near-black #303030 carries primary actions, and green #008060 marks success and brand moments. Inter type, 8px radii, and restrained borders keep orders, inventory, and marketing forms clear, stable, and predictable through daily use.
PolarisDesign System
Prompt Template
Base Template
Design a Shopify Polaris-inspired admin interface. - Light #F1F1F1 canvas with white surface cards; - Near-black #303030 primary buttons and #008060 brand green; - Inter font, 8px radii, #E3E3E3 hairline borders; - Merchant admin patterns: order tables, inventory forms, filters; - Calm, task-focused e-commerce workflows. Colors: #008060, #F1F1F1, #FFFFFF, #303030 with #008060 accent. Typography: Inter.
Variant Prompts
📱 Mobile
Design a mobile app with Polaris aesthetics. Use Polaris color identity with #008060 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Polaris style. Use Polaris color identity with #008060 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Polaris design language. Use Polaris color identity with #008060 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Polaris visual identity. Use Polaris color identity with #008060 accents. Compelling, conversion-focused.
Usage Examples
Polaris Order Admin
DashboardBuild an order management admin with Polaris style: #F1F1F1 canvas, white cards, #303030 primary buttons, green #008060 status accents, and dense data tables.
Polaris Product Listing Form
WebDesign a product listing form with Shopify Polaris aesthetics: labeled inputs, 8px radii, clear sections, and #008060 save actions.
✅ Best For
- E-commerce merchant admin
- Order and inventory management
- Complex form workflows
❌ Avoid For
- Consumer brand websites
- Motion-heavy marketing pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.