{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/vercel/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://vercel.com/"
  },
  "identity": {
    "id": "P0-52",
    "slug": "vercel",
    "brand": "Vercel",
    "titleZh": "Vercel 主题",
    "titleEn": "Vercel",
    "descriptionZh": "Vercel 的 Design.md 主题展示，围绕开发工具、媒体内容、SaaS 产品、浅色界面组织页面。",
    "descriptionEn": "Frontend deployment. Black and white precision, Geist font."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "developer-tool",
      "request-flow",
      "media"
    ],
    "designTags": [],
    "distributionTags": [
      "开发工具",
      "媒体内容",
      "SaaS 产品",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/vercel/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/vercel/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": [
      "#171717",
      "#0070f3",
      "#4d4d4d",
      "#ffffff",
      "#888888",
      "#ebebeb",
      "#a1a1a1",
      "#fafafa",
      "#f5f5f5",
      "#0761d1",
      "#d3e5ff",
      "#ee0000"
    ],
    "typography": {
      "display": "Geist",
      "body": "Inter",
      "mono": "Geist Mono",
      "hints": [
        "Geist",
        "Inter",
        "Geist Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "mono-kickers"
      ]
    },
    "radius": {
      "control": "6px",
      "card": "8px",
      "preview": "0px",
      "pill": "100px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "2xl": "40px",
      "3xl": "48px",
      "4xl": "64px",
      "5xl": "96px",
      "6xl": "128px",
      "section": "192px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Vercel 主题",
    "brandAlias": "Vercel",
    "description": "Vercel 的 Design.md 主题展示，围绕开发工具、媒体内容、SaaS 产品、浅色界面组织页面。",
    "descriptionEn": "Frontend deployment. Black and white precision, Geist font.",
    "variant": "saas-devtool",
    "distributionTags": [
      "开发工具",
      "媒体内容",
      "SaaS 产品",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ],
    "fontStylesheets": [
      "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    ],
    "palette": [
      {
        "color": "#171717",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#0070f3",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#ffffff"
      },
      {
        "color": "#4d4d4d",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#ffffff",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#171717"
      },
      {
        "color": "#888888",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#ffffff"
      },
      {
        "color": "#ebebeb",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#171717"
      },
      {
        "color": "#a1a1a1",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#fafafa",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#171717"
      },
      {
        "color": "#f5f5f5",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#171717"
      },
      {
        "color": "#0761d1",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#ffffff"
      },
      {
        "color": "#d3e5ff",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#171717"
      },
      {
        "color": "#ee0000",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#ffffff"
      }
    ],
    "shadows": [
      {
        "label": "阴影 1 - Shadow 1",
        "value": "0px 1px 1px #00000005",
        "cssValue": "0px 1px 1px #00000005",
        "description": "Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow."
      },
      {
        "label": "阴影 2 - Shadow 2",
        "value": "0px 2px 2px #0000000a",
        "cssValue": "0px 2px 2px #0000000a",
        "description": "Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow."
      },
      {
        "label": "阴影 3 - Shadow 3",
        "value": "0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a",
        "cssValue": "0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a",
        "description": "| Level 3 — Soft Stack | `0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a` plus inset hairline. | The \"medium\" elevation — feature-grid cards. |"
      },
      {
        "label": "阴影 4 - Shadow 4",
        "value": "0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a",
        "cssValue": "0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a",
        "description": "| Level 4 — Float Stack | `0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a` plus inset hairline. | \"Large\" elevation — pricing cards, callout panels. |"
      }
    ],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#ebebeb",
        "cssValue": "#ebebeb",
        "description": "hairline: \"#ebebeb\""
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#a1a1a1",
        "cssValue": "#a1a1a1",
        "description": "hairline-strong: \"#a1a1a1\""
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#00000014",
        "cssValue": "#00000014",
        "description": "| Level 1 — Inset Hairline | `0 0 0 1px #00000014` inset 1 px border. | Default card chrome — the brand's universal \"you can see this card\" cue. |"
      },
      {
        "label": "边框 4 - Border 4",
        "value": "rgb(235, 235, 235)",
        "cssValue": "rgb(235, 235, 235)",
        "description": "Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border (extracted as `0px solid rgb(235, 235, 235)`), same typography / height / shape."
      },
      {
        "label": "边框 5 - Border 5",
        "value": "#00000005",
        "cssValue": "#00000005",
        "description": "Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow."
      },
      {
        "label": "边框 6 - Border 6",
        "value": "#0000000a",
        "cssValue": "#0000000a",
        "description": "Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow."
      }
    ],
    "typography": [
      "Geist",
      "Inter",
      "Geist Mono",
      "ui-monospace",
      "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.primary} ({#171717}) for primary CTAs across the page. Black ink IS the conversion target。",
        "建议：Use {rounded.pill} 100 px for every marketing-scale CTA and {rounded.sm} 6 px for nav-scale buttons. The two pill scales coexist deliberately。",
        "建议：Set every headline in {typography.display-*} weight 600, sentence-case, often period-terminated. Aggressive negative tracking is part of the voice。",
        "建议：Use the brand mesh gradient as atmospheric decoration at hero scale only — never miniaturise it to an icon, never reduce to a single colour。",
        "建议：Layer stacked shadows (multiple small offsets with inset hairline) rather than single heavy drops. The brand's elevation is calmer than Material。"
      ],
      "dont": [
        "避免：introduce a sixth accent colour. The brand operates with ink + gray + the four-pair gradient palette; new accents flatten the voice。",
        "避免：render headlines in all-caps. Sentence-case + negative tracking is non-negotiable。",
        "避免：drop a single heavy drop-shadow on cards. The brand's elevation is built from stacked small offsets + inset hairline rings。",
        "避免：render the brand gradient at icon scale or in a single-colour reduced form. The gradient lives at hero scale only。",
        "避免：promote the geometric sans to weight 700. The brand's display ceiling is 600。"
      ]
    },
    "radius": {
      "control": "6px",
      "card": "8px",
      "preview": "0px",
      "pill": "100px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "2xl": "40px",
      "3xl": "48px",
      "4xl": "64px",
      "5xl": "96px",
      "6xl": "128px",
      "section": "192px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
