# Design Reference - Duolingo
> Playground Starter Kit

## Source
- Original site: https://duolingo.com
- Captured: 2026-04-11T17:48:57.053Z

## Tags
- playful
- gamification
- rounded
- bold
- illustration-heavy
- high-contrast
- friendly
- vibrant
- flat-ui

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Duo Green | `#58cc02` | brand | Primary CTAs, logos, headlines, interactive highlights — the brand's key signifier of action and identity. |
| Sky Blue | `#1cb0f6` | accent | Secondary outline buttons, inline text links — provides a clear, alternative interactive cue. |
| Duo Green Light | `#d7ffb8` | brand | Background tints for highlighted or active states, often paired with Duo Green. |
| Sunshine Yellow | `#ffc700` | accent | Used exclusively within illustrations for pops of warmth and energy. |
| Grape Soda | `#a570ff` | accent | Used exclusively within illustrations as a cool, playful accent. |
| Bubblegum Pink | `#cc348d` | accent | Used exclusively within illustrations for vibrant, friendly details. |
| Snow White | `#ffffff` | neutral | Page backgrounds, button text, card surfaces. |
| Cloud Gray | `#e5e5e5` | neutral | Borders for secondary buttons and dividers. |
| Silver | `#afafaf` | neutral | Placeholder text, disabled states, secondary info text. |
| Graphite | `#777777` | neutral | Body copy, descriptive text. |
| Charcoal | `#4b4b4b` | neutral | Subheadings, secondary headlines. |
| Almost Black | `#3c3c3c` | neutral | Primary body and UI text. |

## Typography
- role: Used exclusively for large, impactful headlines (H1, H2). Its extremely rounded, heavy, and slightly condensed character gives the brand its signature playful and confident voice.; sizes: 48px, 64px; family: feather; weight: 700; lineHeight: 1.20; substitute: Fredoka One, Baloo 2; letterSpacing: -0.02em
- role: The workhorse font for all UI text, body copy, and buttons. The noticeably wide letter-spacing (`0.053em`) is a key trait, creating a very open and readable texture. Weight 700 is used for buttons and emphasized text.; sizes: 13px, 14px, 15px, 17px, 19px, 32px; family: din-round; weight: 500, 700; lineHeight: 1.15-1.47; substitute: Nunito Sans, Varela Round; letterSpacing: 0.053em

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "12px",
      "inputs": "12px",
      "buttons": "12px"
    },
    "elementGap": "16px",
    "sectionGap": "80-120px",
    "cardPadding": "24px",
    "pageMaxWidth": "1140px"
  },
  "radius": {
    "cards": "12px",
    "inputs": "12px",
    "buttons": "12px"
  }
}
```

## Component Patterns
- name: CTA Button Group
- name: Language Selector Bar
- name: Feature Section — Free Fun Effective
- name: Green Headline; role: Feature section titles like 'free. fun. effective.'
- name: Character Illustration; role: Visual anchors for every major page section.
- name: Inline Text Link; role: Clickable text within a paragraph.
- name: Language Flag Item; role: Used in the language selector list.

## Do
- Use 'Duo Green' '#58cc02' for all primary CTAs and brand-voice headlines.
- Apply a 12px border-radius to all interactive UI components like buttons and inputs.
- Use the 'feather' font exclusively for large, impactful headlines (48px+).
- Create depth on primary buttons with a solid, darker green bottom 'shadow' (e.g., `box-shadow: 0 4px 0 #3f8f01`).
- Pair every major content section with a large, on-brand character illustration.
- Use 'Sky Blue' '#1cb0f6' for all secondary interactive elements like outline buttons and text links.
- Set body copy and UI text with 'din-round' and its distinctive `letter-spacing: 0.053em`.

## Don't
- Don't use sharp corners on any UI element.
- Don't use any color other than 'Duo Green' '#58cc02' for the main 'Get Started' action.
- Don't use the 'feather' headline font for small text or body copy.
- Don't apply traditional `box-shadow` for elevation on panels or cards.
- Don't create text links in any color other than 'Sky Blue' '#1cb0f6'.
- Don't use system fonts; the custom 'feather' and 'din-round' styles are integral to the brand.
- Don't design a section without considering its accompanying illustration.