{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/shopify/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/shopify/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://shopify.com/"
  },
  "identity": {
    "id": "P0-104",
    "slug": "shopify",
    "brand": "Shopify",
    "titleZh": "Shopify 主题",
    "titleEn": "Shopify",
    "descriptionZh": "Shopify 的 Design.md 主题展示，围绕媒体内容、电商零售、霓虹视觉、暗色界面组织页面。",
    "descriptionEn": "E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "request-flow",
      "media",
      "e-commerce",
      "neon",
      "dark"
    ],
    "designTags": [],
    "distributionTags": [
      "媒体内容",
      "电商零售",
      "霓虹视觉",
      "暗色界面",
      "消费品牌",
      "品牌展示",
      "移动端",
      "内容货架",
      "趣味互动"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/shopify/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/shopify/tw.css"
    },
    "tokens": {
      "path": "assets/tokens.json",
      "method": "derived_from_design_md_and_metadata"
    },
    "cover": null,
    "previewHtml": {
      "type": "local-preview",
      "path": "assets/official-homepage.webp",
      "publicPath": "assets/official-homepage.webp",
      "importPath": "./assets/official-homepage.webp?url",
      "sourcePath": "assets/official-homepage.webp"
    }
  },
  "tokens": {
    "palette": [
      "#000000",
      "#9dabad",
      "#ffffff",
      "#0a0a0a",
      "#fbfbf5",
      "#1e2c31",
      "#d4d4d8",
      "#a1a1aa",
      "#71717a",
      "#52525b",
      "#3f3f46",
      "#e4e4e7"
    ],
    "typography": {
      "display": "NeueHaasGrotesk Display",
      "body": "Inter Variable",
      "mono": "ui-monospace",
      "hints": [
        "NeueHaasGrotesk Display",
        "Inter Variable",
        "ui-monospace",
        "Inter",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "12px",
      "preview": "12px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "2px",
      "xs": "4px",
      "sm": "8px",
      "md": "12px",
      "lg": "16px",
      "xl": "24px",
      "xxl": "32px",
      "huge": "64px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Shopify 主题",
    "brandAlias": "Shopify",
    "description": "Shopify 的 Design.md 主题展示，围绕媒体内容、电商零售、霓虹视觉、暗色界面组织页面。",
    "descriptionEn": "E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.",
    "variant": "consumer-commerce",
    "distributionTags": [
      "媒体内容",
      "电商零售",
      "霓虹视觉",
      "暗色界面",
      "消费品牌",
      "品牌展示",
      "移动端",
      "内容货架",
      "趣味互动"
    ],
    "fontStylesheets": [],
    "palette": [
      {
        "color": "#000000",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#9dabad",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#171717"
      },
      {
        "color": "#ffffff",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#171717"
      },
      {
        "color": "#0a0a0a",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#ffffff"
      },
      {
        "color": "#fbfbf5",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#171717"
      },
      {
        "color": "#1e2c31",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#ffffff"
      },
      {
        "color": "#d4d4d8",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#a1a1aa",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#171717"
      },
      {
        "color": "#71717a",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#ffffff"
      },
      {
        "color": "#52525b",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#ffffff"
      },
      {
        "color": "#3f3f46",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#ffffff"
      },
      {
        "color": "#e4e4e7",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#171717"
      }
    ],
    "shadows": [
      {
        "label": "阴影 1 - Shadow 1",
        "value": "0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2)",
        "cssValue": "0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2)",
        "description": "| 2 | `0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2)` | Dark elevated cards with hairline + drop shadow stack |"
      },
      {
        "label": "阴影 2 - Shadow 2",
        "value": "0 8px 8px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.1)",
        "cssValue": "0 8px 8px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.1)",
        "description": "| 3 | `0 8px 8px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.1)` | Stacked-shadow card on light surfaces; layered tiny shadows produce a soft halo |"
      }
    ],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#e4e4e7",
        "cssValue": "#e4e4e7",
        "description": "hairline-light: \"#e4e4e7\""
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#1e2c31",
        "cssValue": "#1e2c31",
        "description": "surface-elevated-dark: \"#1e2c31\""
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#d4d4d8",
        "cssValue": "#d4d4d8",
        "description": "shade-30: \"#d4d4d8\""
      },
      {
        "label": "边框 4 - Border 4",
        "value": "rgba(0,0,0,0.3)",
        "cssValue": "rgba(0,0,0,0.3)",
        "description": "| 2 | `0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2)` | Dark elevated cards with hairline + drop shadow stack |"
      }
    ],
    "typography": [
      "NeueHaasGrotesk Display",
      "Inter Variable",
      "ui-monospace",
      "Inter",
      "SFMono-Regular",
      "Menlo"
    ],
    "previewImages": [
      {
        "type": "local-preview",
        "path": "assets/official-homepage.webp"
      }
    ],
    "panels": [
      {
        "eyebrow": "品牌",
        "title": "第一眼识别明确",
        "body": "适合消费品牌、电商、媒体和产品展示页。"
      },
      {
        "eyebrow": "Token",
        "title": "颜色与字体可复用",
        "body": "页面从本地 metadata 与 Design.md 提取 palette、typography 和标签，用于快速预览主题质感。"
      },
      {
        "eyebrow": "组件",
        "title": "面向真实界面片段",
        "body": "按钮、输入、卡片和间距样例保持克制，便于比较不同主题的系统性差异。"
      }
    ],
    "usageGuidance": {
      "do": [
        "建议：Reserve {colors.aloe-10} and {colors.pistachio-10} for the light track only — they don't appear on cinematic black pages。",
        "建议：Always use {rounded.pill} for buttons; never {rounded.md} or {rounded.lg}。",
        "建议：Render display tiers at weight 330; bumping to 400 or 500 breaks the brand's thin-display signature。",
        "建议：Use full-bleed photography on cinematic pages — let it escape the container。",
        "建议：Apply {font-feature-settings: \"ss03\"} globally; the stylistic set is the brand's typographic signature。"
      ],
      "dont": [
        "避免：introduce a third canvas color — stick to black or light/cream. Greys, beiges, and blues are not in the system。",
        "避免：add drop shadows on cinematic dark cards beyond the subtle inset top-highlight; the cinematic track wants flat blackness。",
        "避免：shrink display tiers below {typography.display-md} (48px) on hero surfaces; below that they read as section heads, not display。",
        "避免：put aloe / pistachio greens behind type — they're surface fills, not text colors。",
        "避免：replace the pill shape with a rounded-rectangle button anywhere。"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "12px",
      "preview": "12px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "2px",
      "xs": "4px",
      "sm": "8px",
      "md": "12px",
      "lg": "16px",
      "xl": "24px",
      "xxl": "32px",
      "huge": "64px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
