Skip to content

PUBLIC REFERENCE

Duolingo

Playground Starter Kit

2026-04-11 Source style Original site
Duolingo captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Duo Green #58cc02

Primary CTAs, logos, headlines, interactive highlights — the brand's key signifier of action and identity.

Sky Blue #1cb0f6

Secondary outline buttons, inline text links — provides a clear, alternative interactive cue.

Duo Green Light #d7ffb8

Background tints for highlighted or active states, often paired with Duo Green.

Sunshine Yellow #ffc700

Used exclusively within illustrations for pops of warmth and energy.

Grape Soda #a570ff

Used exclusively within illustrations as a cool, playful accent.

Bubblegum Pink #cc348d

Used exclusively within illustrations for vibrant, friendly details.

Snow White #ffffff

Page backgrounds, button text, card surfaces.

Cloud Gray #e5e5e5

Borders for secondary buttons and dividers.

Silver #afafaf

Placeholder text, disabled states, secondary info text.

Graphite #777777

Body copy, descriptive text.

Charcoal #4b4b4b

Subheadings, secondary headlines.

Almost Black #3c3c3c

Primary body and UI text.

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.