OpenDesign Cafe 设计系统实战暖调咖啡馆风格的视觉规范、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本文围绕 OpenDesign 仓库内 design-systems/cafe/DESIGN.md 展开系统讲解 Cafe 这一「Creative Artistic」类别设计系统的完整技术落地路径从视觉意图、语义色板、排版与间距规范到 56 个 CSS Token 的实现绑定、组件配方、Tailwind v4 映射以及 Design System 2.0 包契约与审计工作流。读完你可以直接在本地把 Cafe 风格应用到 Agent 生成的原型、落地页或仪表盘中并理解如何用仓库内的清单与契约报告做一致性校验。1. Cafe 在 OpenDesign 设计系统生态中的定位Cafe 是 OpenDesign 仓库design-systems/目录下众多风格包之一归属于Creative Artistic创意与艺术类别其定位是以咖啡馆为灵感的暖调界面——温暖色调、柔和排版、干净布局营造放松的浏览体验。从 design-systems/cafe/manifest.json 可以看到该包采用od-design-system-project/v1模式版本被标记为 Bundled OpenDesign package即基于 OpenDesign 官方整理的捆绑 fixture 生成而非实时抓取上游品牌站点。包内文件按职责划分为文件职责DESIGN.md视觉意图、约束与反模式设计规范主体tokens.css56 个实现级 CSS 变量绑定唯一事实源design-tokens.json派生 token 清单含分层与置信度tailwind-v4.cssTailwind v4theme映射派生components.html参考组件实现选择器与状态components.manifest.json组件清单分组、选择器、token 引用USAGE.md面向 Agent 与评审者的使用手册source/审计证据token 契约报告与源追踪preview/colors / typography / spacing 三个视觉检查页值得注意manifest.json的craft字段建议该风格包配套应用 color 与 accessibility-baseline 两条 craft 规范这为后续在界面中做可访问性检查提供了官方指引。2. 视觉主题与设计意图DESIGN.md 开篇用一句话定义了 Cafe 的视觉主题Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.暖调咖啡馆风格界面温暖色调、柔和排版、干净布局营造放松的浏览体验。其设计意图被明确为让输出结果始终可被识别为这一风格家族同时保持可用性与可读性。三个关键属性视觉风格minimal极简、clean干净色彩立场primary、neutral、success、warning、danger语义色齐全设计意图在风格辨识度与实用性之间取得平衡对应到组件实现components.html 中的 hero 区文案 Hospitality menu board 与 Warm cafe commerce, menu cards, reservation controls, and cozy editorial atmosphere 直接示范了这种咖啡馆待客气质——这提示在实际生成页面时从文案、配图到配色都应围绕温暖、待客、放松展开而不是简单套一层暖色滤镜。3. 色彩体系从语义色板到 Token 绑定3.1 DESIGN.md 声明的语义色板DESIGN.md 定义了 Cafe 的语义色彩角色均标注为 Token from style foundations即风格基础 Token角色色值用途建议Primary#5D4432CTA 强调按钮主操作Secondary#E9E3DD次级元素Success#16A34A成功状态Warning#D97706警告状态Danger#DC2626危险状态Surface#F9F7F5大面积背景与卡片Text#3E2B1E正文保证可读性Neutral#F9F7F5由 surface token 派生兼容官方格式DESIGN.md 同时给出三条使用规则Favor Primary#5D4432用于 CTA 强调——主操作按钮、链接与焦点信号使用 Surface#F9F7F5做大面积背景与卡片——保持底色的低饱和暖感正文保持 Text#3E2B1E以保证可读性——深褐接近咖啡色避免高对比刺眼。3.2 tokens.css 中的实现级绑定DESIGN.md 描述的是面向视觉意图的语义命名而实际实现以 design-systems/cafe/tokens.css 为准。tokens.css 采用系统化命名--bg、--surface、--accent等其关键色值如下:root { --bg: #fbf6ee; /* 页面底色奶油白 */ --surface: #fffdf8; /* 卡片/面板表面 */ --surface-warm: #f1e3cf; /* 暖色表面mini-card 等 */ --fg: #201914; /* 前景/正文主色 */ --fg-2: #4c4037; /* 次级前景lead 文本等 */ --muted: #7a6d63; /* 弱化文本 */ --meta: #9b5b32; /* 元信息eyebrow 等 */ --border: #ded2c3; /* 常规边框 */ --border-soft: #eee4d7; /* 柔和边框 */ --accent: #9b5b32; /* 强调色主操作、焦点、链接 */ --accent-on: #ffffff; /* 强调色上的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #4f8a4f; --warn: #c9822f; --danger: #b33a3a; }从实现细节看有两个关键设计hover/active 用color-mix(in oklab, ...)派生而不是再写死两个 hex——这保证了整条强调色链路随--accent统一变化是设计-token 体系中派生而非硬编码的直接体现--accent与--meta共用#9b5b32让强调色与元信息色在色相上保持一致形成克制的单强调色系统。USAGE.md 对此有硬性约束避免在复制的:roottoken 块之外使用裸 hex 值一切颜色引用都应走 CSS 变量也不要脱离 tokens.css 单独重新定义 Tailwind 或 design-token 值否则会破坏跨品牌切换的一致性。4. 排版体系desktop-first expressive scaleCafe 的排版规范在 DESIGN.md 中定义为Scaledesktop-first expressive scale桌面优先的表现型字号阶梯FamiliesprimaryPoppins、displayPoppins、monoJetBrains MonoWeights100–900 全字重原则标题承载风格个性正文优先保证可扫描性与对比度而 tokens.css 中实际生效的字体系列与字号阶梯注意tokens.css 是捆绑 fixture 的实现值与 DESIGN.md 的品牌化命名存在差异两者分别服务于意图描述与实现绑定两个层面--font-display: Georgia, Times New Roman, serif; /* 展示/标题字体 */ --font-body: Inter, system-ui, sans-serif; /* 正文字体 */ --font-mono: SF Mono, ui-monospace, Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 17px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 42px; --text-3xl: 64px; --text-4xl: 88px; --leading-body: 1.62; /* 正文行高 */ --leading-tight: 1; /* 标题行高 */ --tracking-display: -0.025em; /* 标题字距 */在 components.html 中可以观察到这套阶梯的用法h1用--text-4xl88px--font-display--leading-tight--tracking-display形成表现力强的展示标题正文body用--font-body--text-base17px--leading-body1.62保证长篇可读性.eyebrow眉题用--font-mono--text-xs 大写 0.12em字距塑造菜单式的编辑气质.lead引导段用--text-lg--fg-2与标题形成层级差。这种展示字体 系统无衬线正文 等宽眉题的三层字体结构正是 DESIGN.md「标题承载个性、正文保证扫描性」原则的具体化。5. 间距与栅格DESIGN.md 规定的间距刻度为2/4/8/12/16/24/32/48并强调跨区块与组件保持一致的垂直节奏列与模块对齐到可预期的栅格避免随意偏移。tokens.css 将其落实为--space-*系列从 4px 到 48px其中--space-1: 4px起跳--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;配套的还有区块纵向节奏与容器栅格--section-y-desktop: 112px; --section-y-tablet: 80px; --section-y-phone: 56px; --container-max: 1180px; --container-gutter-desktop: 36px; --container-gutter-tablet: 24px; --container-gutter-phone: 16px;components.html 中对应的响应式策略非常清晰.container使用max-width: var(--container-max)margin-inline: autosection使用padding-block: var(--section-y-desktop)在max-width: 1023px断点切换到 tablet 档、在max-width: 639px断点切换到 phone 档。这套一个 token、三个断点的写法保证了不同设备上的节奏感一致。6. 布局与构成DESIGN.md 对布局与构成给出三条原则偏好清晰的内容块内部内边距保持一致层级必须明显headline标题→ support text支撑文本→ primary action主操作先用留白区隔内容再考虑加边框或阴影。components.html 示范了具体的布局原子.hero双列栅格grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)左侧文本栈、右侧面板.stack * *用margin-block-start实现纵向堆叠间距.metric-grid/.card-row/.lower三列或双列的指标区、卡片区与底部区块.page用linear-gradient(135deg, #fbf6ee, #fffdf8, #f1e3cf)营造由浅到暖的页面背景氛围。注意布局对层级的实现hero 中 eyebrow眉题→ h1大标题→ lead引导段→ actions按钮组依次排布正是 DESIGN.md 要求的 headline → support text → primary action 的标准化顺序。7. 组件规范与参考实现DESIGN.md 的组件章节给出三条约束主按钮用 Primary 色、次级操作保持中性输入框要有强 focus-visible 状态、清晰标签与可预期的错误提示卡片/区块保持一致的圆角、间距与高度策略。components.manifest.json 将参考实现归纳为 9 个组件组其中 keyboard、icons 两组为present: false即本风格未提供组件组是否提供核心选择器 / 类buttons按钮与 CTA✅.btn、.btn-primary、.btn-secondary、:hover、:focus-visibleinputs表单字段✅.field、input、input:focus、labelcards卡片与面板✅.panel、.panel-head、.tile、.card-row、.mini-cardbadges徽标/状态✅.status含::before指示点links链接✅akeyboard键盘提示❌—icons图标槽位❌—typography排版工具✅.eyebrow、.lead、h1–h3layout布局原语✅.container、section、.metric-grid7.1 按钮.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); transition: background-color var(--motion-fast) var(--ease-standard), ...; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }主/次按钮形成清晰的对比主按钮用--accent填充 --accent-on前景次按钮退到 surface 底色 边框 ring 阴影translateY(-1px)的悬停位移则保持克制的动效语言。7.2 输入框.field { display: grid; gap: var(--space-2); } label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; } input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; } input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }输入框的焦点态复用全局--focus-ring0 0 0 4px rgba(155, 91, 50, 0.24)并把边框切到--accent与按钮的:focus-visible用同一套交互信号满足 DESIGN.md「焦点状态必须显式」的要求。7.3 卡片与面板.panel使用color-mix(in oklab, var(--surface), transparent 4%)背景 --border边框 --radius-lg--elev-raised阴影.panel-head用--border-soft分隔头部与内容.mini-card使用暖表面--surface-warm承载色板与控件预览。圆角体系在 tokens.css 中为--radius-sm: 10px、--radius-md: 16px、--radius-lg: 24px、--radius-pill: 9999px。7.4 状态徽标.status是 Cafe 的在线状态组件等宽字体 大写 8px 的::before圆点用--radius-pill渲染圆点颜色取--success文本取--meta把状态语义与暖调美学统一起来。7.5 未使用 token 提示manifest 同时暴露了一个有价值的审计信息unusedDeclared列出的 token--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn在参考组件中未被引用而undeclaredReferenced为空——说明组件实现 100% 建立在声明的 token 之上没有幽灵引用。这是判断一个设计系统是否自洽的重要检查维度。8. 动效与交互DESIGN.md 的动效章节要求使用克制、有目的的过渡150–250ms配合稳定缓动强调色#5D4432实现中即--accent作为交互信号hover、focus-visible、active、disabled、loading 状态必须显式。tokens.css 中的动效 token 为--motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);components.html 中按钮的transition将background-color / border-color / color / transform / box-shadow统一挂到--motion-fast--ease-standard上鼠标悬停时只有 1px 的位移与色值变化不引入旋转、缩放等喧宾夺主的装饰——这符合 DESIGN.md 反模式中「不要添加降低可读性或可访问性的装饰效果」的要求。9. 语态与品牌DESIGN.md 对文案语气提出四点要求语气应与视觉风格一致简洁、自信、产品相关微文案以行动为导向避免泛泛的填充语标题保留风格个性UI 标签保持直白清晰反模式不要在同一界面混入无关的视觉隐喻。在 components.html 中可以看到示范大标题 Hospitality menu board、引导语 Warm cafe commerce, menu cards, reservation controls, and cozy editorial atmosphere.、状态文案 online、指标 Signal quality / Active flows / Response time——标题有咖啡馆隐喻但控件标签Primary action、Reference input完全直白正是标题有风格、标签要字面的执行样本。10. 反模式清单Anti-patternsDESIGN.md 在末尾用四条反模式约束生成质量这是评审 Agent 输出时的重要检查项不引入偏离调色板的颜色——已有 token 能解决问题时禁止新造色值不用相同字号/字重压平层级——所有文本同规格会导致层级扁平不添加降低可读性或可访问性的装饰效果——装饰不得以牺牲阅读为代价不在同一界面混用无关视觉隐喻——保持风格家族的一致性。11. 落地工作流USAGE.md 的包契约design-systems/cafe/USAGE.md 是面向 OpenDesign Agent 与评审者的官方使用手册推荐阅读与接入顺序先读 USAGE.md理解包契约再读 DESIGN.md掌握视觉意图、约束与反模式把 tokens.css 粘贴到第一个 artifact 的style块中在编写组件 CSS 之前用 components.manifest.json 做组件清单速查涉及精确选择器或状态时打开 components.html需要视觉检查时浏览 preview/ 页面colors.html / typography.html / spacing.html。手册同时给出 Do / Avoid 清单Do严格保留 schema token 名称保证跨品牌切换可靠用--accent承载主操作、链接、焦点态与唯一焦点元素优先复用 manifest 中的组件组而不是自创新控件把source/目录视为捆绑 fixture 回填的审计证据。Avoid避免在复制的:roottoken 块之外使用裸 hex避免脱离 tokens.css 独立重定义 Tailwind 或 design-token 值避免声称存在原始上游源码证据本包基于 curated bundled fixture避免新增 components.html 或 DESIGN.md 未覆盖的组件配方。12. Token 契约与审计体系Cafe 包的实现级数据在 design-tokens.json 与 source/token-contract.report.json 中有完整的机器可读记录总量56 个 token声明 56 个全部有源码背书source-backed其中 26 个来自 A1 层直接声明、26 个为回填fallback分层结构A1-identity8 个品牌身份bg/surface/fg/muted/border/accent/字体、B-slot4 个槽位surface-warm/fg-2/meta/border-soft、A226 个派生与组件层、A1-structure18 个字号/行高/间距/容器等结构 token契约评分score 100、grade excellent、recommendRebuild: false表示 token 与源码完全对齐无需重建溯源每个 token 都带sources字段精确指向 tokens.css 的声明行如tokens.css:7source/tokens.source.json 提供同样的源追踪视图。source/evidence.md 明确说明本包来源于 OpenDesign 官方整理的捆绑 fixture并未声称对上游品牌仓库/网站进行重新抓取——因此在引用时不应把 token 值当作上游品牌官方色板。同时它强调design-tokens.json与tailwind-v4.css是派生产物应基于报告与 tokens.css 重新生成而不是手工编辑。13. Tailwind v4 集成对于使用 Tailwind v4 的落地场景tailwind-v4.css 提供了完整的theme映射把 tokens.css 的变量桥接到 Tailwind 设计令牌命名空间import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-accent: var(--accent); --color-accent-on: var(--accent-on); --color-success: var(--success); --color-warn: var(--warn); --color-danger: var(--danger); --font-display: var(--font-display); --font-body: var(--font-body); --font-sans: var(--font-body); --font-mono: var(--font-mono); --text-base: var(--text-base); --text-2xl: var(--text-2xl); --spacing-4: var(--space-4); --radius-lg: var(--radius-lg); --shadow-raised: var(--elev-raised); --shadow-focus-ring: var(--focus-ring); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); --container-max: var(--container-max); /* ... */ }文件头部的注释 Derived from tokens.css. Keep tokens.css as the source of truth. 再次强调tokens.css 是唯一事实源。接入 Tailwind 后即可在 JSX/模板里直接使用bg-surface、text-accent、font-display、rounded-lg、shadow-raised等工具类同时保持与原生 CSS 变量同一套数值。14. 总结Cafe 风格的完整应用路径将 DESIGN.md 与配套文件串起来Cafe 的完整应用路径可以归纳为四步建立 token 基础把 tokens.css 注入 artifact 的首个style块获得色彩、字体、间距、圆角、阴影、动效与容器七大类共 56 个变量复用组件配方依据 components.manifest.json 的按钮、输入、卡片、状态徽标等 7 个提供组对照 components.html 精确还原选择器与状态遵守意图与反模式以 DESIGN.md 的「Primary 强调 CTA、Surface 铺底、Text 保证可读、150–250ms 克制动效、不引入调色板外颜色」为生成与评审红线校验一致性通过 design-tokens.json 与 source/token-contract.report.json 确认所有引用都有 token 背书本包契约评分 100/100需要时用 preview/ 页面做视觉抽查并参考 color 与 accessibility-baseline 两条 craft 规范补齐对比度与可访问性检查。这条路径同时适用于两种使用者Agent 侧按 USAGE.md 顺序接入即可稳定产出 Cafe 风格的原型/落地页评审者侧则可借助组件清单、未使用 token 提示与契约报告快速审计输出是否偏离风格家族。需要注意的是本文所有色值与文件依据均来自当前仓库的捆绑 fixture若需对外发布品牌级应用建议以正式品牌资产为准。【免费下载链接】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），仅供参考