A toy-like, game-friendly education brand on a bright white canvas: one grass-green brand colour (feather #58cc02) with calm grey text (eel #4b4b4b, wolf #777777) and a cast of flat vector "World Character" illustrations doing all the emotional work. Two faces each get a job: the rounded duolingo-sans for the hero headline (32/700 eel), body (17/500) and UPPERCASE bold button/nav labels at +0.8px tracking, and the heavier Feather Bold for big lowercase section headlines, always set in green. The signature component is the chunky 3D button — a solid #58cc02 face sitting on a hard darker-green lip (box-shadow:0 4px 0 #58a700), radius 12px, 50px tall, white uppercase label — that visibly depresses onto the lip when pressed; the secondary is a white face with macaw-blue #1cb0f6 text and a grey #e5e5e5 lip. Everything is rounded (12px) and flat: depth is ONLY the hard colour lip, never a blurred drop shadow, and structure comes from whitespace and colour blocks (a green footer, occasional deep-navy #100f3e bands) rather than hairline borders.
Browse Duolingo in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: duolingo.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Logged-in learning app: behind login (needs-dashboard). Responsive: breakpoints not captured. Motion: partial (button press mechanics captured).
Duolingo's marketing is deliberately toy-like and friendly: a bright white canvas, one rounded sans, a single grass-green brand colour and a cast of flat vector "World Character" illustrations doing all the emotional work. The signature element is the chunky 3D button — a solid colour face sitting on a darker same-hue "lip" (a hard, un-blurred 4px offset shadow) that visibly depresses when pressed, so the whole UI feels tactile and game-like. Big section headlines are set in the heavier Feather display face and coloured green, while everything else stays in the rounded Duolingo Sans over calm grey text. Nothing is sharp or corporate; structure comes from generous whitespace and colour, not borders or drop shadows. Feels: playful, rounded, tactile, cheerful.
| Token (brand name) | Hex | Role / usage |
|---|---|---|
| feather green | #58cc02 | Primary brand: buttons, display headlines, logo, footer |
| button lip (seaSponge) | #58a700 | Darker-green 3D bottom lip under the primary button |
| macaw blue | #1cb0f6 | Links, secondary-button text, blue accents |
| iceberg | #ddf4ff | Light-blue section tint |
| Token | Hex | Role / usage |
|---|---|---|
| eel | #4b4b4b | Primary text, hero headline |
| wolf | #777777 | Secondary text, nav labels |
| hare | #afafaf | Tertiary / muted |
| snow | #f1f7fb | Text on green / dark sections |
| Token | Hex | Role / usage |
|---|---|---|
| polar | #ffffff | Page canvas, cards, button faces |
| swan | #e5e5e5 | Borders, secondary-button lip |
| whale (deep navy) | #100f3e | Dark feature-section background |
| navy variants | #000437 / #042c60 | Deep-navy text / sections |
Rule: green is the hero colour — reserved for primary CTAs, big display headlines, the logo and the footer. Rule: structure is whitespace + colour, never hairline borders or blurred shadows.
duolingo-sans — the rounded workhorse: hero headline, body, buttons, nav.feather (Feather Bold) — heavier display face for big section headlines (always green).| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Section display | feather | 48 | 700 | normal | lower |
| Hero headline (h1) | duolingo-sans | 32 | 700 | normal | sentence |
| Body | duolingo-sans | 17 | 500 | normal | sentence |
| Button / UI label | duolingo-sans | 15 | 700 | +0.8px | UPPERCASE |
| Nav / eyebrow | duolingo-sans | ~13 | 700 | wide | UPPERCASE |
Patterns: display headlines are set lowercase in green Feather; buttons and nav labels are UPPERCASE bold with positive tracking. Weight is bold (700) for emphasis, medium (500) for body.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.