duo-design

Stars2

Forks0

UpdatedMay 4, 2026 at 16:55

UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. Source the Duolingo design system at design.duolingo.com.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

HKTITAN

HKTITAN/duolingo

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

11 files

SKILL.md

readonly

name	duo-design
description	UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. Source the Duolingo design system at design.duolingo.com.
license	MIT
metadata	{"author":"HKTITAN","version":"1.0.0","graph":true}

Duolingo Design — Map of Content

The Duolingo design system is publicly documented at design.duolingo.com. This skill extracts the patterns (not the literal tokens) so they apply to any gamified or learning product, not just language apps.

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.

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

design.duolingo.com — the public design system
@duolingo product surfaces — observed motion and sound

More from this repository

same repository

duo-culture

HKTITAN/duolingo

Build the team the way Duolingo built theirs — the Green Machine operating model, talent density over headcount, candor protocol ("focus on what, not who"), hire-slow / fire-fast, and the "no process unless it makes decisions better" rule. Use when the user is hiring, defining team rituals, debating remote vs. office, choosing a feedback model, or installing an operating system in a team that has none. Source the Duolingo Handbook (Raise the Bar + Green Machine).

2026-05-042

duo-experimentation

HKTITAN/duolingo

Duolingo-style experimentation as a decision protocol — hundreds of A/B tests a week, opinions resolved by data, ideas killed quickly. Covers hypothesis design, metric selection, guardrails, sample size, novelty effects, and explicit kill criteria. Use when the user wants to run an A/B test, decide between two designs without arguing, set up an experiment program, debug why a test isn't moving, or build a culture where "show don't tell" replaces seniority-based decisions. Source the Duolingo Handbook (Show Don't Tell) and engineering blog posts.

2026-05-042

duo-gamification

HKTITAN/duolingo

Add Duolingo-style play to any product — XP systems, juicy feedback, leagues, celebration moments, hearts/energy, and the anti-grind discipline that keeps gamification from turning toxic. Use when the user asks how to make a product fun, addictive, or "feel like a game," when designing rewards, levels, or progress, or when an existing system feels like a slot machine and they want it to feel like a craft. Source the Duolingo Handbook (Make It Fun) and the Duolingo design system.

2026-05-042

duo-growth

HKTITAN/duolingo

Duolingo-style growth that doesn't break retention — viral loops, brand-as-acquisition (the TikTok playbook), referral mechanics, localization as a growth lever, and the founder-mode marketing that turned a mascot into a meme. Use when the user is planning acquisition, building a referral system, considering paid vs. organic, evaluating a marketing channel, or trying to turn an existing brand into a growth engine. Source the Duolingo Handbook (Make It Fun) and observed marketing patterns from 2022–2025.

2026-05-042

duo-product

HKTITAN/duolingo

Make product decisions the way Duolingo does — long-view over short-term, ruthless prioritization, ship-and-learn over plan-and-ship, dogfooding, and the "intuitive by default" quality bar. Use when the user is roadmapping, deciding what to cut, debating whether to ship, defining a quality bar for a feature, or trying to install a "product-led" culture in a team that defaults to feature factories. Source the Duolingo Handbook principles 1, 2, and 3 (Take the Long View, Raise the Bar, Ship It).

2026-05-042

duo-retention

HKTITAN/duolingo

Duolingo-style retention engineering for any product — habit loops, streaks, leagues, churn diagnostics, day-N drop-off, and the discipline of building a "forever product." Use when the user asks how to keep users coming back, debug churn, design a streak system, time push notifications, run a leaderboard, or shift a product's metric from acquisition to retention. Source the Duolingo Handbook (Take the Long View) and blog data posts; translate every pattern to the user's actual product.

2026-05-042

name	duo-design
description	UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. Source the Duolingo design system at design.duolingo.com.
license	MIT
metadata	{"author":"HKTITAN","version":"1.0.0","graph":true}

Duolingo Design — Map of Content

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.

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

design.duolingo.com — the public design system
@duolingo product surfaces — observed motion and sound