<!-- Generated by ExtractVibe — https://extractvibe.com/brand/duolingo.com -->
<!-- Extracted: 2026-05-03T16:55:05.463Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Duolingo"
description: "Duolingo projects a playful, accessible, and highly energetic personality that demystifies education through simplicity and humor. The brand feels like a friendly, slightly mischievous companion rather than a strict academic institution, prioritizing engagement and low-friction interaction over formal prestige."
colors:
  neutral: "#777777"
  surface: "#ffffff"
  on-surface: "#3c3c3c"
  on-surface-secondary: "#777777"
  border: "#afafaf"
  link: "#0000ee"
  surface-dark: "#100f3e"
typography:
  display-lg:
    fontFamily: "din-round"
    fontSize: "32px"
    fontWeight: "700"
  headline-lg:
    fontFamily: "feather"
    fontSize: "48px"
    fontWeight: "700"
  body-md:
    fontFamily: "sans-serif"
    fontSize: "17px"
    fontWeight: "500"
    lineHeight: "20px"
rounded:
  md: "12px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#ffffff"
    rounded: "12px"
    padding: "0px 16px"
    fontSize: "15px"
    fontWeight: "700"
    borderWidth: "0px 0px 4px"
---

# Duolingo — Design System

## Overview

Duolingo's design system embodies the archetypes of The Jester and The Innocent, manifesting a playful, accessible, and highly energetic user experience. This system prioritizes low-friction interaction and engagement, demystifying education through simplicity and humor. It functions as a friendly, slightly mischievous companion, guiding users through learning without the intimidation of traditional academic institutions. The design language aligns with the approachable and user-centric aesthetics of brands like Slack, Headspace, Mailchimp, and Figma, all of which successfully blend functionality with a distinct, engaging personality.

This design system explicitly rejects formal prestige and overly complex interfaces. It is not a corporate, austere, or overly serious aesthetic. Instead, it embraces gamification and a lighthearted tone, ensuring that every interaction feels encouraging and intuitive. The visual and interactive elements are crafted to reduce cognitive load and maximize user enjoyment, fostering a continuous learning journey that feels more like play than work. The core principle is to make learning universally accessible and inherently fun.

**Key characteristics:**

- Vibe — playful, accessible, minimal, energetic, gamified, friendly
- Archetypes — The Jester, The Innocent
- Comparable to — Slack, Headspace, Mailchimp, Figma
- Design era — contemporary-minimal
- Emotional tone — playful-approachable
- Target audience — Casual learners, students, and self-improvers seeking low-pressure, gamified education; likely younger demographics or those intimidated by traditional academic structures.
- Visual energy — 8/10 (high-energy/bold)

## Colors

The absence of a primary color and the explicit declaration of white as the surface color (#ffffff) signals a deliberate strategy for clarity and focus. This minimalist approach ensures that content and interactive elements are highlighted, preventing visual clutter. Colors are used judiciously, primarily for feedback, progress indication, and accentuation, rather than heavy branding. This sparse palette reinforces the accessible and minimal vibe, allowing the playful character to emerge through iconography and interaction rather than overwhelming chromatic schemes.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |
| text | `#3c3c3c` | Charcoal |
| secondary text | `#777777` | Gray |
| border | `#afafaf` | Dark Silver |
| link | `#0000ee` | Blue |
| muted | `#777777` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#100f3e` | Near-Black |

## Typography

The typography system leverages sans-serif fonts, specifically 'din-round' and 'feather', to communicate approachability and modernity. 'Din-round' provides a friendly, legible base, while 'feather' offers a lighter, more agile feel. The hierarchy prioritizes clarity and scannability, using variations in weight and size to guide the user's eye without resorting to excessive stylistic flourishes. This choice reinforces the accessible and minimal brand attributes, ensuring that information is easily digestible and contributes to the overall energetic and gamified experience.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| sans-serif | body | system | 500 |
| din-round | heading | self-hosted | 700 |
| feather | heading | self-hosted | 700 |
| din-round | body | self-hosted | 500, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | din-round | 32px | 700 | — | — |
| Heading 2 | feather | 48px | 700 | — | — |
| Body | sans-serif | 17px | 500 | 20px | — |

### Conventions

- Heading case — lowercase
- Body line-height — 20px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 12px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#ffffff`
- Radius — `12px`
- Padding — `0px 16px`
- Font size — `15px`
- Font weight — `700`
- Sample copy — "Get started"

## Do's and Don'ts

### Do

- Use 'Din-Round' at 700 weight for all headings, strictly in lowercase, to maintain the brand's informal and modern voice.
- Use 'Feather' at 700 weight for secondary headings or specific UI elements where a distinct typographic hierarchy is needed, also in lowercase.
- Apply 'Din-Round' at 500 weight for body copy to ensure readability while maintaining the rounded, friendly aesthetic.
- Set body copy line-height to exactly 20px to create a compact, dense, and efficient reading experience.
- Use #ffffff background with #3c3c3c text for light mode to ensure high contrast and clean readability.
- Style primary CTA buttons with a 12px border-radius, 0px vertical padding, and 16px horizontal padding for a pill-like, clickable appearance.
- Avoid all box-shadows and gradients to maintain a flat, clean, and lightweight visual profile.
- Use direct action verbs in CTAs (e.g., 'Get started') to reduce friction and encourage immediate engagement.
- Employ repetition, tricolon, and parallelism in copy to create a rhythmic, memorable, and enthusiastic tone.

### Don't

- Do not use title case or uppercase for headings; the brand strictly uses lowercase to appear less formal and more approachable.
- Do not use emojis in marketing copy or UI text, as the brand relies on wordplay and tone rather than iconography for expression.
- Do not use serif fonts; the brand is entirely sans-serif to convey modernity and accessibility.
- Do not apply box-shadows to any element, including cards or buttons, to adhere to the flat design aesthetic.
- Do not use gradients or complex visual effects; keep the design minimal and distraction-free.
- Do not use jargon or technical language; keep vocabulary simple and accessible to a general audience.
- Do not use high-friction CTAs like 'Register' or 'Sign Up'; use low-barrier verbs like 'Start' or 'Get started'.
- Do not use sharp corners (0px radius) on interactive elements; maintain the 12px radius for a friendly, soft interface.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 9/10 | casual |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 6/10 | balanced |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — simple
- Jargon — none
- CTA style — direct action verbs with low-friction offers
- Rhetorical devices — repetition, tricolon, parallelism

### Sample copy

> The free, fun, and effective way to learn a language!

> free. fun. effective.

> Learning with Duolingo is fun, and research shows that it works!

> With quick, bite-sized lessons, you’ll earn points and unlock new levels while gaining real-world communication skills.

> We make it easy to form a habit of language learning with game-like features

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/duolingo.com) | 100% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/duolingo.com/logo-4.svg) | 80% |
| logomark | color | svg | [link](https://extractvibe.com/api/assets/brands/duolingo.com/logo-5.svg) | 80% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/duolingo.com/logo-0.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/duolingo.com/logo-3.png) | 72% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/duolingo.com/logo-2.png) | 72% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/duolingo.com/logo-1.ico) | 62% |

## Sources

- Official brand guidelines — https://duolingo.com/brand
- Live brand page — https://extractvibe.com/brand/duolingo.com
- Raw JSON — https://extractvibe.com/api/brand/duolingo.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/duolingo.com/design.md
- Extracted — 2026-05-03T16:55:05.463Z
- Generator — ExtractVibe vv1
- Quality score — 100/100