🔥
12
Streak
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.
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.
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.
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.
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.
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
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 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
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.
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.
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 |
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.
The constants that anchor the iOS implementation.
A vocabulary of chunky, pressable, color-coded surfaces. The shadow is the component.