{
  "id": "shopify",
  "version": "1.0.0",
  "name": "Shopify",
  "description": "Shopify Inc. is the Ottawa-headquartered commerce platform that powers millions of merchants worldwide. The corporate brand is light-first, warm, and unapologetically merchant-facing: the Shopify Green shopping-bag mark on white canvas, with the modernized #008060 corporate green carrying primary CTAs. The voice is plain-spoken and operator-oriented (\"Start your business today\"), built around the merchant rather than around the tech. This brand atom captures the corporate marketing surface; consumers who want the merchant-admin design tokens should reference the separate Polaris design system (palettes/polaris/1.0.0).\n",
  "provenance": {
    "source": "https://www.shopify.com/brand-assets",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Shopify Inc. — Shopify, the Shopify wordmark, and the shopping-bag mark are registered trademarks of Shopify Inc. Hex values are documented across the Shopify brand-assets page and the public Polaris design-token source. Shopify Sans is the corporate proprietary typeface; Inter is referenced here as the open-source fallback because Shopify Sans is not publicly distributed.\n",
    "importedDate": "2026-05-18",
    "notes": "Shopify Sans (proprietary) is the corporate brand face. It is not publicly distributed, so this atom references Inter for both heading and body roles and notes Shopify Sans as the proprietary primary in provenance. The Polaris-system tokens are intentionally separate (palettes/polaris/1.0.0) — consumers building merchant admin surfaces should switch the palette reference to polaris@1.\n"
  },
  "tags": [
    "ecommerce",
    "commerce",
    "shopify",
    "merchant",
    "light-first",
    "brand"
  ],
  "palette": {
    "ref": "shopify@1.0.0",
    "swatches": [
      {
        "id": "shopify-green",
        "name": "Shopify Green",
        "value": "#008060",
        "description": "Current corporate primary green — the modernized Shopify brand color on shopify.com primary CTAs and marketing.",
        "aliases": []
      },
      {
        "id": "shopify-green-heritage",
        "name": "Shopify Green (Heritage)",
        "value": "#95BF47",
        "description": "Heritage Shopify leaf-green — the original shopping-bag mark fill color, retained on the public mark.",
        "aliases": []
      },
      {
        "id": "shopify-green-wordmark",
        "name": "Shopify Green (Wordmark)",
        "value": "#7AB55C",
        "description": "Mid-green historically used on the Shopify wordmark text in the dual-tone heritage logo.",
        "aliases": []
      },
      {
        "id": "shopify-green-deep",
        "name": "Shopify Green Deep",
        "value": "#004C3F",
        "description": "Deep green used for hover/pressed states on the primary corporate green and for emphasis on text.",
        "aliases": []
      },
      {
        "id": "shopify-ink",
        "name": "Shopify Ink",
        "value": "#1A1A1A",
        "description": "Near-black used for body copy and the wordmark on light surfaces.",
        "aliases": []
      },
      {
        "id": "shopify-graphite",
        "name": "Shopify Graphite",
        "value": "#303030",
        "description": "Authored elevated surface on the dark mode; matches Polaris gray-15.",
        "aliases": []
      },
      {
        "id": "shopify-canvas-dark",
        "name": "Shopify Canvas Dark",
        "value": "#1A1A1A",
        "description": "Dark-mode canvas; matches Polaris gray-16.",
        "aliases": []
      },
      {
        "id": "shopify-white",
        "name": "Shopify White",
        "value": "#FFFFFF",
        "description": "Canonical light canvas; the marketing surface is light-first.",
        "aliases": []
      },
      {
        "id": "shopify-fog",
        "name": "Shopify Fog",
        "value": "#F1F1F1",
        "description": "Authored surface tone for cards and panels on light backgrounds; matches Polaris gray-6.",
        "aliases": []
      },
      {
        "id": "shopify-gray",
        "name": "Shopify Gray",
        "value": "#616161",
        "description": "Secondary text on light backgrounds; matches Polaris gray-13.",
        "aliases": []
      },
      {
        "id": "shopify-gray-light",
        "name": "Shopify Gray Light",
        "value": "#8A8A8A",
        "description": "Tertiary text and metadata.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "shopify-white",
          "surface": "shopify-fog",
          "surface-elevated": "shopify-white",
          "text-primary": "shopify-ink",
          "text-secondary": "shopify-gray",
          "text-tertiary": "shopify-gray-light",
          "primary": "shopify-green",
          "primary-hover": "shopify-green-deep",
          "accent": "shopify-green",
          "accent-hover": "shopify-green-deep",
          "warning": "shopify-green-heritage",
          "warning-hover": "shopify-green-wordmark",
          "error": "shopify-green-deep",
          "success": "shopify-green"
        }
      },
      "dark": {
        "roles": {
          "background": "shopify-canvas-dark",
          "surface": "shopify-graphite",
          "surface-elevated": "shopify-graphite",
          "text-primary": "shopify-white",
          "text-secondary": "shopify-gray-light",
          "text-tertiary": "shopify-gray",
          "primary": "shopify-green",
          "primary-hover": "shopify-green-deep",
          "accent": "shopify-green-heritage",
          "accent-hover": "shopify-green-wordmark",
          "warning": "shopify-green-heritage",
          "warning-hover": "shopify-green-wordmark",
          "error": "shopify-green-deep",
          "success": "shopify-green"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "shopify-green",
      "on-identity": "shopify-white",
      "primary": "shopify-green",
      "primary-hover": "shopify-green-deep",
      "accent": "shopify-green",
      "accent-hover": "shopify-green-deep",
      "mark": "shopify-green-heritage",
      "text-primary-light": "shopify-ink",
      "text-primary-dark": "shopify-white",
      "text-secondary-light": "shopify-gray",
      "background-light": "shopify-white",
      "background-dark": "shopify-canvas-dark",
      "surface-light": "shopify-fog",
      "surface-dark": "shopify-graphite"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.mark.fill",
      "severity": "error",
      "rationale": "The Shopify shopping-bag mark renders in the heritage leaf-green (#95BF47) or the modernized corporate green (#008060), or in monochrome white / ink reversal variants. The deep-green and gray tones are interactive-state or text values, not mark fills.\n",
      "allowed": [
        "shopify-green-heritage",
        "shopify-green",
        "shopify-white",
        "shopify-ink"
      ],
      "forbidden": [
        "shopify-green-deep",
        "shopify-gray",
        "shopify-gray-light"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "Shopify's brand-assets program forbids modifying the mark or wordmark. Apply only the Shopify-approved variants with respected clearspace; never render the green mark over busy photography where it loses legibility.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "inverted-without-variant"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "Shopify Ink (#1A1A1A) on Shopify White (#FFFFFF) gives ~17:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Shopify Green (#008060) on white reaches ~4.9:1 — clears AA for normal text. Buttons using the green fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "Shopify Sans headlines on shopify.com sit in the Medium (500), Semibold (600), and Bold (700) band. Lighter cuts read as body and compromise the confident merchant-facing voice; heavier cuts are outside the corporate kit.\n",
      "allowed": [
        "500",
        "600",
        "700"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.mark",
      "severity": "error",
      "rationale": "The heritage leaf-green (#95BF47) is reserved for the shopping-bag mark fill. Using it inside body copy or for secondary links dilutes the dual-tone wordmark+mark relationship and degrades brand recognition.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The default verification on any new role pairing on Shopify surfaces.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "The corporate green pairs cleanly with neutrals (white, fog, ink). Combining the corporate #008060 and the heritage #95BF47 on the same surface creates a muddy two-green composition that reads as inconsistency between modernized and heritage brand surfaces.\n",
      "pairsWith": [
        "shopify-white",
        "shopify-fog",
        "shopify-ink"
      ],
      "doesNotPairWith": [
        "shopify-green-heritage"
      ]
    }
  ]
}