Duolingo

Overview

Duolingo is a gamified language and skills learning platform that transforms education into an engaging, playful experience through vibrant character-driven narratives, bite-sized lessons, and celebratory feedback loops. The brand embodies "Playful Minimalism"—a design philosophy that combines clean, accessible interfaces with bold, joyful color accents and whimsical character illustrations. The emotional response is one of encouragement and delight: users feel motivated rather than intimidated, celebrated rather than judged. The visual language prioritizes clarity and approachability, using generous whitespace (background: #ffffff), high-contrast primary green (#58cc02) for all CTAs, and a supporting palette of vibrant secondaries (cyan #1cb0f6, golden yellow #ffad00) that evoke playfulness without chaos.

The brand voice is conversational, encouraging, and slightly irreverent—never condescending, always optimistic. Duolingo speaks to learners as peers embarking on an adventure, not as students being lectured. Vocabulary patterns favor active, present-tense language ("Learn Spanish today," "Keep your streak alive") and occasional humor (character names like Duo the owl, streak-freezing mechanics). The tone is warm but efficient: sentences are short, instructions are clear, and every interaction feels like a small win. Example sentence in brand voice: "You're on a 47-day streak—don't break it now!"

Colors

The Duolingo color system is built on a foundation of high-contrast, accessible hues that support both playfulness and clarity. Primary (#58cc02, a vibrant lime green) is the signature brand color, used exclusively for call-to-action buttons ("Get Started," "Continue"), progress indicators, and all interactive affordances that demand user attention. This green is derived from the brand's iconic owl mascot and appears in the logo; it commands ~38 instances across the observed DOM. On-primary is pure white (#ffffff) for maximum contrast and readability at 48px button heights. Secondary (#1cb0f6, a bright cyan) supports the primary as a secondary accent for links, secondary buttons, and informational highlights; it appears ~30 times in the color token set. Tertiary (#ffad00, a warm golden yel

Typography

The Duolingo type system pairs a custom sans-serif (duolingo-sans) for headlines and display text with Roboto for body copy, creating a hierarchy that balances personality with legibility. Display (56px, 700 weight, -0.02em tracking) is used sparingly for hero headlines like "The most fun way to learn languages, chess, and more!" Headline-lg (40px, 700 weight) anchors major section titles. Headline-md (32px, 700 weight) is applied to subsection headings and card titles. Title-lg (24px, 600 weight) bridges headlines and body text for medium-emphasis content. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptive text. Body-md (16px, 400 weight, 24px line-height) is the default body text size, applied to all paragraph content, list items, a

Layout

The Duolingo layout system uses a fluid, centered grid with a max-width of 1280px (container-max-width: 1280px) and 12-column structure, ensuring responsive scaling from mobile (320px) to desktop. The hero section employs a two-column layout: left column (40% width) contains the illustrative character stack; right column (60% width) holds the headline, subheading, and dual CTAs. Horizontal padding is set to {spacing.gutter} (24px) on desktop, reducing to {spacing.md} (24px) on tablet and {spacing.sm} (12px) on mobile. Vertical rhythm is maintained through consistent section spacing: lg spacing (40px) separates major sections (hero, feature blocks, language carousel), md spacing (24px) separates cards and subsections, and sm spacing (12px) separates inline elements. The language carousel at

Elevation & Depth

Duolingo employs a subtle, flat-design elevation system that avoids heavy shadows, maintaining the playful, approachable aesthetic. Elevation is conveyed through three discrete levels: Level 1 (Base) uses no shadow; elements sit flush on the white background (#ffffff). Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that lifts cards 4px above the surface; this is used on all card components and input fields in their default state. Level 3 (Elevated/Hover) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating a more pronounced l

Shapes

Duolingo employs a "Soft-Technical" shape philosophy: rounded corners are used consistently but never excessively, creating a friendly, approachable interface without sacrificing clarity or visual hierarchy. The rounded scale progresses from sm (0.25rem / 4px) for small UI elements like inline badges, to DEFAULT (0.5rem / 8px) for input fields and minor components, to md (0.75rem / 12px) for form inputs and small cards, to lg (1rem / 16px) for primary buttons and standard cards, to xl (1.5rem / 24px) for large modals and hero containers, and full (9999px) for pill-shaped badges and toggle swit

Components

Action Elements Buttons are the primary interactive affordance on Duolingo. Button-primary (background: #58cc02, text: #ffffff, height: 48px, padding: 0 32px, border-radius: 16px, font-weight: 600, letter-spacing: 0.02em) is used for all primary CTAs: "Get Started," "Continue," "Sign Up." On hover, the background transitions to #4ba302 (a darker green, -15% lightness) with a colored shadow (0 3px 8px rgba(88, 204, 2, 0.25)), and the transition timing is 200ms ease-out. On active/press, the background darkens further to #3d8601 (-30% lightness) with no shadow, creating tactile feedback. Button-secondary (background: transparent, text: #1cb0f6, border: 2px solid #1cb0f6, height: 48px, padding: 0 32px, border-radius: 16px, font-weight: 600) is used for secondary CTAs like "I Already Have

Do's and Don'ts

**Do**

• Do use primary green (#58cc02) exclusively for call-to-action buttons and interactive affordances—never for body text, backgrounds, or decorative elements.
• Do maintain 48px minimum button heights and 44px minimum input heights to ensure mobile touch targets meet WCAG 2.1 Level AAA (56px × 56px recommended).
• Do apply the lg border-radius (16px) consistently to buttons and cards to reinforce the soft-technical aesthetic and signal interactivity.
• Do use generous whitespace (lg spacing: 40px between sections, md spacing: 24px within cards) to create a calm, approachable learning environment.
• Do pair duolingo-sans headlines with Roboto body text to balance personality with legibility—never use duolingo-sans for body copy below 20px.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated elements to create depth without visual heaviness.
• Do use secondary cyan (#1cb0f6) and tertiary yellow (#ffad00) as supporting accents—never as primary text or large background areas.
• Do test all interactive states (hover, focus, active, disabled) with a 200ms transition timing to ensure snappy but not jarring feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—always use on-primary (#ffffff) or on-secondary (#ffffff) pairs defined in the color system.
• Don't apply border-radius values smaller than 4px (sm) or larger than 24px (xl) outside of full (9999px) pill shapes—this maintains visual consistency and prevents accidental inconsistency.
• Don't stack primary and secondary buttons horizontally without at least 16px gap—this prevents visual confusion and ensures each button remains a distinct affordance.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) (Level 3 elevation)—deeper shadows feel heavy and contradict the playful, lightweight aesthetic.
• Don't apply letter-spacing greater than 0.03em on body text—this reduces readability and feels overly technical for a learning platform.
• Don't use the secondary cyan (#1cb0f6) or tertiary yellow (#ffad00) for disabled states—always use outline (#999999) or surface-container-high (#e0e0e0).
• Don't render headlines in Roboto—always use duolingo-sans to maintain brand personality and visual hierarchy differentiation.
• Don't apply box-shadow to input fields in their default state—shadows should only appear on hover/focus to signal interactivity.