Duolingo

Overview

Duolingo is a gamified language learning platform that transforms education into an accessible, joyful experience through playful mascots, vibrant colors, and bite-sized lessons. The brand celebrates learning as fun, inclusive, and science-backed, serving learners of all ages and backgrounds globally. The aesthetic is 'Playful Minimalism'—a fusion of bright, saturated accent colors (lime green #58cc02 as primary, cyan #00c0ff as secondary) against a clean white canvas, punctuated by whimsical character illustrations and celebratory micro-interactions. The emotional response is one of encouragement, approachability, and delight: users feel motivated rather than intimidated.

Duolingo's voice is conversational, warm, and gently humorous—never condescending, always supportive. The brand uses short, punchy sentences and celebrates small wins. Vocabulary patterns include words like 'streak,' 'level up,' 'practice,' and 'celebrate.' Example sentence in brand voice: 'You're on a 7-day streak—keep it going!'

Colors

Duolingo's color system balances a vibrant, energetic primary palette with a neutral, spacious background. Primary (#58cc02, a bright lime green) is the signature brand accent used exclusively for call-to-action buttons, progress indicators, and key interactive elements—it signals 'go,' 'success,' and 'action.' Secondary (#1c1c1c, near-black) anchors typography and structural elements, providing contrast and readability. Tertiary (#00c0ff, a vivid cyan) accents secondary CTAs, badges, and supporting UI elements, adding visual rhythm without competing with primary. The surface stack is anchored in white (#ffffff) for maximum clarity and accessibility; surface-container variants (ranging from #fafafa to #d0d0d0) create subtle depth for cards, inputs, and hover states without introducing dark

Typography

Duolingo's type system pairs a custom sans-serif (duolingo-sans) for headlines and display text with Roboto for body and label content, creating a hierarchy that feels both playful and professional. Display (60px, 700 weight) and headline-lg (40px, 700 weight) are reserved for hero sections and major page titles, using tight line-height (68px and 48px respectively) and negative letter-spacing (-0.04em, -0.02em) to create visual punch. Headline-md (32px, 700 weight) is used for section headings; title-lg (20px, 600 weight) for card titles and subsections. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle primary and secondary content; label-md (14px, 600 weight) and label-sm (12px, 500 weight) are applied to buttons, badges, and UI labels. On small labels over busy background

Layout

Duolingo uses a fluid, centered layout with a max-width of 1280px and a 12-column grid system. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) creates breathing room within sections and between card groups, and sm (12px) is used for internal component padding and micro-spacing. The gutter (24px) provides consistent horizontal padding on mobile and tablet viewports. Hero sections occupy full viewport height with generous vertical padding (64px top/bottom); feature sections use a 2–3 column card layout on desktop, collapsing to single-column on mobile. Container max-width ensures content never exceeds 1280px, maintaining readability and focus. White-space is treated as a design element: the clean white backgro

Elevation & Depth

Duolingo's depth system is subtle and functional, avoiding heavy shadows that would contradict the brand's light, approachable aesthetic. Elevation is conveyed through three distinct layers: Level 1 (Base) is the white surface (#ffffff) with no shadow; Level 2 (Standard Cards/Inputs) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift without visual weight; Level 3 (Modals/Popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), providing clear separation from the background. Cards and input fields also employ a 1px border in outline (#cccccc) to reinforce their container

Shapes

Duolingo employs 'Friendly Geometry'—a shape philosophy that balances approachability with clarity. Border-radius values are consistent and generous: buttons and primary CTAs use lg (16px) for a rounded-but-not-pill appearance; cards and containers use lg (16px) or md (12px) depending on visual weight; input fields use DEFAULT (8px) for subtle definition; and badges/chips use full (9999px) for a pill shape that feels playful and modern. The 16px radius is the workhorse of the system, appearing on 13 observed instances in the live DOM, reflecting its role as the primary shape token. Smaller com

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary green (#58cc02) with white text, 16px padding (left/right), 48px height, and lg radius (16px). On hover, the background darkens to #4ba302 with a 200ms ease-in-out transition, providing tactile feedback. On active/press, it darkens further to #3d8601. The button-secondary variant uses a transparent background with a 2px cyan border (#00c0ff) and cyan text, maintaining the same height and padding; on hover, it gains a subtle cyan background at 8% opacity (rgba(0, 192, 255, 0.08)). Both button variants use label-md typography (14px, 600 weight) and are never smaller than 48px in height to ensure mobile accessibility.

Containers & Surfaces Cards are the primary container for group

Do's and Don'ts

**Do**

• Do use primary green (#58cc02) exclusively for primary CTAs, success states, and progress indicators—it is the brand's signature accent and should never be diluted or overused on secondary elements.
• Do maintain generous white-space around cards and sections; the clean white background (#ffffff) is a design asset, not empty space to be filled.
• Do apply consistent 16px border-radius (lg) to buttons, cards, and major containers to reinforce the friendly, approachable brand personality.
• Do use duolingo-sans for all headlines and display text to maximize brand recognition; reserve Roboto for body and label content where readability at smaller sizes is critical.
• Do elevate interactive elements on hover with a smooth 200ms transition and a subtle shadow increase (from 0 3px 8px to 0 8px 24px) to signal interactivity without visual jarring.

**Don't**

• Don't use primary green on non-interactive elements (backgrounds, borders, text) unless they represent success, progress, or a call-to-action—overuse dilutes its impact.
• Don't apply heavy shadows (box-shadow > 0 12px 32px) or dark overlays; Duolingo's aesthetic is light and approachable, not dramatic or moody.
• Don't mix border-radius values inconsistently; stick to the defined scale (sm 4px, DEFAULT 8px, md 12px, lg 16px, full 9999px) to maintain visual cohesion.
• Don't use near-black text (#000000) on white backgrounds; use on-surface (#3c3c3c) for warmth and reduced eye strain, especially on long-form content.
• Don't animate state changes faster than 150ms or slower than 300ms; Duolingo's interactions should feel snappy and responsive, not sluggish or jarring.