# Shopify — Design System
> The all-in-one commerce platform for businesses of all sizes.
- **Canonical:** https://uiuxskills.com/library/shopify
- **Source:** https://www.shopify.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:57.793Z

---

---
version: alpha
name: Shopify
description: The all-in-one commerce platform for businesses of all sizes.
tone: Professional, authoritative, and empowering.
color-scheme: dark
colors:
  primary: "#000000"
  on-primary: "#FFFFFF"
  surface: "#02090A"
  accent: "#36F4A4"
  error: "#FF0000"
  surface-bright: "#1A1A1A"
  outline: "#333333"
  on-surface: "#FFFFFF"
  focus-ring: "#36F4A4"
  surface-container: "#0D0D0D"
typography:
  display-lg:
    fontFamily: Inter-Variable
    fontSize: 96px
    fontWeight: 700
  headline-lg:
    fontFamily: Inter-Variable
    fontSize: 48px
  headline-md:
    fontFamily: Inter-Variable
    fontSize: 32px
  body-md:
    fontFamily: Helvetica
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Helvetica
    fontSize: 14px
  label-md:
    fontFamily: Helvetica
    fontSize: 14px
    fontWeight: 600
  label-sm:
    fontFamily: Helvetica
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 128px
components:
  button-primary:
    backgroundColor: "#FFFFFF"
    textColor: "#000000"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E0E0E0"
    textColor: "#000000"
  button-secondary:
    backgroundColor: "#02090A"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: transparent
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.accent}"
  link:
    textColor: "{colors.accent}"
  link-hover:
    textColor: "#FFFFFF"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.accent}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-primary:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: ease-in
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.1)
  md: 0 3px 6px rgba(0,0,0,0.2)
  lg: 0 10px 20px rgba(0,0,0,0.3)
---

## Overview

Shopify utilizes a bold, high-contrast dark mode aesthetic that emphasizes product imagery and clear, actionable typography. The visual language is professional and enterprise-ready, focusing on speed, reliability, and global scalability.

## Colors

The color strategy centers on a deep, immersive dark theme that allows vibrant accents to guide user attention toward key conversion points.

*   Primary (#000000): The foundational background color for the platform.
*   On-Primary (#FFFFFF): High-contrast text for readability against dark surfaces.
*   Surface (#02090A): Secondary background for cards and UI containers.
*   Accent (#36F4A4): The primary highlight color for links and call-to-actions.
*   Error (#FF0000): Semantic color reserved for critical alerts.
*   Surface-Bright (inferred) (#1A1A1A): Elevated background for layered components.
*   Outline (#333333): Subtle border color for input fields and dividers.
*   On-Surface (inferred) (#FFFFFF): Text color for secondary surface elements.
*   Focus-Ring (inferred) (#36F4A4): High-visibility indicator for keyboard navigation.
*   Surface-Container (inferred) (#0D0D0D): Background for distinct section blocks.

## Typography

The typography stack balances the modern, geometric clarity of Inter with the classic, reliable readability of Helvetica.

*   Display-lg: Inter-Variable, used for high-impact hero headlines.
*   Headline-lg (inferred): Inter-Variable, used for primary section headers.
*   Headline-md (inferred): Inter-Variable, used for sub-section headers.
*   Body-md: Helvetica, the standard for long-form reading and interface text.
*   Body-sm (inferred): Helvetica, used for secondary captions and metadata.
*   Label-md (inferred): Helvetica, used for button labels and interactive triggers.
*   Label-sm (inferred): Helvetica, used for small UI labels.

## Layout

The layout relies on a responsive grid system built on an 8px base unit, ensuring consistent vertical and horizontal rhythm. The page structure typically follows a flow of: nav, hero, social-proof, features, pricing, and footer. Hero sections utilize a centered composition for maximum impact, while responsive behavior ensures navigation collapses into a drawer on mobile devices.

## Elevation & Depth

Elevation is used sparingly to create subtle visual separation between content layers. The system employs three distinct shadow weights:

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard depth for cards and dropdowns.
*   elevation.lg: Pronounced lift for modals and overlays.

## Shapes

The brand distinguishes between structure and action through a clear radius philosophy. Layout containers use tighter, functional corners, while all interactive buttons utilize {rounded.full} to create a distinct, pill-shaped silhouette that signals clickability.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Buttons
Primary buttons use a high-contrast white background with black text, while secondary buttons invert this to match the surface. Both must apply {rounded.full} to maintain the brand's signature pill shape.

### Cards
Cards utilize {colors.surface} or {colors.surface-bright} to lift content from the background. They are defined by {rounded.lg} corners to provide a soft, modern feel suitable for displaying product imagery or feature highlights.

### Input Fields
Inputs are designed with a transparent background and {colors.outline} borders. On focus, the border transitions to {colors.accent} to provide immediate user feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.accent} for all primary call-to-action links. | Use {colors.error} for non-destructive actions. |
| Apply {rounded.full} to all primary and secondary buttons. | Use sharp corners on {button-primary}. |
| Use {typography.display-lg} for main hero headlines. | Mix font families outside the Helvetica/Inter stack. |
| Maintain consistent spacing using the 8px base unit. | Use {typography.body-sm} for primary navigation. |
| Use {colors.surface} for card backgrounds to create depth. | Use excessive shadows on flat content blocks. |
| Ensure text has sufficient contrast against {colors.primary}. | Use low-contrast text colors on {colors.primary}. |
| Use {colors.focus-ring} for all keyboard focus states. | Remove focus rings from interactive elements. |
| Group related features in {card-container} blocks. | Overcrowd layouts without using {spacing.md} gutters. |

## Content Style

CTA labels are written as imperative, benefit-driven verbs in sentence case, kept concise to ensure immediate clarity (e.g., "Start for free").

Headings are declarative and concrete, focusing on the specific value proposition or outcome for the user.

Copy density is optimized for scannability, utilizing short paragraphs and frequent bullet points to break up complex information.

## Imagery & Icons

The visual style is a mix of high-quality lifestyle photography and clean, interactive product screenshots. Icons are minimalist and stroke-based, maintaining a consistent weight that complements the typography. Images should be used to ground the abstract commerce platform in real-world merchant success stories.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Shopify, a professional, authoritative, and enterprise-grade commerce platform. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.accent}`, `{typography.display-lg}`, `{spacing.md}` — never by raw hex, pixel, or font-size values.
2. Apply `{rounded.full}` to all buttons (`button-primary`, `button-secondary`) without exception; the pill shape is brand-defining. Use `{rounded.lg}` for cards and `{rounded.md}` for `card-container`. Never invent a radius not in the spec.
3. Use only the components listed under `components:`. If a requested variant (e.g. a tertiary button) is absent from the spec, surface the gap to the user before generating anything.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — such as using `{colors.error}` decoratively — flag the conflict before proceeding.
5. Tokens marked "(inferred)" in the spec prose are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, it overrides inferred values.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radius, elevation, and motion values.
- Include hover, focus, and disabled states for every interactive component the spec defines them for — notably `button-primary-hover`, `input-field-focus`, `link-hover`, and `{colors.focus-ring}` on all keyboard-navigable elements.
- Apply the 8px base spacing rhythm using `{spacing.xs}` through `{spacing.2xl}` for all gaps and padding.
- Write CTA labels as imperative, benefit-driven, sentence-case verbs per the Content Style section.

**Must NOT:**
- Hardcode any color, font family, font size, radius, or shadow value.
- Use generic utility defaults when a brand token exists.
- Add emoji, filler text, or unsolicited marketing copy.
- Introduce typography outside the Inter-Variable / Helvetica stack.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter navigation structure, routes, or page sections as a side effect of applying tokens.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}` for cards, `{colors.surface-container}` for section blocks, and `{colors.primary}` for full-page backgrounds.
- For unspecified breakpoints, follow the Layout narrative; if absent, default to mobile-first with one breakpoint at 768px.
- Prefer composing existing components over introducing new tokens.
- Inferred tokens are approximations — if the product's authoritative design system contradicts them, defer to that source.