行业: 教育与学习Website

Duolingo

Duolingo 以明快绿色、圆润几何形态、胶囊按钮和游戏化反馈构建轻松课堂，让学习过程像连续闯关一样清晰、有趣且富有激励感。

Light UIDesign System

设计系统

品牌色彩 · 18

White

#FFFFFF

--color-white

Snow

#F7F7F7

--color-snow

Eel

#3C3C3C

--color-eel

Slug

#777777

--color-slug

Swan

#E5E5E5

--color-swan

Green

#58CC02

--color-green

Green Hover

#4CAF00

--color-green-hover

Green Dark

#46A302

--color-green-dark

Bee

#FFC800

--color-bee

Fox

#FF9600

--color-fox

Cardinal

#FF4B4B

--color-cardinal

Macaw

#1CB0F6

--color-macaw

Regalia

#CE82FF

--color-regalia

Basil

#1899D6

--color-basil

Eel Light

#4B4B4B

--color-eel-light

Green Gradient

#58CC02

--gradient-green

Super Gradient

#CE82FF

--gradient-super

Warm Gradient

#FF9600

--gradient-warm

字体系统

字体家族

Feather Bold — Primary display and heading typeface / Feather Regular — Body and UI text / Source Code Pro — Monospaced text

字重

700800400500600

备注

3 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签

Light UIDesign System

设计文档

品牌设计系统的完整 Markdown 文档

Duolingo — Style Reference

> A cheerful green classroom wrapped in playful geometry

**Theme:** light

Duolingo's visual identity radiates approachable warmth from a clean white canvas, punctuated by its unmistakable lime green (#58CC02) — a color so synonymous with the brand that it functions as a logo in its own right. The typeface, a rounded sans-serif with generous weight, projects friendly authority without intimidation. Surface depth is minimal: cards float on a whisper-thin shadow against Snow (#F7F7F7), while the primary green pill buttons command interaction through sheer chromatic confidence. The palette extends into a vivid spectrum of warm and cool accents — Bee yellow, Fox orange, Cardinal red, Macaw blue — each tied to a gamification mechanic (streaks, XP, hearts, gems). This is a design system that treats education as play: every component, from the rounded inputs to the progress bars, carries a subtle softness that lowers the psychological barrier to engagement. The signature rhythm break is the owl — Duo — whose illustrations punctuate empty states and achievements, anchoring the brand's personality in mascot-driven delight.

> **Source website:** [Duolingo](https://www.duolingo.com/) — Compare this extracted reference with the live official website, which remains authoritative.

Tokens — Colors

|------|-------|-------|------|

| Eel | `#3C3C3C` | `--color-eel` | Primary text, headings, body copy |

| Bee | `#FFC800` | `--color-bee` | Streak indicators, XP badges, yellow accent, warning |

| Fox | `#FF9600` | `--color-fox` | Streak fire, orange accent, animated highlights |

Decorative / Gradient

|------|-------|-------|------|

Tokens — Typography

Feather Bold — Primary display and heading typeface · `--font-feather-bold`

**Substitute:** Nunito

**Weights:** 700, 800

**Sizes:** 24px, 28px, 32px

**Line height:** 1.17, 1.2

**Letter spacing:** -0.02em at large sizes

**Role:** Primary headings, section titles, hero text. Rounded letterforms reinforce the brand's approachable personality.

Feather Regular — Body and UI text · `--font-feather`

**Substitute:** Nunito

**Weights:** 400, 500, 600, 700

**Sizes:** 14px, 15px, 16px, 17px, 18px, 19px, 20px

**Line height:** 1.2, 1.4, 1.5, 1.6

**Letter spacing:** -0.01em

**Role:** Body text, buttons, navigation, labels, descriptions. The workhorse of the UI with a wide weight range.

Source Code Pro — Monospaced text · `--font-source-code`

**Substitute:** ui-monospace

**Weights:** 400, 500

**Sizes:** 14px, 16px

**Line height:** 1.5

**Role:** Code snippets, technical details, special formatting.

Type Scale

|------|------|-------------|----------------|-------|

| display | 32px | 1.17 | -0.02em | `--text-display` |

| heading-lg | 28px | 1.2 | -0.02em | `--text-heading-lg` |

| heading | 24px | 1.2 | -0.02em | `--text-heading` |

| body-lg | 20px | 1.4 | — | `--text-body-lg` |

| body | 16px | 1.5 | -0.01em | `--text-body` |

| body-sm | 15px | 1.5 | -0.01em | `--text-body-sm` |

| body-xs | 14px | 1.5 | -0.01em | `--text-body-xs` |

| caption | 12px | 1.5 | — | `--text-caption` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|------|-------|-------|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 64 | 64px | `--spacing-64` |

| 80 | 80px | `--spacing-80` |

Border Radius

| Name | Value | Token |

|------|-------|-------|

| sm | 8px | `--radius-sm` |

| md | 12px | `--radius-md` |

| lg | 16px | `--radius-lg` |

| xl | 20px | `--radius-xl` |

| 2xl | 24px | `--radius-2xl` |

| pill | 9999px | `--radius-pill` |

| Element | Value |

|---------|-------|

| cards | 16px |

| buttons | 9999px (pill) |

| inputs | 12px |

| badges | 9999px (pill) |

| illustrations | 24px |

Shadows

| Name | Value | Token |

|------|-------|-------|

| shadow-sm | `0 1px 2px rgba(0, 0, 0, 0.05)` | `--shadow-sm` |

| shadow-md | `0 4px 12px rgba(0, 0, 0, 0.08)` | `--shadow-md` |

| shadow-lg | `0 8px 24px rgba(0, 0, 0, 0.1)` | `--shadow-lg` |

| shadow-button | `0 4px 0 #46A302` | `--shadow-button` |

| shadow-button-pressed | `0 2px 0 #46A302` | `--shadow-button-pressed` |

Layout

**Section gap:** 48px

**Card padding:** 24px

**Element gap:** 16px

**Max content width:** 960px

Components

Primary Action Button

**Role:** Filled button — main CTA

Background: Green (#58CC02) with green gradient, text: White (#FFFFFF). Full pill shape with 9999px radius. Padding: 13px 24px. Font: 16px/700/1.5/-0.01em. Box-shadow: `0 4px 0 #46A302` (simulated depth). Hover: background shifts to Green Hover (#4CAF00), shadow shifts to `0 2px 0 #46A302`. Active: transform translateY(2px), shadow flattens.

Secondary Action Button

**Role:** Outlined button

Background: transparent, text: Green (#58CC02), border: 2px solid Green (#58CC02). Full pill shape with 9999px radius. Padding: 11px 24px. Font: 16px/700/1.5/-0.01em. Hover: background rgba(88, 204, 2, 0.08).

Ghost Button

**Role:** Text-only button

Background: transparent, text: Macaw (#1CB0F6). Padding: 8px 12px. Font: 14px/700. Hover: text-decoration underline.

Card (Lesson)

**Role:** Interactive lesson tile

Background: White (#FFFFFF). Border-radius: 16px. Box-shadow: shadow-md. Padding: 24px. Border: 2px solid transparent. Hover: border-color: Swan (#E5E5E5). Contains skill icon, title, progress bar.

Progress Bar

**Role:** Learning progress indicator

Background track: Swan (#E5E5E5). Fill: Green (#58CC02). Height: 8px. Border-radius: pill (9999px). Animated fill transition.

Navigation Bar

**Role:** Top navigation

Background: White (#FFFFFF). Height: 64px. Box-shadow: `0 1px 0 rgba(0, 0, 0, 0.08)`. Logo left, navigation center, profile right. Nav items: 14px/600/Slug, active: Green (#58CC02).

Bottom Navigation (Mobile)

**Role:** Mobile tab bar

Background: White (#FFFFFF). Height: 56px. Box-shadow: `0 -1px 0 rgba(0, 0, 0, 0.08)`. 5 tab items with icons. Active tab: Green (#58CC02), inactive: Slug (#777777).

Input Field

**Role:** Text input

Background: White (#FFFFFF). Border: 2px solid Swan (#E5E5E5). Border-radius: 12px. Padding: 14px 16px. Font: 16px/400. Text color: Eel (#3C3C3C). Placeholder: Slug (#777777). Focus: border-color Green (#58CC02), box-shadow: `0 0 0 2px rgba(88, 204, 2, 0.2)`.

Badge

**Role:** Status/gamification indicator

Background: varies by type (Green for XP, Bee for streak, Cardinal for hearts). Text: White. Full pill shape (9999px radius). Padding: 4px 12px. Font: 12px/700.

Skill Node (Skill Tree)

**Role:** Interactive skill tree item

Circular icon container, 72px diameter. Background: Green (#58CC02) for unlocked, Swan (#E5E5E5) for locked. Crown icon for completed. Animated hover with scale(1.05).

Do's and Don'ts

Do

Use Green (#58CC02) exclusively for primary action buttons and positive feedback — it is the brand's most recognizable signal.

Apply the full pill radius (9999px) to all buttons and badges to maintain Duolingo's soft, approachable component language.

Use the 3D button shadow (`0 4px 0 #46A302`) on primary green buttons to simulate physical depth — this is a signature interaction pattern.

Reserve the warm accent spectrum (Bee, Fox, Cardinal) for gamification elements only — streaks, hearts, XP — not for general UI.

Maintain Snow (#F7F7F7) as the secondary background for section alternation, keeping the overall canvas White (#FFFFFF).

Use Feather Bold at 24–32px for section headings with tight line-height (1.17–1.2) to preserve the brand's confident, rounded personality.

Keep element gaps at 16px and section gaps at 48px for comfortable reading density that matches the brand's friendly pace.

Don't

Do not use Green (#58CC02) for text — it is reserved for interactive elements and progress indicators.

Do not flatten the 3D button shadow to a simple box-shadow — the `0 4px 0 #46A302` depth effect is a core brand interaction.

Do not use sharp corners (0px radius) on any component — even cards use at least 16px radius.

Do not pair Green with Cardinal red in the same context — red signals error/destructive actions and green signals success.

Do not use thin font weights (200, 300) — the brand voice is bold and friendly, requiring 400+ weights.

Do not introduce dark-mode-only surfaces (#1a1a1a etc.) in the primary theme — the brand is fundamentally light.

Do not use Macaw (#1CB0F6) for primary actions — it is reserved for informational and link contexts.

Do not place content directly on the White background without card elevation — use shadow-md or section Snow fills to maintain depth hierarchy.

Imagery

Duolingo's imagery is dominated by flat, vector-style illustrations featuring its mascot Duo the owl in countless expressive poses. Illustrations use a limited palette matching the brand tokens — primarily Green, White, Eel, and accent colors — with no photorealistic rendering. Skill icons are simplified, glyph-style illustrations within circular containers. Achievement graphics add sparkle and confetti effects using the accent spectrum (Bee, Fox, Regalia). Photography is absent from the core learning experience; the brand relies entirely on illustration and iconography to convey emotion and context.