{
  "name": "Shopify",
  "version": 1,
  "meta": {
    "source": "github",
    "repo": "feimacode/open-design-agent-kit",
    "package": "claude-design-systems/shopify",
    "upstream": "open-design-v0.24.1",
    "synced": "2026-10-22"
  },
  "color": {
    "themes": [
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "bg",
        "value": "#000000",
        "usage": "Page background — defines the brand canvas."
      },
      {
        "name": "surface",
        "value": "#02090a",
        "usage": "Card / lifted container background."
      },
      {
        "name": "surface-warm",
        "value": "#061a1c",
        "usage": "Tertiary surface tier (kami warm-sand)."
      },
      {
        "name": "fg",
        "value": "#ffffff",
        "usage": "Primary text on `bg` and `surface`."
      },
      {
        "name": "fg-2",
        "value": "#ffffff",
        "usage": "Secondary text on `bg` and `surface`."
      },
      {
        "name": "muted",
        "value": "#a1a1aa",
        "usage": "Subtext and captions on `bg` and `surface`."
      },
      {
        "name": "meta",
        "value": "#71717a",
        "usage": "Tertiary FG / metadata tier (kami stone)."
      },
      {
        "name": "border",
        "value": "#1e2c31",
        "usage": "Default border / card edge."
      },
      {
        "name": "border-soft",
        "value": "#3f3f46",
        "usage": "Inner row separator that should not visually compete."
      },
      {
        "name": "accent",
        "value": "#36f4a4",
        "usage": "Brand accent. ≤2 visible uses per screen (lint enforced)."
      },
      {
        "name": "accent-on",
        "value": "#000000",
        "usage": "Text and icons on `accent` fills."
      },
      {
        "name": "accent-hover",
        "value": "#2de097",
        "usage": "Hover state for elements using --accent as bg."
      },
      {
        "name": "accent-active",
        "value": "#2ac885",
        "usage": "Active state for elements using --accent as bg."
      },
      {
        "name": "success",
        "value": "#36f4a4",
        "usage": "Success state."
      },
      {
        "name": "warn",
        "value": "#eab308",
        "usage": "Warning state."
      },
      {
        "name": "danger",
        "value": "#dc2626",
        "usage": "Danger state."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "display": "\"NeueHaasGrotesk\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "body": "\"Inter Variable\", \"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "text-xl",
            "fontSize": "32px",
            "lineHeight": 1,
            "letterSpacing": "0em",
            "usage": "Type scale step — H2."
          },
          {
            "name": "text-2xl",
            "fontSize": "48px",
            "lineHeight": 1,
            "letterSpacing": "0em",
            "usage": "Type scale step — section title."
          },
          {
            "name": "text-3xl",
            "fontSize": "70px",
            "lineHeight": 1,
            "letterSpacing": "0em",
            "usage": "Type scale step — H1."
          },
          {
            "name": "text-4xl",
            "fontSize": "96px",
            "lineHeight": 1,
            "letterSpacing": "0em",
            "usage": "Type scale step — display / hero."
          }
        ]
      },
      {
        "name": "Text",
        "family": "body",
        "styles": [
          {
            "name": "text-xs",
            "fontSize": "12px",
            "lineHeight": 1.56,
            "usage": "Type scale step — extra small (≈11–12px)."
          },
          {
            "name": "text-sm",
            "fontSize": "14px",
            "lineHeight": 1.56,
            "usage": "Type scale step — small (≈12–14px)."
          },
          {
            "name": "text-base",
            "fontSize": "18px",
            "lineHeight": 1.56,
            "usage": "Type scale step — body baseline."
          },
          {
            "name": "text-lg",
            "fontSize": "20px",
            "lineHeight": 1.56,
            "usage": "Type scale step — H3 / featured body."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Base spacing — 4px tier."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Base spacing — 8px tier."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Base spacing — 12px tier."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Base spacing — 16px tier."
      },
      {
        "name": "space-5",
        "value": "24px",
        "usage": "Base spacing — 20px tier."
      },
      {
        "name": "space-6",
        "value": "28px",
        "usage": "Base spacing — 24px tier."
      },
      {
        "name": "space-8",
        "value": "36px",
        "usage": "Base spacing — 32px tier."
      },
      {
        "name": "space-12",
        "value": "64px",
        "usage": "Base spacing — 48px tier."
      },
      {
        "name": "section-y-desktop",
        "value": "96px",
        "usage": "Vertical padding between sections — desktop."
      },
      {
        "name": "section-y-tablet",
        "value": "64px",
        "usage": "Vertical padding between sections — tablet."
      },
      {
        "name": "section-y-phone",
        "value": "40px",
        "usage": "Vertical padding between sections — phone."
      },
      {
        "name": "container-max",
        "value": "1280px",
        "usage": "Max content container width."
      },
      {
        "name": "container-gutter-desktop",
        "value": "64px",
        "usage": "Container side gutter — desktop."
      },
      {
        "name": "container-gutter-tablet",
        "value": "32px",
        "usage": "Container side gutter — tablet."
      },
      {
        "name": "container-gutter-phone",
        "value": "16px",
        "usage": "Container side gutter — phone."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "9999px",
        "usage": "Small radius — buttons, inputs, chips."
      },
      {
        "name": "radius-md",
        "value": "8px",
        "usage": "Medium radius — cards, modals."
      },
      {
        "name": "radius-lg",
        "value": "12px",
        "usage": "Large radius — featured containers."
      },
      {
        "name": "radius-pill",
        "value": "9999px",
        "usage": "Pill radius — avatars, badges."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "elev-flat",
        "value": "none",
        "usage": "No elevation."
      },
      {
        "name": "elev-ring",
        "value": "0 0 0 1px #1e2c31",
        "usage": "Hairline ring (1px box-shadow border)."
      },
      {
        "name": "elev-raised",
        "value": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 2px 2px, rgba(0, 0, 0, 0.1) 0px 4px 4px, rgba(0, 0, 0, 0.1) 0px 8px 8px, rgba(255, 255, 255, 0.03) 0px 1px 0px inset",
        "usage": "Raised surface (blur or whisper)."
      },
      {
        "name": "focus-ring",
        "value": "0 0 0 2px #36f4a4",
        "usage": "Keyboard focus indicator."
      }
    ]
  },
  "typeMetrics": {
    "note": "Line heights and tracking from the Open Design token contract.",
    "tokens": [
      {
        "name": "leading-body",
        "value": "1.56",
        "usage": "Line-height for reading body."
      },
      {
        "name": "leading-tight",
        "value": "1.00",
        "usage": "Line-height for headings."
      },
      {
        "name": "tracking-display",
        "value": "0em",
        "usage": "Letter-spacing applied to display sizes."
      }
    ]
  }
}