A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
12type steps
3radius steps
12pxspacing base
Duolingo, in one page
Duolingo's iOS app is a cartoon classroom in your pocket. The canvas is a clean snow white (#FFFFFF) interrupted by oversized blocks of saturated, cheerful color — Feather Green (#58CC02) on every primary button, Fox Orange (#FF9600) on the streak flame, Bee Yellow (#FFC800) on the gem counter, Cardinal Red (#FF4B4B) on lost hearts. The palette is bright to the point of playful aggression. This is deliberate: Duolingo is trying to convert a chore (language practice) into a game, and the color system borrows more from mobile puzzle games than from education apps. Nothing is muted, nothing is sophisticated, and everything is tuned to reward.
The mascot, Duo the owl, is the brand's load-bearing element. Duo appears on the empty-state lesson screen, pops in to celebrate a streak milestone, crosses his arms on the loss-of-hearts screen, and cries passive-aggressive pleas into push notifications when you skip a day. Illustrations are rounded, flat-shaded, and friendly — no gradients, no rendered shadows, just bold outlines and joyful geometry. Every character in the cast follows the same visual rule: simple shapes, two or three colors, an expressive face.
Typography is Feather Bold for headlines and the Duolingo wordmark only — a custom face by Johnson Banks and Krista Radoeva (2019) inspired by Duo's wings and chunky enough to read like a kids' book. Body type is DIN Next Rounded Pro, a geometric rounded sans that carries the UI. Everything rounds: the letterforms, the button corners (16pt on cards, 12pt on answer tiles), the skill node circles, the progress ring around the XP meter. Dynamic Type is respected but the app's visual rhythm depends on large glyphs sitting on large buttons, so size 13-32pt is the practical working range. The signature typography moment is the big question card — a word or phrase in 22-24pt Feather Bold centered over an illustration, with tappable answer tiles below.
Key Characteristics:
- Snow white canvas (
#FFFFFF) with saturated branded accents — the opposite of muted - Feather Green (
#58CC02) as the primary action, Cardinal Red (#FF4B4B) as destructive / wrong - Duo the owl mascot as the brand's emotional anchor — present on empty states, wins, and nudges
- Gamified HUD: streak fire, gem count, heart lives, XP ring — always visible at the top of Home
- Signature learning path: curved vertical trail of circular skill nodes (filled when complete, locked otherwise)
- Chunky 3D-feeling buttons with a lower shadow ledge — press collapses the ledge for tactile feedback
- Celebration moments: confetti, Duo cheering, juicy springs on level-up and streak milestones
- Haptics + sound paired on every correct/wrong answer, streak save, and gem earn
- Rounded-everything geometry: 16pt cards, 12pt tiles, 500pt pill buttons, 50% skill nodes
Do's and don'ts
Do
- Use Snow white (
#FFFFFF) as the primary canvas — not off-white, not beige - Reserve Feather Green (
#58CC02) for the primary action and correct state — it's the verb - Build buttons with the 3D ledge (4pt darker-tone offset below) — the chunky feel is the brand
- Pair every correct/wrong answer with both a haptic and a sound — the game feel needs both channels
- Let Duo the owl carry emotional moments — empty states, celebrations, streak saves, loss screens
- Use Cardinal Red (
#FF4B4B) for wrong answers, lost hearts, and destructive only — nothing else - Keep the HUD (streak, gems, hearts) visible on Home — it's the habit-loop dashboard
- Round everything: 16pt cards, 12pt tiles, circular nodes, pill chips — no sharp corners on interactive surfaces
- Use Feather Bold for numbers and headlines; DIN Rounded for everything else
- Celebrate wins loudly — confetti + haptic + sound + Duo animation on milestones
Don't
- Don't use sophisticated or muted palettes — Duolingo is deliberately bright and playful
- Don't use shadows as your depth model — use solid-color 4pt ledges instead
- Don't use pure black text (
#000000) for body — use Eel (#4B4B4B) for softer warmth - Don't add more accent colors — the 6-role palette (green/red/orange/yellow/blue/purple) is complete
- Don't use thin or light font weights — Duolingo type starts at weight 400 and lives at 700-800
- Don't hide the streak — the streak is the app's emotional core, always surface it
- Don't use long sentences on buttons — "CONTINUE", "CHECK", "GOT IT" — single-verb caps only
- Don't animate Duo subtly — when Duo appears, Duo is a personality, not a decoration
- Don't use system-default iOS alerts for celebrations — build the full-screen takeover with confetti
- Don't make the path straight — the curved wave is recognized, a straight list feels like email
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Duolingo design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Feather Green: #58cc02
- Mask Green: #89e219
- Button Green Shadow: #58a700
- Cardinal Red: #ff4b4b
- Fox Orange: #ff9600
- Bee Yellow: #ffc800
- Macaw Blue: #1cb0f6
- Beetle Purple: #ce82ff
- Snow: #ffffff
- Polar: #f7f7f7
Type:
- families: Feather Bold, DIN Next Rounded Pro, SF Pro Rounded, Fallback Stack
- scale: 11, 12, 13, 14, 16, 17, 18, 20, 22
- weights: 400, 500, 700, 800
Shape:
- radius: 12, 15, 17
- elevation: Swan Shadow (`#C4C4C4`): 3D ledge under neutral tile buttons. | Default: `#FFFFFF` face + `#E5E5E5` 2pt border + 2pt ledge shadow `#E5E5E5` | Button Green Shadow: `#58A700`
Spacing: 12, 16
Rules:
- Use Snow white (`#FFFFFF`) as the primary canvas — not off-white, not beige
- Reserve Feather Green (`#58CC02`) for the primary action and correct state — it's the verb
- Build buttons with the 3D ledge (4pt darker-tone offset below) — the chunky feel is the brand
- Pair every correct/wrong answer with both a haptic and a sound — the game feel needs both channels
- Let Duo the owl carry emotional moments — empty states, celebrations, streak saves, loss screens
- Use Cardinal Red (`#FF4B4B`) for wrong answers, lost hearts, and destructive only — nothing else
Avoid:
- Don't use sophisticated or muted palettes — Duolingo is deliberately bright and playful
- Don't use shadows as your depth model — use solid-color 4pt ledges instead
- Don't use pure black text (`#000000`) for body — use Eel (`#4B4B4B`) for softer warmth
- Don't add more accent colors — the 6-role palette (green/red/orange/yellow/blue/purple) is complete
- Don't use thin or light font weights — Duolingo type starts at weight 400 and lives at 700-800
- Don't hide the streak — the streak is the app's emotional core, always surface it
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Feather Green (
#58CC02): The verb color — primary CTAs, "Continue" button, correct answer state, completed skill nodes, XP ring fill. - Mask Green (
#89E219): Lighter accent — progress bar fills, the top highlight on 3D green buttons. - Button Green Shadow (
#58A700): The darker ledge below primary green buttons — gives the 3D pressed-surface feel.
Mascot & Gamification
- Cardinal Red (
#FF4B4B): Wrong answer, lost heart, destructive actions, streak-broken state. - Fox Orange (
#FF9600): Streak flame, daily goal highlight, "on fire" energy state, hearts-refill CTA. - Bee Yellow (
#FFC800): Gems currency, reward badges, chest icons, yellow stars on skill completion. - Macaw Blue (
#1CB0F6): Information, links, speaking-exercise state, "Tip" callouts, checkpoint popups. - Beetle Purple (
#CE82FF): Super Duolingo (premium) accent — used sparingly on the Super badge, promo CTAs.
Canvas & Surfaces
- Snow (
#FFFFFF): Primary light canvas. - Polar (
#F7F7F7): Section backgrounds, locked-lesson cards, subtle dividers between path sections. - Swan (
#E5E5E5): UI surfaces — answer tile default, skill-node locked fill, progress-bar track. - Swan Shadow (
#C4C4C4): 3D ledge under neutral tile buttons.
Text
- Eel Gray (
#4B4B4B): Primary text — question prompts, body copy, labels. - Hare Gray (
#AFAFAF): Secondary text — helper copy, placeholder, streak-day labels, unselected tab. - Wolf Gray (
#777777): Tertiary — timestamps, disabled labels.
Dark Mode
Duolingo dark mode shifts to a blue-tinted navy canvas that keeps the cartoon palette legible without the eye-strain of pure light.
- Dark Canvas (
#131F24): Primary dark background — a blue-black, not true black. - Dark Surface 1 (
#1F2C34): Card / lesson container background. - Dark Surface 2 (
#37464F): Answer tile default fill, higher-elevation surfaces. - Dark Divider (
#37464F): Hairline separators. - Dark Text Primary (
#FFFFFF): Body and prompts invert to white. - Dark Text Secondary (
#AFAFAF): Hare gray carries through. - Accent colors (green, red, orange, yellow, blue, purple) retain their light-mode hex — the brand stays bright against the dark.
Semantic
- Correct (
#58CC02): Green fill + checkmark + "Great!" toast on correct answer. - Wrong (
#FF4B4B): Red fill + "Correct solution:" reveal + shake animation. - Neutral Disabled (
#E5E5E5fill,#AFAFAFtext): Locked skill node, disabled answer tile.
Type scaleRead the full spec
Font Family
- Display / Headlines:
Feather Bold(proprietary by Johnson Banks / Krista Radoeva, 2019) — chunky, rounded, inspired by Duo's wings. Used for the wordmark, hero numbers ("7" day streak), and question prompts. - Body / UI:
DIN Next Rounded Pro(Monotype) — geometric sans with rounded terminals. All buttons, labels, body copy, tab bar labels. - Fallback Stack:
SF Pro Roundedon iOS (closest free substitute), then-apple-system, BlinkMacSystemFont, 'Nunito', 'Baloo 2', sans-serif - Non-Latin: DIN Next Rounded Pro has CJK siblings in Monotype's library; Duolingo ships localized fonts per script
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Wordmark | Feather Bold | 34pt | 700 | 1.0 | -0.5pt | The "duolingo" logotype |
| Hero Streak Number | Feather Bold | 56pt | 700 | 1.0 | -1.0pt | The big "7" on streak detail |
| Screen Title | Feather Bold | 28pt | 700 | 1.15 | -0.4pt | "Unit 3", "Shop", "Leaderboard" |
| Question Prompt | Feather Bold | 22pt | 700 | 1.25 | -0.2pt | "Translate this sentence" |
| Section Header | DIN Rounded | 20pt | 800 | 1.2 | -0.2pt | "Daily Quests", "Your League" |
| Skill Node Label | DIN Rounded | 16pt | 800 | 1.2 | 0pt | "Basics 1", "Food", "Travel" |
| Primary Button | DIN Rounded | 17pt | 800 | 1.0 | 0.4pt | "CONTINUE", "CHECK" — tracked + uppercase |
| Answer Tile | DIN Rounded | 17pt | 700 | 1.2 | 0pt | Tap-to-answer word choices |
| Body | DIN Rounded | 16pt | 400 | 1.4 | 0pt | Lesson explanations, tip content |
| Helper | DIN Rounded | 14pt | 500 | 1.3 | 0pt | Sub-copy, "3 of 10 lessons" |
| HUD Number | Feather Bold | 18pt | 700 | 1.0 | -0.1pt | Streak count, gem count, heart count |
| Meta / Timestamp | DIN Rounded | 13pt | 500 | 1.2 | 0pt | "5 min ago", "Day 12" |
| Tab Label | DIN Rounded | 11pt | 700 | 1.0 | 0.2pt | Tab bar labels |
| Label (UPPER) | DIN Rounded | 12pt | 800 | 1.2 | 1.0pt | "SECTION 1", "STAGE 2" on path headers |
Principles
- Two families, one voice: Feather for emotion (titles, numbers, Duo-said-so moments), DIN Rounded for everything else — buttons, tiles, labels.
- Weight concentrated at 400 / 500 / 700 / 800: No thin, no black. Bold is the default tone; 800 is the button voice.
- Uppercase only on button labels: "CONTINUE", "CHECK", "GOT IT" — tracked at 0.4pt for the chunky-button feel. Never uppercase body copy.
- Numbers are stars: The streak, gem, and XP counts live in Feather Bold at sizes 2x the surrounding UI — Duolingo treats numbers as celebratory.
- Dynamic Type supported on body: Prompts and body copy scale; button labels, tab labels, and HUD numbers stay fixed to preserve layout.
Components and layoutRead the full spec
Buttons
The 3D Primary Button (The Green Slab) The single most recognizable Duolingo component. A chunky button with a visible "ledge" below — a 4pt darker-green shadow that makes the button appear to sit on top of itself.
- Shape: Rounded rectangle, 16pt corner radius, full-width inside 16pt insets (or 56pt tall pill for smaller CTAs)
- Height: 56pt for full-width, 48pt for inline
- Top face:
#58CC02(Feather Green) - Bottom ledge:
#58A700, offsety: +4pt, visible via aboxShadow: 0 4px 0 #58A700or overlay - Pressed: scale 1.0 but translate
y: +4ptso the top face meets the ledge (no visible ledge when pressed) + soft haptic - Text: DIN Rounded 17pt weight 800 uppercase, white, letter-spacing 0.4pt
- Used for: "CONTINUE", "CHECK", "START", "GOT IT"
The 3D Secondary / Neutral Button (The Swan Slab) Same 3D construction, grayscale.
- Top face:
#FFFFFF - Bottom ledge:
#E5E5E5(Swan) - Border: 2pt solid
#E5E5E5 - Text: Eel Gray
#4B4B4B, same typography as primary - Used for: "SKIP", "NO THANKS", "MAYBE LATER"
The 3D Destructive Button (The Red Slab)
- Top face:
#FF4B4B - Bottom ledge:
#E53030 - Text: white
- Used for: "END SESSION", "CLEAR PROGRESS", rarely used — destructive actions usually live behind confirm sheets
Icon Actions (Heart, Close, Settings)
- Size: 24pt glyph, 44pt hit area
- Default: Hare
#AFAFAFor Eel#4B4B4Bdepending on context - Active: role color (red heart, orange flame, yellow gem)
Answer Tile (Tap-to-choose word)
- Shape: Rounded rectangle, 12pt corner radius
- Default:
#FFFFFFface +#E5E5E52pt border + 2pt ledge shadow#E5E5E5 - Hover/selected:
#DDF4FF(light blue tint) face +#84D8FFborder + Macaw Blue ledge - Correct after check:
#D7FFB8(green tint) face +#58CC02border + text#58A700 - Wrong after check:
#FFDFE0face +#FF4B4Bborder + text#EA2B2B - Font: DIN Rounded 17pt w700 Eel gray
- Padding: 12pt vertical, 20pt horizontal
Cards & Containers
Skill Node (Path Circle) The signature Duolingo element. A circular node on the curved learning path, containing an icon and (when completed) a star crown.
- Diameter: 80pt (standard), 96pt (current / "you are here" node pulses to 96pt)
- Completed:
#58CC02fill + white icon + 3D ledge#58A700+ yellow crown with star count above - In-progress:
#58CC02fill + white icon + 3D ledge + animated pulse ring - Locked:
#E5E5E5fill +#AFAFAFlock icon + no ledge - Gold-crowned (completed to max level):
#FFC800fill + white icon +#E29F03ledge + crown badge - Pressed: scale 0.96 + soft haptic
- Legendary (Super Duolingo exclusive):
#CE82FFfill + white + sparkle overlay
Lesson Card (Home unit header)
- Background: Brand color for that unit (often green but varies per unit)
- Height: 140pt, full-width minus 16pt margins
- 16pt corner radius
- White Feather Bold title, 22pt
- Subtitle DIN Rounded 15pt w500 white 85% opacity
- Right side: illustration of Duo or the unit mascot
Question Card (Lesson screen)
- Full-width, white canvas
- Top 40%: illustration or speech-bubble with the question subject
- Center: prompt in Feather Bold 22pt Eel, centered
- Below: 2-4 answer tiles laid out in a 2-column grid (tap-to-select) or linear (tap-to-translate)
- Bottom: fixed CHECK button (disabled gray until an answer is selected, primary green when ready)
XP Ring Card (Home HUD / profile)
- Circular progress ring, 48pt diameter, 4pt stroke
- Track:
#E5E5E5 - Fill:
#58CC02(rotates from top, 0 to 360deg with animation) - Center: XP number in Feather Bold 14pt
HUD Chip (Streak / Gems / Hearts)
- Pill shape, 32pt tall, 500pt corner radius
- Icon left (20pt) + number right in Feather Bold 18pt
- Streak: flame icon
#FF9600+ number in Eel (#4B4B4Blight / white dark) - Gems: diamond icon
#1CB0F6+ number - Hearts: heart icon
#FF4B4B+ number (or infinity symbol for Super users) - Background: transparent in HUD,
#F7F7F7in detail cards
Navigation
Bottom Tab Bar
- Height: 60pt + safe area
- Background:
#FFFFFFwith 1pt top border#E5E5E5 - Tabs (5): Learn (path), Leaderboard (trophy), Quests (scroll/target), Shop (heart+gem), Profile
- Icon size: 28pt
- Active color: Feather Green
#58CC02with a soft green tint background pill (36pt height, 500pt radius,#E5F8D5fill) behind the active tab - Inactive: Hare
#AFAFAF - Labels: hidden by default on Duolingo's current iOS app (icon-only), optional 11pt DIN Rounded w700 below icon
- Active tab: filled SF Symbol equivalent; inactive: outlined
Top HUD (Home screen)
- Height: 56pt + safe area
- Flag (28pt circular) left-aligned — language selector
- Streak chip, gems chip, hearts chip — right-aligned, 12pt gap between
- Background: transparent over scroll with blur on scroll-up
- The flag tap opens a bottom sheet language switcher
Lesson Top Bar (during active lesson)
- Height: 56pt + safe area
- Close (X) icon left — 24pt Eel gray, 44pt hit area
- Progress bar center — 12pt tall, 500pt radius,
#E5E5E5track,#58CC02fill with#89E219top highlight - Hearts counter right — heart icon + number
Input Fields
Text Input (Free-type answer)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Path nodes at 72pt; horizontal offset reduced to ±40pt |
| iPhone 13/14/15 | 390pt | Standard 80pt nodes; path offset ±60pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top HUD |
| iPhone 15/16 Pro Max | 430pt | 88pt nodes; question illustration scales to 280pt |
| iPad | 768pt+ | 2-column path (dual-track layout); answer tiles in 4-column grid |
Dynamic Type
- Question prompts, body, lesson explanations: full scale
- Button labels: fixed (uppercase layout is tight)
- HUD numbers: fixed (dashboard alignment)
- Tab labels: fixed
- Skill node labels: scale up to XL only (layout-sensitive)
Orientation
- All screens: portrait-locked (Duolingo is one-hand usage)
- Match / word-bank exercises do allow landscape on iPad for dual-column layout
Touch Targets
- Primary button: 56pt tall — impossible to miss
- Answer tiles: 48pt minimum tall
- Skill nodes: 80pt (well above the 44pt HIG minimum)
- Icon buttons: 44pt hit area with 24pt glyph
- HUD chips: 32pt tall but 44pt effective tap
Safe Area Handling
- Top: HUD respects the safe area and Dynamic Island; chips align to the trailing edge
- Bottom: tab bar respects the home indicator; during active lesson the CHECK button sits just above the safe area
- Sides: 16pt content insets on all scrollable screens
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-duolingo {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #131f24;
--heading-color: #131f24;
--link-color: #427f00;
--link-hover-color: #274c00;
--border-color: #d5d7d8;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(19,31,36,0.06);
--card-hover-shadow: 0 6px 18px rgba(19,31,36,0.12);
--header-bg: #131f24;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #666d71;
--button-bg: #58a700;
--button-text-color: #000000;
--button-hover-bg: #3d7400;
--button-border: none;
--button-border-radius: 15px;
--button-secondary-bg: #f1f2f2;
--button-secondary-text-color: #131f24;
--button-secondary-hover-bg: #e3e4e5;
--button-secondary-border: 1px solid #d5d7d8;
--prompt-bg: #f3f4f4;
--prompt-text-color: #131f24;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 15px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- gyokusendo 75.9%
- sanu 75.0%
- acorns 74.3%
- kintetsu 73.8%
- plenty of fish 73.8%
Where this came from
- Source document
ios/design-md/misc/duolingo/DESIGN.md· 25.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.