{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/framer/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/framer/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://framer.com/"
  },
  "identity": {
    "id": "P0-77",
    "slug": "framer",
    "brand": "Framer",
    "titleZh": "Framer 主题",
    "titleEn": "Framer",
    "descriptionZh": "Framer 的 Design.md 主题展示，围绕媒体内容、强视觉、SaaS 产品、开发工具组织页面。",
    "descriptionEn": "Website builder. Bold black and blue, motion-first, design-forward."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "request-flow",
      "media",
      "bold"
    ],
    "designTags": [],
    "distributionTags": [
      "媒体内容",
      "强视觉",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/framer/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/framer/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": [
      "#090909",
      "#ffffff",
      "#000000",
      "#999999",
      "#0099ff",
      "#141414",
      "#1c1c1c",
      "#262626",
      "#1a1a1a",
      "#d44df0",
      "#6a4cf5",
      "#ff7a3d"
    ],
    "typography": {
      "display": "GT Walsheim Framer Medium",
      "body": "Inter Variable",
      "mono": "ui-monospace",
      "hints": [
        "GT Walsheim Framer Medium",
        "Inter Variable",
        "ui-monospace",
        "GT Walsheim Medium",
        "Inter",
        "Geist"
      ]
    },
    "radius": {
      "control": "10px",
      "card": "20px",
      "preview": "20px",
      "pill": "100px",
      "source": "design-md"
    },
    "spacing": {
      "hair": "1px",
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "15px",
      "lg": "20px",
      "xl": "30px",
      "xxl": "40px",
      "section": "96px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Framer 主题",
    "brandAlias": "Framer",
    "description": "Framer 的 Design.md 主题展示，围绕媒体内容、强视觉、SaaS 产品、开发工具组织页面。",
    "descriptionEn": "Website builder. Bold black and blue, motion-first, design-forward.",
    "variant": "saas-devtool",
    "distributionTags": [
      "媒体内容",
      "强视觉",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ],
    "fontStylesheets": [],
    "palette": [
      {
        "color": "#090909",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#ffffff",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#171717"
      },
      {
        "color": "#000000",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#999999",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#171717"
      },
      {
        "color": "#0099ff",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#ffffff"
      },
      {
        "color": "#141414",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#ffffff"
      },
      {
        "color": "#1c1c1c",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#ffffff"
      },
      {
        "color": "#262626",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#ffffff"
      },
      {
        "color": "#1a1a1a",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#ffffff"
      },
      {
        "color": "#d44df0",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#ffffff"
      },
      {
        "color": "#6a4cf5",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#ffffff"
      },
      {
        "color": "#ff7a3d",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#171717"
      }
    ],
    "shadows": [
      {
        "label": "阴影 1 - Shadow 1",
        "value": "rgba(0,153,255,0.15)",
        "cssValue": "rgba(0,153,255,0.15)",
        "description": "| 3 (selected) | `rgba(0,153,255,0.15)` 0px 0px 0px 1px ring | Focused inputs, selected option |"
      }
    ],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#262626",
        "cssValue": "#262626",
        "description": "hairline: \"#262626\""
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#1a1a1a",
        "cssValue": "#1a1a1a",
        "description": "hairline-soft: \"#1a1a1a\""
      }
    ],
    "typography": [
      "GT Walsheim Framer Medium",
      "Inter Variable",
      "ui-monospace",
      "GT Walsheim Medium",
      "Inter",
      "Geist"
    ],
    "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} (white) and {colors.canvas} (near-black) as the system's two anchor surfaces. Every band of the page chooses one or the other。",
        "建议：Push display-size letter-spacing aggressively negative — {typography.display-xxl} at -5.5px is the brand signature, not a stylistic accident。",
        "建议：Use {colors.accent-blue} only for hyperlinks, focus rings, and selected indicators. Never as a background or button fill。",
        "建议：Drop one or two {gradient-spotlight-card} variants into a card grid; they are the brand's atmosphere device. Don't overdo it — three or more in the same viewport reads as a moodboard, not a system。",
        "建议：Compose every CTA as a pill ({rounded.pill}); secondary actions live as charcoal pills, never as bordered ghost buttons。"
      ],
      "dont": [
        "避免：ship a light-mode marketing page. Framer's identity is dark。",
        "避免：introduce mid-tone gray text outside {colors.ink-muted}. The hierarchy is binary: {ink} or {ink-muted}。",
        "避免：use {colors.accent-blue} as a brand fill (e.g., a blue CTA pill). The blue is a signal color, not a surface。",
        "避免：square off CTAs. Pill ({rounded.pill}) or full circle is the brand vocabulary。",
        "避免：reduce the negative letter-spacing on display sizes \"for accessibility\". The compression is intrinsic to the brand voice; reduce the SIZE if needed, but keep the percentage。"
      ]
    },
    "radius": {
      "control": "10px",
      "card": "20px",
      "preview": "20px",
      "pill": "100px",
      "source": "design-md"
    },
    "spacing": {
      "hair": "1px",
      "xxs": "4px",
      "xs": "8px",
      "sm": "12px",
      "md": "15px",
      "lg": "20px",
      "xl": "30px",
      "xxl": "40px",
      "section": "96px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "doing",
    "collectionErrors": []
  }
}
