Airtable

version: alpha name: Airtable-design-analysis description: A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights — never bold for its own sake.

colors: primary: "#181d26" primary-active: "#0d1218" ink: "#181d26" body: "#333840" muted: "#41454d" hairline: "#dddddd" border-strong: "#9297a0" canvas: "#ffffff" surface-soft: "#f8fafc" surface-strong: "#e0e2e6" surface-dark: "#181d26" surface-dark-elevated: "#1d1f25" signature-coral: "#aa2d00" signature-forest: "#0a2e0e" signature-cream: "#f5e9d4" signature-peach: "#fcab79" signature-mint: "#a8d8c4" signature-yellow: "#f4d35e" signature-mustard: "#d9a441" on-primary: "#ffffff" on-dark: "#ffffff" link: "#1b61c9" link-active: "#1a3866" info: "#254fad" info-border: "#458fff" success: "#006400" success-border: "#39bf45" pricing-ink: "#1d1f25"

typography: display-xl: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0 display-lg: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0 display-md: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0 title-lg: fontFamily: "Haas, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.35 letterSpacing: 0.12px title-md: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 title-sm: fontFamily: "Haas, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 label-md: fontFamily: "Haas, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 button: fontFamily: "Haas, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "Haas, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0 caption: fontFamily: "Haas, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.16px legal: fontFamily: "Haas, sans-serif" fontSize: 13.12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0 pricing-display: fontFamily: "Inter Display, system-ui, sans-serif" fontSize: 44.8px fontWeight: 475 lineHeight: 1.1 letterSpacing: 0 pricing-section: fontFamily: "Inter Display, system-ui, sans-serif" fontSize: 28px fontWeight: 475 lineHeight: 1.2 letterSpacing: 0 pricing-card-title: fontFamily: "Inter Display, system-ui, sans-serif" fontSize: 20px fontWeight: 475 lineHeight: 1.3 letterSpacing: 0

rounded: xs: 2px sm: 6px md: 10px lg: 12px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: 16px 24px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: 16px 24px button-secondary-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: 16px 24px button-legal: backgroundColor: "{colors.link}" textColor: "{colors.on-primary}" typography: "{typography.legal}" rounded: "{rounded.xs}" padding: 12px 10px button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px button-pricing-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.pricing-ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 24px text-link: backgroundColor: transparent textColor: "{colors.link}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" height: 64px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px signature-coral-card: backgroundColor: "{colors.signature-coral}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px signature-forest-card: backgroundColor: "{colors.signature-forest}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px hero-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px feature-card-tabbed: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px cream-callout-card: backgroundColor: "{colors.signature-cream}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.md}" padding: 24px demo-grid-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.md}" padding: 16px logo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-md}" padding: 32px article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.md}" padding: 16px topic-filter-rail: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" width: 240px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px height: 44px text-input-focus: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.pricing-ink}" typography: "{typography.pricing-card-title}" rounded: "{rounded.md}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.surface-soft}" textColor: "{colors.pricing-ink}" typography: "{typography.pricing-card-title}" rounded: "{rounded.md}" padding: 32px pricing-comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" padding: 12px cta-band-light: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" padding: 64px

概述

Airtable 的营销表面是低调而编辑型的。基础氛围是白色画布、深墨色字体、慷慨的留白，以及一个近黑色的胶囊 CTA——直到某个板块需要视觉重音时，才有元素站出来抢眼。品牌张力不来自渐变背景或强调墙，而来自全幅签名卡片——以 {colors.signature-coral}、{colors.signature-forest} 与 {colors.surface-dark} 为底，每隔两三个屏幕出现一次，标记长滚动的说明型页面。在这些签名板块之间，页面读起来像一本印刷杂志：一个标题、一段支持性文案、一组小图、再加一段呼吸空间。

字体声音是 Haas Grotesk，克制字重（display 400，副标题与按钮 500）。显示标题从不超过 500——强调来自字号与色彩对比，而非字重。正文统一保持 14px / 400。定价表面运行另一套字体系：Inter Display，使用少见的中等字重（475 / 575）以及胶囊形按钮（{rounded.pill}），它们不出现在任何其他页面——这是一个刻意的子系统，传达"此页关乎商业精度"。

关键特征：

• 主要 CTA 是 {colors.primary}（近黑墨色），白字 + {rounded.lg}（12px）圆角——读起来自信而决断，从不装饰。
• 次要 CTA 是 {colors.canvas} 按钮，{colors.ink} 文字，1px 细线描边。两者组合构成 Airtable 标志性的按钮配对。
• 首屏是白色画布。没有氛围渐变、没有网格、没有背景装饰。品牌力量来自字体与按钮所在的纯净留白。
• 品牌张力存在于签名表面卡片中：{colors.signature-coral}、{colors.signature-forest} 与 {colors.surface-dark} 每隔几屏承载一次全幅产品卡片。
• Demo 卡片栅格在 {colors.signature-peach}、{colors.signature-mint}、{colors.signature-cream} 以及其他暖色调表面上承载产品界面片段。
• 板块节奏：白色画布 → 珊瑚签名卡片 → 白色正文 → 米色横幅带 → 深蓝绿 CTA → 浅灰 CTA 条幅 → 页脚。画布在每个签名表面之间重置。
• 圆角分级：{rounded.lg}（12px）用于主要 CTA 与大型签名卡片，{rounded.md}（10px）用于内容卡片与 demo 栅格，{rounded.sm}（6px）用于输入框，{rounded.full} 用于图标按钮。定价按钮跃迁到 {rounded.pill} 以标记其为另一子系统。
• 垂直节奏在主要板块之间为 {spacing.section}（96px）——所有页面统一。

配色

品牌与点缀

• Primary（{colors.primary} — #181d26）：主导品牌色。用于主要 CTA 背景、h1/h2 显示字体，以及 {component.surface-dark} 板块。不是"蓝、然后黑"——黑就是营销系统的主色。
• Primary Active（{colors.primary-active} — #0d1218）：主要按钮的按下态。

表面

• Canvas（{colors.canvas} — #ffffff）：默认页面表面；每个编辑型正文的底面。
• Surface Soft（{colors.surface-soft} — #f8fafc）：标签型功能卡片，以及"推荐"定价层级。
• Surface Strong（{colors.surface-strong} — #e0e2e6）：页脚附近的浅灰"Start building with Airtable" CTA 条幅。
• Surface Dark（{colors.surface-dark} — #181d26）：页中部使用的深墨蓝 CTA 卡片（如"The path to 10× every person in your organization"）。
• Surface Dark Elevated（{colors.surface-dark-elevated} — #1d1f25）：文章页首屏在彩虹条带叠层下的底色。
• Hairline（{colors.hairline} — #dddddd）：输入框、表格分隔符、次要按钮描边的 1px 边框色调。

文本

• Ink（{colors.ink} — #181d26）：最强文本——h1/h2 显示字体与浅表面上的主要按钮文字。十六进制与 {colors.primary} 相同，因为它们在字体与按钮层级上是同一角色的不同表达。
• Body（{colors.body} — #333840）：默认正文字色。
• Muted（{colors.muted} — #41454d）：页脚链接、面包屑、说明。
• Border Strong（{colors.border-strong} — #9297a0）：禁用次要按钮的 1px 描边色。
• On Primary / On Dark（{colors.on-primary} — #ffffff）：主要按钮与深色表面上的文字色。

签名卡片表面

这些颜色承载 Airtable 的品牌张力。它们以全幅、全卡表面的形式出现——从不作为小元素的点缀色。

• Coral（{colors.signature-coral} — #aa2d00）：首页上最大的签名卡片（"Production apps in prototype speed"）。全幅深珊瑚色底，白字。
• Forest（{colors.signature-forest} — #0a2e0e）：首页 demo 栅格簇中的深绿签名卡片。
• Cream（{colors.signature-cream} — #f5e9d4）：米色横幅带（"The path to 10× every person in your organization"）——柔和米色表面，承载深色字体与产品界面片段。
• Peach（{colors.signature-peach} — #fcab79）、Mint（{colors.signature-mint} — #a8d8c4）、Yellow（{colors.signature-yellow} — #f4d35e）、Mustard（{colors.signature-mustard} — #d9a441）：承载多卡片栅格板块内小产品界面片段的 demo 卡片表面。

语义

• Link（{colors.link} — #1b61c9）：内联正文链接与锚文本。按下时加深为 {colors.link-active}（#1a3866）。尽管其 CSS 变量名为 --theme_button-background-primary，该颜色不是主要按钮色——而是链接色。
• Info（{colors.info} — #254fad）与 Info Border（{colors.info-border} — #458fff）：内联信息徽标以及聚焦输入框描边。
• Success（{colors.success} — #006400）与 Success Border（{colors.success-border} — #39bf45）：确认状态。

字体排版

字体族

系统使用 Haas / Haas Groot Disp（Airtable 授权的 display + 正文字体）。Haas Groot Disp 承担显示尺寸（h1 / h2）；Haas Grotesk 承担 24px 及以下的所有内容。回退栈为 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif。

定价表面使用独立的 Inter Display 栈，使用中等字重（475 / 575）——这是一个刻意的子系统，传达商业精度。

层级

设计原则

Haas 体系在显示尺寸偏好 400 字重——40px 的 h1 不是粗体。视觉强调委托给字号、色彩对比以及签名表面卡片。当系统需要加重时，会跳到 500（子标题、按钮、文章标题），而从不使用 600 或 700 编辑型正文。唯一的真正加粗（600）存在于 {typography.legal}——加粗只用于服务条款类表面，而非营销。

定价页子系统使用 Inter Display 的 font-weight: 475——介于常规（400）与中等（500）之间的自定义中等字重，作为可变字体发布。

字体替代说明

如果 Haas Groot Disp 与 Haas Grotesk 不可用，Inter Display（可变字体）是两者最接近的开源替代——行高下调约 5% 以匹配 Haas 较紧的字面高度。定价子系统直接使用 Inter Display。在 macOS / iOS 上，system-ui 已足够；在 Windows 上，回退链落到 Segoe UI，这是一个可用但略冷的替代。

布局

间距系统

• 基础单位： 4px（所有间距对齐到 4 的倍数）。
• 令牌： {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• 板块内边距（垂直）： {spacing.section}（96px）是通用的垂直节奏常量——每个页面的每个主要编辑板块都使用 96px 上 + 96px 下内边距。
• 卡片内边距： {spacing.xl}（32px）用于标签型功能卡片与定价层级卡片；{spacing.xxl}（48px）用于签名珊瑚/森林/深色卡片内部；{spacing.lg}（24px）用于米色横幅与 demo 栅格卡片。
• 栏间距： 3 列栅格卡片之间 {spacing.lg}（24px）；更密集的 logo 条与页脚栏内 {spacing.md}（16px）。

栅格与容器

• 最大内容宽度： 约 1280px 居中，左右各 {spacing.xxl}（48px）水平呼吸空间。
• 编辑型正文： 大断点下单 8/12 栏，移动端折叠为单列。
• Demo 卡片栅格： 桌面端 3 或 4 栏，平板 2 栏，移动 1 栏。栅格内的卡片尺寸刻意不均匀，避免"规格表"感。
• Logo 条： 桌面端 6 个单色合作伙伴 logo 单行排列；移动端折叠为 3 列。

留白哲学

Airtable 将留白作为主导的氛围工具。首屏板块上下方有 96px+ 的纯留白，在留白中没有装饰。首屏刻意保持平静——没有渐变、没有极光、没有氛围网格衬在文字后。系统单独依靠留白完成框定。

层次与深度

层次哲学是色块优先，阴影次之。阴影极简；深度委托给白色画布与签名表面卡片之间的对比。营销系统中不存在柔光晕 / 氛围阴影 / 重层次语言。

装饰性深度

• 垂直彩虹条纹 仅出现在文章页首屏——多色垂直带位于 {colors.surface-dark-elevated} 之上。这是单页处理，而非全系统签名。
• 摄影即深度 于 demo 卡片栅格中：每张卡片承载真实的产品界面截图或样机，通过可读的产品密度而非装饰效果贡献深度。

形态

圆角分级

摄影几何

demo 卡片栅格内的产品界面截图保留原始长宽比（通常 4:3 或 16:10），并裁切至 {rounded.md} 容器中。首屏插图全宽出血，无圆角。文章卡片缩略图为 16:9 + {rounded.md} 圆角。证言中的头像使用 {rounded.full}（完美圆形）。定价对比表图片保持矩形，无圆角。

组件

未记录悬停状态。 根据全局无悬停策略（第 6 步），下方每个组件规范仅记录默认与激活/按下态。变体作为独立条目存于 components: frontmatter 中。

top-nav — 一条 64px 高的白色导航条，固定于每个页面顶部。Airtable 字标在左；主要水平菜单（Platform、Solutions、Resources、Enterprise、Pricing）位于 {typography.body-md} 的中偏左；右侧簇包含 "Book Demo" 轮廓链接、"Sign up for free" {component.button-primary}，以及 "Log In" 文字链接。导航在每个页面都保持浅色——Airtable 不会在深色板块上方反转导航。

按钮

button-primary — 标志性的主要 CTA。背景 {colors.primary}（近黑），文字 {colors.on-primary}，字体 {typography.button}，内边距 16px × 24px，圆角 {rounded.lg}（12px）。这是每个首屏上可见的"Get started for free" / "Sign up for free"按钮。读起来自信而决断——而非装饰——这就是为什么系统克制使用它（每屏一个）。

• 激活态：button-primary-active 加深为 {colors.primary-active}（#0d1218）。

button-secondary — 白色轮廓按钮（如 "Book demo"）。背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.button}，圆角 {rounded.lg}（12px），1px 细线描边。位于 {component.button-primary} 旁边，作为"次承诺"选项。

button-secondary-on-dark — 同 {component.button-secondary} 形态，但用于签名珊瑚/森林/深色表面。背景 {colors.canvas}，文字 {colors.ink}——白色按钮在深色表面上仍然保持白色，因为系统在营销站点上从不反转为半透明 on-dark 样式。

button-pricing-pill — 定价页 CTA 族。背景 {colors.canvas}，文字 {colors.pricing-ink}，圆角 {rounded.pill}（9999px），内边距 12px × 24px。营销系统中唯一出现胶囊形的地方。视其为定价子系统的标志。

button-legal — cookie 同意与法律横幅 CTA。背景 {colors.link}，文字 {colors.on-primary}，字体 {typography.legal}（13.12px / 600），圆角 {rounded.xs}（2px），内边距 12px × 10px。2px 圆角与 600 字重传达"这是系统强制表面"，而非设计品牌表面。

button-icon-circular — 40px × 40px 圆形按钮，{colors.canvas} 背景、细线边框、{colors.ink} 图标。用于轮播控件、"share" 与 "back" 操作。

text-link — {colors.link}（#1b61c9，真正的链接蓝）内联正文链接。默认无下划线。字体继承 {typography.body-md}。

卡片与容器

hero-band — 全页宽白色画布首屏。无表面卡片、无边框、无阴影、无氛围渐变——只有标题、副标题、主要 + 次要按钮组合，置于 96px 的留白之中。垂直内边距 {spacing.section}（96px）。

signature-coral-card — 首页上的大型全幅珊瑚卡片（"Production apps in prototype speed"）。背景 {colors.signature-coral}（#aa2d00，深珊瑚 / 氧化红），文字 {colors.on-primary}，圆角 {rounded.lg}（12px），内部内边距 {spacing.xxl}（48px）。承载 {typography.display-md} 的 h2、{typography.body-md} 的支持性文案，以及 {component.button-secondary-on-dark} 作为 CTA。

signature-forest-card — 深绿签名卡片（{colors.signature-forest} — #0a2e0e），在首页上作为珊瑚卡片的 demo 栅格同级出现。

hero-card-dark — 页中部深墨蓝 CTA 卡片（如 "The path to 10× every person in your organization"）。背景 {colors.surface-dark}（#181d26），文字 {colors.on-dark}，圆角 {rounded.lg}（12px），内部内边距 {spacing.xxl}（48px）。颜色与 {colors.primary} 相同，因为系统将墨色同时用作字体色与签名深色表面。

feature-card-tabbed — 浅米色卡片（如首页上的 "Coke / Pelosi / Conde Nast / Time Inc" 标签型功能卡片）。背景 {colors.surface-soft}，圆角 {rounded.lg}（12px），内部内边距 {spacing.xl}（32px）。左栏以 {typography.title-md} 垂直堆叠标签；右窗格显示当前标签的内容（插图 + 正文 + 小 CTA）。

cream-callout-card — 米色横幅卡片（{colors.signature-cream}）。圆角 {rounded.md}（10px），内部内边距 {spacing.lg}（24px）。承载产品界面片段或统计横幅——比深色/珊瑚签名卡片更柔和，但仍是有意的品牌表面。

demo-grid-card — 用于每个页面上点阵出现的多卡片栅格。背景 {colors.canvas} 或 demo 栅格表面之一（{colors.signature-peach}、{colors.signature-mint}、{colors.signature-yellow}、{colors.signature-mustard}），圆角 {rounded.md}（10px），内部内边距 {spacing.md}（16px）。每张卡片框住一个产品界面片段。卡片高度刻意变化，避免"规格表"感。

logo-strip — 水平单色合作伙伴 logo 行（HBO、Netflix、Amazon、Time、Conde Nast）。logo 渲染为 {colors.muted}，表面 {colors.canvas}，垂直内边距 {spacing.xl}（32px）。桌面端 6 个，移动端 3 个。

article-card — 文章页上的趋势故事栅格。背景 {colors.canvas}，圆角 {rounded.md}（10px），内部内边距 {spacing.md}（16px）。每张卡片承载一张彩绘插图缩略图（16:9）、小号大写类别标签、{typography.title-sm} 标题，以及一行元信息。桌面端 3 列。

topic-filter-rail — 文章页的左栏。240px 宽，{colors.canvas} 背景，{typography.body-md}，按类别标题分组垂直排列（"Marketing"、"Product"、"Project management"、"Operations"）并附子项。当前项附带一个小数字计数徽标。

输入与表单

text-input — 标准文本输入框。背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-md}，圆角 {rounded.sm}（6px），内边距 12px × 16px，高度 44px。1px {colors.hairline} 细线边框。

text-input-focus — 聚焦态。边框加粗或变色为 {colors.info-border}。

定价子系统

pricing-tier-card — 标准层级卡片。背景 {colors.canvas}，文字 {colors.pricing-ink}，字体 {typography.pricing-card-title} 用于方案名，圆角 {rounded.md}（10px），内部内边距 {spacing.xl}（32px）。承载方案名、{typography.pricing-display}（44.8px / 475）的价格块、功能清单，以及底部 {component.button-pricing-pill}。

pricing-tier-card-featured — 推荐层级（通常为 "Team" 或 "Business"）。背景切换为 {colors.surface-soft}。无强调边框、无徽标——背景色调的切换是唯一信号。

pricing-comparison-row — 定价页底部长对比表的每行。左列标签；4 个方案列分别为勾选标记或值。每行 12px 垂直内边距，行间细线分隔。

导航变体

footer — 浅色表面（{colors.canvas}），桌面端 6 列链接列表，覆盖 Platform / Solutions / Resources / Learn / Company 子树。垂直内边距 {spacing.section} 在上方链接块与下方法律行之间分配。字体 {typography.body-md}。

cta-band-light — 页脚附近的浅灰 "Start building with Airtable" CTA 条。背景 {colors.surface-strong}（#e0e2e6），文字 {colors.ink}，圆角 {rounded.lg}（12px），内边距 {spacing.xxl}（48px）。承载 {typography.display-md} 的 h2 与一个 {component.button-primary}。

签名组件

Articles Vertical Rainbow Stripe Hero — 文章页首屏处理。多色垂直带以不同宽度位于 {colors.surface-dark-elevated} 之上。h1 + 副标题 + CTA 组合左对齐居中置于条纹之上。这是单页首屏处理，而非全系统签名——不要将其提升为多页模式。

推荐与避免

推荐

• 保持 {component.button-primary} 为近黑色。品牌的主要 CTA 是 {colors.primary}，而非链接蓝。将两者混淆会让原本自信的首屏变得混乱。
• 每屏保留一个 {component.button-primary} 给唯一的首要动作。系统在品牌动作层级上被设计为克制使用。
• 使用 {component.button-secondary}（白色带细线描边）作为 {component.button-primary} 的天然配对。两者组合构成 Airtable 标志性的按钮行。
• 将留白作为首屏氛围。首屏板块刻意保持平静——无渐变、无网格、无氛围背景。违背此点会被视为偏离品牌。
• 使用 {component.signature-coral-card}、{component.signature-forest-card} 与 {component.hero-card-dark} 来打破编辑型单调。这是品牌的张力时刻。
• 让 {component.demo-grid-card} 在栅格内高度不均匀。统一高度读起来像规格表。
• 将定价表面视为独立方言：保持 {typography.pricing-display}、{typography.pricing-card-title} 与 {component.button-pricing-pill} 协同。将它们与 Haas Grotesk 按钮字体混用会破坏子系统声音。
• 使用 {spacing.section}（96px）垂直内边距锚定每个编辑板块。

避免

• 不要将 {colors.link}（#1b61c9）作为主要按钮色。它是链接色。主要按钮是 {colors.primary}（#181d26，近黑）。将链接蓝当作品牌动作，是阅读 Airtable CSS 变量时最常犯的错误。
• 不要为首屏添加渐变背景。Airtable 的首屏是白色的，就这样。网格、极光、聚光渐变都读起来像"又一个 SaaS 模板"——而不是 Airtable。
• 不要加粗显示字重。{typography.display-xl} 与 {typography.display-lg} 刻意采用 400 / 500 字重——跳到 700 读起来像营销页模板。
• 不要在定价表面之外使用 {rounded.pill}。它是子系统标志，而非通用圆角选项。
• 不要在两个连续的板块中重复相同的表面模式。编辑型节奏依赖此韵律：白色 → 签名卡片 → 白色 → 米色 → 深色 → 白色。两块白色相连读起来像排版博客。
• 不要在系统已编码的内容之外添加悬停样式。系统仅记录默认与激活/按下态。
• 不要在已记录的签名卡片色板之外引入额外的点缀色。系统的张力已经使用了珊瑚、森林、深墨蓝、米色、桃、薄荷、黄与芥末。

响应式行为

断点

触控目标

• {component.button-primary} 及其同族至少渲染为 48 × 48px（16px 垂直内边距 + 16px 行高）——轻松超过 WCAG AAA 的 44 × 44。
• {component.button-icon-circular} 正好 40 × 40px——略低于 WCAG 推荐的 44，但居中图标与点圆角在视觉上弥补。
• {component.text-input} 高度为 44px。

折叠策略

• 顶部导航在 < 768px 折叠为汉堡；菜单以全屏面板而非下拉形式打开。
• 卡片栅格减列而非缩放卡片。
• {component.feature-card-tabbed} 在移动端将标签栏重新堆叠到内容窗格之上。
• 定价对比表在 < 1024px 转换为可水平滑动的滑动展示；4 个方案标题保持可见，正文行可滚动。

图片行为

• demo 卡片界面截图裁切以适应容器，而非放大。
• 首屏插图在移动端全宽出血，失去水平边距。
• 签名卡片内（珊瑚 / 森林 / 深色卡片）的图片压缩至卡片宽度，不裁切。

迭代指南

1. 一次专注于一个组件。直接引用其 YAML 键（{component.button-primary}、{component.signature-coral-card}）。
2. 添加新组件时，先决定它属于哪个子系统：主编辑系统（Haas，{rounded.lg} / {rounded.md}）还是定价子系统（Inter Display，{rounded.pill}）。
3. 已存在组件的变体（-active、-disabled、-focus）作为独立条目存于 components: 中——绝不使用嵌套状态对象。
4. 在所有提及颜色、圆角、字体排版角色或间距值的正文中使用 {token.refs}。十六进制至多在引用旁出现一次。
5. 绝不记录悬停。系统仅记录默认与激活/按下态。
6. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 与 orphaned-tokens 警告会自动标记问题。
7. 当对强调方式存疑时：先加大字号再加粗，先用签名表面卡片再用纯色。

已知缺口

• 柔和 demo 栅格表面（{colors.signature-peach}、{colors.signature-mint}、{colors.signature-yellow}、{colors.signature-mustard}）的精确十六进制值是从截图像素采样推断的。某些产品发布可能会按季节切换这些表面。
• 所有组件的悬停行为未记录（依据全局无悬停策略）。
• 动画与过渡时长不在范围内。
• {component.text-input-focus} 之外的表单校验状态未提取——输入框的错误与成功状态需要专门的表单页才能确认。
• 定价对比表的勾选标记字形与列分隔宽度为结构性描述，但未正式定义为令牌。
• CSS 变量 --theme_button-background-primary: #1b61c9 存在于 :root，但营销站点上未作为主要 CTA 颜色使用。它映射到链接/信息色角色。在此记录以便后续提取时不会再次被这个误导性变量名绊倒。