{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/binance/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/binance/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://binance.com/"
  },
  "identity": {
    "id": "P0-62",
    "slug": "binance",
    "brand": "Binance",
    "titleZh": "Binance 主题",
    "titleEn": "Binance",
    "descriptionZh": "Binance 的 Design.md 主题展示，围绕金融科技、媒体内容、强视觉、Web3组织页面。",
    "descriptionEn": "Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "fintech",
      "request-flow",
      "media",
      "bold",
      "web3"
    ],
    "designTags": [],
    "distributionTags": [
      "金融科技",
      "媒体内容",
      "强视觉",
      "Web3",
      "数据仪表盘",
      "数据分析",
      "B2B 产品",
      "运营监控",
      "专业工具",
      "高密度信息"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/binance/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/binance/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": [
      "#fcd535",
      "#f0b90b",
      "#181a20",
      "#3a3a1f",
      "#eaecef",
      "#707a8a",
      "#929aa5",
      "#2b3139",
      "#cdd1d6",
      "#ffffff",
      "#0b0e11",
      "#1e2329"
    ],
    "typography": {
      "display": "BinanceNova",
      "body": "BinancePlex",
      "mono": "ui-monospace",
      "hints": [
        "BinanceNova",
        "BinancePlex",
        "ui-monospace",
        "IBM Plex Sans",
        "Inter",
        "Roboto"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "12px",
      "preview": "12px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "xxl": "48px",
      "section": "80px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Binance 主题",
    "brandAlias": "Binance",
    "description": "Binance 的 Design.md 主题展示，围绕金融科技、媒体内容、强视觉、Web3组织页面。",
    "descriptionEn": "Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.",
    "variant": "dashboard",
    "distributionTags": [
      "金融科技",
      "媒体内容",
      "强视觉",
      "Web3",
      "数据仪表盘",
      "数据分析",
      "B2B 产品",
      "运营监控",
      "专业工具",
      "高密度信息"
    ],
    "fontStylesheets": [],
    "palette": [
      {
        "color": "#fcd535",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#171717"
      },
      {
        "color": "#f0b90b",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#171717"
      },
      {
        "color": "#181a20",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#3a3a1f",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#ffffff"
      },
      {
        "color": "#eaecef",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#171717"
      },
      {
        "color": "#707a8a",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#ffffff"
      },
      {
        "color": "#929aa5",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#2b3139",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#ffffff"
      },
      {
        "color": "#cdd1d6",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#171717"
      },
      {
        "color": "#ffffff",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#171717"
      },
      {
        "color": "#0b0e11",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#ffffff"
      },
      {
        "color": "#1e2329",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#ffffff"
      }
    ],
    "shadows": [
      {
        "label": "焦点环 - Ring",
        "value": "0 0 0 2px {colors.info-ring}",
        "cssValue": "0 0 0 2px {colors.info-ring}",
        "description": "| Focus ring | `0 0 0 2px {colors.info-ring}` at 50% alpha | Input + button keyboard focus state |"
      }
    ],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#eaecef",
        "cssValue": "#eaecef",
        "description": "body: \"#eaecef\""
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#2b3139",
        "cssValue": "#2b3139",
        "description": "hairline-on-dark: \"#2b3139\""
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#cdd1d6",
        "cssValue": "#cdd1d6",
        "description": "border-strong: \"#cdd1d6\""
      }
    ],
    "typography": [
      "BinanceNova",
      "BinancePlex",
      "ui-monospace",
      "IBM Plex Sans",
      "Inter",
      "Roboto"
    ],
    "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.primary} (Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — yellow's scarcity is what makes it powerful。",
        "建议：Keep {component.button-primary} (yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on {colors.canvas-dark} and {colors.canvas-light}。",
        "建议：Use {component.button-trading-up} (green) and {component.button-trading-down} (red) only for explicit Buy/Sell or Long/Short actions. Never use them for general \"confirm\" or \"cancel\" because they carry semantic price-direction meaning。",
        "建议：Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-platform character。",
        "建议：Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / form submission)。"
      ],
      "dont": [
        "避免：introduce a second brand color. The system has exactly one accent ({colors.primary}) and any expansion dilutes the brand identity. The turquoise on Smart Money is a single-product experiment, not a system token。",
        "避免：use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only。",
        "避免：use {colors.trading-up} / {colors.trading-down} as background fills on cards. They are price-direction signals, expressed as text color or small badge fill — never as a card surface。",
        "避免：soften display weight. {typography.hero-display} and {typography.display-lg} are intentionally weight 700 — going to 400 reads as design-portfolio, not trading platform。",
        "避免：add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-platform feel。"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "12px",
      "preview": "12px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "xxl": "48px",
      "section": "80px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
