OpenDesign 设计系统实战以 Duolingo 为灵感的游戏化视觉语言猫头鹰绿、厚实投影与大字号排版【免费下载链接】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/duolingo/DESIGN-uk.md乌克兰语版与英文版 DESIGN.md 内容一致为骨架结合同目录下的tokens.css、components.html、components.manifest.json与USAGE.md等源码与配置完整解析Duolingo 灵感设计系统的视觉主题、色彩令牌、字体排印、组件样式、间距布局与动效规范并给出在 OpenDesign Agent 产物中直接落地使用的操作路径。读完本文你将掌握一套可复制的游戏化 SaaS设计语言如何用猫头鹰绿主色、4px 厚实底部投影、大号圆润粗体字营造出像 3D 按钮一样想按下去的触觉界面。一、这是什么OpenDesign 中的 Duolingo 灵感设计系统在 OpenDesign 仓库的design-systems/duolingo/目录下存放着一套完整打包的Design System 2.0包其定位是Productivity SaaS生产力与 SaaS类别的参考设计系统灵感来源于语言学习平台 Duolingo——语言学习平台。明亮的猫头鹰绿、厚实投影、游戏化的愉悦感。整个包由以下文件组成见 manifest.json 中的files声明文件作用DESIGN.md/DESIGN-uk.md等多语言版视觉意图、约束与反模式的权威规范Design 契约tokens.css结构化 CSS 自定义属性令牌绑定落地实现的唯一事实来源source of truthdesign-tokens.json由tokens.css派生的设计令牌 JSONtailwind-v4.css派生的 Tailwind v4theme映射同样以tokens.css为准components.html参考组件夹具reference fixture含 66 个选择器、36 个类、26 个元素components.manifest.json组件清单契约声明/引用令牌、组件分组、选择器manifest.json包清单含preview/预览页与source/审计证据preview/colors.html、preview/typography.html、preview/spacing.html视觉抽查页USAGE.md供 OpenDesign Agent 与评审者使用的包使用指南source/evidence.md、source/token-contract.report.json审计证据与令牌契约报告从 source/evidence.md 可以看到该包是基于 OpenDesign 策展的内置夹具curated bundled fixture派生而来而非对上游品牌仓库的全新爬取——这意味着在使用时不应声称拥有原始上游来源证据USAGE.md的 Avoid 条款它属于仓库内置的规范化参考实现importMode: normalized。二、视觉主题与氛围游戏化即视觉语言Duolingo 的设计核心是把游戏化渲染成视觉语言界面毫不掩饰地明亮猫头鹰绿#58cc02是品牌主色每个可交互元素下方都有一条 4px 的厚实底部投影看起来像一枚等待被按下的 3D 按钮。页面为纯白#ffffff配合 2–3px 的深灰#e5e5e5粗边框整套系统读起来像一个重生于更好信息层级中的 2015 年 iOS 应用。字体层面界面装饰与标题使用Feather Bold一款自定义圆角无衬线体正文使用Mona Sans或 Inter。显示字号大而自信——Duolingo 从不耳语Duolingo never whispers。标题常带绿色下划线笔触或置于绿色胶囊pill内而吉祥物杜奥Duo绿色猫头鹰以活跃的插画角色出现而非静态 Logo。形态语言友好卡片圆角 16–20px、按钮 12px、胶囊与进度条 9999px。图标采用填充式、圆角、按技能颜色编码——每个课程表面都有瞬间可辨识的配色组合。关键特征清单源自文档 §1猫头鹰绿#58cc02作为主导品牌色覆盖 30% 的界面表面每个按钮下 4px 厚实底部投影触觉按压affordance2–3px 实心边框绝不用 1px 发丝线Feather Bold圆角显示体 Mona Sans正文大号自信字体——显示字号从 48px 起逐级攀升吉祥物即角色杜奥猫头鹰出现在引导、错误、连击等场景连击橙#ff9600与宝石粉#ce82ff作为次级品牌色在 tokens.css 的文件头注释中这些品牌决策被逐一编码确认--accent: #58cc02为品牌主色与正确回答同款绿色、纯白雪面--bg: #ffffff永不着色、--elev-raised: 0 4px 0 #d7d7d7为触觉按压签名、显示字号从 56px 起步、胶囊圆角体系、带轻微回弹的弹性缓动。三、色彩调色板与角色Color Palette Roles3.1 主色Primary角色色值用途猫头鹰绿 Owl Green#58cc02品牌主色、主 CTA、正确回答猫头鹰深绿 Owl Green Deep#58a700绿色按钮的按下/投影色猫头鹰浅绿 Owl Green Light#89e219悬停、柔和填充猫头鹰淡绿 Owl Green Pale#dbf8c5柔和表面、成功横幅3.2 次级强调色Secondary Accents角色色值用途连击橙 Streak Orange#ff9600连击计数、火焰图标、高级能量连击深橙 Streak Orange Deep#cc7a00橙色按下态宝石粉 Gem Pink#ce82ff宝石货币、Super Duolingo鳗鱼蓝 Eel Blue#1cb0f6提示按钮、信息链接主红 Cardinal Red#ff4b4b错误回答、失去生命蜜蜂黄 Bee Yellow#ffc800Pro 徽章、成就3.3 表面Surface角色色值用途雪白 Snow#ffffff主背景鳗鱼 Eel#f7f7f7分区间隔、次级表面天鹅 Swan#e5e5e5禁用背景、内嵌块狼 Wolf#777777深色分隔线、次级文本3.4 墨与文本Ink Text角色色值用途鳗鱼黑 Eel Black#3c3c3c主文本狼 Wolf#777777次级文本、说明文字野兔 Hare#afafaf禁用、占位符3.5 边框Border角色色值用途天鹅 Swan#e5e5e5标准 2px 边框野兔 Hare#afafaf悬停时强化边框在 tokens.css 中这些角色被映射为语义化令牌--bg: #ffffff、--surface: #f7f7f7、--fg: #3c3c3c、--muted: #777777、--meta: #afafaf、--border: #e5e5e5强调色为--accent: #58cc02、--accent-on: #ffffff、--accent-hover: #89e219、--accent-active: #58a700语义色--success: #58cc02成功即猫头鹰绿——正确回答与品牌主 CTA 是同一个 affordance、--warn: #ffc800、--danger: #ff4b4b。文件注释明确指出文本共三个真实层级Eel Black 主文本 / Wolf 次级 / Hare 三级每一级都保证对儿童也清晰可读的对比度。四、字体排印规则Typography Rules4.1 字体家族Font Family显示 / UI / 标题Feather Bold回退DIN Round Pro, Helvetica Neue, sans-serif正文 / 长文Mona Sans回退Helvetica Neue, system-ui, sans-serif代码少见学校/管理场景JetBrains Mono回退ui-monospace, Menlo, monospace4.2 层级阶梯Hierarchy角色字体字号字重行高字距备注DisplayFeather Bold56px (3.5rem)8001.05-0.01em引导页 HeroH1Feather Bold32px (2rem)8001.15-0.005em页面标题H2Feather Bold24px (1.5rem)8001.2normal章节标题H3Feather Bold18px (1.125rem)7001.25normal卡片标题、课程行Body LargeMona Sans17px (1.0625rem)5001.5normal课程提示、说明BodyMona Sans15px (0.9375rem)4001.5normal标准正文CaptionMona Sans13px (0.8125rem)6001.40.01emXP 计数、元数据ButtonFeather Bold16px (1rem)8001.20.02em标准按钮标签StreakFeather Bold14px (0.875rem)8001.2normal连击数字、火焰上4.3 原则Principles800 是默认值Feather Bold 在标题与按钮中一律使用 800 字重700 在这套系统里显得孱弱。大字号标题字号比典型产品品牌大 25–40%——自信即身份confidence as identity。圆润字形每个字形都有柔和末端尖锐衬线会破坏友好契约。在 tokens.css 中类型阶梯被实现为--text-xs: 12px到--text-4xl: 56px的 8 级令牌12/13/15/18/24/32/40/56并配套--leading-body: 1.5、--leading-tight: 1.15、--tracking-display: -0.01em约等于 56px 时的 -0.56px自信而非紧缩。components.html 中的实现还演示了h1使用 56px line-height: 1.05、h3降至 700 字重并保持 1.25 行高以及.eyebrow这类大写微标签12px、800 字重、0.08em 字距、胶囊底色的用法。五、组件样式Component Stylings5.1 按钮Buttons主按钮猫头鹰绿背景#58cc02文本#ffffff内边距14px 24px圆角16px底部边框4px solid#58a700厚实投影即此悬停背景#89e219激活translateY(4px)且底部边框归零按钮被按下用途继续、检查、主 CTA次按钮白色 底部投影背景#ffffff文本#777777边框2px solid#e5e5e5底部边框4px solid#e5e5e5圆角16px内边距14px 24px悬停文本#3c3c3c、边框#afafaf连击橙按钮背景#ff9600文本#ffffff底部边框4px solid#cc7a00用途连击目标、开始连击错误按钮主红背景#ff4b4b文本#ffffff底部边框4px solid#cc3b3b用途错误回答反馈在 components.html 的实现中.btn基类统一了内边距14px var(--space-6)、--radius-md圆角、Feather Bold 800 字重大写标签与 180ms 的过渡.btn-primary用box-shadow: 0 4px 0 var(--accent-active)实现厚底投影:active时transform: translateY(4px)并将投影归零从而产生物理按压效果——这正是文档 §4 所述机制的落地。.btn-streak则通过color-mix(in oklab, var(--warn), black 18%)动态生成深色底边。5.2 卡片 / 课程磁贴Cards / Lesson Tiles背景#ffffff边框2px solid#e5e5e5底部边框4px solid#e5e5e5圆角16px内边距16px悬停上浮 2px、阴影0 4px 0 #d7d7d7实现层面components.html.card使用--elev-raised0 4px 0 #d7d7d7作为硬质触觉阴影悬停时transform: translateY(-2px)并加深为0 6px 0 #d7d7d7.card-icon56×56px 圆形图标槽用color-mix生成 3px 彩色底影绿/红/黄三种色相--accent/--danger/--warn对应成功、错误、成就三种语义。5.3 技能树节点Skill Tree Node课程气泡尺寸80×72px背景技能色染色激活为绿、锁定为灰底部边框6px solid 更深变体圆角50%圆形激活态每 1.6s 在 1.0 → 1.05 之间脉冲5.4 输入框Inputs背景#ffffff边框2px solid#e5e5e5圆角12px内边距12px 16px聚焦边框#1cb0f6鳗鱼蓝、光环0 0 0 3px rgba(28, 176, 246, 0.2)实现中.field input的聚焦态使用--focus-ring令牌并在:hover时将边框升级为--meta#afafaf::placeholder使用--meta色标签为 Feather Bold 800 大写微标签。tokens.css 注释解释了这套鳗鱼蓝 20% 淡色聚焦环的意图在猫头鹰绿主导的环境中形成俏皮对比传递你可以与之交互的信号。5.5 进度条Progress Bar轨道#e5e5e5填充#58cc02连击场景用#ff9600圆角9999px高度16px增量动画320ms ease-out实现中.progress高度 16px、--radius-pill圆角、.progress-fill内部还叠加了inset 0 -4px 0 var(--accent-active)的内嵌厚边延续4px 厚实的品牌语言。六、间距与布局Spacing Layout基础单位4px。刻度4, 8, 12, 16, 24, 32, 48, 64容器最大 1080px槽宽gutter24px课程树列宽 320px桌面端居中tokens.css 将间距实现为--space-1到--space-12的 8 级令牌4/8/12/16/20/24/32/48并补充了分区节奏令牌--section-y-desktop: 80px、--section-y-tablet: 56px、--section-y-phone: 40px以及容器令牌--container-max: 1080px与三档响应式槽宽桌面 24px / 平板 20px / 手机 16px。components.html 中的.container与section规则展示了断点用法media (max-width: 1023px)降为平板槽宽与 56px 分区距media (max-width: 639px)降为手机槽宽与 40px 分区距section section用2px solid var(--border)分隔。布局原语还包括.hero-grid1.4fr/1fr 双列平板以下单列、.features-grid三列卡片网格逐级降为两列/单列、.stack-2/3/4/6垂直堆叠工具类。七、动效Motion时长按钮按压 180ms技能节点解锁 320ms激活节点脉冲 1.6s缓动cubic-bezier(0.34, 1.56, 0.64, 1)back-out轻微回弹过冲用于解锁吉祥物杜奥每 4–6s 眨眼连击里程碑时跳跃480ms ease-out 弹簧tokens.css 将其编码为--motion-fast: 180ms、--motion-base: 320ms、--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)并注明每一次状态变化都显得游戏化components.html 中所有按钮与卡片的过渡均以var(--motion-fast) var(--ease-standard)组合驱动背景色、位移与投影三个属性。八、使用边界Usage Guardrails与落地指南8.1 三条护栏文档 §7高饱和猫头鹰绿、厚实底部投影与圆润课程几何必须整体出现——孤立的扁平绿色按钮并不能被识别为 Duolingo。把超大粗体字留给课程、连击与进度等高光时刻——这些是产品需要鼓励或反馈的地方。游戏化动效要克制——仅围绕进度状态变化使用避免在每一个控件上都做通用弹跳动画。8.2 USAGE.md 的 Do / AvoidUSAGE.md 为 OpenDesign Agent 与评审者定义了包契约其阅读顺序为先读 USAGE.md → 再读 DESIGN.md 理解视觉意图与反模式 → 将tokens.css粘贴进第一个产物的style块后再编写组件 CSS → 用components.manifest.json获取紧凑组件清单需要精确选择器或状态时再打开components.html→ 需要视觉抽查时查看preview/页面。Do应当精确保留 schema 令牌名保证跨品牌切换cross-brand switching的可靠性使用--accent表达主操作、链接、聚焦态与一个清晰的焦点元素优先复用components.manifest.json中的组件组而非发明新控件将source/文件视为内置夹具回填fixture backfill的审计证据Avoid避免在复制的:root令牌块之外使用裸十六进制色值脱离tokens.css单独重定义 Tailwind 或设计令牌值声称拥有原始上游来源证据本包基于策展的内置夹具添加components.html或DESIGN.md中不存在的组件配方8.3 从令牌到实际页面从源码结构看这套包支持两条落地路径路径一纯 CSS 变量。将 tokens.css 的:root块直接作为首个 artifact 的style基础然后按 components.html 中的.btn、.card、.field、.badge、.progress等选择器组织组件 CSS。components.manifest.json显示 66 个选择器覆盖了按钮.btn-primary/.btn-secondary/.btn-streak及各自的 hover/active 态、输入框.field系列、卡片.card/.card-icon-*、徽章.badge-*、布局.container/.stack-*/.hero-grid/.features-grid等 8 个组件分组且所有组件引用的令牌在:root中均有声明undeclaredReferenced: []契约自洽。路径二Tailwind v4 派生。tailwind-v4.css 以import ./tokens.css为基础在theme中将--color-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-standard等映射为 Tailwind 工具类命名空间如bg-accent、text-muted、rounded-pill、shadow-raised。注意该文件头部声明Derived from tokens.css. Keep tokens.css as the source of truth即任何手动修改都应落在tokens.css派生文件通过脚本再生成source/evidence.md对design-tokens.json与tailwind-v4.css也有同样约定。此外manifest.json的craft.suggested建议搭配 craft/color.md 与 craft/accessibility-baseline.md 两条工艺规范使用分别用于校验色彩角色分配与可访问性基线——这与 DESIGN.md 中每一级文本都要有清晰可读对比度的要求互相印证。九、小结这套 Duolingo 灵感设计系统用极简的手段定义了极强的品牌识别30% 表面的猫头鹰绿#58cc02、每一处可交互元素的 4px 厚底投影、2–3px 粗边框、Feather Bold 800 的大号圆润字型、16px 卡片圆角与 9999px 胶囊以及带轻微回弹的游戏化缓动。在 OpenDesign 中它通过DESIGN.md视觉规范→tokens.css令牌事实来源→components.html组件夹具→components.manifest.json契约清单→USAGE.md使用指南的完整链路为 Agent 生成游戏化 SaaS风格产物提供了一套可校验、可复用、可跨品牌切换的落地资产。使用时请牢记三条护栏品牌三要素缺一不可、超大字体留给高光时刻、动效围绕进度变化克制使用。【免费下载链接】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），仅供参考