OpenAI 设计系统.
OpenAI 设计系统 — 以深青黑色为基调的简约近单色系统，配以宽松留白和编辑式排版。
在真实场景中查看
同一套设计 token 应用于不同类型的产物——网站、应用、幻灯片、海报。这些是用该系统重新换肤的原创样稿，而非截图。
openai.com
NEW · LIVE PREVIEW
Build something people love.
A mock UI rendered with the OpenAI design tokens — straight from its DESIGN.md.
Get startedLearn more
Fast
Secure
Simple
OpenAI
Today
Make it yours.
OpenAI
Make
it
real.
it
real.
Open DesignDESIGN.md
设计 token
56 个 token，符合 Open Design 的 token 契约——你的 agent 读取的正是这套结构化的配色、字体、间距和动效值，用以为任意产物设定主题。
表面
-
--bg#ffffff -
--surface#f5f5f5 -
--surface-warm#fafafa
文本
-
--fg#0d0d0d -
--fg-2#1a1a1a -
--muted#6e6e6e -
--meta#9b9b9b
边框
-
--border#e5e5e5 -
--border-soft#ededed
强调色
-
--accent#10a37f -
--accent-on#ffffff -
--accent-hover#0a7a5e -
--accent-activecolor-mix(in oklab, var(--accent), black 14%)
语义
-
--success#10a37f -
--warn#f5a623 -
--danger#ef4146
字体排印
-
--font-display"Signifier", "Source Serif Pro", Georgia, ui-serif, serif -
--font-body"Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif -
--font-mono"Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace
字号层级
-
--text-xs12px -
--text-sm13px -
--text-base16px -
--text-lg18px -
--text-xl20px -
--text-2xl28px -
--text-3xl40px -
--text-4xl56px -
--leading-body1.65 -
--leading-tight1.08 -
--tracking-display-0.02em
间距
-
--space-14px -
--space-28px -
--space-312px -
--space-416px -
--space-520px -
--space-624px -
--space-832px -
--space-1248px -
--section-y-desktop96px -
--section-y-tablet64px -
--section-y-phone48px
圆角
-
--radius-sm12px -
--radius-md16px -
--radius-lg16px -
--radius-pill9999px
层级阴影
-
--elev-flatnone -
--elev-ring0 0 0 1px var(--border) -
--elev-raised0 4px 16px rgba(13, 13, 13, 0.06)
聚焦
-
--focus-ring0 0 0 3px rgba(16, 163, 127, 0.12)
动效
-
--motion-fast150ms -
--motion-base220ms -
--ease-standardcubic-bezier(0.16, 1, 0.3, 1)
布局
-
--container-max1200px -
--container-gutter-desktop48px -
--container-gutter-tablet24px -
--container-gutter-phone24px
受 OpenAI 启发的设计系统
Category: AI 与大语言模型 沉静、近乎单色的设计系统，以深青黑为锚点，搭配充裕的留白与编辑风排版。
1. 视觉主题与氛围
OpenAI 的产品界面读起来像一座面向公众开放的研究室——严谨、克制、刻意地安静。页面背景是纯白（#ffffff），与近黑的墨色（#0d0d0d）叠置，后者带有隐约的青色底调，使文字呈现出微微冷感，而非咄咄逼人的深暗。这种无彩色中性感将模型输出、代码与文字推至视觉中心，而非让外框喧宾夺主。
标志性手法是以克制的字重使用 Söhne（或其系统替代字体 inter）——正文用 400，导航与标签用 500，强调用 600——并与 Signifier 搭配，后者是一款当代衬线字体，专用于编辑风展示版面。大多数 AI 品牌倾向于未来感，而 OpenAI 的衬线标题赋予了产品一种悄然的文学气质，仿佛每一篇公告都是一篇随笔。
形状系统统一圆润：8px–12px 圆角，标签与芯片使用 9999px 全圆角胶囊，无处出现生硬的直角。区块之间以留白而非分隔线过渡；当边框出现时，是 #e5e5e5 的细线，读起来像颜色的缺席，而非其存在。
核心特征：
- 纯白画布（
#ffffff）搭配深青黑墨色（#0d0d0d） - Söhne / Inter，字重保守（400、500、600）——克制胜于张扬
- Signifier 衬线字体用于编辑风展示标题
- 全局软圆角 8–12px；芯片使用 9999px 胶囊
- 细线边框（
#e5e5e5）谨慎使用；留白为主要分隔手段 - 深青色单色插图——标志图形中不使用渐变
- 行高宽松（1.55–1.65），字间距接近零
2. 色彩规范与角色
主色
- 纯白 (
#ffffff)：主背景、卡片表面、按钮背景。 - 墨黑 (
#0d0d0d)：主文本、品牌标识、主要行动按钮。 - 柔黑 (
#1a1a1a)：次级标题、非关键文字的备选墨色。
表面与背景
- 薄雾 (
#fafafa)：区块分隔背景、页脚表面。 - 珍珠 (
#f5f5f5)：卡片表面、高层级面板。 - 云白 (
#ececec)：禁用状态背景、分隔色调。
品牌强调色
- OpenAI 青 (
#10a37f)：品牌主色、链接、高亮徽章——在中性系统中唯一的彩色。 - 深青 (
#0a7a5e)：品牌色的悬停与按下状态。 - 浅青 (
#e8f5f0)：成功徽章与高亮提示的底色。
中性色与文字色
- 石墨 (
#3c3c3c)：正文、默认阅读色。 - 板岩 (
#6e6e6e)：次要文字、说明文字、元数据。 - 浅灰 (
#9b9b9b)：三级文字、占位符、禁用标签。 - 石色 (
#c4c4c4)：装饰性分隔线、浅色图标。
语义色与边框
- 细线边框 (
#e5e5e5)：标准细线分隔符。 - 柔边框 (
#ededed)：白色表面上的卡片轮廓。 - 错误 (
#ef4146)：表单校验、破坏性操作。 - 警告 (
#f5a623)：提示性状态的柔和琥珀色。 - 信息 (
#2563eb)：信息类链接色调（谨慎使用；青色仍为首选）。
3. 排版规则
字体族
- 展示 / 编辑风：
Signifier，备用字体：'Source Serif Pro', Georgia, serif - 正文 / UI：
Söhne，备用字体：Inter, system-ui, -apple-system, 'Segoe UI', sans-serif - 代码 / 等宽：
Söhne Mono，备用字体：ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace
层级
| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|---|---|---|---|---|---|---|
| 展示 | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 编辑风主视觉、公告标题 |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 页面标题 |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 区块标题 |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 子区块标题 |
| 大正文 | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 导语段落 |
| 正文 | Söhne | 16px (1rem) | 400 | 1.65 | normal | 标准阅读文字 |
| 小正文 | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 卡片正文、密集 UI |
| 说明 | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 元数据、徽章 |
| 标签 | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 眉题、大写导航链接 |
| 代码 | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 代码块、终端输出 |
原则
- 克制即身份：字重上限为 600；700 及以上会偏离品牌气质。层级通过字号与颜色区分，而非字重。
- 衬线赋予灵魂，无衬线支撑系统：Signifier 仅出现在编辑风展示时刻，产品 UI 全部使用无衬线字体。
- 展示文字负字间距：展示字号使用 -0.02em；16px 时字间距归零。
4. 组件样式
按钮
主要按钮
- 背景：
#0d0d0d - 文字：
#ffffff - 内边距：10px 18px
- 圆角：芯片使用 9999px（全胶囊），矩形行动按钮使用 12px
- 悬停：背景
#1a1a1a - 用途：主要行动按钮、“体验 ChatGPT”、“登录”
次要按钮
- 背景：
#ffffff - 文字：
#0d0d0d - 边框：1px solid
#e5e5e5 - 内边距：10px 18px
- 圆角：12px
- 悬停：背景
#fafafa，边框#d4d4d4
品牌强调按钮
- 背景：
#10a37f - 文字：
#ffffff - 内边距：10px 18px
- 圆角：12px
- 悬停：
#0a7a5e - 用途：高亮升级行动按钮、成功路径
卡片
- 背景：
#ffffff - 边框：1px solid
#ededed - 圆角：16px
- 内边距：24px–32px
- 阴影：默认无；悬停时
0 4px 16px rgba(13,13,13,0.06)
输入框
- 背景：
#ffffff - 边框：1px solid
#e5e5e5 - 圆角：12px
- 内边距：12px 14px
- 聚焦：边框
#10a37f，光晕0 0 0 3px rgba(16,163,127,0.12)
胶囊与标签
- 背景：
#f5f5f5 - 文字：
#3c3c3c - 内边距：4px 10px
- 圆角：9999px
- 字体：12px / 500
5. 间距与布局
- 基础单位：4px。尺度：4、8、12、16、24、32、48、64、96、128。
- 容器：最大宽度 1200px，移动端 24px 间距，桌面端 48px。
- 区块节奏：主要区块之间纵向间距 96–128px；移动端 64px。
- 栅格：桌面端 12 列，移动端 4 列，间隙 24px。
6. 动效
- 时长：悬停 150–220ms；布局过渡 280–360ms。
- 缓动曲线：入场动画使用
cubic-bezier(0.16, 1, 0.3, 1)（平滑出）。 - 克制原则：无视差效果，无滚动劫持。仅使用细微的淡入与位移。
7. 使用约束
- 需同时保留中性编辑克制感、软圆角与稀少的强调色这三者；仅靠绿色强调色无法营造出 OpenAI 风格的界面。
- Signifier 风格的展示用法仅限于编辑风或公告层级，产品控件保持在无衬线字体体系内。
- 避免装饰性动效、厚重阴影与过大的装饰性卡片；整套系统应呈现出沉静、易读、从容的气质。
标签
design-systemfirst-partydesignai-llm