OpenDesign 设计系统剖析以 OpenAI 风格为范式的近单色冷静界面体系【免费下载链接】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本文以仓库内 design-systems/openai/DESIGN-vi.md英文原版为 DESIGN.md为骨架结合同目录下真实存在的 tokens.css、components.html、manifest.json 等打包产物系统拆解这套OpenAI 灵感设计系统的视觉基调、色彩角色、字体层级、组件样式、间距布局、动效规范与使用护栏并说明它作为可移植设计系统包在 OpenDesign 仓库中的组成形态与消费方式。读完本文你将能直接复用这套 token 体系与组件配方为 AI 类产品构建冷静、克制、编辑部气质的界面。1. 视觉主题与氛围一间为公开亮相而整理过的研究实验室OpenAI 风格产品界面的整体气质是临床、克制、刻意保持安静。它不像多数 AI 品牌那样走未来主义路线而是像一份精心排版的学术刊物纯白画布#ffffff叠加在带有微妙青绿色调的近黑墨色#0d0d0d之上即使正文文字也带有一丝冷感而非咄咄逼人的纯黑。这种色度上的中性把模型输出、代码与散文推到视觉前台界面本身的镀铬被压到最低。两大标志性手法构成了这套系统的识别度字体配对正文与 UI 使用Söhne系统替代字体Inter且只使用克制的字重——400 用于正文、500 用于导航与标签、600 用于强调展示级标题使用Signifier一款当代衬线字体为编辑性展示时刻注入每一则公告都是一篇随笔的文学语气。形状系统处处柔软——圆角统一为 8px–12px标签与 chip 使用 9999px 全药丸形任何地方都看不到生硬棱角区块之间的边界主要靠留白而非分隔线来表达即使出现边框也是#e5e5e5的发丝线读起来像颜色的缺席而非颜色的在场。核心特征清单直接来自原文档纯白画布#ffffff 深青黑墨色#0d0d0dSöhne / Inter 仅用克制字重400、500、600——克制优先于张扬Signifier 衬线用于编辑性展示标题全局 8–12px 柔和圆角chip 用 9999px 药丸形发丝线边框#e5e5e5使用克制留白是主要分隔手段深青色单色插图——标识中不使用渐变宽裕行高1.55–1.65与近乎为零的字距2. 色彩体系与角色唯一一支青绿的近乎单色系统这套系统最反直觉的地方在于它只有一个品牌强调色OpenAI Teal#10a37f其余全部是中性与语义色。任何只有绿色点缀的实现都不足以还原 OpenAI 式表面——克制必须整套出现。主色Primary令牌语义色值角色Pure White纯白#ffffff主背景、卡片表面、按钮背景Ink Black墨黑#0d0d0d主文本、品牌标识、主 CTASoft Black柔黑#1a1a1a次级标题、非关键文本的替代墨色表面与背景Surface Background令牌语义色值角色Mist薄雾#fafafa区块分隔背景、页脚表面Pearl珍珠#f5f5f5卡片表面、浮起面板Cloud云#ececec禁用背景、分隔线着色品牌强调色Brand Accent令牌语义色值角色OpenAI Teal#10a37f品牌主色、链接、高亮徽标——中性系统中的唯一彩色Teal Deep#0a7a5e品牌色的 hover 与按下态Teal Soft#e8f5f0成功徽标的表面着色、高亮提示框中性色与文本Neutrals Text令牌语义色值角色Graphite石墨#3c3c3c正文文本、默认阅读色Slate板岩#6e6e6e次级文本、说明、元数据Ash灰烬#9b9b9b三级文本、占位符、禁用标签Stone石头#c4c4c4装饰性分隔线、淡图标语义色与边框Semantic Border令牌语义色值角色Border Hairline#e5e5e5标准发丝线分隔Border Soft#ededed白底卡片描边Error#ef4146校验、破坏性操作Warning#f5a623柔和琥珀色警告态Info#2563eb信息性链接色调谨慎使用青绿仍是主导这些颜色并非停留在文档层面。在仓库的 tokens.css 中它们被逐一绑定为语义化 CSS 变量--bg: #ffffff、--surface: #f5f5f5pearl卡片表面、--surface-warm: #fafafamist区块分隔/页脚、--fg: #0d0d0d、--fg-2: #1a1a1a、--muted: #6e6e6eslate、--accent: #10a37f、--accent-hover: #0a7a5e以及--success: #10a37f、--warn: #f5a623、--danger: #ef4146三个语义令牌。值得注意的是--accent-active使用现代 CSS 的color-mix(in oklab, var(--accent), black 14%)推导按下态体现以 token 派生、不写死新色值的实现原则。这一绑定结构在 source/tokens.source.json 中有逐条审计记录每个 token 都标注了tokens.css中的声明行号并经过 source/token-contract.report.json 的契约校验。3. 字体规范衬线给灵魂无衬线给系统字体族Font Family展示 / 编辑体Signifier回退Source Serif Pro, Georgia, serif正文 / UISöhne回退Inter, system-ui, -apple-system, Segoe UI, sans-serif代码 / 等宽Söhne Mono回退ui-monospace, JetBrains Mono, Menlo, Consolas, monospace在 tokens.css 中三个字体族被绑定为--font-display、--font-body、--font-mono。注意--font-display的注释明确写着仅用于展示时刻--font-body覆盖所有 UI 与阅读文本——这一职责切分是整套排版纪律的根。层级Hierarchy角色字体字号字重行高字距说明DisplaySignifier56px (3.5rem)4001.08-0.02em编辑性 Hero、公告标题H1Söhne40px (2.5rem)6001.15-0.01em页面标题H2Söhne28px (1.75rem)6001.2-0.005em区块标题H3Söhne20px (1.25rem)6001.3normal子区块标题Body LargeSöhne18px (1.125rem)4001.6normal引导段BodySöhne16px (1rem)4001.65normal标准阅读文本Body SmallSöhne14px (0.875rem)4001.55normal卡片正文、密集 UICaptionSöhne13px (0.8125rem)5001.40.01em元数据、徽标LabelSöhne12px (0.75rem)5001.30.04emEyebrow、大写导航链接CodeSöhne Mono14px (0.875rem)4001.55normal代码块、终端输出这套字号在 tokens.css 中被映射为--text-xs12px到--text-4xl56px的阶梯同时提供--leading-body: 1.65、--leading-tight: 1.08Signifier 展示级压缩行距与--tracking-display: -0.02em。在组件夹具 components.html 中可以看到落地写法h1用var(--font-display)var(--text-4xl) 字重 400 var(--tracking-display)var(--leading-tight)h2/h3则切回var(--font-body)行高分别固定为 1.20 与 1.30.label使用 12px/500、text-transform: uppercase与0.04em字距。三条原则克制即身份字重上限为 600700 会显得脱离品牌。层级来自字号与颜色而非字重。衬线给灵魂无衬线给系统Signifier 只出现在编辑性展示时刻产品 UI 只用无衬线。展示级负字距display 尺寸使用 -0.02em到 16px 时字距归零。4. 组件样式从按钮到 chip 的完整配方以下所有组件规格均来自原文档并在 components.html 中有可直接运行的实现其内部:root令牌块与tokens.css完全一致组件清单与 token 引用关系可对照 components.manifest.json 中的groups结构。按钮ButtonsPrimary 主按钮背景#0d0d0d文字#ffffff内边距10px 18px圆角chip 上为 9999px 全药丸形矩形 CTA 上为 12pxHover背景#1a1a1a用途主 CTA、Try ChatGPT、Sign inSecondary 次按钮背景#ffffff文字#0d0d0d边框1px solid#e5e5e5内边距10px 18px圆角12pxHover背景#fafafa边框#d4d4d4Brand Accent 品牌强调按钮背景#10a37f文字#ffffff内边距10px 18px圆角12pxHover#0a7a5e用途突出的升级 CTA、成功路径在 components.html 的实现中.btn基类统一了inline-flex布局、10px 18px内边距、var(--radius-sm)圆角、500 字重与 150ms 的--motion-fast过渡.btn-primary用var(--fg)作背景、hover 切var(--fg-2).btn-teal用var(--accent)背景、hover 切var(--accent-hover)键盘可达性通过.btn:focus-visible挂载var(--focus-ring)实现。卡片Cards背景#ffffff边框1px solid#ededed圆角16px内边距24px–32px阴影默认无hover 时0 4px 16px rgba(13,13,13,0.06)实现components.html中.card的阴影过渡使用--motion-base220ms--ease-standard呼应克制动效的整体纪律。输入框Inputs背景#ffffff边框1px solid#e5e5e5圆角12px内边距12px 14pxFocus边框#10a37fring0 0 0 3px rgba(16,163,127,0.12)实现components.html中 focus 态的 ring 正是tokens.css里的--focus-ring变量占位符颜色使用三级文本--meta。药丸与标签Pills Tags背景#f5f5f5文字#3c3c3c内边距4px 10px圆角9999px字体12px / 5005. 间距与布局4px 网格上的慷慨留白基础单位4px。阶梯4、8、12、16、24、32、48、64、96、128。容器max-width 1200px移动端 gutter 24px桌面端 48px。区块节奏主要区块之间纵向 96–128px移动端 64px。网格桌面 12 列、移动 4 列间距 24px。tokens.css 将该尺度映射为--space-14px到--space-1664px并额外提供了区块纵向节奏令牌--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48pxcomponents.html 中的.container与section样式展示了响应式落点桌面 48px gutter、1023px 以下 24px、639px 以下仍为 24px区块纵向间距随断点逐级收紧。.stack-3 / .stack-4 / .stack-6这类堆叠工具类则用相邻兄弟选择器把留白纪律固化到布局原语中。6. 动效克制是默认值时长hover 150–220ms布局过渡 280–360ms。缓动入场使用cubic-bezier(0.16, 1, 0.3, 1)smooth out。纪律无视差、无滚动劫持只使用克制的 fade 与 translate。token 侧tokens.css对应为--motion-fast: 150ms、--motion-base: 220ms与--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)——前者覆盖 hover 级反馈后者是全局默认缓动曲线。7. 使用护栏什么不该做整套克制必须同现中性编辑性克制、柔和圆角、稀疏强调色必须一起使用单独的绿色强调色并不会产生 OpenAI 式表面。衬线仅限展示时刻Signifier 式展示时刻只用于编辑性或公告层级产品控件必须留在无衬线系统中。拒绝装饰性过载避免装饰性动效、厚重阴影与超大装饰卡片系统应让人感到平静、易读、有意图。8. 仓库落地形态从 DESIGN.md 到可消费的设计系统包这套规范在 OpenDesign 中不是孤立的文档而是一个完整的、可被 Agent 与运行时消费的设计系统包。按 design-systems/README.md 的说明每个 bundled 包的最小结构为manifest.json稳定发现元数据与来源、DESIGN.md面向 Agent 的权威设计散文与tokens.css权威语义 token 样式表当前目录下 manifest.json 采用od-design-system-project/v1schema声明了id: openai、category: AI LLM、files.design/tokens等契约还登记了USAGE.md、components.html、design-tokens.json、tailwind-v4.css等丰富文件与preview/、source/目录。包内文件按职责分层DESIGN.mdAgent 可读的规范散文本文即其越南语译本 DESIGN-vi.md 的展开视觉意图、约束与反模式都在这里。tokens.css可直接粘贴进产物第一个style块的语义 token 样式表——这是运行时真正生效的单一事实源。tailwind-v4.css从tokens.css派生的 Tailwind v4 映射theme中把--color-*、--font-*、--text-*、--spacing-*、--radius-*等全部绑定到 token 变量文件头注释明确由 tokens.css 派生保持 tokens.css 为事实源。components.html独立组件夹具含 hero、features grid、按钮、卡片、输入框、chip 的完整样式与结构components.manifest.json 是其派生的组件/token 索引41 个选择器、18 个类、8 个组件分组并区分了 declared/referenced/unused 的 token 清单。USAGE.md面向 Agent 的阅读顺序与使用指南——先读包契约、再读 DESIGN.md、将 tokens.css 粘贴进首产物style块、用组件清单复用组件、必要时用preview/页面做视觉核对。source/导入证据与 token 契约报告。按 evidence.md 的说明该包由 OpenDesign 精选 bundled fixture 派生并不声称重新抓取上游品牌站点tokens.source.json 逐条记录了每个 token 在tokens.css中的声明行号。从消费链路看选择该包后USAGE.md、tokens.css、组件信息、导入模式与 craft 绑定manifest 中craft.suggested建议了color与accessibility-baseline会被组合进 Agent 提示词preview/下的 colors.html、typography.html、spacing.html 三个页面则用于视觉巡检。完整的打包规范、guard 校验与编写清单见 docs/design-systems.md。结语OpenAI 风格设计系统的精髓不在某一个绿色、某一款衬线而在于整套克制的协同纯白画布上的深青黑墨色、上限 600 的字重纪律、仅存于展示时刻的 Signifier、发丝线边框与留白主导的分隔、以及 150–220ms 的安静动效。在 OpenDesign 中这一切被沉淀为可验证、可审计、可切换的 token 契约tokens.css 派生文件 契约报告既可供 Agent 直接消费出产物也可作为自建 AI 产品设计系统的参照模板——从文档、变量到组件夹具每一层都有据可查。【免费下载链接】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），仅供参考