---
name: Duolingo
description: "Bright, gamified learning UI with chunky 3D buttons, rounded type and a cheerful green."
website: https://www.duolingo.com
color: "#58CC02"
category: Education
icon: duolingo
updated_at: "2026-10-29"
---

# Duolingo — DESIGN.md

> An independent summary of Duolingo's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Duolingo. Color values are approximate.

## Overview

Duolingo uses play to keep people practicing. Big rounded shapes, bright colors and instant feedback make every tap feel rewarding.

## Color

| Role | Value | Use |
| --- | --- | --- |
| Feather green | `#58CC02` | Primary buttons, success |
| Macaw blue | `#1CB0F6` | Secondary accent |
| Cardinal red | `#FF4B4B` | Errors |
| Eel gray | `#4B4B4B` | Text |

## Typography

A rounded custom sans (Feather Bold for headings, DIN Round-style for UI). Bold weights and uppercase on buttons.

## Spacing and layout

Large touch targets and generous padding; content is centered in a narrow lesson column.

## Components

- 3D buttons with a darker bottom border that presses down.
- Progress bar across the top of every lesson.
- Feedback sheet that slides up green or red.
- Streak and XP counters with icons.

## Do

- Give instant, celebratory feedback.
- Make tap targets large.

## Don't

- Don't use flat buttons for primary actions.
- Don't hide progress.

## Prompt for your agent

```
Style this interface in the spirit of Duolingo's design language, without copying its logo or brand assets.
Bright, gamified learning UI with chunky 3D buttons, rounded type and a cheerful green.
Follow the color roles, type and component notes in this DESIGN.md.
```