OpenDesign 设计系统实战：Duolingo 风格化设计系统完整拆解与落地指南

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-ru.md（与英文版 DESIGN.md 内容一致）展开。它是一份完整的"Duolingo 风格"设计系统规范：以猫头鹰绿#58cc02为品牌主色、以 4px 厚底阴影模拟"可触摸按下"的 3D 按钮、以 800 字重的 Feather Bold 大字号传递自信，并将游戏化反馈（连击、进度、成就）编码进每个界面状态。阅读本文后，你将掌握该设计系统的完整视觉语言、全部色彩/排版/间距 token 取值、各组件（按钮、卡片、输入框、进度条、徽章、技能树节点）的精确 CSS 规格，以及如何在 OpenDesign 的 Design System 2.0 包结构中把它作为可复用的设计系统落地到 AI 生成的前端产物中。

1. 设计系统包全景：Duolingo 在 OpenDesign 中的组织方式

在 OpenDesign 仓库中，Duolingo 设计系统不是一份孤立的文档，而是一个结构完整的包（package）。查看 design-systems/duolingo/ 目录可以看到它的组成：

• 规范文档：DESIGN.md（英文）与多语言副本（DESIGN-ru.md、DESIGN-zh.md 等 20 个语言版本），描述视觉意图、约束与反模式；
• Token 样式表：tokens.css，所有设计决策的结构化编码，是"唯一事实源"；
• 组件参考：components.html 与 components.manifest.json，精确的选择器与状态清单；
• 派生产物：design-tokens.json（OD Token 契约格式）与 tailwind-v4.css（Tailwind v4 主题绑定）；
• 审计证据：source/evidence.md、source/tokens.source.json、source/token-contract.report.json；
• 预览页：preview/colors.html、preview/typography.html、preview/spacing.html，用于视觉抽查；
• 包元数据：manifest.json（od-design-system-project/v1schema）。

manifest.json 将包定义为Productivity & SaaS类别下的 bundled 包，source.type为bundled，即来源于 OpenDesign 精选打包的 fixture（对上游品牌站点不做重新抓取声明）。它同时声明了 USAGE.md 作为使用指南，并建议在项目审计中应用color与accessibility-baseline两条 craft 规范。

USAGE.md 给出了明确的阅读顺序：先读 USAGE 理解包契约 → 读 DESIGN 理解视觉意图 → 将tokens.css粘贴进首个产物的<style>块 → 用components.manifest.json做组件清单速查、需要精确选择器时打开components.html→ 需要视觉抽查时查看preview/页面。

2. 视觉主题与氛围：把游戏化渲染成视觉语言

Duolingo 设计系统的第一原则是：游戏化就是视觉语言本身。界面刻意保持高亮，用#58cc02猫头鹰绿作为品牌主色，每个可交互元素下方都有一道 4px 的厚底阴影，读起来像一颗"等待被按下的 3D 按钮"。页面为纯白#ffffff，搭配 2–3px 深灰#e5e5e5的粗边框——整体观感像"拥有更好层级结构的 2015 年 iOS 应用"。

排版上，界面骨架（chrome）使用Feather Bold（自定义圆角无衬线体），正文使用Mona Sans（或 Inter）。显示级字号大而自信——"Duolingo 从不低语"。标题常带绿色下划线描边或坐在绿色药丸（pill）背景上，吉祥物 Duo（绿色猫头鹰）作为"活着的插画角色"出现，而不是静态 Logo。

形状语言整体友好：卡片圆角 16–20px，按钮 12px，chip 与进度条 9999px。图标为填充式、圆角、按技能色彩编码——每个课程表面都有即时可辨识的配色组合。

关键特征清单（原文要点，完整继承）：

• 猫头鹰绿#58cc02为支配性品牌色，覆盖超过 30% 的界面表面；
• 每个按钮下方 4px 厚阴影（"触觉按压"affordance）；
• 2–3px 实心边框，绝不用发丝线；
• Feather Bold（圆角显示体）+ Mona Sans（正文）；
• 大而自信的文字——显示字号从 48px 起步继续向上；
• 吉祥物角色化：Duo 猫头鹰出现在引导、错误、连击场景；
• 连击橙#ff9600与宝石粉#ce82ff作为次级品牌色。

3. 色彩体系与角色分工

3.1 主色（Primary）

3.2 次级强调色（Secondary Accents）

3.3 表面色（Surface）

3.4 墨色与文本（Ink & Text）

3.5 边框（Border）

3.6 源码级 Token 映射

上述全部色彩在 tokens.css 的:root块中被编码为语义化变量。其中几个值得注意的工程决策：

• 成功即品牌色：--success: #58cc02与--accent同值——"正确回答"与"主 CTA"是同一个 affordance（tokens.css:52）；
• 表面无暖色第三层：--surface-warm: var(--surface)只是别名（tokens.css:25），因为该调色板没有第三个暖表面层级；
• 单一边框层级：--border-soft: var(--border)（tokens.css:39），系统内没有内行分隔；
• 文本三层：--fg（鳗鱼黑）、--muted（狼）、--meta（野兔），每层都有清晰可读的对比度（tokens.css:30-33）；
• 阴影也 token 化：--elev-raised: 0 4px 0 #d7d7d7（tokens.css:109）——硬质触觉阴影就是 Duolingo 的"按压 affordance"，与:active时的translateY(4px)配对实现"按下去"。

从 source/tokens.source.json 可以看到，这些颜色被归入A1-identity（品牌身份层）与A2（语义应用层）两个契约层，--accent等核心标识的置信度为 high。

4. 排版规则

4.1 字体家族

4.2 完整层级表（原文表格，一字不省）

4.3 排版三原则

• 800 是默认值：Feather Bold 在标题和按钮上一律运行在 800 字重，700 在系统中显得偏弱；
• 大字号：标题字号比典型产品品牌大 25–40%——"自信即身份"；
• 圆角字形：每个字形的末笔都柔软，尖锐衬线会破坏"友好"契约。

4.4 Token 落地：字阶阶梯

tokens.css 将层级表编码为完整字阶（tokens.css:65-76）：--text-xs: 12px（极小工具、进度数字）、--text-sm: 13px（说明）、--text-base: 15px（正文）、--text-lg: 18px（H3/课程行标题）、--text-xl: 24px（H2）、--text-2xl: 32px（H1）、--text-3xl: 40px（次级显示/营销眉题）、--text-4xl: 56px（Display，引导页英雄区）。字阶刻意向整像素取整，并配套--leading-body: 1.5、--leading-tight: 1.15、--tracking-display: -0.01em（56px 时约 -0.56px，"自信但不拥挤"）。

在 components.html 的实际 CSS 中可以看到落地细节：h1使用var(--text-4xl)+--tracking-display+line-height: 1.05，h3使用var(--text-lg)且降为 700 字重、行高 1.25（components.html:124-130），与 DESIGN 层级表完全一致。

5. 组件样式规格

5.1 按钮（Buttons）

主按钮（猫头鹰绿）

• 背景：#58cc02
• 文本：#ffffff
• 内边距：14px 24px
• 圆角：16px
• 下边框：4px solid#58a700（厚阴影）
• 悬停：背景#89e219
• 激活：translate-y 4px、下边框 0（按钮"被按下去"）
• 用途："Continue"、"Check"、主 CTA

次按钮（白色 + 底阴影）

• 背景：#ffffff
• 文本：#777777
• 边框：2px solid#e5e5e5
• 下边框：4px solid#e5e5e5
• 圆角：16px
• 内边距：14px 24px
• 悬停：文本#3c3c3c、边框#afafaf

连击橙按钮

• 背景：#ff9600
• 文本：#ffffff
• 下边框：4px solid#cc7a00
• 用途：连击目标、"Start streak"

错误按钮（主红）

• 背景：#ff4b4b
• 文本：#ffffff
• 下边框：4px solid#cc3b3b
• 用途：错误回答的反馈

源码实现对照：components.html 中.btn基类定义了inline-flex布局、padding: 14px var(--space-6)、border-radius: var(--radius-md)、Feather Bold 800、letter-spacing: 0.04em、text-transform: uppercase，以及 background/transform/box-shadow 三个属性的 180ms 过渡（components.html:154-174）。关键交互机制：

.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: 0 4px 0 var(--accent-active); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--accent-active); }

:active时整体下移 4px 同时阴影归零，正好与 DESIGN 中"4px 厚阴影"的规格互证。次按钮:hover时文本转--fg、边框转--meta，与设计文档一致。

5.2 卡片 / 课程磁贴

• 背景：#ffffff
• 边框：2px solid#e5e5e5
• 下边框：4px solid#e5e5e5
• 圆角：16px
• 内边距：16px
• 悬停：上浮 2px，阴影0 4px 0 #d7d7d7

源码中.card使用box-shadow: var(--elev-raised)，:hover时translateY(-2px)且阴影加深为0 6px 0 #d7d7d7（components.html:247-263），与规格表严格对应。

5.3 技能树节点（课程气泡）

• 尺寸：80×72px
• 背景：技能色染色（激活为绿、锁定为灰）
• 下边框：6px solid 更深的变体
• 圆角：50%（圆形）
• 激活态：每 1.6s 从 1.0 到 1.05 脉动

5.4 输入框

• 背景：#ffffff
• 边框：2px solid#e5e5e5
• 圆角：12px
• 内边距：12px 16px
• 聚焦：边框#1cb0f6（鳗鱼蓝），光环0 0 0 3px rgba(28, 176, 246, 0.2)

源码中.field input的:focus-visible使用border-color: var(--accent)配box-shadow: var(--focus-ring)（components.html:240-243），:hover时边框转--meta，占位符为--meta。

5.5 进度条

• 轨道：#e5e5e5
• 填充：#58cc02（连击场景用#ff9600）
• 圆角：9999px
• 高度：16px
• 填充动画：增量时 320ms ease-out

源码.progress高 16px、border-radius: var(--radius-pill)，.progress-fill默认宽 64%、box-shadow: inset 0 -4px 0 var(--accent-active)在填充底部再压一条 4px 深色（components.html:301-314），延续"厚阴影"签名。

5.6 组件清单证据

components.manifest.json 对 reference fixture 做了结构化盘点：1 个 style 块、66 个选择器、36 个 class、26 个元素。组件被分为 9 个组：buttons、inputs、cards、badges、links、keyboard（kbd）、icons、typography、layout，并给出每组引用的 token 列表——例如 buttons 组引用--accent、--accent-active、--ease-standard、--motion-fast、--radius-md等 11 个 token，inputs 组引用--focus-ring、--accent等。清单还统计了unusedDeclared（如--border-soft、--elev-flat、--text-3xl）与undeclaredReferenced（空），说明 token 契约是闭合的。此外还有 6 个 colorExpression、42 个像素值、9 个硬编码字体家族的字面量统计。

6. 间距与布局

• 基准单位：4px。刻度：4, 8, 12, 16, 24, 32, 48, 64；
• 容器：最大 1080px，槽距 24px；
• 课程树列：宽 320px，桌面端居中。

Token 落地见 tokens.css 的--space-1到--space-12（4/8/12/16/20/24/32/48px，比文档刻度多出 20px 一档）与--container-max: 1080px、--container-gutter-desktop/tablet/phone（24/20/16px）。区块纵向节奏也 token 化：--section-y-desktop: 80px、--section-y-tablet: 56px、--section-y-phone: 40px（tokens.css:91-93）——注释明确指出：桌面端宽松、移动端收紧，是为了让课程树列"读起来像连续流而非分页块"。tokens.css 还注明 1080px 容器"比典型 SaaS 落地页更窄"，因为 Duolingo 内容以聚焦的课程树列纵向阅读。

7. 动效体系

• 时长：按钮按压 180ms；技能节点解锁 320ms；激活节点脉动 1.6s；
• Easing：cubic-bezier(0.34, 1.56, 0.64, 1)（back-out，轻微过冲）用于解锁；
• 吉祥物：Duo 每 4–6s 眨眼，连击里程碑时跳跃（480ms ease-out 弹簧）。

Token 化后为--motion-fast: 180ms、--motion-base: 320ms、--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)（tokens.css:119-121）。在 components.html 中，按钮与卡片的过渡统一使用--motion-fast+--ease-standard，把"每个状态变化都感觉游戏化"的意图落到 CSS 层。

8. 使用指南与反模式

原文档第 7 节明确给出三条使用护栏，必须整体保留：

• 保持高饱和猫头鹰绿、厚底阴影与圆润课程几何三者一起出现；单独的扁平绿色按钮不会产生 Duolingo 的感觉；
• 把超大粗体字留给课程、连击与进度时刻——这些是产品需要鼓励或反馈的场景；
• 在进度状态变化周围克制地使用俏皮动效，避免在每个控件上都套用通用的弹跳动画。

USAGE.md 进一步补充了工程层面的 Do / Avoid：

Do

• 严格保留 schema token 名称，保证跨品牌切换的可靠性；
• 用--accent表达主操作、链接、聚焦态和一个明确的焦点元素；
• 优先复用components.manifest.json中的组件组，而不是发明新控件；
• 把source/文件当作打包 fixture 回填的审计证据。

Avoid

• 不要在复制的:roottoken 块之外使用裸 hex 值；
• 不要脱离tokens.css单独重定义 Tailwind 或设计 token 值；
• 不要声称拥有上游原始来源证据——本包基于精选打包 fixture；
• 不要添加components.html或DESIGN.md中不存在的组件配方。

9. 工程化落地：从规范到可复用设计系统

9.1 Token 契约与自动审计

Design System 2.0 包内置了完整的 token 契约链：source/tokens.source.json 记录每个 token 的契约分层（A1-identity品牌身份 /A1-structure结构 /A2语义应用 /B-slot槽位别名）与源码行号；source/token-contract.report.json 与 design-tokens.json 输出汇总结果：56 个 token 全部被声明、全部有源文件支撑，sourceBackedA1为 26，fallbackTokens为 26，aliasTokens为 3，评分 100（excellent），recommendRebuild: false。这些派生产物应通过报告与 token 样式表重新生成，而非手工编辑（见 source/evidence.md）。

9.2 Tailwind v4 绑定

tailwind-v4.css 是面向 Tailwind v4 的派生适配层：通过@import "./tokens.css"引入源 token，然后在@theme块中把--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-*、--container-*全部桥接到 token 变量。注意其首行注释："Derived from tokens.css. Keep tokens.css as the source of truth."——token 样式表始终是唯一事实源，任何 Tailwind 或 JSON 派生层都不得反向篡改。

9.3 复用路径与产物形态

当 Agent 或开发者需要产出 Duolingo 风格的前端产物时，推荐的落地路径是：

1. 阅读 USAGE.md 确认包契约；
2. 打开 DESIGN.md（或对应的 DESIGN-zh.md 等语言版）理解视觉意图与反模式；
3. 将 tokens.css 的:root块粘贴进产物首个<style>块；
4. 按 components.manifest.json 的组件组清单组织 DOM，精确选择器对照 components.html；
5. 用 preview/ 下的 colors、typography、spacing 三个预览页做视觉抽查。

10. 小结

Duolingo 设计系统在 OpenDesign 中是一套"规范—Token—组件—审计"四层闭环的完整包：视觉规范定义了猫头鹰绿、4px 触觉阴影、800 字重大字号三大签名；tokens.css将 56 个语义 token 全部落盘并保持闭合契约；components.html与 manifest 提供可直接复用的 9 组组件；审计文件则保证了派生产物与源规范的严格一致。对任何想在 AI 生成的前端产物中复现"游戏化快乐"气质的开发者，这套包提供了从设计决策到可运行 CSS 的完整证据链——记住那条护栏：厚阴影、高饱和绿、圆润几何必须一起出现，这是 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