{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/spotify/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/spotify/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://spotify.com/"
  },
  "identity": {
    "id": "P0-60",
    "slug": "spotify",
    "brand": "Spotify",
    "titleZh": "Spotify 主题",
    "titleEn": "Spotify",
    "descriptionZh": "Spotify 的 Design.md 主题展示，围绕媒体内容、暗色界面、强视觉、消费品牌组织页面。",
    "descriptionEn": "Music streaming. Vibrant green on dark, bold type, album-art-driven."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "media",
      "request-flow",
      "dark",
      "bold"
    ],
    "designTags": [],
    "distributionTags": [
      "媒体内容",
      "暗色界面",
      "强视觉",
      "消费品牌",
      "电商零售",
      "品牌展示",
      "移动端",
      "内容货架",
      "趣味互动"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/spotify/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/spotify/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": [
      "#1ed760",
      "#a0a0a0",
      "#000000",
      "#fbbf24",
      "#8a8a8a",
      "#0a0a0a",
      "#e0e0e0",
      "#ffffff"
    ],
    "typography": {
      "display": "Helvetica Neue",
      "body": "Inter",
      "mono": "ui-monospace",
      "hints": [
        "Helvetica Neue",
        "Inter",
        "ui-monospace"
      ]
    },
    "radius": {
      "control": "7px",
      "card": "7px",
      "preview": "7px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "1.4px",
      "xs": "2px",
      "sm": "24px",
      "md": "1.50rem",
      "lg": "18px",
      "xl": "1.13rem",
      "xxl": "8px",
      "xxxl": "16px",
      "section": "0px",
      "section-lg": "43px",
      "hero": "4px",
      "band": "36px",
      "space-13": "12px",
      "space-14": "96px",
      "space-15": "48px",
      "space-16": "9999px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Spotify 主题",
    "brandAlias": "Spotify",
    "description": "Spotify 的 Design.md 主题展示，围绕媒体内容、暗色界面、强视觉、消费品牌组织页面。",
    "descriptionEn": "Music streaming. Vibrant green on dark, bold type, album-art-driven.",
    "variant": "consumer-commerce",
    "distributionTags": [
      "媒体内容",
      "暗色界面",
      "强视觉",
      "消费品牌",
      "电商零售",
      "品牌展示",
      "移动端",
      "内容货架",
      "趣味互动"
    ],
    "fontStylesheets": [
      "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    ],
    "palette": [
      {
        "color": "#1ed760",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#a0a0a0",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#171717"
      },
      {
        "color": "#000000",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#fbbf24",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#171717"
      },
      {
        "color": "#8a8a8a",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#ffffff"
      },
      {
        "color": "#0a0a0a",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#ffffff"
      },
      {
        "color": "#e0e0e0",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#ffffff",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#171717"
      }
    ],
    "shadows": [
      {
        "label": "阴影 1 - Shadow 1",
        "value": "rgba(0,0,0,0.5) 0px 8px 24px",
        "cssValue": "rgba(0,0,0,0.5) 0px 8px 24px",
        "description": "What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch."
      },
      {
        "label": "阴影 2 - Shadow 2",
        "value": "rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset",
        "cssValue": "rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset",
        "description": "What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch."
      },
      {
        "label": "阴影 3 - Shadow 3",
        "value": "rgba(0,0,0,0.3) 0px 8px 8px",
        "cssValue": "rgba(0,0,0,0.3) 0px 8px 8px",
        "description": "Medium (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns"
      }
    ],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "rgb(124,124,124)",
        "cssValue": "rgb(124,124,124)",
        "description": "What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch."
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#4d4d4d",
        "cssValue": "#4d4d4d",
        "description": "Border Gray (`#4d4d4d`): Button borders on dark"
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#7c7c7c",
        "cssValue": "#7c7c7c",
        "description": "Light Border (`#7c7c7c`): Outlined button borders, muted links"
      },
      {
        "label": "边框 4 - Border 4",
        "value": "#b3b3b3",
        "cssValue": "#b3b3b3",
        "description": "Silver (`#b3b3b3`): Secondary text, muted labels, inactive nav"
      },
      {
        "label": "边框 5 - Border 5",
        "value": "#1db954",
        "cssValue": "#1db954",
        "description": "Spotify Green Border (`#1db954`): Green accent border variant"
      },
      {
        "label": "边框 6 - Border 6",
        "value": "#000000",
        "cssValue": "#000000",
        "description": "Focus: border becomes `#000000`, outline `1px solid`"
      }
    ],
    "typography": [
      "Helvetica Neue",
      "Inter",
      "ui-monospace"
    ],
    "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": [
        "建议：Use near-black backgrounds ({#121212}–{#1f1f1f}) — depth through shade variation。",
        "建议：Apply Spotify Green ({#1ed760}) only for play controls, active states, and primary CTAs。",
        "建议：Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls。",
        "建议：Apply uppercase + wide letter-spacing (1.4px–2px) on button labels。",
        "建议：Keep typography compact (10px–24px range) — this is an app, not a magazine。"
      ],
      "dont": [
        "避免：use Spotify Green decoratively or on backgrounds — it's functional only。",
        "避免：use light backgrounds for primary surfaces — the dark immersion is core。",
        "避免：skip the pill/circle geometry on buttons — square buttons break the identity。",
        "避免：use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible。",
        "避免：add additional brand colors — green + achromatic grays is the complete palette。"
      ]
    },
    "radius": {
      "control": "7px",
      "card": "7px",
      "preview": "7px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "1.4px",
      "xs": "2px",
      "sm": "24px",
      "md": "1.50rem",
      "lg": "18px",
      "xl": "1.13rem",
      "xxl": "8px",
      "xxxl": "16px",
      "section": "0px",
      "section-lg": "43px",
      "hero": "4px",
      "band": "36px",
      "space-13": "12px",
      "space-14": "96px",
      "space-15": "48px",
      "space-16": "9999px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
