Shopify Design System

---
name: Shopify
url: https://shopify.com
version: 2.1.0
tokens:
  colors:
    primary: "#36f4a4"
    background: "#02090a"
    surface: "#0f1a1c"
    text-primary: "#ffffff"
    text-secondary: "#a0aab0"
    accent: "#36f4a4"
  typography:
    font-sans: "Inter, NeueHaasGrotesk, sans-serif"
    scale:
      - { name: display, size: "80px", weight: 700, lineHeight: 1.05, letterSpacing: "-0.04em" }
      - { name: body, size: "16px", weight: 400, lineHeight: 1.6, letterSpacing: "0" }
  spacing:
    base: "8px"
    scale:
      space-2: "8px"
      space-4: "16px"
      space-8: "32px"
  radius:
    sm: "4px"
    md: "8px"
    full: "9999px"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
---

# Shopify — Design System Specification

## 1. Overview
High-contrast merchant-focused e-commerce design system featuring dark emerald background (`#02090a`) paired with electric mint green (`#36f4a4`) conversion CTAs.

## 2. Color System
- Mint Accent: `#36f4a4`
- Deep Canvas: `#02090a`

## 3. Typography Scale
- Display: 80px / Weight 700 / NeueHaasGrotesk
- Body: 16px / Weight 400 / Inter

## 4. Button Variants
- CTA Button: `background: #36f4a4`, `color: #02090a`, `border-radius: 9999px`

## 5. Card Examples
- Merchant Card: `background: #0f1a1c`, `border-radius: 8px`

## 6. Form Elements
- Email Input: `border-radius: 9999px`

## 7. Spacing Scale
- 8px, 16px, 24px, 32px, 48px, 64px

## 8. Border Radius Scale
- `sm: 4px`, `md: 8px`, `full: 9999px`

## 9. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`