Skip to content
Back to extractor

Overview

Duolingo's design system prioritizes playful interactivity, accessibility, and clarity. The brand employs a vibrant primary color palette (macaw blue), rounded forms, and distinctive 3D button interactions with a "lip" shadow that responds to clicks. Typography uses a proprietary sans-serif font with consistent weights and scales. The system balances a light, clean background with strategic use of color for learning progression and feedback.

Signature traits: 3D pressable buttons with bottom border lip, rounded soft corners, vibrant primary accent (macaw blue), pastel surfaces, semantic color coding (green for success, orange for secondary, red for errors), emphasis on interactive feedback.

Colors

| Role | Token | RGB | Hex-like | Usage | |------|-------|-----|----------|-------| | Background | --color-snow | rgb(255 255 255) | #ffffff | Page backgrounds, cards, primary surfaces | | Surface Light | --color-polar | rgb(240 246 252) | #f0f6fc | Hover states, secondary surfaces | | Border Default | --color-swan | rgb(229 235 242) | #e5ebf2 | Component borders, dividers, disabled states | | Text Tertiary | --color-hare | rgb(153 158 166) | #999ea6 | Captions, placeholders, hints | | Text Secondary | --color-wolf | rgb(101 108 118) | #656c76 | Secondary copy, metadata | | Text Primary | --color-eel | rgb(50 57 67) | #323943 | Headings, body text | | Overlay | --color-black | rgb(0 0 0) | #000000 | Modal backdrops, shadows | | Accent Primary | --color-macaw | rgb(58 169 237) | #3aa9ed | CTAs, primary brand color | | Accent Dark | --color-whale | rgb(38 121 200) | #2679c8 | Active states, pressed buttons | | Accent Light | --color-blue-jay | rgb(99 187 235) | #63bbeb | Highlights, secondary accents | | Success BG | --color-iguana | rgb(207 239 223) | #cfefdf | Success background, celebration | | Success | --color-tree-frog | rgb(78 189 141) | #4ebd8d | Progress states, positive action | | Success Fill | --color-owl | rgb(77 154 117) | #4d9a75 | Progress bar fill, success indicator | | Secondary | --color-beetle | rgb(143 130 200) | #8f82c8 | Secondary accent, alternative highlight | | Error | --color-cardinal | rgb(209 62 58) | #d13e3a | Errors, warnings, destructive actions | | Warning | --color-fox | rgb(234 107 44) | #ea6b2c | Warning state, secondary accent | | Warning Accent | --color-bee | rgb(241 196 15) | #f1c40f | Highlighted warnings | | Error Alt | --color-fire-ant | rgb(237 81 75) | #ed514b | Error highlights, alerts | | Text Dark Secondary | --color-humpback | rgb(54 98 144) | #366290 | Alternative secondary text | | Border Dark | --color-narwhal | rgb(73 131 180) | #4983b4 | Alternative border color |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | duolingo-sans | 2.5rem | 700 | 2.75rem | 0 | Hero headlines | | Page Title | duolingo-sans | 2rem | 700 | 2.25rem | 0 | Page-level titles | | Heading L | duolingo-sans | 1.75rem | 700 | 2rem | 0 | Section headers | | Heading M | duolingo-sans | 1.5rem | 700 | 2rem | 0 | Subsection headers | | Heading S | duolingo-sans | 1.25rem | 700 | 1.5rem | 0 | Component titles | | Heading XS | duolingo-sans | 1rem | 700 | 1.25rem | 0 | Small labels | | Body | duolingo-sans | 1rem | 400 | 1.2 | 0 | Paragraph text, content | | Label | duolingo-sans | 0.9375rem | 700 | 1.2 | 0.04em | Form labels, button text | | Caption | duolingo-sans | 0.875rem | 400 | 1.2 | 0 | Metadata, hints, captions | | Button | duolingo-sans | 0.9375rem | 700 | 1.2 | 0.8px | CTA text (uppercase) | | Mono | monospace | 1em | 400 | 1.15 | 0 | Code blocks, equations |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 4px | Tight gaps, inline spacing | | Spacing SM | 8px | Component padding, small margins | | Spacing MD | 12px | Card padding, moderate gaps | | Spacing LG | 16px | Button padding, layout margins | | Spacing XL | 24px | Section separators | | Spacing 2XL | 32px | Page-level layout spacing | | Max Width | None specified | Content width not constrained |

Responsive strategy: Mobile-first approach with focus on touch-friendly targets (48px button height). No explicit breakpoints defined in extracted CSS; components scale with viewport.

Elevation & Depth

| Level | CSS Property | Selector | Usage | |-------|--------------|----------|-------| | Button Pressed | border-width: 0 0 4px | ._1VYyp:before | Standard buttons "press down" 4px | | Card Border | border-width: 2px 2px 4px | ._8dMUn:before | Cards have 4px bottom shadow depth | | Button Small | border-width: 2px | ._17LYs | Small buttons with 2px lip | | Popover | border: 2px solid + box-shadow | ._36bu_ | Floating UI with minimal lift |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Text inputs, rare use | | sm | 8px | Compact buttons, small popovers, input corners | | md | 12px | Primary buttons, cards, standard borders | | lg | 15px | Large cards, modal corners, popover corners | | xl | 16px | Default button border-radius | | full | 9999px | Badges, pills, circular buttons, progress indicators |

Components

Buttons

  • —Standard 3D Button (._1VYyp): 50px height, macaw blue background, 4px bottom border ("lip"), uppercase text, press animation drops element down. Used for primary CTAs.
  • —Secondary Button (._2V6ug): White background with swan border, 2px bottom lip, designed for secondary actions.
  • —Ghost Button (._1GQxS): Borderless, text-only, no background. Used for tertiary actions.
  • —Icon Button (.GEQ3b): 48px square, rounded, centered icon. Touch-friendly sizing.
  • —Badge (._1N32S): 50% border-radius circular badge with color variants (beetle, cardinal, fox, macaw, tree-frog). Used for status, counts.

Progress Bar

  • —Container (._3yKMC): Swan background, rounded ends.
  • —Fill (._27NV6): Owl green or custom color. Uses clip-path for smooth animation. Height variable.
  • —Secondary Fill (._1qzJe): Bee yellow for layered progress tracking.
  • —Text Overlay (.z81Rg): White uppercase label inside bar.

Input

  • —Text Input (._298F2): Minimal styling, macaw caret, wolf placeholder text, dark eel text. Inherits font.
  • —Container (._1Um2j): Polar background with swan border, macaw focus state.

Card/Container

  • —Card (._8dMUn): 2px border with 4px bottom shadow, 12px padding, white background. Checked state uses iguana background with whale color.

Popover

  • —Popover (._36bu_): Snow background, swan border, 15px border-radius. Arrow pointer (._3T97b) positions relative to parent (top, bottom, left, right).

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use macaw (#3aa9ed) for primary actions and interactive states | Use multiple accent colors for the same action type | | Apply 3D button effects with border-bottom and press animation | Flatten buttons—the lip shadow is signature to Duolingo | | Stick to rounded corners (12–16px) for cards and containers | Use sharp corners except for specialized components | | Use semantic colors: owl for progress, cardinal for errors, fox for warnings | Assign semantic meanings randomly to colors | | Maintain 4px, 8px, 12px, 16px spacing rhythm | Use arbitrary spacing values | | Use uppercase text-transform for buttons and labels | Use title case in button text | | Keep text contrast: eel on snow, snow on macaw (WCAG AA+) | Reduce opacity of primary text below 80% | | Design for 48px touch targets minimum | Use buttons smaller than 32px height |

Agent Prompt Guide

You are working within the Duolingo design system. Adhere to these constraints:

COLORS: Use only these core tokens— Primary: macaw (#3aa9ed), whale (active), blue-jay (light) Neutral: snow (bg), polar (light), swan (borders), eel/wolf/hare (text) Semantic: owl (success), cardinal (error), fox (warning), tree-frog (positive) Never invent colors; use the palette above.

TYPOGRAPHY: Headings: duolingo-sans, bold (700), sizes 1.25rem–2.5rem Body: duolingo-sans, regular (400), 1rem Labels/Buttons: duolingo-sans, bold (700), 0.9375rem, uppercase, letter-spacing 0.8px Mono: monospace for code/equations

SPACING: Use only xs (4px), sm (8px), md (12px), lg (16px), xl (24px), 2xl (32px)

RADIUS: Use md (12px) for most elements, sm (8px) for compact UI, full (9999px) for pills/badges

BUTTONS: Always apply 3D effect—bottom border shadow (2–4px), press-down animation on click, uppercase text. Min 32px height (small) to 50px (standard).

INPUTS: Polar background, swan borders, macaw focus. Inherit sans-serif. No custom styling unless necessary.

ELEVATION: Cards and popovers use 2–4px bottom borders for depth. No blur shadows—only solid borders.

Do not deviate from these tokens. Every color, font, spacing value, and component behavior must map to the system above.