duo-design

Duolingo Design — Map of Content

Duolingo has no public design-system site: design.duolingo.com 301-redirects to blog.duolingo.com/hub/design/, a four-post curated hub (checked 2026-09-22). So these nodes are built from the design and engineering posts on the blog, and they carry patterns and rationale, never literal tokens.

For the craft layer — easing curves, duration tables, contrast ratios, focus rings, component APIs — hand off per [[../duolingo/references/design-handoff]].

This skill is structured as a graph: scan the descriptions below, follow only the [[wikilinks]] you need.

Motion and feeling

• [[references/juicy-motion]] — the bouncy, slightly-overshot easing curves that make every interaction feel responsive.
• [[references/celebration-design]] — visual grammar for "you did the thing" — confetti, scaling, character cameos.

The character layer

• [[references/character-system]] — Duo and friends as the emotional API of the product; how to build one for any brand.

Tokens

• [[references/color-tokens]] — the role/value split (e.g. correct-feedback vs. green-500) that lets a brand evolve without rewriting screens.
• [[references/type-system]] — Feather Bold, weight rules, and the legibility-first hierarchy.

Surfaces

• [[references/sound-as-ux]] — non-optional audio feedback; cheap to add, disproportionately rewarding.
• [[references/progress-bars]] — the most important UI element in a gamified product, treated as such.
• [[references/bottom-bar-navigation]] — five tabs, character-icon recognition, never moves.

Deciding what to build

• [[references/prototype-the-extremes]] — explore by pushing each competing value to its maximum as a separate direction, then harvest the breaking points.
• [[references/consistency-vs-purpose]] — consistency lowers learning cost and simplicity raises clarity; when either stops paying, tier the system instead of applying one rule everywhere.
• [[references/craft-pass-guardrail]] — how to fund and measure a pure polish project without pretending it will move the core metric.
• [[references/design-for-many-ship-one]] — build the layout for N at launch even when you enable one, so the later experiment costs an analysis rather than a redesign.

What the interface claims about the user

• [[references/required-path-not-optional-branch]] — optional depth reads as skippable; put the behaviour you want on the main route and serialize for depth.
• [[references/capability-labels]] — name levels and units by what the user can do afterward, anchored to an external standard where one exists.
• [[references/label-the-hard-thing]] — telling users a task is hard before they attempt it raises tolerance for failing and pride in passing.

Defaults

• [[references/accessibility-default]] — color-not-only, type-scaling, motion-reduce, screen-reader paths as ship blockers, not nice-to-haves.
• [[references/error-as-delight]] — an error state is a free chance to be the brand instead of break it.

Sibling skills

• [[../duo-gamification/SKILL]] — juicy-feedback is design + gamification; the implementation lives here.
• [[../duo-voice/SKILL]] — celebrations and errors are also a copy problem.
• [[../duo-retention/SKILL]] — the bottom bar exists because retention requires a stable home.

Sources

• blog.duolingo.com/hub/design/ — the four-post design hub (what design.duolingo.com now redirects to, as of 2026-09-22)
• @duolingo product surfaces — observed motion and sound