iOS Design Spec

# A green owl who actually
knows where you live.

The Duolingo iOS app, dissected. Six saturated brand colors, every button a 3D extrusion, a circular lesson path that snakes through five sections. Duo the owl shows up wherever you take five days off.

View Design Tokens Explore Surfaces
9:41
5
Translate this sentence
A onça come a maçã.
The
jaguar
eats
apple
the
jaguar
The
runs
eats
Check
Lesson
9:41
🇵🇹
12
245
5
Section 2, Unit 5
Order at a restaurant
GUIDE
5
3
Start
Lesson path
9:41
JS
Jiang Shu
@jiang.shu · Joined Feb 2024
🇵🇹
🔥
12
Streak
⚡
1,842
XP
🏆
Sapph.
League
🌟
42
Top 3
💎
Sapphire League
3 days left · Top 5 promote
1
marie_kn 624 XP
2
akira.l 512 XP
3
YOU 487 XP
4
pedrofx 421 XP
5
nikodi 386 XP
Profile / League
iOS Surface Anatomy

## Three surfaces. Six saturated colors. One owl.

Duolingo's iOS app is built around a hard rule: every interactive element must look pressable. Every button extrudes 4-6pt downward with a darker bottom border, so the eye knows what to tap before the brain reads the label.

### Lesson path

Vertical winding sequence of 62pt circular nodes alternating left/right. Completed = gold + crown level. Active = green with floating "START" pill above. Locked = gray with padlock glyph. Section header banner in `#58CC02`.

### Lesson screen

Top: close X + green progress bar + heart count (lives). Body: Duo the owl avatar + speech bubble with prompt. Word bank chips at bottom. CHECK button stays gray-locked until a sentence is built; goes `#58CC02` on commit.

### Profile / League

4-cell stat grid (Streak / XP / League / Top 3). League card outlined in `#1CB0F6` with current rank list — user's row highlighted in green-tint. Promotion zone (top 5) marked with crown icons.

3D button system

### Every button looks like it remembers what gravity is.

Duolingo's signature: every interactive surface extrudes 4-6pt downward via a solid darker bottom shadow. On press, the button shifts down 2pt and the shadow vanishes — the click is the press; the lift is the release.

Disabled state uses the same gray (`#E5E5E5`) for the fill AND the shadow. Color-coded by intent: green=correct/continue, blue=info/utility, red=danger/heart-lost, yellow=streak/reward, purple=premium.

`shadow: 0 4-6px 0 darker` `press: translateY(2px)` `active: shadow → 0` `radius: 14px`
Continue
Practice
Lose a heart
Get Super
Check
12
12 day streak!
Streak resets at local midnight if no XP earned
Streak fire

### A flame that grows when you show up.

The streak counter is a radial-gradient orange flame with the day count in heavy 54pt 900-weight white type. Tap to open the streak modal — calendar of frozen / saved / extended days. Loss notifications come from Duo himself (a sad-owl illustration).

Lock screen widget surfaces the streak. Streak Society at 365 days swaps the flame to a gold variant.

`gradient: radial` `colors: #FFD86F → #FF4B4B` `shadow: 0 10px 0 #D43838` `num: 54/900`
Duo expressions

### One owl, four moods, infinite guilt-trips.

Duo the owl is Duolingo's animated mascot, rendered as a green spherical character with two white eyes and an orange beak. Five core states: idle (happy bobbing), correct (cheering), wrong (sad), dancing (level up), pleading (return notification).

Duo never appears smaller than 60×60pt. He fades in over the speech bubble during lesson prompts. Premium subscribers unlock the purple "Super Duo" variant.

`idle: green gradient` `sad: saturate(0.5)` `super: purple variant` `min size: 60pt`
happy
sad
super
Design System Reference

## Six saturated colors. Every button extruded.

Every token Duolingo's iOS app reaches for — surface ladder, type ramp, radius scale, components. The color system uses six brand-saturated hues with a paired "deep" shade for each — the deep one is always the 4pt shadow below.

View Source ↗

### Color

Six saturated brand hues, each paired with a darker shadow color. Green = correct & primary. Blue = info & utility. Red = heart lost & danger. Yellow = streak & reward. Orange = streak fire. Purple = premium / Super.

Primary (with shadow pair)
Green
#58CC02
Blue
#1CB0F6
Red
#FF4B4B
Yellow
#FFC800
Purple
#CE82FF
Accent
Orange (Streak)
#FF9600
Pink
#FF86D2
Gold (Crown)
#FFD900
Green Deep
#46A302
Green Dark
#3C8A02
Surface & Border
Canvas
#ffffff
Canvas Warm
#FFF7E1
Surface
#F7F7F7
Locked
#E5E5E5
Locked Deep
#C0C0C0
Ink
Ink
#3C3C3C
Ink Soft
#5A5A5A
Ink Muted
#777777
Ink Dim
#AFAFAF
Ink Inverse
#ffffff

### Typography

DIN Next Rounded / Feather Bold (substituted here with Nunito). Everything is chunky — 700 minimum, 900 common. Headlines tight at -1px tracking. Word chips and CTAs ALL CAPS. Number-only displays (XP, streak count) tabular.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--streak-num | 12 | 36 / 2.25rem | 900 (tnum) | -1px
--screen-title | Order at a restaurant | 22 / 1.38rem | 900 | -0.5px
--section-banner | Section 2 · Unit 5 | 14 / 0.88rem | 900 | 0.5px UPPER
--cta | Continue | 14 / 0.88rem | 900 | 0.8px UPPER
--prompt | Translate this sentence | 14 / 0.88rem | 800 | normal
--word-chip | jaguar | 13 / 0.81rem | 700 | normal
--stat-label | STREAK | 9 / 0.56rem | 700 | 0.5px UPPER
--xp-counter | +15 XP | 14 / 0.88rem | 900 | normal

### Radius

Bubbles are circles (lesson nodes 50%, avatars 50%). Buttons chunky at 14-16px. Word chips at 12px. Modals at 20-24px. Speech bubbles at 14px. The chunkiness is part of the friendliness — Duolingo never sharpens its corners.

Min
4px
Tag
8px
Chip
12px
Button
14px
Card
16px
Modal
20px
Pill
9999px
Node
50%

### iOS Spec Strip

The constants that anchor the iOS implementation.

Lesson node
62pt
Circle diameter. 5pt extrusion shadow. Crown badge 24×14pt below.
Button shadow
4-6pt
Always solid color, never blur. Disappears on press.
Press depth
2pt
translateY on tap. Spring back on release in 80ms.
Hearts (lives)
5
Free tier max. Each wrong answer → -1. Refill via Practice or Super.
Tab bar
5 icons
Learn / Sections / Leagues / Quests / Profile. Color-coded per section.
Confetti
on correct
Burst from check button. Color matches lesson section.
XP popup
+15
Floats up from check button, 0.6s. Green text, tabular figures.
Streak reset
local midnight
Needs ≥1 XP earned that day. Streak Freeze cosmetic saves 1 day.

### Components

A vocabulary of chunky, pressable, color-coded surfaces. The shadow is the component.

##### Buttons

Continue Practice Lose a heart Daily quest Get Super Check

##### Inputs

+15 XP Streak Heart lost Super

##### Word chips

The jaguar eats
used correct
View source ↗