Duolingo Brand Design System Deep Dive

1. Brand Overview

Duolingo’s design language is unapologetically playful but deceptively disciplined. On the surface, it’s all green owls and gamified language learning. Underneath, the system is tightly structured, with exact spacing scales, consistent radii, and a restrained color palette. This is not chaotic “fun” — it’s engineered fun.

The vibe: approachable, energetic, and optimistic. It’s targeted at learners of all ages but especially digital natives used to apps that feel like games. The interface is designed to remove friction: big tap targets, clear typography, no unnecessary chrome. Every UI choice supports the idea that learning a language can be as addictive as playing a mobile game.

They lean heavily on bright, almost neon greens (#a5ed6e) to communicate positivity and reward. There’s a secondary reliance on neutral grey (#777777) for body copy and non-interactive text. Blue (rgb(28, 176, 246)) is used for CTAs and focus states — it’s the “do something” color in the system.

Typography is rounded, friendly, but utilitarian. The custom “feather” and “din-round” families are used with strict weights and sizes, reinforcing hierarchy without visual clutter. Spacing is locked to an 8px grid, keeping the playful color and type choices grounded in a sensible layout structure.

This is a design system that knows exactly what emotional tone it’s aiming for. No gradients, no glassy effects — just flat colors, clean shapes, and micro-interactions that make you feel good about clicking the next lesson.

2. Color System

2.1 Primary Colors

The primary brand color is a fresh green:

• Primary Green: #a5ed6e (rgb(165, 237, 110)) — used for accents, success states, and brand moments. This green is light and saturated, radiating friendliness.

For action states, Duolingo uses a bright, saturated blue:

• Action Blue: rgb(28, 176, 246) — used for buttons, links, and focus outlines. It’s direct and high-contrast against white backgrounds.

Psychologically, the green says “reward” and “growth”, while the blue says “do this now.” Compared to competitors (Babbel, Rosetta Stone), Duolingo’s colors are less corporate, more toy-like — intentionally lowering intimidation.

2.2 Complete Palette

2.3 Color Relationships

The primary green on white has strong contrast for decorative use but not for text — it’s better as a background or icon fill. The action blue meets WCAG AA for text on white in bold weights. Neutral grey is readable for body copy but skates close to accessibility minimums — Duolingo offsets this with larger text sizes and high weights.

No dark mode evident in extracted data. The palette is optimized for light backgrounds.

2.4 Usage Guide

• Use Primary Green for rewards (badges, streaks), never for destructive actions.
• Use Action Blue for all primary buttons and tappable elements. Don’t use green for CTAs — it dilutes the reward association.
• Keep Neutral Grey for secondary text — avoid using it for interactive states.
• Never overlay Primary Green text on Action Blue — poor contrast and visual confusion.

3. Typography

3.1 Font Families

Duolingo uses two main fonts:

• feather — custom, heavy-weight, large headings. No fallbacks specified.
• din-round — rounded sans-serif, used for body, buttons, links.

No Google Fonts or Adobe Fonts — this is likely self-hosted custom typography.

3.2 Type Scale

3.3 Hierarchy

Large, bold headings in “feather” create an unmistakable voice. Body and UI text in “din-round” carry a friendly tone with high legibility. The jump from 64px to 48px to 32px in headings keeps title hierarchy obvious. Small sizes (13px–17px) are still bold — Duolingo avoids light weights entirely, which keeps legibility high even on small mobile screens.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. All spacing values are multiples or close variants (9.5px is an odd outlier).

4.2 Layout

Breakpoints: 400px, 426px, 530px, 550px, 600px, 896px. This suggests mobile-first with custom breakpoints tailored to content, not a strict Bootstrap set.

5. Visual Elements

• Border Radius:

  • 2px — badges (tiny rounded corners)
  • 12px — buttons, anchors (soft but not pill-like)

• Shadows: Only one shadow defined: rgb(128, 128, 128) 0px 0px 5px 0px. Rare use; mostly flat design.

• Borders & Dividers:

  • Inputs: 1px solid #c1c1c1
  • Dividers: #e5e5e5 in various solid/inset combos
  • Accent borders: #a5ed6e for certain hr elements

6. Components

6.1 Buttons

One main button style extracted:

• Default:

  • Background: transparent
  • Text color: #1cb0f6
  • Padding: 0px 16px
  • Border-radius: 12px
  • Font-weight: 700
  • Font-size: 15px
  • No box-shadow

• Hover:

  • Opacity: 0.7
  • Text color: white
  • Background: rgb(30, 174, 219)

• Focus:

  • Text color: white
  • Opacity: 0.7
  • Outline: 2px solid black
  • Background: rgb(30, 174, 219)

No active state defined in extracted data.

6.2 Links

Multiple link styles with different colors:

• Blue (#0000ee) — hover to dark grey (#565656)
• White — hover to dark grey
• Grey (#777777) — hover to dark grey
• Action Blue (#1cb0f6) — hover to dark grey
• Dark grey (#4b4b4b) — hover to dark grey
• Green (#a5ed6e) — hover to dark grey

No underlines — text-decoration: none throughout.

6.3 Forms

Textareas: 1px solid #c1c1c1, no other input styles extracted.

6.4 Cards

No dedicated card component found in extracted data — likely flat containers with 12px radius if they follow button/a styling.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-grey: #777777;
  --color-primary-green: #a5ed6e;
  --color-action-blue: #1cb0f6;
  --color-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-dark-grey: #555555;
  --color-divider-grey: #e5e5e5;
  --color-border-grey: #c1c1c1;
  --color-accent-black: #3c3c3c;

  /* Typography */
  --font-feather: "feather";
  --font-din-round: "din-round";
  --font-size-h1-lg: 64px;
  --font-size-h1-md: 48px;
  --font-size-h1-sm: 32px;
  --font-size-body-lg: 17px;
  --font-size-body-md: 15px;
  --font-size-caption: 14px;
  --font-size-small: 13px;
  --font-weight-bold: 700;
  --font-weight-medium: 500;

  /* Spacing */
  --space-1: 1px;
  --space-8: 8px;
  --space-9-5: 9.5px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-70: 70px;
  --space-96: 96px;
  --space-140: 140px;
  --space-185: 185px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 12px;

  /* Shadows */
  --shadow-default: 0px 0px 5px 0px rgba(128,128,128,1);
}

8. AI Coding Assistant Prompt

# Duolingo Design System Specification

You are a Duolingo design expert. Build UIs matching their visual language exactly.

## Brand Context
Duolingo’s design philosophy is playful but precise. It uses bright, flat colors, rounded typography, and a strict 8px grid to make learning feel like a game. Primary green signals rewards; bright blue drives actions.

## Color Palette
- Neutral Grey: #777777 — body text, subdued labels
- Primary Green: #a5ed6e — success, accents, rewards
- Action Blue: #1cb0f6 — CTAs, buttons, links, focus outlines
- Link Blue: #0000ee — legacy link color
- White: #ffffff — backgrounds, text
- Dark Grey: #555555 — hover states
- Divider Grey: #e5e5e5 — section dividers
- Border Grey: #c1c1c1 — input borders
- Accent Black: #3c3c3c — inset shadows

## Typography
- Font Families:
  - Headings: "feather"
  - Body/UI: "din-round"
- Sizes:
  - H1 Large: 64px, 700 weight
  - H1 Medium: 48px, 700 weight
  - H1 Small: 32px, 700 weight
  - Body Large: 17px, 500 weight, 1.18 LH
  - Body Medium: 15px, 700 weight, uppercase for buttons
  - Caption: 14px, 700 weight
  - Small: 13px, 700 weight
- Use feather for big headings; din-round for everything else.

## Spacing & Grid
Base: 8px. Scale: 1px, 8px, 9.5px, 10px, 12px, 16px, 40px, 48px, 64px, 70px, 96px, 140px, 185px.
Use multiples of 8px for layout and component spacing.

## Border Radius
- sm: 2px — badges
- md: 12px — buttons, links, cards

## Shadows & Depth
Flat design with minimal shadow: 0px 0px 5px rgba(128,128,128,1)

## Component Specifications

### Primary Button
Default:
- background-color: transparent
- color: #1cb0f6
- padding: 0px 16px
- border-radius: 12px
- font-weight: 700
- font-size: 15px
Hover:
- background-color: rgb(30, 174, 219)
- color: white
- opacity: 0.7
Focus:
- background-color: rgb(30, 174, 219)
- color: white
- opacity: 0.7
- outline: 2px solid black

### Links
No underline. Color varies by context:
- Default: #1cb0f6 / Hover: #565656
- Default: #777777 / Hover: #565656
- Default: #a5ed6e / Hover: #565656

### Input Fields
- border: 1px solid #c1c1c1
- border-radius: 12px
- no shadow
- background: white

## Layout & Responsive Rules
Breakpoints: 400px, 426px, 530px, 550px, 600px, 896px.
Mobile-first. Adjust layout spacing at breakpoints.

## Interaction Rules
- Use opacity changes for hover/focus
- Focus indicators: 2px solid outline
- Transition: 150ms ease

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use feather for headings, din-round for body
- Apply 12px radius to buttons and cards
- Keep link text-decoration: none

## DON'T List
- Don't add shadows beyond defined value
- Don't mix sharp corners into rounded UI
- Don't use green for CTAs
- Don't reduce font weights — keep 500/700

## Code Examples

### Primary Button
```css
.btn-primary {
  background-color: transparent;
  color: #1cb0f6;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background-color: rgb(30, 174, 219);
  color: #ffffff;
  opacity: 0.7;
}
.btn-primary:focus {
  outline: 2px solid #000000;
}
```

### Card
```css
.card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
}
```

### Input
```css
.input {
  border: 1px solid #c1c1c1;
  border-radius: 12px;
  padding: 8px;
  font-size: 15px;
}
```

9. Summary

TL;DR — Duolingo’s design system is flat, bright, and disciplined. Green means “reward.” Blue means “action.” Everything lives on an 8px grid with friendly rounded type. Minimal shadows keep it clean; bold weights keep it legible.

Brand Keywords:

• game-like-accessible
• bold-friendly
• disciplined-playful
• flat-color-driven