OpenDesign Figma 设计系统解析黑白画布上的可变字体排版与胶囊几何实战指南【免费下载链接】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灵感源自 Figma 的设计系统Design Creative 类别是 OpenDesign 设计系统库中的一个完整可复用品牌包。本指南以design-systems/figma/DESIGN-zh.md为骨架结合仓库内的 tokens.css、components.html、design-tokens.json 与 tailwind-v4.css 等源码级产物系统讲解该系统的视觉哲学、色彩与排版规则、组件规格、布局与响应式策略并给出可直接复用的 CSS Token 绑定、Tailwind v4 映射和智能体提示模板。读完本文你可以完整复刻一套黑白界面外壳 多彩产品内容的 Figma 风格站点也能理解 OpenDesign 设计系统包从规格文档到可运行 Token 的落地链路。1. 系统概览为什么 Figma 的设计系统值得单独成包在 OpenDesign 的设计系统目录design-systems/中figma是一个被完整打包的品牌系统它不仅有一份规格文档还附带了结构化 Token 样式表、组件清单、预览页与审计报告。从 manifest.json 可以看到该包的importMode为normalized核心文件包括规格文档DESIGN.md及多语言版本DESIGN-zh.md等定义视觉意图、约束与反模式Token 绑定tokens.css唯一事实来源与派生产物design-tokens.json、tailwind-v4.css组件实现components.html参考组件 fixture与components.manifest.json组件清单预览与审计preview/下的 colors/typography/spacing 三页可视化校验source/token-contract.report.json逐条映射 Token 声明来源。Figma 系统在美学上的核心命题是一组二元对立界面外壳严格黑白字面上只有#000000与#ffffff而英雄区与产品展示区则爆发出电光绿、亮黄、深紫、热粉的多色渐变。正如 tokens.css 头部注释所总结的Monochrome interface absolutely — pure black for all text, borders, and solid buttons; pure white for all backgrounds; no mid-tones in the chrome layer whatsoever。设计系统本身是无色的它把产品的多彩输出当作核心内容——营销页面本质上是一面陈列彩色艺术作品的白色画廊墙。2. 核心视觉特征可变字重、黑白外壳与胶囊几何DESIGN-zh 文档列出的核心特征每一项都在仓库源码中得到了对应实现特征规格来源源码佐证自定义可变字体 figmaSans非常规字重停驻点 320/330/340/450/480/540/700DESIGN 第 1 节tokens.css字体栈、components.html中font-weight: 330/480/540的实际使用严格黑白的界面外壳DESIGN 第 1、2 节tokens.css中--fg: #000000、--bg: #fffffffigmaMono 大写技术标签 宽字母间距DESIGN 第 1 节components.html.mono-labelletter-spacing: 0.54px胶囊50px与圆形50%按钮几何DESIGN 第 1 节components.html中border-radius: var(--radius-sm) 50px虚线 2px 聚焦轮廓DESIGN 第 1 节components.html.btn:focus-visible { outline: 2px dashed var(--fg) }OpenTypekern全局启用DESIGN 第 1 节components.htmlbody 与.btn、.tab均声明font-feature-settings: kern全局负字母间距正文 -0.14px 至 -0.26pxDESIGN 第 1 节.lead使用letter-spacing: -0.007emh2/h3 使用负 em 值可变字体是这套系统的设计本体。文档强调figmaSans 在极细320与粗体700之间无缝切换并在大多数字体系统从不涉足的中间值330、340、450、480、540处设有停驻点。330 与 340 之间的差异几乎无法察觉却在结构上意义重大——层级通过微小差异构建而非常规与粗体这种粗放手段。这在components.html中有直接体现卡片标题h3使用font-weight: 540正文.lead使用font-weight: 330功能卡片标题使用font-weight: 700而页面 h1/h2 基重为 400。3. 色彩方案二元色板与渐变系统3.1 主色与表面DESIGN 文档将 Figma 的色彩系统描述为纯粹的二元体系纯黑#000000所有文字、实色按钮、边框——界面唯一的颜色纯白#ffffff所有背景、白色按钮、深色表面上的文字玻璃黑rgba(0, 0, 0, 0.08)次要圆形按钮的微妙深色叠加源码中对应--accent-active玻璃白rgba(255, 255, 255, 0.16)深色/彩色表面上按钮的磨砂玻璃叠加。在tokens.css中这套二元系统被编码为结构化的语义 Token:root { /* ─── Surface ─────────────────────────────────────────────── */ --bg: #ffffff; --surface: #ffffff; /* gallery wall — no surface tint */ --surface-warm: var(--surface); /* no warm tier in BW system */ /* ─── Foreground ───────────────────────────────────────────── */ --fg: #000000; --fg-2: #000000; /* BW — no secondary ink tier */ --muted: rgba(0, 0, 0, 0.55); /* secondary text on white */ --meta: rgba(0, 0, 0, 0.40); /* metadata, captions */ /* ─── Border ───────────────────────────────────────────────── */ --border: rgba(0, 0, 0, 0.12); /* minimal — only where structurally needed */ --border-soft: rgba(0, 0, 0, 0.06); /* ─── Accent ───────────────────────────────────────────────── */ /* In a strictly BW system, black IS the accent (solid CTA). */ --accent: #000000; --accent-on: #ffffff; --accent-hover: rgba(0, 0, 0, 0.85); --accent-active: rgba(0, 0, 0, 0.08); /* glass dark — secondary button bg */ }需要注意几个从源码中可确认的设计决策--surface-warm直接别名--surface黑白系统没有暖色调层级--fg-2与--fg同为纯黑没有次级墨色层级黑色本身就是强调色--accent: #000000这与大多数强调色取高饱和彩色的系统截然不同。design-tokens.json的审计摘要也印证了这一结构56 个 Token 全部有源码支撑分为 A1-identity身份层8 个、A1-structure结构层18 个、A226 个与 B-slot4 个四层综合评分 100、评级 excellent。3.2 渐变系统与语义色英雄渐变电光绿、亮黄、深紫、热粉构成的多停驻点渐变是英雄区的视觉标志——代表工具无限的创意可能产品区域渐变Design、Dev Mode、Prototyping 等产品区域可使用各自独特的色彩主题。有趣的是仓库同时保留了语义状态色--success: #16a34a、--warn: #eab308、--danger: #dc2626说明黑白外壳之下仍需要必要的功能状态表达如表单校验、加载提示这些颜色不用于装饰而用于传达状态语义。4. 排版规则可变字重的精准控制4.1 字体族主字体figmaSans备选figmaSans Fallback, SF Pro Display, system-ui, helvetica等宽体/标签figmaMono备选figmaMono Fallback, SF Mono, menlo。在tokens.css中对应为--font-display: figmaSans, figmaSans Fallback, SF Pro Display, system-ui, Helvetica, sans-serif; --font-body: figmaSans, figmaSans Fallback, SF Pro Display, system-ui, Helvetica, sans-serif; --font-mono: figmaMono, figmaMono Fallback, SF Mono, Menlo, ui-monospace, monospace;4.2 完整层级表继承自 DESIGN-zh 文档角色字体尺寸字重行高字母间距备注展示/英雄figmaSans86px (5.38rem)4001.00紧凑-1.72px最大冲击力极端字距区块标题figmaSans64px (4rem)4001.10紧凑-0.96px功能区块标题副标题figmaSans26px (1.63rem)5401.35-0.26px强调区块文字轻量副标题figmaSans26px (1.63rem)3401.35-0.26px轻字重区块文字功能标题figmaSans24px (1.5rem)7001.45normal粗体卡片标题大号正文figmaSans20px (1.25rem)330–4501.30–1.40-0.1px 至 -0.14px描述、引言正文/按钮figmaSans16px (1rem)330–4001.40–1.45-0.14px 至 normal标准正文、导航、按钮轻量正文figmaSans18px (1.13rem)3201.45-0.26px 至 normal轻字重正文等宽标签figmaMono18px (1.13rem)4001.30紧凑0.54px大写区块标签等宽小号figmaMono12px (0.75rem)4001.00紧凑0.6px大写微型标签在tokens.css中类型刻度被编码为--text-xs: 12px到--text-4xl: 86px的 Token并配套--leading-tight: 1.0086px 英雄区行高、--tracking-display: -0.02em -1.72px / 86px 归一化等排印控制参数。components.html中的实际实现与文档精确对齐h1 使用var(--text-4xl)与var(--tracking-display)h2 为 64px/行高 1.10/字距 -0.015emh3 为 26px/行高 1.35/字距 -0.01em/字重 540。4.3 排版原则源码可验证的 5 条铁律可变字体精准性使用 320、330、340、450、480、540 等非常规停驻点通过微差构建层级轻体为基础多数正文用 320–340比典型 400常规更轻营造空灵通透的阅读体验处处字距微调所有文字元素启用 OpenTypekern——字距微调不是可选项而是结构性要求components.html在body、h1/h2/h3、.btn、.tab中均声明font-feature-settings: kern默认负字距正文使用 -0.1px 至 -0.26px 字母间距展示文字进一步压缩至 -0.96px 与 -1.72px等宽字体用于结构figmaMono 大写 正字母间距0.54px–0.6px承担技术指示牌标签角色。5. 组件规格按钮、标签栏、卡片与焦点指示5.1 四态按钮矩阵完整继承自 DESIGN-zh按钮类型背景文字圆角内边距聚焦用途黑色实色胶囊#000000#ffffff圆形50%用于图标按钮—虚线 2px最强调 CTA白色胶囊#ffffff#000000胶囊50px8px 18px 10px不对称垂直虚线 2px深色/彩色表面上的标准 CTA玻璃深色rgba(0,0,0,0.08)纯黑圆形50%—虚线 2px浅色表面上的次要操作玻璃浅色rgba(255,255,255,0.16)纯白圆形50%—虚线 2px深色/彩色表面上的次要操作components.html中的.btn-black/.btn-white给出了可复制的实现基础.btn类使用border-radius: var(--radius-sm)50px 胶囊、font-feature-settings: kern、transition: background-color var(--motion-fast) var(--ease-standard)150ms / cubic-bezier(0.2, 0, 0, 1)聚焦态通过:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px }实现。5.2 产品标签栏Tab Bar水平胶囊标签50px 圆角每个标签代表一个产品区域Design、Dev Mode、Prototype、Slides激活态黑底白字.tab.active { background: var(--fg); color: var(--accent-on) }非激活态透明底黑字.tab { background: transparent; color: var(--fg) }悬停叠加rgba(0,0,0,0.06)标签文字使用 figmaSans 20px 字重 480components.html中.tab的font-weight: 480即对应 DESIGN 文档的20px figmaSans 字重 480示例提示。5.3 卡片与虚线焦点指示器卡片白底、border-radius: var(--radius-md)8px、padding: var(--space-6)24px、box-shadow: var(--elev-raised)0 4px 16px rgba(0,0,0,0.08)虚线聚焦所有交互元素聚焦时使用dashed 2px轮廓引用 Figma 编辑器中的选择手柄——这是一种把网站与产品相连接的元设计选择。components.html头部注释明确写道 Figmas signature: dashed 2px outline encoded at component level而--focus-ring0 0 0 2px rgba(0,0,0,0.8)仅作为键盘导航的兜底阴影。根据 components.manifest.json 的组件分组审计该 fixture 包含 34 个选择器、17 个类、19 个元素覆盖 buttons、inputs、cards、links、icons、typography、layout 七个组件组badges 与 keyboard 组未实现。6. 布局与间距8px 基准、画廊式留白与圆角比例6.1 间距系统基础单位8px完整刻度1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px。在tokens.css中对应--space-1: 4px至--space-12: 48px的结构化间距 Token并额外提供区块节奏参数桌面--section-y-desktop: 96px、平板--section-y-tablet: 64px、手机--section-y-phone: 40px。components.html用section { padding-block: var(--section-y-desktop) }与section section { border-top: 1px solid var(--border) }实现画廊式分区节奏——每个产品区块如同独立展品般自由呼吸。6.2 网格与容器最大容器宽度1920px--container-max容器内边距gutter桌面 40px / 平板 24px / 手机 16px英雄区全宽渐变、内容居中产品区交替展示页脚深色全宽区块响应式范围559px 至 1920px。components.html中的.container、.hero-grid桌面两列1023px 以下单列、.features-grid桌面三列 → 平板两列 → 手机单列提供了上述规则的直接实现样例。6.3 圆角比例档位数值用途极小2px小型链接元素微妙6px小型容器、分隔线舒适8px卡片、图片、对话框胶囊50px标签按钮、CTA圆形50%图标按钮、圆形元素对应 Token--radius-sm: 50px胶囊——所有交互元素、--radius-md/--radius-lg: 8px卡片容器、--radius-pill: 9999px。6.4 深度与层次层级处理方式用途平坦层级 0无阴影页面背景、大多数文字表面层级 1渐变/深色区块上的白色卡片卡片、产品展示抬升层级 2微妙阴影悬浮卡片、悬停状态阴影哲学Figma 节制地使用阴影主要深度机制是背景对比彩色/深色区块上的白色内容以及产品截图本身固有的立体感。tokens.css只提供三个层级 Token--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 4px 16px rgba(0,0,0,0.08)从侧面证实了这一克制。7. 应为与不为给实现者与智能体的硬性约束应为使用 figmaSans 配合精准的可变字重320–540——细粒度字重控制即是设计本身保持界面严格的黑白配色——颜色仅来自产品内容对所有交互元素使用胶囊50px和圆形50%几何造型应用虚线 2px 聚焦轮廓——标志性的无障碍模式在所有文字上启用kern特性将 figmaMono 以大写形式配合正字母间距用于标签全局应用负字母间距-0.1px 至 -1.72px。不为不要添加界面颜色——单色调色板是绝对的不要使用标准字重400、500、600、700——使用可变字体的独特停驻点320、330、340、450、480、540不要在按钮上使用尖锐角落——仅使用胶囊和圆形几何造型不要使用实线聚焦轮廓——虚线才是标志不要将正文字重提高至 450 以上——轻字重美学是核心不要在正文使用正字母间距——它始终为负值。USAGE.md 还补充了面向实现者的三条工程约束保留 schema Token 名称以保证跨品牌切换可靠避免在复制的:rootToken 块之外使用裸 hex 值不要绕过tokens.css独立重新定义 Tailwind 或设计 Token 值。8. 响应式策略断点与折叠行为断点名称宽度主要变化小屏手机560px紧凑布局堆叠排列平板560–768px微调小桌面768–960px两列布局桌面960–1280px标准布局大桌面1280–1440px扩展超宽屏1440–1920px最大宽度折叠策略英雄文字86px → 64px → 48px产品标签移动端水平滚动功能区块堆叠单列页脚多列 → 堆叠。从components.html的实现看仓库实际采用 1023px 与 639px 两个媒体查询断点来驱动容器 gutter40→24→16px、区块纵向节奏96→64→40px与栅格列数hero 2→1 列、features 3→2→1 列的降级与文档的断点体系在语义上保持一致。9. 从规格到代码OpenDesign 包的三层落地链路Figma 包的工程化价值在于它把设计文档翻译成了三层可消费产物source/evidence.md明确记录了这条链路规格层DESIGN.md含多语言版本承载视觉意图、约束与反模式是唯一事实来源之一Token 层tokens.css声明全部 CSS 自定义属性source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定逐条映射回tokens.css的声明行design-tokens.json汇总 56 个 Token 及其置信度与来源tailwind-v4.css通过theme块将 Token 重新暴露为 Tailwind 主题变量如--color-fg、--font-sans、--spacing-section-desktop、--radius-pill、--shadow-raised组件层components.html提供可运行的参考实现components.manifest.json提供组件清单34 个选择器、7 个组件组供智能体在发明新控件前优先复用。这套文档 → Token → 组件的三层结构正是 OpenDesign 设计系统包的标准契约schemaVersion: od-design-system-project/v1开发者或智能体只需粘贴tokens.css到首个产物style块再依据components.manifest.json组装组件即可快速复刻完整的 Figma 风格界面。10. 智能体提示指南可直接使用的 Prompt 模板DESIGN-zh 文档最后提供了面向智能体的快速参考这里完整保留并补充实现要点快速颜色参考全部「纯黑#000000」与「纯白#ffffff」玻璃深色「rgba(0, 0, 0, 0.08)」玻璃浅色「rgba(255, 255, 255, 0.16)」示例组件提示在鲜活的多色渐变绿、黄、紫、粉上创建一个英雄区。标题为 86px figmaSans 字重 400行高 1.0字母间距 -1.72px。白色文字。白色胶囊 CTA 按钮50px 圆角8px 18px 内边距。设计一个带胶囊形按钮的产品标签栏50px 圆角。激活态黑色背景白色文字。非激活态透明黑色文字。figmaSans 20px 字重 480。构建一个区块标签figmaMono 18px大写字母间距 0.54px黑色文字。启用字距微调。创建 20px figmaSans 字重 330 的正文行高 1.40字母间距 -0.14px。白底纯黑文字。迭代指南精确使用可变字体字重停驻点320、330、340、450、480、540、700界面始终黑白——绝不为外壳添加颜色虚线聚焦轮廓不用实线正文字母间距始终为负等宽标签始终为正按钮/标签用胶囊50px图标按钮用圆形50%。工程落地建议将这些提示与tokens.css结合使用时直接把 Token 块粘贴进产物style即可保证数值一致性需要 Tailwind 场景时引入 tailwind-v4.css 的theme映射视觉回归可通过 preview/colors.html、preview/typography.html、preview/spacing.html 三页快速目检。11. 延伸阅读中文规格原文design-systems/figma/DESIGN-zh.md英文版见 DESIGN.md包使用契约design-systems/figma/USAGE.mdToken 样式表design-systems/figma/tokens.css参考组件实现design-systems/figma/components.html 与组件清单 components.manifest.jsonToken 审计与派生产物design-tokens.json、tailwind-v4.css、source/token-contract.report.json同目录下其他品牌的系统包airbnb、apple、stripe、vercel 等与总览文档 design-systems/README.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），仅供参考