Shopify is the all-in-one commerce platform helping businesses build and grow. Its style is dark-first with deep forest-teal undertones, pairs ultra-light display type (weight 330 at 96px) with neon green (#36F4A4) as the only high-energy accent, uses full-pill buttons, and layers shadows for photographic depth.
E-commerceVibrant
Prompt Template
Base Template
Design a Shopify-inspired interface. - Dark-first design with deep forest-teal undertones (not pure black); - Ultra-light display typography (weight 330) at monumental scale (96px) creating an ethereal presence; - Neon Green (#36F4A4) as the singular high-energy accent against darkness; - Full-pill buttons (9999px radius) as the primary interactive shape; - Layered, multi-stage box shadows creating photographic depth. Colors: #FFFFFF, #000000, #36F4A4, #C1FBD4 with #36F4A4 accent. Typography: - Background: White (.
Variant Prompts
📱 Mobile
Design a mobile app with Shopify aesthetics. Use Shopify color identity with #36F4A4 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Shopify style. Use Shopify color identity with #36F4A4 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Shopify design language. Use Shopify color identity with #36F4A4 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Shopify visual identity. Use Shopify color identity with #36F4A4 accents. Compelling, conversion-focused.
Usage Examples
Shopify App
WebBuild a web app with Shopify design language and #36F4A4 color system.
Shopify Dashboard
DashboardCreate a dashboard using Shopify style with data visualization and - Background: White ( typography.
✅ Best For
- E-commerce
- E-commerce SaaS platforms
- Dark cinematic product pages
❌ Avoid For
- Paper publishing styles
- Quiet reading sites
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.