{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/airtable/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/airtable/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://airtable.com/"
  },
  "identity": {
    "id": "P0-61",
    "slug": "airtable",
    "brand": "Airtable",
    "titleZh": "Airtable 主题",
    "titleEn": "Airtable",
    "descriptionZh": "Airtable 的 Design.md 主题展示，围绕媒体内容、SaaS 产品、开发工具、浅色界面组织页面。",
    "descriptionEn": "Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "request-flow",
      "media"
    ],
    "designTags": [],
    "distributionTags": [
      "媒体内容",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/airtable/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/airtable/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": [
      "#181d26",
      "#0d1218",
      "#333840",
      "#41454d",
      "#dddddd",
      "#9297a0",
      "#ffffff",
      "#f8fafc",
      "#e0e2e6",
      "#1d1f25",
      "#aa2d00",
      "#0a2e0e"
    ],
    "typography": {
      "display": "Haas Groot Disp",
      "body": "Haas",
      "mono": "ui-monospace",
      "hints": [
        "Haas Groot Disp",
        "Haas",
        "ui-monospace",
        "Inter Display",
        "Inter",
        "Roboto"
      ]
    },
    "radius": {
      "control": "6px",
      "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": "96px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Airtable 主题",
    "brandAlias": "Airtable",
    "description": "Airtable 的 Design.md 主题展示，围绕媒体内容、SaaS 产品、开发工具、浅色界面组织页面。",
    "descriptionEn": "Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.",
    "variant": "saas-devtool",
    "distributionTags": [
      "媒体内容",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ],
    "fontStylesheets": [],
    "palette": [
      {
        "color": "#181d26",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#ffffff"
      },
      {
        "color": "#0d1218",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#ffffff"
      },
      {
        "color": "#333840",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#41454d",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#ffffff"
      },
      {
        "color": "#dddddd",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#171717"
      },
      {
        "color": "#9297a0",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#171717"
      },
      {
        "color": "#ffffff",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#f8fafc",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#171717"
      },
      {
        "color": "#e0e2e6",
        "labelZh": "颜色 9",
        "labelEn": "Color 9",
        "textColor": "#171717"
      },
      {
        "color": "#1d1f25",
        "labelZh": "颜色 10",
        "labelEn": "Color 10",
        "textColor": "#ffffff"
      },
      {
        "color": "#aa2d00",
        "labelZh": "颜色 11",
        "labelEn": "Color 11",
        "textColor": "#ffffff"
      },
      {
        "color": "#0a2e0e",
        "labelZh": "颜色 12",
        "labelEn": "Color 12",
        "textColor": "#ffffff"
      }
    ],
    "shadows": [],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#dddddd",
        "cssValue": "#dddddd",
        "description": "hairline: \"#dddddd\""
      },
      {
        "label": "边框 2 - Border 2",
        "value": "#458fff",
        "cssValue": "#458fff",
        "description": "info-border: \"#458fff\""
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#39bf45",
        "cssValue": "#39bf45",
        "description": "success-border: \"#39bf45\""
      },
      {
        "label": "边框 4 - Border 4",
        "value": "#9297a0",
        "cssValue": "#9297a0",
        "description": "border-strong: \"#9297a0\""
      },
      {
        "label": "边框 5 - Border 5",
        "value": "#254fad",
        "cssValue": "#254fad",
        "description": "info: \"#254fad\""
      },
      {
        "label": "边框 6 - Border 6",
        "value": "#006400",
        "cssValue": "#006400",
        "description": "success: \"#006400\""
      }
    ],
    "typography": [
      "Haas Groot Disp",
      "Haas",
      "ui-monospace",
      "Inter Display",
      "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": [
        "建议：Keep {component.button-primary} near-black. The brand's primary CTA is {colors.primary}, not the link blue. Mixing them up turns a confident hero into a confused one。",
        "建议：Reserve {component.button-primary} for one primary action per viewport. The system is designed for scarcity at the brand-action layer。",
        "建议：Use {component.button-secondary} (white with hairline outline) as the natural pair with {component.button-primary}. The two together form Airtable's signature button row。",
        "建议：Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand。",
        "建议：Use {component.signature-coral-card}, {component.signature-forest-card}, and {component.hero-card-dark} to break editorial monotony. These are the brand's voltage moments。"
      ],
      "dont": [
        "避免：make {colors.link} (#1b61c9) the primary button color. It is the link color. The primary button is {colors.primary} (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables。",
        "避免：add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as \"another SaaS template\" — not Airtable。",
        "避免：bold display-weight type. {typography.display-xl} and {typography.display-lg} are intentionally weight 400 / 500 — going to 700 reads as marketing-page-template。",
        "避免：use {rounded.pill} outside the pricing surface. It's a sub-system signal, not a general radius option。",
        "避免：repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two whites in a row read as a typography blog。"
      ]
    },
    "radius": {
      "control": "6px",
      "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": "96px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "doing",
    "collectionErrors": []
  }
}
