{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/intercom/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/intercom/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://intercom.com/"
  },
  "identity": {
    "id": "P0-80",
    "slug": "intercom",
    "brand": "Intercom",
    "titleZh": "Intercom 主题",
    "titleEn": "Intercom",
    "descriptionZh": "Intercom 的 Design.md 主题展示，围绕媒体内容、SaaS 产品、开发工具、浅色界面组织页面。",
    "descriptionEn": "Customer messaging. Friendly blue palette, conversational UI patterns."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "request-flow",
      "media"
    ],
    "designTags": [],
    "distributionTags": [
      "媒体内容",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/intercom/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/intercom/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": [
      "#111111",
      "#626260",
      "#ffffff",
      "#7b7b78",
      "#9c9fa5",
      "#f5f1ec",
      "#ebe7e1",
      "#000000",
      "#313130",
      "#d3cec6",
      "#ff5600",
      "#fe4c02"
    ],
    "typography": {
      "display": "Saans",
      "body": "Saans",
      "mono": "SaansMono",
      "hints": [
        "Saans",
        "SaansMono",
        "Geist",
        "Inter"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "12px",
      "preview": "16px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "xxl": "48px",
      "section": "96px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Intercom 主题",
    "brandAlias": "Intercom",
    "description": "Intercom 的 Design.md 主题展示，围绕媒体内容、SaaS 产品、开发工具、浅色界面组织页面。",
    "descriptionEn": "Customer messaging. Friendly blue palette, conversational UI patterns.",
    "variant": "saas-devtool",
    "distributionTags": [
      "媒体内容",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ],
    "fontStylesheets": [],
    "palette": [
      {
        "color": "#111111",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#626260",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#ffffff"
      },
      {
        "color": "#ffffff",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#171717"
      },
      {
        "color": "#7b7b78",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#ffffff"
      },
      {
        "color": "#9c9fa5",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#171717"
      },
      {
        "color": "#f5f1ec",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#171717"
      },
      {
        "color": "#ebe7e1",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#000000",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#ffffff"
      },
      {
        "color": "#313130",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#ffffff"
      },
      {
        "color": "#d3cec6",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#171717"
      },
      {
        "color": "#ff5600",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#ffffff"
      },
      {
        "color": "#fe4c02",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#ffffff"
      }
    ],
    "shadows": [],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#d3cec6",
        "cssValue": "#d3cec6",
        "description": "hairline: \"#d3cec6\""
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#ebe7e1",
        "cssValue": "#ebe7e1",
        "description": "surface-2: \"#ebe7e1\""
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#111111",
        "cssValue": "#111111",
        "description": "primary: \"#111111\""
      },
      {
        "label": "边框 4 - Border 4",
        "value": "#ff5600",
        "cssValue": "#ff5600",
        "description": "description: \"An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA.\""
      }
    ],
    "typography": [
      "Saans",
      "SaansMono",
      "Geist",
      "Inter"
    ],
    "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.canvas} cream as the system's anchor surface — never replace with pure white。",
        "建议：Lift cards from cream onto white ({colors.surface-1}) for hierarchy。",
        "建议：Use {button-fin} Fin Orange ONLY on Fin AI product CTAs and Fin badges。",
        "建议：Pair Saans display at weight 500 with body at 400。",
        "建议：Use product UI screenshots as the protagonist of every section。"
      ],
      "dont": [
        "避免：use pure white as the canvas。",
        "避免：use Fin Orange as a section background or as a generic primary CTA。",
        "避免：add drop shadows to floating cards。",
        "避免：introduce a second display family。",
        "避免：pill-round CTAs。"
      ]
    },
    "radius": {
      "control": "8px",
      "card": "12px",
      "preview": "16px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "xxl": "48px",
      "section": "96px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
