用 OpenDesign 复刻 Airtable 设计系统从视觉规范到语义化 Design Token 的完整落地指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design导读Airtable 是「电子表格 × 数据库」混合产品的代表其官网以白色画布、深海军蓝文本#181d26与 Airtable Blue#1b61c9单色强调构建出面向企业用户的「精致简约sophisticated simplicity」气质。OpenDesign 仓库以可移植设计系统包的形式收录了这一风格本文基于 design-systems/airtable/DESIGN.md及对应的 乌克兰语版本 DESIGN-uk.md展开结合仓库内实际提交的 tokens.css、design-tokens.json 与 manifest.json完整讲解该风格的颜色、字体、组件、布局规范并揭示它是如何被绑定为 56 个语义化 CSS 变量、供 Coding Agent 在提示词组合中直接消费的。读完本文你将掌握Airtable 风格的核心视觉语言、从品牌规范到--theme_*/--accent等 Token 的映射决策以及在 OpenDesign 中查看、使用与校验该设计系统包的完整路径。1. 视觉主题与氛围一张白画布与一个蓝色强调Airtable 官网是干净的、面向企业用户的平台它通过「白色画布 深海军蓝文本 Airtable Blue 交互强调」传达「精致简约」的观感。Haas 字体家族display 与 text 两种变体构建了瑞士精工Swiss-precision式的字体系统全站正文采用正的字间距letter-spacing。关键特征清单源自 DESIGN.md §1白色画布 深海军蓝文本#181d26Airtable Blue#1b61c9作为主 CTA 与链接色Haas Haas Groot Disp 双字体系统正文正字间距0.08px–0.28px按钮圆角 12px卡片圆角 16px–32px蓝色调多层阴影rgba(45,127,249,0.28) 0px 1px 3px语义化主题 Token--theme_*CSS 变量命名在 OpenDesign 中这套视觉主题被进一步约束为「跨品牌可切换」的语义化 Token。仓库根目录 design-systems/README.md 说明了包的最小结构每个子目录是一个可移植的设计系统包至少包含manifest.json、DESIGN.md、tokens.css三个文件在 Design System 界面或受支持的建站流程中选中某个包其设计上下文就会被组合进 Agent 提示词。airtable 包正是这一机制的规范样例。2. 颜色体系与角色分工2.1 主色Primary颜色色值用途深海军蓝Deep Navy#181d26主文本Airtable Blue#1b61c9CTA 按钮、链接白色#ffffff主表面Spotlightrgba(249,252,255,0.97)--theme_button-text-spotlight2.2 语义色Semantic颜色色值Token成功绿#006400--theme_success-text弱化文本rgba(4,14,32,0.69)--theme_text-weak次级按钮激活态rgba(7,12,20,0.82)--theme_button-text-secondary-active2.3 中性色Neutral颜色色值用途深灰#333333次级文本中蓝#254fad链接/强调的蓝色变体边框#e0e2e6卡片边框浅表面#f8fafc细微表面2.4 阴影Shadows蓝色调多层阴影rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset柔和环境光rgba(15,48,106,0.05) 0px 0px 20px2.5 源码级映射颜色如何变成 Tokendesign-systems/airtable/tokens.css 头部注释逐条记录了 9 项「品牌到 Schema 的映射决策」其中颜色相关的关键决策是--accent绑定为 Airtable Blue#1b61c9而非深海军蓝——深海军蓝已被--fg占用品牌用--accent作为按钮背景表达主 CTA深海军蓝则留给标题与正文--accent-hover绑定为文档中明确记录的「中蓝」#254fad而不是通用的color-mix变暗计算——Airtable 把悬停层级视为一个独立的品牌色阶--fg是#181d26深海军蓝而非#000000——中性色阶顶部的淡蓝底色是品牌的一部分纯黑会在白色画布上显得生硬--muted绑定为文档记录的弱化文本rgba(4,14,32,0.69)让跨品牌的var(--muted)调用落在 Airtable 真实的半透明海军蓝层级上--surface-warm直接别名到--surface#ffffff因为 Airtable 没有暖色层级--success绑定为#006400——比 Schema 默认的#16a34a更深的森林绿让「已确认/已保存」语义在白底上成立而非刺眼的告警绿。3. 字体排印规则3.1 字体家族主字体Haas回退栈-apple-system, system-ui, Segoe UI, Roboto展示字体Haas Groot Disp回退Haas在 tokens.css 中分别绑定为--font-display: Haas Groot Disp, Haas, -apple-system, system-ui, Segoe UI, Roboto, sans-serif; --font-body: Haas, -apple-system, system-ui, Segoe UI, Roboto, sans-serif;注释明确说明Haas 家族不需要在tokens.css中引入 CDN 引用OS 回退栈保证未加载 Haas 时产物依然可读。3.2 层级Hierarchy角色字体字号字重行高字间距Display HeroHaas48px4001.15normalDisplay BoldHaas Groot Disp48px9001.50normal章节标题Haas40px4001.25normal副标题Haas32px400–5001.15–1.25normal卡片标题Haas24px4001.20–1.300.12px功能文案Haas20px4001.25–1.500.1px正文Haas18px4001.350.18px正文 MediumHaas16px5001.300.08–0.16px按钮Haas16px5001.25–1.300.08px说明文字Haas14px400–5001.25–1.350.07–0.28px3.3 Token 层的排印决策tokens.css 将上述层级收敛为 8 档字号 Token--text-xs: 12px到--text-4xl: 48px并做了两处反 Schema 默认的决策--leading-body: 1.35而非 Schema 常规的 1.5——Airtable 正文行距更紧凑密集的产品 UI表格行、记录卡片才不会显得稀疏--leading-tight: 1.2对应文档中 1.15–1.25 的标题行距区间--tracking-display: 0normal而非负值——文档明确将展示标题标为letter-spacing: normalHaas 家族天生适合正字间距正文层级的正向字间距0.08–0.28px在组件层按钮、说明文字按需应用。4. 组件样式4.1 按钮Buttons主蓝按钮#1b61c9背景、白色文本、内边距 16px 24px、圆角 12px白色按钮白底、#181d26文本、圆角 12px、1px 白色边框Cookie 同意按钮#1b61c9背景、圆角 2px锐角4.2 卡片与输入框卡片1px solid #e0e2e6边框圆角 16px–24px输入框标准 Haas 风格5. 布局与间距间距1–48px8px 基准圆角2px小、12px按钮、16px卡片、24px区块、32px大、50%圆形tokens.css 将圆角收敛为 4 档 Schema Token--radius-sm: 12px按钮/输入框/标签、--radius-md: 16px卡片/弹窗、--radius-lg: 24px特色容器、--radius-pill: 9999px徽章/头像。2px 的 Cookie 锐角与 32px 的大圆角属于组件/区块级数值被刻意内联而不提升为 Schema Token避免卡片表面被过度圆角化。间距层则绑定为--space-14px到--space-1248px共 8 档覆盖 8px 基准的结构性节奏1–3px 的微内边距徽章、胶囊内部在组件内联实现。此外Token 层还补充了文档未数值化的区块节奏--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px96 12 × 8仍符合 8px 基准以及容器宽度--container-max: 1200px和三档装订线桌面 24px / 平板 16px / 手机 12px。6. 深度DepthAirtable 的招牌是蓝色调多层阴影系统--elev-raised: 0 0 1px rgba(0, 0, 0, 0.32), /* 1px 深色发丝线定义边缘 */ 0 0 2px rgba(0, 0, 0, 0.08), /* 2px 环境光柔和环绕 */ 0 1px 3px rgba(45, 127, 249, 0.28), /* 3px Airtable 蓝光 1y品牌签名不可丢弃 */ inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); /* 0.5px 内环细微内高光 */tokens.css 明确要求覆盖该 Token 时绝不可丢弃第三层蓝色光晕层——蓝色调是品牌签名它让卡片与 Airtable Blue 的 CTA「出自同一只手」而不是通用的灰色阴影。柔和环境光rgba(15,48,106,0.05) 0px 0px 20px与--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)共同构成完整的高度体系键盘焦点环则用--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)表达「可操作」而不与饱和的 CTA 填充竞争。7. 该做的与不该做的Dos and DontsDo用 Airtable Blue 做 CTA用 Haas 并保持正字间距按钮圆角用 12pxDont跳过正字间距使用沉重的阴影USAGE.md 在 Agent 使用层面对此做了补充约束保留 Schema Token 名称的精确拼写以保证跨品牌切换可靠--accent只用于主操作、链接、焦点态与唯一视觉焦点优先复用components.manifest.json中的组件组而不是发明新控件避免在复制的:rootToken 块之外使用裸 hex 值避免脱离tokens.css单独定义 Tailwind 或设计 Token 值。8. 响应式行为控制点范围425–1664px共 23 个断点。Token 层的配套响应设计是容器最大宽度 1200px落在 425–1664px 响应带的中间偏桌面甜区移动端收紧装订线以保持密集营销文案的行长。9. Agent 提示词指南作为设计系统包最终面向 Agent 的浓缩规范是文本深海军蓝#181d26CTAAirtable Blue#1b61c9背景白色#ffffff边框#e0e2e6USAGE.md 给出了 Agent 与审阅者的推荐阅读顺序先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘贴进第一个产物的style块 → 用components.manifest.json做组件清单涉及精确选择器或状态时打开components.html→ 需要视觉检查时查看preview/预览页。10. 包结构与可验证性这份规范在仓库里如何自证airtable 包遵循 OpenDesign 的 v1 包契约见 design-systems/README.md。manifest.json 声明了包元数据{ schemaVersion: od-design-system-project/v1, id: airtable, name: Airtable, category: Design Creative, source: { type: bundled, origin: OpenDesign curated bundled fixture }, files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, usage: USAGE.md, componentsManifest: components.manifest.json, importMode: normalized, preview: { dir: preview, pages: [preview/colors.html, preview/typography.html, preview/spacing.html] }, sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json } }这套结构的可验证性来自三层证据链Token 契约报告source/token-contract.report.json 将 56 个 Token 逐一映射回tokens.css的声明行如--accent→tokens.css:135、--elev-raised→tokens.css:231评分 100 分、评级 excellent按层分布为 A1-identity 8 个、A1-structure 18 个、B-slot 4 个、A2 26 个派生产物design-tokens.json 与tailwind-v4.css是从契约报告与 Token 样式表派生的缓存应与tokens.css保持一致、不得手改来源声明source/evidence.md 如实声明该包基于 OpenDesign 策展的内置 fixture 回填并未声称对上游品牌官网做了新抓取——这与仓库对来源溯源的要求一致也提示使用者不应把这份规范当作 Airtable 官方资产的直接引用。在运行时/api/design-systems每次请求都会重新扫描目录更换包后刷新 Design System 界面即可生效无需重启 daemon。包质量守卫manifest 与 package-quality 校验会验证声明路径、派生文件一致性、Token 契约与组件 fixture作者侧通过pnpm guard与pnpm typecheck把关见 design-systems/README.md。结语从品牌规范到可执行设计系统airtable 包展示了 OpenDesign 的完整链路DESIGN.md承载给 Agent 看的规范散文tokens.css承载机器可消费的语义化 Tokenmanifest.json承载发现与溯源元数据source/承载证据链。对开发者而言这套「白色画布 深海军蓝 单一 Airtable Blue 强调 Haas 正字间距 蓝色调多层阴影」的语言可以原样用于数据密集型产品界面——它让「电子表格 × 数据库」的密集信息在白底上保持友好而不嘈杂对 Agent 而言只需遵循 USAGE.md 的阅读顺序即可在提示词组合中稳定复现这一品牌风格。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考