---
title: "Duolingo design system"
variant: extended
source: https://www.duolingo.com/
captured_at: 2026-10-12
theme: light
industry: education
generator: Design DNA (https://four.wiralomi.com/style/duolingo-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Duolingo · Design System

> Bright, playful learning with a friendly voice

**Theme:** light · **Industry:** education · **Source:** https://www.duolingo.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Duolingo’s homepage pairs a spacious white canvas with confident green calls to action and expressive character illustrations. Rounded buttons, friendly typography, and alternating feature layouts make the learning offer feel approachable and easy to start.

## North star

Let bright green actions and expressive character illustrations carry the personality while generous white space keeps the page clear.

## Overview

The page is anchored by a white canvas (#ffffff), with a restrained neutral palette that leaves room for the colourful character artwork to stand out. Duolingo Green (#58cc02) marks the main start actions, feature headings, and footer; Signal Blue (#1cb0f6) is reserved for links and the secondary account action. A deep navy band (#100f3e) creates a clear visual break for the Super Duolingo promotion. Headings use the rounded, distinctive Feather display face, while Duolingo Sans handles body copy, navigation, and controls. A centered, two-column hero balances the headline and actions against a character cluster. Below it, generous white space supports alternating image-and-copy feature rows, followed by a full-width dark promotion and a green footer. Keep surfaces mostly flat: fine gray dividers and outlined secondary controls provide structure without competing with the illustrations.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Learning White | `#ffffff` | `--color-learning-white` | neutral | Main page canvas and open space around the hero, feature rows, and content sections. |
| Soft Graphite | `#777777` | `--color-soft-graphite` | neutral | Primary navigation and supporting text on the light canvas. |
| Sprout Green | `#a5ed6e` | `--color-sprout-green` | accent | Light green accent measured in the footer; secondary to the stronger brand green. |
| Duolingo Green | `#58cc02` | `--color-duolingo-green` | brand | Primary CTA fills, feature headings, and the large footer background. |
| Midnight Navy | `#100f3e` | `--color-midnight-navy` | surface | Full-width Super Duolingo promotional band. |
| Divider Gray | `#e5e5e5` | `--color-divider-gray` | semantic | Thin separators and subtle borders between navigation and page content. |
| Signal Blue | `#1cb0f6` | `--color-signal-blue` | accent | Text links and the outlined secondary account action. |
| Charcoal Text | `#4b4b4b` | `--color-charcoal-text` | neutral | Emphasized supporting copy and dark text on light backgrounds. |
| Pale Lime | `#d7ffb8` | `--color-pale-lime` | accent | Minor footer accent; keep its use limited rather than treating it as a primary surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Learning White) · `--color-surface` → `#100f3e` (Midnight Navy) · `--color-text` → `#777777` (Soft Graphite) · `--color-text-muted` → `#4b4b4b` (Charcoal Text) · `--color-border` → `#e5e5e5` (Divider Gray) · `--color-accent` → `#a5ed6e` (Sprout Green) · `--color-accent-2` → `#58cc02` (Duolingo Green) · `--color-accent-3` → `#1cb0f6` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#777777` | `#ffffff` | 4.48:1 | AA-large |
| `#777777` | `#100f3e` | 4.04:1 | AA-large |
| `#4b4b4b` | `#ffffff` | 8.72:1 | AAA |
| `#4b4b4b` | `#100f3e` | 2.08:1 | fail |
| `#a5ed6e` | `#ffffff` | 1.41:1 | fail |
| `#a5ed6e` | `#100f3e` | 12.88:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| duolingo-sans | `--font-body` | webfont | 700, 500 | Body copy, feature headings, navigation, links, and controls. | Nunito Sans |
| feather | `--font-display` | webfont | 700 | Display headline and main hero heading. | Nunito |

- **duolingo-sans:** Friendly sans-serif; measured weights 500 and 700. Navigation and eyebrow labels use uppercase with visibly spaced lettering.
- **feather:** Rounded display lettering, measured at weight 700; keep headlines bold and approachable.

### Type scale — Perfect Fifth (ratio ≈ 1.556, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | normal | -0.02em | — | feather | Large promotional display headline. |
| h1 | 48px | 700 | normal | 0 | — | feather | Main hero headline. |
| h2 | 32px | 700 | normal | 0 | — | duolingo-sans | Feature and section headings. |
| body | 17px | 500 | 1.41 | 0 | — | duolingo-sans | Feature descriptions and supporting copy. |
| caption | 15px | 700 | 1.47 | 0 | — | duolingo-sans | Compact labels and short supporting details. |
| nav | 15px | 700 | 1.15 | 0.053em | uppercase | duolingo-sans | Navigation and language selector labels. |
| link | 17px | 700 | 1.41 | 0 | — | duolingo-sans | Inline links and prominent text actions. |
| eyebrow | 15px | 700 | 1.33 | 0.053em | uppercase | duolingo-sans | Short uppercase section or category labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 10, 12, 14, 16, 24, 32, 40, 48, 96, 101 px.
- Section rhythm 96px · element gap 10px · card padding — · max content width 988px.

Use a centered content frame with a measured maximum width of 988px and a spacious density. The hero is a two-column composition with the character illustration opposite the centered headline and stacked actions. Feature content alternates image and copy sides down the page, separated by generous section intervals. Keep the language strip horizontally aligned beneath the hero. The dark promotion and bright footer span the full viewport, while the English-test and closing CTA sections return to centered content layouts.

## Shape & elevation

- Radius: button `12px` · nav `12px` · link `12px` · xs `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page is largely flat, with no measured shadow system. Use thin #e5e5e5 dividers and outlined secondary actions to separate controls from the white canvas. Reserve stronger depth and colour contrast for the illustrated assets, the solid navy promotional band, and the full-width green footer.

## Imagery

Use polished, colourful character illustrations rather than photography. Characters, learning props, phones, and course icons appear as playful clusters with clean edges and saturated colours; keep them distinct from the surrounding white canvas. Artwork can overlap its local composition, but should not obscure headlines or actions. The observed illustrations contain colours beyond the measured brand palette, so treat those hues as artwork details rather than page-level UI colours.

## Components

### Primary start button

Wide Duolingo Green (#58cc02) rounded action with bold uppercase white text; used to make starting a course the clearest next step.

### Secondary account action

White rounded outlined control with Signal Blue (#1cb0f6) uppercase text, positioned directly below the main hero CTA.

### Language category strip

Horizontally arranged course links with small flag or subject icons, uppercase labels, and subtle divider lines.

### Alternating feature row

Open two-column feature presentation, switching the illustration and copy sides between rows; green headings introduce each benefit.

### Dark promotional band

Full-width Midnight Navy (#100f3e) section pairing Super Duolingo artwork with a compact free-trial action.

### Footer link columns

Bright green footer with several compact link groups, pale supporting text, and a separated language-links row.

### Measured component styles

- **Primary button** (“I ALREADY HAVE AN ACCOUNT”): transparent background · text #1cb0f6 · border 2px solid · radius 12px · padding 0px 16px · 700 15px duolingo-sans · uppercase
- **Link** (“research shows that it works”): transparent background · text #1cb0f6 · radius 0px · padding 0px · 700 17px duolingo-sans
- **Navigation item** (“ENGLISH”): transparent background · text #777777 · radius 0px · padding 0px · 500 17px duolingo-sans

## Do

- Use white space to keep the page calm and legible.
- Make Duolingo Green the most prominent UI accent.
- Pair bold rounded headings with concise supporting copy.
- Alternate illustration and copy sides in feature rows.
- Use Signal Blue sparingly for secondary actions and links.
- Keep major promotional and footer bands full width.

## Don't

- Don't add gradients or a heavy shadow system.
- Don't crowd the hero with extra interface elements.
- Don't use the artwork's many hues as new UI colours.
- Don't make the secondary account action compete with the primary CTA.
- Don't turn the feature rows into dense cards.
- Don't apply the dark promotional background to the whole page.

## Agent prompt

Build a new Duolingo-style education page with a spacious white canvas (#ffffff), centered content, and playful character illustrations. Use Duolingo Green (#58cc02) for primary actions and feature headings, Signal Blue (#1cb0f6) only for links or secondary actions, and Midnight Navy (#100f3e) for one focused promotional band. Use rounded, bold display headings and friendly sans-serif body text; keep navigation labels compact and uppercase. Arrange the hero in two columns, then alternate illustration and copy sides through the feature content. Let artwork provide colour and personality without turning its internal hues into UI tokens. Keep surfaces mostly flat, use subtle Divider Gray (#e5e5e5) separators, and finish with a full-width green footer containing clear link groups.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header above a spacious, centered two-column hero; language strip spans beneath the hero. | Prominent get-started action, Secondary account sign-in, Scrollable course choices | White canvas, Green primary button, Blue outlined secondary action, Character illustration |
| 2 | feature-split | Long white feature sequence with alternating illustration and copy columns. | Benefit-led storytelling, Inline research link | Green feature headings, Short gray copy, Playful learning illustrations |
| 3 | cta | Full-width dark promotional band with illustration and offer content arranged side by side. | Free-trial prompt | Midnight Navy background, Super Duolingo graphic, Compact light button |
| 4 | feature-split | White single-feature row with copy on one side and illustration on the other. | Test information, Certification action | Green title, Concise description, Illustrated test visual |
| 5 | cta | Centered heading and CTA above a broad illustrated scene. | Repeat get-started action | Green heading, Rounded primary action, Illustrated phone and learning objects |
| 6 | footer | Full-width green background with five link columns and a separated language-link row. | Grouped site navigation, Language selection | Bright green surface, Small pale links, Thin separating rule |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/duolingo-com