OpenDesign Airtable 设计系统深度解析：从 DESIGN 规范到 tokens.css 的落地实现

OpenDesign Airtable 设计系统深度解析从 DESIGN 规范到 tokens.css 的落地实现【免费下载链接】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导读本文以 OpenDesign 仓库中design-systems/airtable/目录下的 Airtable 设计系统包为核心完整解析这份以电子表格 × 数据库混合体为气质的品牌设计规范——白色画布 深海军蓝文字#181d26 Airtable Blue#1b61c9单一强调色 Haas 瑞士精密排版 标志性蓝色调多层阴影。你将掌握这套规范的视觉主题、色彩角色、排版层级、组件样式、布局与响应式行为并通过阅读tokens.css、components.html、manifest.json等仓库文件理解 OpenDesign Design System 2.0 如何把一份设计意图文档落地为可被 Agent 直接粘贴复用的标准化 token 契约。1. 视觉主题与气质定位Airtable 设计系统包在 DESIGN.md俄语版见 DESIGN-ru.md中被定义为电子表格与数据库的混合体色彩丰富、友好、结构化数据美学分类为 Design Creative。它的视觉基调是面向企业用户的精致简洁不是炫技式的视觉冲击而是通过克制让数据本身成为主角。核心特征白色画布 深海军蓝正文#181d26—— 文字带有一丝蓝色底调而非纯黑避免与 Airtable Blue 冲突Airtable Blue#1b61c9作为唯一的主 CTA 与链接色 —— 全站只有一个彩色强调Haas Haas Groot Disp 双字体系统 —— display 变体承载标题常规体承载正文与 UI正文使用正字距letter-spacing0.08px–0.28px —— 这是 Haas 字族的瑞士精密特征按钮圆角 12px卡片 16px–32px多层蓝色调阴影rgba(45,127,249,0.28) 0px 1px 3px语义化主题 tokenCSS 变量统一采用--theme_*命名2. 色彩调色板与角色分配主色Primary角色色值用途深海军蓝 Deep Navy#181d26主要文字Airtable Blue#1b61c9CTA 按钮、链接白色 White#ffffff主要表面Spotlightrgba(249,252,255,0.97)--theme_button-text-spotlight语义色Semantic角色色值用途成功绿 Success Green#006400--theme_success-text弱化文字 Weak Textrgba(4,14,32,0.69)--theme_text-weak次级激活 Secondary Activergba(7,12,20,0.82)--theme_button-text-secondary-active中性色Neutral角色色值用途深灰 Dark Gray#333333次级文字中蓝 Mid Blue#254fad链接/强调的蓝色变体边框 Border#e0e2e6卡片边框浅色表面 Light Surface#f8fafc微妙表面阴影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 20px从源码看 token 落地这套调色板在 tokens.css 中被精确绑定。其中最有意思的三个决策见该文件头部注释 1–3 条--accent绑定 Airtable Blue#1b61c9而非深海军蓝——品牌通过--accent作为按钮背景表达主 CTA海军蓝只留给标题与正文--accent-hover直接绑定文档记录的 Mid Blue#254fad而不是通用的color-mix压暗公式——Airtable 把 hover 层级当作一个离散的品牌色阶而非计算出来的阴影--muted绑定文档记录的半透明海军蓝rgba(4,14,32,0.69)而不是扁平灰。3. 排版规则字族Font Families主字体Haas回退栈-apple-system, system-ui, Segoe UI, Roboto显示字体Haas Groot Disp回退Haastokens.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; --font-mono: ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace;注意仓库刻意不引入 Haas 的 CDN 引用因为 Haas 是 Airtable 的专有字族token 文件只列出 OS 回退栈保证 Haas 未加载时 artifact 依然可读。层级Hierarchy角色字体字号字重行高字距Display HeroHaas48px4001.15normalDisplay 加粗Haas 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.28px从源码看实现细节tokens.css 注释 6–7--leading-body绑定 1.35正文 18px/24px而非 schema 惯例的 1.5——Airtable 用更紧凑的行距让表格行、记录卡片这类密集产品 UI 不显稀疏--leading-tight绑定 1.2落在文档记载的 1.15–1.25 区间。--tracking-display为0normal而非负值——DESIGN.md 明确显示级标题是letter-spacing: normal正文才是正字距0.08–0.28px。Haas 字族天生为正向 tracking 设计把 display 映射成负 em 会与字型对抗正文级的正字距按钮、说明文字在组件层单独应用。4. 组件样式规范按钮Buttons主蓝按钮背景#1b61c9、白色文字、内边距 16px 24px、圆角 12px白色按钮白底、文字#181d26、圆角 12px、1px 白色边框Cookie 同意按钮背景#1b61c9、圆角 2px锐角从源码看组件化实现components.html中.btn-primary与.btn-secondary完整复刻了这套样式——主按钮背景var(--accent)、hover 时切到var(--accent-hover)即#254fad、active 时切到var(--accent-active)color-mix压暗 14%次级按钮白底、--fg文字、--border描边hover 时描边加深为--fg。按钮使用--motion-fast150ms--ease-standard做状态过渡键盘聚焦时应用--focus-ring3px Airtable Blue 透明光环。卡片Cards1px solid #e0e2e6边框、圆角 16px–24px。源码中的.card使用--radius-md16px、--elev-raised蓝色调多层阴影hover 时translateY(-2px)上浮配合 200ms 过渡.card-icon用color-mix(in oklab, var(--accent), transparent 88%)生成极淡的蓝色图标底文字用--accent——整卡唯一强调仍是 Airtable Blue。输入框Inputs标准 Haas 样式。.field input圆角--radius-sm12px、1px--border描边、聚焦时描边切换为--accent并叠加--focus-ringplaceholder 使用--muted弱化文字。徽章与 Base-Color Chips.badge采用--radius-pill9999px胶囊圆角.badge-success用文档记载的深森林绿#006400及其 88% 透明混合作为底色。components.html还复刻了 Airtable 的标志性base-color chips表格字段的彩色标签——.base-chip-product#1b61c9、.base-chip-marketing#f5a623、.base-chip-design#ec4899、.base-chip-sales#16a34a用 10px 彩色圆点 胶囊边框承载结构化数据的视觉语言。5. 布局规范间距1–48px以 8px 为基准单位圆角2px小、12px按钮、16px卡片、24px区块、32px大、50%圆形tokens.css 把间距绑定为--space-14px到--space-1248px的 8 档并把圆角绑定为四档 schema 层级--radius-sm: 12px; /* 按钮、输入框、chips */ --radius-md: 16px; /* 卡片、弹窗 */ --radius-lg: 24px; /* 特性容器 */ --radius-pill: 9999px; /* 徽章、头像 */值得注意tokens.css 注释 5文档记载的 2px 锐角 cookie 圆角属于组件级细节直接内联到出现处不提升为 schema token32px 的大圆角只用于区块级容器绑定到--radius-lg会让常规卡片过度圆润因此刻意不绑定。6. 深度与层级Airtable 的深度系统由带蓝色调的阴影和柔和环境光构成蓝色调多层阴影系统上文 §2 已列出完整四层值柔和环境光rgba(15,48,106,0.05) 0px 0px 20pxtokens.css 把四层阴影逐字复刻为--elev-raised注释 4 强调永远不要丢掉第三层——1px y 偏移的 3px 蓝色辉光是品牌签名--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 签名勿删 */ inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); /* 0.5px 内环微妙高光 */设计意图是卡片不是被丢到页面上而是被嵌入页面——蓝色辉光让卡片与蓝色 CTA 出自同一只手而不是普通的灰色投影。7. 该做与不该做Dos and DontsDo用 Airtable Blue 做 CTA用 Haas 并保持正字距positive tracking按钮使用 12px 圆角Dont不要省略正文的正字距不要使用沉重的阴影heavy shadowstokens.css 进一步把不要滥用强调色落实为硬约束--accent的 schema 描述明确写着 ≤2 visible uses per screen (lint enforced)——每屏最多两处可见强调用色装饰性蓝色被禁止因为品牌把强调色读作这就是可执行的动作。8. 响应式行为断点范围425–1664px共 23 个断点内容容器上限 1200px落在文档记载的响应式带中部tokens.css 对应声明了容器与区块节奏 token--container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 12px; --section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 48px;区块纵向节奏 96/64/48桌面/平板/手机严格落在 8px 基准尺度上96 12 × 8components.html中.container、section在1023px、639px两个媒体查询断点处逐级切换 gutter 与区块内边距。9. Agent 提示词指南DESIGN.md 第 9 节为编码 Agent 提供了最小化的 prompt 色值速查文字Deep Navy#181d26CTAAirtable Blue#1b61c9背景White#ffffff边框#e0e2e610. 包内文件与使用方式Design System 2.0 契约design-systems/airtable/是一个完整的设计系统包manifest.json 声明了它的结构与契约schemaVersionod-design-system-project/v1来源类型为bundled即 OpenDesign 精选的内置 fixture而非对上游品牌站点的实时抓取——这一点在 source/evidence.md 中明确声明。推荐阅读顺序来自 USAGE.md先读 USAGE.md 理解包契约读 DESIGN.md 理解视觉意图、约束与反模式把tokens.css粘贴到第一个 artifact 的style块最前面再写组件 CSS用components.manifest.json获取精简组件清单需要精确选择器或状态时打开components.html需要视觉 sanity check 时查看preview/页面preview/colors.html、preview/typography.html、preview/spacing.htmlDo / Avoid 要点Do完整保留 schema token 名称以保证跨品牌切换可靠用--accent表达主操作、链接、聚焦态与唯一焦点元素优先复用components.manifest.json中的组件组而非自造控件Avoid避免在复制的:roottoken 块之外使用裸色值避免脱离tokens.css单独重定义 Tailwind 或 design-token 值不要声称存在原始上游来源证据不要添加components.html或 DESIGN.md 中未收录的新组件配方components.manifest.json显示该 fixture 含 1 个 style 块、62 个选择器、35 个类、27 个元素token 审计结果为undeclaredReferenced: []——即组件引用的每个 token 都已在 tokens.css 声明不存在悬空引用。11. 跨品牌 token 契约Airtable 如何贴合共享 SchemaAirtable 包是 OpenDesign Design System 2.0 体系的一例品牌差异化绑定其共享契约定义在 packages/contracts/src/design-systems/token-schema.ts经 design-systems/_schema/tokens.schema.ts 再导出。每个 token 属于四层之一A1-identity必填token 即品牌本身--bg、--fg、--accent、字体栈无跨品牌默认值A1-structure必填结构性决策字号阶梯、容器、区块节奏各品牌自拟A2最终 tokens.css 中必填但在 _schema/defaults.css 中有合理 fallback 供派生脚本内联B-slot可选槽位品牌无该层级时可通过var()别名到具名兄弟 token如 Airtable 的--surface-warm: var(--surface)、--meta: var(--muted)C-extension品牌私有 token须在BRAND_EXTENSIONS允许列表注册Airtable 对 schema 惯例的弯曲见 tokens.css 头部注释正是这套体系的精髓Schema 惯例Airtable 的差异化绑定依据--accent-hover默认color-mix压暗 8%直接绑定#254fadMid BlueDESIGN.md 把 hover 视为离散品牌色阶--fg默认#000000绑定#181d26深海军蓝纯黑会与 Airtable Blue 冲突页面显生硬--success默认#16a34a绑定#006400深森林绿在白底上读作已确认/已保存而非警示--leading-body默认 1.5绑定 1.35密集表格 UI 需要更紧凑的行距--elev-raised默认灰影逐字复刻四层蓝色调阴影DESIGN.md §6 签名阴影Schema 注释同时解释了为什么 A2 是带 fallback 的必填而非可选artifact 由 Agent 把单个品牌的:root块粘贴进一个style生成不存在全局样式表的运行时级联——缺失var()目标会导致transition: var(--motion-fast)变成空规则被浏览器丢弃产出损坏的 artifact。因此每个品牌的 tokens.css 必须声明全部 A1 A2 B-slot tokenA2 fallback 只服务于派生脚本的自动内联。12. 派生产物与辅助文件tokens.css 是唯一事实来源source of truth其余文件为派生输出design-tokens.json结构化 token 清单tailwind-v4.cssTailwind v4 绑定层通过theme把每个 CSS 变量映射为 Tailwind 工具类如--color-accent、--shadow-raised、--spacing-section-desktop供 Tailwind 工作流直接消费文件头注明从 tokens.css 派生保持 tokens.css 为事实来源components.html组件参考 fixture内含完整:roottoken 块与按钮/输入/卡片/徽章/chips/链接/kbd/布局辅助类的全部样式source/token-contract.report.json把每个 TOKEN_SCHEMA 绑定映射回 tokens.css 声明行的审计证据system/index.html、system/kit.html、system/kit.dark.html系统级渲染展示13. 在 OpenDesign 中的定位与使用场景在 OpenDesign 生态中这类设计系统包的作用是让编码 Agent 在生成原型、落地页、仪表盘等前端 artifact 时先拿到一套标准化的品牌 token 与组件配方而不是凭感觉写裸色值。Agent 拿到 Airtable 包后只需将tokens.css的:root块粘贴进 artifact 的style块即可获得完整的品牌变量系统再用components.html中的选择器快速组装 UI。结合 USAGE.md 与 source/evidence.md 可以确认本包基于 OpenDesign 精选的内置 fixture 派生属于规范落地而非上游抓取派生输出design-tokens.json、tailwind-v4.css应由报告与 token 样式表重新生成而非手工编辑。在 OpenDesign 的设计系统追踪体系见 docs/design-system-tracking-spec.md中这类包通过 token 契约审计本包undeclaredReferenced为空即是通过审计的证据保证跨品牌切换时组件不产生悬空引用。14. 快速参考Agent 生成 Airtable 风格页面的最小清单从tokens.css复制完整:root块到style顶部正文用var(--font-body)var(--fg-2)标题用var(--font-display)var(--fg)行高用var(--leading-body)/var(--leading-tight)主操作只用var(--accent)Airtable Blue每屏不超过两处可见强调按钮圆角var(--radius-sm)12px卡片var(--radius-md)16px并叠加var(--elev-raised)蓝色辉光保持正文正字距0.08px–0.28px 量级display 级用normal区块节奏 96/64/48px桌面/平板/手机容器上限 1200px【免费下载链接】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），仅供参考