duolingo design

A comprehensive visual reference for the Duolingo design system, built to empower playful learning through tactile interfaces and vibrant communication.

Color Palette

Green

#58CC02

Blue

#1CB0F6

Dark Blue

#004666

Red

#FF4B4B

Orange

#FF9600

Golden

#FFC800

Typography

Display XL

The quick brown fox

Headline LG

Jumps over the lazy dog

Body LG

This is Duolingo's primary body font for reading paragraphs and long strings.

Label Bold

Button Text & Navigation

Button Variants

Dark Theme Buttons

Standard Cards

Spanish

Level 5 Mastery

Master intermediate conversational topics and future tense.

85% COMPLETED chevron_right

French

Vocabulary Sprint

Expand your travel vocabulary with 50 new essential phrases.

NEW CONTENT chevron_right

Premium Cards

star

Duolingo Super

No ads, unlimited hearts, and personalized practice.

workspace_premium

Duo Pro

Everything in Super plus advanced AI conversation partner.

UI Components

Pill Badges (Click to toggle)

COMPLETED IN PROGRESS LOCKED

Input & Button Row

Animated Progress Bars

Language Progress 85%

Monthly Goal 60%

Interactive Toggles

Sound

Animations

Interactive Tooltips

local_fire_department 42

Dark Theme UI

Select Language

Avatar Groups

Dark Context Progress