Duolingo 设计系统.
Duolingo 设计系统 — 语言学习平台。明亮的猫头鹰绿、厚重阴影、游戏化趣味。
在真实场景中查看
同一套设计 token 应用于不同类型的产物——网站、应用、幻灯片、海报。这些是用该系统重新换肤的原创样稿，而非截图。
duolingo.com
NEW · LIVE PREVIEW
Build something people love.
A mock UI rendered with the Duolingo design tokens — straight from its DESIGN.md.
Get startedLearn more
Fast
Secure
Simple
Duolingo
Today
Make it yours.
Duolingo
Make
it
real.
it
real.
Open DesignDESIGN.md
设计 token
56 个 token，符合 Open Design 的 token 契约——你的 agent 读取的正是这套结构化的配色、字体、间距和动效值，用以为任意产物设定主题。
表面
-
--bg#ffffff -
--surface#f7f7f7 -
--surface-warmvar(--surface)
文本
-
--fg#3c3c3c -
--fg-2var(--fg) -
--muted#777777 -
--meta#afafaf
边框
-
--border#e5e5e5 -
--border-softvar(--border)
强调色
-
--accent#58cc02 -
--accent-on#ffffff -
--accent-hover#89e219 -
--accent-active#58a700
语义
-
--success#58cc02 -
--warn#ffc800 -
--danger#ff4b4b
字体排印
-
--font-display"Feather Bold", "DIN Round Pro", "Helvetica Neue", sans-serif -
--font-body"Mona Sans", "Helvetica Neue", system-ui, sans-serif -
--font-mono"JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace
字号层级
-
--text-xs12px -
--text-sm13px -
--text-base15px -
--text-lg18px -
--text-xl24px -
--text-2xl32px -
--text-3xl40px -
--text-4xl56px -
--leading-body1.5 -
--leading-tight1.15 -
--tracking-display-0.01em
间距
-
--space-14px -
--space-28px -
--space-312px -
--space-416px -
--space-520px -
--space-624px -
--space-832px -
--space-1248px -
--section-y-desktop80px -
--section-y-tablet56px -
--section-y-phone40px
圆角
-
--radius-sm12px -
--radius-md16px -
--radius-lg20px -
--radius-pill9999px
层级阴影
-
--elev-flatnone -
--elev-ring0 0 0 2px var(--border) -
--elev-raised0 4px 0 #d7d7d7
聚焦
-
--focus-ring0 0 0 3px rgba(28, 176, 246, 0.2)
动效
-
--motion-fast180ms -
--motion-base320ms -
--ease-standardcubic-bezier(0.34, 1.56, 0.64, 1)
布局
-
--container-max1080px -
--container-gutter-desktop24px -
--container-gutter-tablet20px -
--container-gutter-phone16px
受 Duolingo 启发的设计系统
Category: 效率与 SaaS 语言学习平台。明亮的猫头鹰绿、粗厚阴影、游戏化的愉悦感。
1. 视觉主题与氛围
Duolingo 是以视觉语言呈现的游戏化设计。界面毫无保留地鲜亮，以猫头鹰绿（#58cc02）为品牌主色，每个可交互元素底部都有粗厚的 4px 阴影，看起来像一个等待被按下的 3D 按钮。页面背景为白色（#ffffff），边框为 2–3px 深灰色（#e5e5e5），整体系统读起来就像一款 2015 年 iOS 应用以更好的层级感重生。
排版使用 Feather Bold（一种自定义圆角无衬线字体）用于界面框架，Mona Sans（或 Inter）用于正文。展示尺寸大而自信——Duolingo 从不低语。标题通常带有绿色下划线笔触或置于绿色胶囊上，吉祥物 Duo（一只绿色猫头鹰）以活跃的插画角色出现，而非静态 logo。
形状语言友好亲切：卡片圆角 16–20px，按钮 12px，标签与进度条 9999px。图标系统为填充、圆角风格，并按技能进行色彩编码——每个课程界面都有一对一眼就能辨识的配色。
关键特征：
- 猫头鹰绿（
#58cc02）作为主导品牌色，在界面中占据 30% 以上的面积 - 每个按钮底部有粗厚 4px 阴影（“触觉按压”可供性）
- 2–3px 实线边框，从不使用细线
- Feather Bold（圆角展示字体）+ Mona Sans（正文）
- 大而自信的文字——展示尺寸从 48px 起步并向上攀升
- 吉祥物即角色：Duo 猫头鹰出现在引导、错误、连击等场景中
- 连击橙（
#ff9600）和宝石粉（#ce82ff）作为次级品牌色
2. 色彩方案与角色
主色
- 猫头鹰绿（
#58cc02）：品牌主色、主要行动按钮、正确答案。 - 深猫头鹰绿（
#58a700）：绿色按钮的按压/阴影色。 - 浅猫头鹰绿（
#89e219）：悬停状态、柔和填充。 - 淡猫头鹰绿（
#dbf8c5）：柔和表面、成功横幅。
次级强调色
- 连击橙（
#ff9600）：连击计数器、火焰图标、付费能量。 - 深连击橙（
#cc7a00）：橙色按压状态。 - 宝石粉（
#ce82ff）：宝石货币、Super Duolingo。 - 鳗鱼蓝（
#1cb0f6）：提示按钮、信息链接。 - 红衣主教红（
#ff4b4b）：答错、失去生命。 - 蜜蜂黄（
#ffc800）：专业徽章、成就。
表面色
- 雪白（
#ffffff）：主背景。 - 鳗鱼灰（
#f7f7f7）：区块分隔、次级表面。 - 天鹅灰（
#e5e5e5）：禁用背景、内嵌块。 - 狼灰（
#777777）：深色分隔线、次级文字。
墨色与文字
- 鳗鱼黑（
#3c3c3c）：主要文字。 - 狼灰（
#777777）：次要文字、说明文字。 - 野兔灰（
#afafaf）：禁用、占位符。
边框
- 天鹅灰（
#e5e5e5）：标准 2px 边框。 - 野兔灰（
#afafaf）：悬停时的强调边框。
3. 排版规则
字体家族
- 展示 / UI / 标题：
Feather Bold，备用字体：'DIN Round Pro', 'Helvetica Neue', sans-serif - 正文 / 长文：
Mona Sans，备用字体：'Helvetica Neue', system-ui, sans-serif - 代码（少用，学校/管理场景）：
JetBrains Mono，备用字体：ui-monospace, Menlo, monospace
层级
| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 | 备注 |
|---|---|---|---|---|---|---|
| 展示 | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | 引导主视觉 |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | 页面标题 |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | 版块标题 |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | 卡片标题、课程行 |
| 大正文 | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | 课程提示、说明 |
| 正文 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 标准文段 |
| 说明文字 | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | 经验值计数、元数据 |
| 按钮 | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 标准按钮标签 |
| 连击 | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | 连击数字、火焰上 |
原则
- 800 是默认值：Feather Bold 在标题和按钮中以 800 字重运行。在此系统中，700 看起来偏弱。
- 大字号：标题尺寸比典型产品品牌大 25–40%——自信即身份。
- 圆润字形：每个字形都有柔和末端；锋利衬线会破坏亲和感契约。
4. 组件样式
按钮
主要按钮（猫头鹰绿）
- 背景：
#58cc02 - 文字：
#ffffff - 内边距：14px 24px
- 圆角：16px
- 底部边框：4px solid
#58a700（粗厚阴影） - 悬停：背景
#89e219 - 激活：向下位移 4px，底部边框 0（按钮”按下”）
- 用途：“继续”、“检查”、主要行动。
次要按钮（白色带底部阴影）
- 背景：
#ffffff - 文字：
#777777 - 边框：2px solid
#e5e5e5 - 底部边框：4px solid
#e5e5e5 - 圆角：16px
- 内边距：14px 24px
- 悬停：文字
#3c3c3c，边框#afafaf
连击橙按钮
- 背景：
#ff9600 - 文字：
#ffffff - 底部边框：4px solid
#cc7a00 - 用途：连击目标、“开始连击”
错误按钮（红衣主教红）
- 背景：
#ff4b4b - 文字：
#ffffff - 底部边框：4px solid
#cc3b3b - 用途：答错反馈。
卡片 / 课程格
- 背景：
#ffffff - 边框：2px solid
#e5e5e5 - 底部边框：4px solid
#e5e5e5 - 圆角：16px
- 内边距：16px
- 悬停：上浮 2px，阴影
0 4px 0 #d7d7d7
技能树节点（课程气泡）
- 尺寸：80×72px
- 背景：技能色调（激活为绿色，锁定为灰色）
- 底部边框：6px solid 深色变体
- 圆角：50%（圆形）
- 激活：每 1.6s 在 1.0 → 1.05 之间脉冲
输入框
- 背景：
#ffffff - 边框：2px solid
#e5e5e5 - 圆角：12px
- 内边距：12px 16px
- 聚焦：边框
#1cb0f6（鳗鱼蓝），光晕0 0 0 3px rgba(28, 176, 246, 0.2)
进度条
- 轨道：
#e5e5e5 - 填充：
#58cc02（或连击时使用#ff9600） - 圆角：9999px
- 高度：16px
- 动画填充：递增时 320ms ease-out。
5. 间距与布局
- 基础单位：4px。比例：4, 8, 12, 16, 24, 32, 48, 64。
- 容器：最大 1080px，24px 边距。
- 课程树列：宽 320px；在桌面端居中。
6. 动效
- 时长：按钮按压 180ms；技能节点解锁 320ms；激活节点脉冲 1.6s。
- 缓动：
cubic-bezier(0.34, 1.56, 0.64, 1)（回弹缓出，轻微过冲）用于解锁动效。 - 吉祥物：Duo 每 4–6s 眨眼，在连击里程碑时跳跃（480ms ease-out 弹簧）。
7. 使用守则
- 保持高饱和度猫头鹰绿、粗厚底部阴影和圆润课程几何形状的组合；单独使用扁平绿色按钮并不能读出 Duolingo 的感觉。
- 将超大粗体文字保留用于课程、连击和进度等需要鼓励或反馈的产品时刻。
- 将趣味动效克制地用在进度状态变化周围，避免在每个控件上都使用通用的弹跳动画。
标签
design-systemfirst-partydesignproductivity-saas