Overview

Duolingo Owl

Atmosphere

Gamification rendered as visual language. Bright, tactile, unapologetically loud. The interface treats every interactive element like a 3D button waiting to be pressed — chunky 4px bottom shadows compress on tap, 2–3px solid borders never thin into hairlines, and Duo the owl green (#58cc02) saturates roughly 30% of the surface. The page reads like a 2015 iOS app reborn with better hierarchy and bolder type.

Color

Owl green leads. Streak orange (#ff9600) anchors the streak/energy economy, gem pink (#ce82ff) signals premium currency, eel blue (#1cb0f6) handles hints and links, and cardinal red (#ff4b4b) is reserved exclusively for wrong-answer feedback. Snow white (#ffffff) is the base canvas; pale green (#dbf8c5) softens success banners. Every CTA pairs its fill with a darker pressed-shadow swatch — #58a700 under green, #cc7a00 under orange.

Typography

Feather Bold is the chrome face — rounded, friendly, set at weight 800 across headings and buttons. Mona Sans handles body text. Display sizes start at 56px and never apologize. Headings always weight 800; 700 reads weak in this system. Letterforms are rounded; sharp serifs would break the friendliness contract.

Shape & Spacing

Radius language is generous: 16–20px on cards, 12px on inputs, 9999px on chips, pills, and progress bars. Skill-tree bubbles are circular (50%) with a 6px darker bottom border. Spacing follows a 4px base scale (4, 8, 12, 16, 24, 32, 48, 64). Containers cap at 1080px with 24px gutters.

Motion

180ms compress on every button press; 320ms back-out for skill-node unlocks using cubic-bezier(0.34, 1.56, 0.64, 1) for a slight overshoot. Active lesson bubbles pulse 1.0 → 1.05 every 1.6s. Duo blinks every 4–6 seconds and jumps on streak milestones. Motion is rewarding, never decorative.

Voice in UI

Buttons SHOUT in uppercase Feather Bold. Footers whisper in lowercase Mona Sans. The mascot, not the copywriting, carries the personality.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (17)

owlGreen

#58cc02

owlGreenDeep

#58a700

owlGreenLight

#89e219

owlGreenPale

#dbf8c5

streakOrange

#ff9600

streakOrangeDeep

#cc7a00

gemPink

#ce82ff

eelBlue

#1cb0f6

cardinalRed

#ff4b4b

cardinalRedDeep

#cc3b3b

beeYellow

#ffc800

snow

#ffffff

eel

#f7f7f7

swan

#e5e5e5

wolf

#777777

eelBlack

#3c3c3c

hare

#afafaf

Typography (5)

display

Feather Bold, 'DIN Round Pro', 'Helvetica Neue', system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

heading

Feather Bold, 'DIN Round Pro', 'Helvetica Neue', system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

body

Mona Sans, 'Helvetica Neue', system-ui, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

mono

JetBrains Mono, ui-monospace, Menlo, monospace

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

scale

unparsed

{
  "display": "56px/1.05",
  "h1": "32px/1.15",
  "h2": "24px/1.2",
  "h3": "18px/1.25",
  "bodyLarge": "17px/1.5",
  "body": "15px/1.5",
  "caption": "13px/1.4",
  "button": "16px/1.2"
}

Components (16)

Button

Pill-cornered CTA with chunky 4px bottom border that compresses on press for a tactile 3D feel.

html

Hand-tuned CSS, no framework

1 props · 6 states · 9 tags · 2 sources