Open Design 中的 Duolingo 设计系统还原指南：猫头鹰绿、4px 触感阴影与游戏化视觉语言

Open Design 中的 Duolingo 设计系统还原指南猫头鹰绿、4px 触感阴影与游戏化视觉语言【免费下载链接】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本篇技术指南以 Open Design 仓库内置的 Duolingo 设计系统包为研究对象系统拆解「游戏化即视觉语言」的完整落地方法从#58cc02猫头鹰绿品牌主色、4px 厚底阴影的「触感按压」机制到 Feather Bold Mona Sans 的双字体体系、组件级样式与动效时长规范。读完本文你将掌握一套可直接复制到设计稿或前端代码中的完整设计令牌Design Token体系并理解该包在 Open Design 的 Agent 工作流中如何被消费与校验。1. 设计系统包概览一份可执行的视觉契约在 Open Design 仓库中Duolingo 设计系统位于 design-systems/duolingo 目录它不是一个零散的风格笔记而是一个结构化的「设计系统 2.0 包」。包内文件分工清晰manifest.json 定义了包的元信息与文件契约文件角色DESIGN.md视觉意图、约束与反模式的总纲tokens.css设计令牌CSS 自定义属性唯一事实源components.html参考组件实现66 个选择器、36 个类、26 个元素components.manifest.json组件清单与令牌引用关系的机器可读清单design-tokens.json派生令牌 JSON56 个令牌评分 100tailwind-v4.css派生 Tailwind v4theme映射preview/colors / typography / spacing 三张视觉预览页source/审计证据evidence.md、token-contract.report.json、tokens.source.jsonUSAGE.md 明确规定了消费顺序先读 USAGE.md 理解包契约再读 DESIGN.md 把握视觉意图随后把tokens.css粘贴进首个 artifact 的style块需要精确选择器时查阅components.html最后可用preview/页面做视觉抽查。这套「契约优先、源码佐证」的结构正是 Open Design 设计系统包能被 Agent 稳定复用的关键。值得注意的是source/evidence.md 声明该包源自 OpenDesign 精选的捆绑 fixture而非对上游品牌站点的重新抓取——所有令牌都有tokens.css的声明行号背书token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回对应声明行design-tokens.json与tailwind-v4.css均为派生产物应依据报告与令牌样式表重新生成而非手工编辑。2. 视觉主题与氛围游戏化如何成为视觉语言Duolingo 是「游戏化被渲染成视觉语言」的教科书案例。界面毫不掩饰地明亮以猫头鹰绿#58cc02为品牌主色每个可交互元素下方都压着 4px 的厚底阴影读起来像一枚等待被按下的 3D 按钮。页面保持纯白#ffffff配以 2–3px 的深灰#e5e5e5粗边框——整套系统像「2015 年的 iOS 应用重生后拥有更好的层级」。字体上界面骨架chrome使用Feather Bold定制圆体 sans正文使用Mona Sans或 Inter。显示字号大而自信——「Duolingo 从不低语」。标题常带绿色下划线笔画或端坐在绿色胶囊pill上吉祥物 Duo绿色猫头鹰以主动的插画角色出现而非静态 Logo。形状语言保持友善卡片 16–20px 圆角、按钮 12px、chip 与进度条 9999px。图标为填充式、圆角并按技能进行颜色编码——每个课程表面都有可即时识别的配色对。该包提炼的7 条核心特征如下猫头鹰绿#58cc02为支配性品牌色覆盖 30% 以上的界面表面每个按钮都有 4px 厚底阴影「触感按压」affordance2–3px 实心边框绝不用细线hairlineFeather Bold圆体显示 Mona Sans正文双字体大而自信的字号——显示级从 48px 起步向上攀升吉祥物即角色Duo 猫头鹰出现在引导、错误反馈、streak 等场景streak 橙#ff9600与宝石粉#ce82ff作为次级品牌色在 components.html 中这套氛围被具象化为一个完整的 landing fixturehero 区用.eyebrow胶囊眉标、56px 的 H1、.btn-primary与.btn-secondary主次 CTA右侧的.mascot-card内嵌一个纯 SVG 绘制的 Duo 猫头鹰fillvar(--accent)的椭圆身体、var(--warn)的喙、var(--accent-active)的眉羽下方是.progress进度条与.badge-streakstreak 徽章——一个元素同时踩中品牌色、厚阴影、圆角、吉祥物、进度反馈五个特征点。3. 色彩系统从品牌绿到语义色3.1 完整色板设计文档将颜色划分为五个角色层主色Primary令牌语义色值用途猫头鹰绿#58cc02品牌主色、主 CTA、正确答案猫头鹰绿深#58a700绿色按钮的按压/阴影色猫头鹰绿亮#89e219Hover、柔和填充猫头鹰绿淡#dbf8c5柔和表面、成功横幅次级强调色Secondary Accents令牌语义色值用途streak 橙#ff9600streak 计数、火焰图标、高级能量streak 橙深#cc7a00橙色按压态宝石粉#ce82ff宝石货币、Super Duolingo鳗鱼蓝#1cb0f6提示按钮、信息链接绯红#ff4b4b错误答案、生命值耗尽蜜蜂黄#ffc800Pro 徽章、成就表面色Surface雪白#ffffff主背景、鳗鱼#f7f7f7分区隔断/次级表面、天鹅#e5e5e5禁用背景/内嵌块、狼#777777深色分隔线/次级文本。墨色与文本Ink Text鳗鱼黑#3c3c3c主文本、狼#777777次级文本/说明、野兔#afafaf禁用/占位符。边框Border天鹅#e5e5e5标准 2px 边框、野兔#afafafhover 时强调边框。3.2 tokens.css 中的令牌绑定tokens.css 将以上语义编码为结构化的 CSS 自定义属性其设计决策值得注意/* 背景画布绝不染色——只有 chrome 被染色 */ --bg: #ffffff; /* 雪白 — 主背景 */ --surface: #f7f7f7; /* 鳗鱼 — 分区隔断、课程行 */ /* 三级真实文本层每层都保持可读对比度 */ --fg: #3c3c3c; /* 鳗鱼黑 — 主文本 */ --muted: #777777; /* 狼 — 次级文本、说明 */ --meta: #afafaf; /* 野兔 — 三级元数据、占位符 */ --border: #e5e5e5; /* 天鹅 — 标准 2px 边框 */ /* 品牌就是这抹绿 */ --accent: #58cc02; --accent-on: #ffffff; --accent-hover: #89e219; /* 亮绿 — hover */ --accent-active: #58a700; /* 深绿 — 按压态、阴影色 */ /* 语义色成功即品牌绿 */ --success: #58cc02; /* 「正确答案」就是品牌色 */ --warn: #ffc800; /* 蜜蜂黄 — 徽章、成就光晕 */ --danger: #ff4b4b; /* 绯红 — 错误答案 */关键设计点在于语义复用--success直接等于--accent因为「正确答案」与「主 CTA」在 Duolingo 中是同一个 affordance——绿色既是引导也是庆祝。--warn与--danger则与品牌色错开保证错误反馈在绿色海洋中依旧醒目。3.3 令牌的分层与质量评分design-tokens.json 记录了这套系统的工程化程度56 个令牌全部有源码背书sourceBackedTokens: 56按分层统计为 A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个契约评分100 分excellentrecommendRebuild: false。其中 3 个别名令牌如--surface-warm: var(--surface)、--fg-2: var(--fg)用于保持 TOKEN_SCHEMA 层级的完整性即使该品牌没有真正的第三表面层级。components.manifest.json 进一步做了令牌审计56 个声明令牌中 49 个被组件实际引用7 个未使用--border-soft、--elev-flat、--elev-ring、--fg-2、--motion-base、--surface-warm、--text-3xl且undeclaredReferenced为空——即组件引用过的令牌全部有声明契约完整闭合。4. 字体排印Feather Bold Mona Sans 的双字体体系4.1 字体族与回退栈用途主字体回退栈显示 / UI / 标题Feather BoldDIN Round Pro, Helvetica Neue, sans-serif正文 / 长文本Mona SansHelvetica Neue, system-ui, sans-serif代码罕见学校/管理端JetBrains Monoui-monospace, Menlo, monospace在 tokens.css 中对应为--font-display、--font-body、--font-mono三个令牌。4.2 完整层级表角色字体字号字重行高字距备注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卡片标题、课程行正文大Mona Sans17px (1.0625rem)5001.5normal课程提示、指令正文Mona Sans15px (0.9375rem)4001.5normal标准散文说明Mona Sans13px (0.8125rem)6001.40.01emXP 计数、元数据按钮Feather Bold16px (1rem)8001.20.02em标准按钮标签StreakFeather Bold14px (0.875rem)8001.2normalstreak 数字、火焰上方4.3 排印三原则800 是默认值Feather Bold 在标题与按钮上统一跑在 800 字重700 在这套系统里显得软弱。大字优先标题字号比典型产品品牌大 25–40%——「自信即身份」。圆润字形每个字形都有柔和的终端尖锐衬线会破坏友善契约。在 components.html 中排印规则被实现为h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); line-height: 1.05; }、h2 { font-size: var(--text-2xl); letter-spacing: -0.005em; }、h3 { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }与设计文档的层级表一一对应。.eyebrow眉标类则使用text-transform: uppercaseletter-spacing: 0.08em 800 字重以 12px 小字号跑在 accent 淡色胶囊上是「大标题之下的小装饰」典型范式。tokens.css 的字号阶梯还额外补充了 40px 的--text-3xlSub-displayhero 次级/营销眉标与 12px 的--text-xs微工具、进度数字让排印令牌覆盖 12px 到 56px 共 8 级。5. 组件样式从按钮到进度条5.1 按钮体系主按钮猫头鹰绿背景#58cc02、文本#ffffff、内边距 14px 24px、圆角 16px、border-bottom: 4px solid #58a700厚阴影本体、hover 背景#89e219、active 时translate-y 4px且 border-bottom 归零按钮「被按下」。用于「Continue」「Check」等主 CTA。次按钮白色 底阴影背景#ffffff、文本#777777、2px solid #e5e5e5边框、4px solid #e5e5e5底边、圆角 16px、内边距 14px 24px、hover 时文本变#3c3c3c、边框变#afafaf。Streak 橙按钮背景#ff9600、文本#ffffff、4px solid #cc7a00底边。用于 streak 目标、「Start streak」。错误按钮绯红背景#ff4b4b、文本#ffffff、4px solid #cc3b3b底边。用于错误答案反馈。components.html 的实现揭示了文档之外的细节.btn基类统一使用font-weight: 800text-transform: uppercaseletter-spacing: 0.04em文档表中写 0.02em实现为 0.04em 的显示修正并声明transition: background-color / transform / box-shadow三者都以var(--motion-fast) var(--ease-standard)过渡。.btn:focus-visible使用box-shadow: var(--focus-ring)而非 outline保证无障碍焦点环不破坏厚阴影美学。.btn-streak的阴影色用color-mix(in oklab, var(--warn), black 18%)动态生成而非硬编码#cc7a00——这是实现层对文档色值的现代化延伸。5.2 卡片 / 课程瓦片背景#ffffff、2px solid #e5e5e5边框、4px solid #e5e5e5底边、圆角 16px、内边距 16px、hover 时上浮 2px 且阴影变为0 4px 0 #d7d7d7。实现中.card:hover进一步演化为transform: translateY(-2px)box-shadow: 0 6px 0 #d7d7d7——上浮的同时加深阴影增强「抬升」的体感。配套的.card-icon为 56×56px 全圆角图标槽底部压0 3px 0阴影并按语义分绿--accent/红--danger/黄--warn三色。5.3 技能树节点课程气泡尺寸 80×72px、背景为技能色 tint绿色激活、灰色锁定、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)。实现中--focus-ring令牌即为此光环tokens.css注释点明其意图「鳗鱼蓝 20% 淡色——与猫头鹰绿环境形成俏皮对比提示『你可以与它交互』」。5.5 进度条轨道#e5e5e5、填充#58cc02streak 场景用#ff9600、圆角 9999px、高度 16px、增量时 320ms ease-out 动画填充。实现中.progress-fill额外使用box-shadow: inset 0 -4px 0 var(--accent-active)把「厚阴影」语言延伸进条形图内部让填充条也有立体压边。5.6 组件分组与令牌引用components.manifest.json 将全部组件归为 9 组buttons、inputs、cards、badges、links、keyboardkbd快捷键提示、icons、typography、layout每组都列出了实际引用的令牌集合。例如 buttons 组引用 12 个令牌--accent、--accent-active、--accent-on、--ease-standard、--fg、--font-display、--meta、--motion-fast、--radius-md、--space-2、--space-6、--text-base、--warncards 组引用 12 个令牌——这份清单可直接用于组件级依赖分析或 Tree-shaking 校验。6. 间距与布局基础单元4px。刻度4、8、12、16、24、32、48、64。容器最大 1080pxgutter 24px。课程树列宽 320px桌面端居中。tokens.css 将刻度实现为--space-1到--space-12共 8 级并补充了响应式区块节奏--section-y-desktop: 80px、--section-y-tablet: 56px、--section-y-phone: 40px——桌面端宽松、手机端收紧「让课程树列读作连续的流而非分页的块」。容器 gutter 同样响应式桌面 24px、平板 20px、手机 16px。components.html 的断点实现为max-width: 1023px平板与max-width: 639px手机两档.features-grid在桌面 3 列 → 平板 2 列 → 手机 1 列递减.hero-grid从1.4fr 1fr双列折叠为单列。布局工具类stack-2/3/4/6用margin-block-start实现垂直节奏、.row-between水平两端对齐、.containermargin-inline: auto居中构成了 fixture 的布局原语全部以令牌驱动。7. 动效语言把状态变化变成游戏奖励时长按钮按压 180ms技能节点解锁 320ms激活节点脉冲 1.6s。缓动解锁使用cubic-bezier(0.34, 1.56, 0.64, 1)back-out轻微过冲——「每次状态变化都感觉被游戏化」。吉祥物Duo 每 4–6s 眨眼一次在 streak 里程碑时跳跃480ms ease-out 弹簧。tokens.css 将动效编码为--motion-fast: 180ms、--motion-base: 320ms、--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)。值得注意的是--motion-base: 320ms在组件清单中被列为未使用令牌——即参考 fixture 的组件主要跑在 180ms 的按压反馈上320ms 留给了更大的状态转换如节点解锁。这套「快速反馈 弹簧过冲」的组合正是游戏化界面「按下去立刻有反应、达成时轻微庆祝」的心理机制来源。8. 使用护栏三要三不要DESIGN.md 第 7 节给出三条护栏防止「形似神不似」必须三件套同存高饱和猫头鹰绿、厚底阴影、圆润课程几何必须同时出现——「光有扁平绿按钮不会读作 Duolingo」。大字留白给关键时刻把超大号粗体字留给课程、streak 与进度这些需要鼓励或反馈的时刻。动效克制只在进度状态变化附近使用俏皮动效避免在每个控件上都做泛泛的弹跳动画。USAGE.md 的 Do / Avoid 清单从工程侧补充约束Do精确保留 schema 令牌名保证跨品牌切换可靠用--accent承载主操作、链接、焦点态与唯一焦点元素优先复用components.manifest.json中的组件分组把source/当作 fixture 回填的审计证据。Avoid避免在:root令牌块之外散落原始十六进制色值避免脱离tokens.css单独重定义 Tailwind 或设计令牌值避免声称有上游原始源码证据避免新增components.html或DESIGN.md未涵盖的组件配方。9. 在 Open Design 工作流中的消费方式该包的价值在于「开箱即用」与「可审计」并存可视化检查直接打开 preview/colors.html、preview/typography.html、preview/spacing.html 即可抽查色板、字阶与间距刻度。Tailwind v4 消费tailwind-v4.css 通过import ./tokens.css与theme { ... }把 56 个令牌全部映射为--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*命名空间文件头明确声明「Derived from tokens.css. Keep tokens.css as the source of truth」——令牌源只有一个。Agent 协作对于 Open Design 的 Agent 工作流如设计审查、品牌提取推荐路径是 USAGE.md → DESIGN.md → tokens.css → components.manifest.json → components.html → preview/先理解契约再动手先复用组件再自创控件。结语Duolingo 设计系统包是 Open Design 中「游戏化品牌」类目下完成度最高的参考实现之一设计文档DESIGN.md定义视觉意图令牌tokens.css定义唯一事实源组件components.html给出可直接复用的实现清单components.manifest.json与审计source/保证机器可读与可追溯。无论你是要在新页面里复刻「猫头鹰绿 4px 厚阴影 大圆角」的游戏化气质还是想研究一个设计系统包在仓库中应如何组织这套包都值得作为起点——记住那条护栏高饱和绿、厚阴影、圆几何三者同存才算 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考