Duolingo
Duolingo sets restrained duolingo-sans headlines in a heavy weight on a light bone white canvas. Cobalt (#1cb0f6) is reserved for actions, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 12px.
duolingo.com ↗Colors
Cobalt
#1cb0f6
Primary actions and links
Verdant
#58cc02
Secondary accent and highlights
Bone White
#ffffff
Page canvas
Graphite
#3c3c3c
Headlines and body copy
Deep Indigo
#100f3e
Surface or divider
Ash
#777777
Supporting colour
Deep Ash
#4b4b4b
Supporting colour
Silver Mist
#afafaf
Supporting colour
Deep Cobalt
#042c60
Supporting colour
Type scale
Style reference measured from the public page at duolingo.com on 2026-10-12 for design education. Duolingo and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.
# Duolingo — Style Reference > Duolingo sets restrained duolingo-sans headlines in a heavy weight on a light bone white canvas. Cobalt (#1cb0f6) is reserved for actions, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 12px. **Theme:** light · **Source:** https://www.duolingo.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt | `#1cb0f6` | `--color-accent` | Primary actions and links | | Verdant | `#58cc02` | `--color-secondary` | Secondary accent and highlights | | Bone White | `#ffffff` | `--color-canvas` | Page canvas | | Graphite | `#3c3c3c` | `--color-ink` | Headlines and body copy | | Deep Indigo | `#100f3e` | `--color-surface-1` | Surface or divider | | Ash | `#777777` | `--color-surface-2` | Supporting colour | | Deep Ash | `#4b4b4b` | `--color-surface-3` | Supporting colour | | Silver Mist | `#afafaf` | `--color-surface-4` | Supporting colour | | Deep Cobalt | `#042c60` | `--color-surface-5` | Supporting colour | ## Typography | Role | Family | Size | Weight | Line height | Tracking | |------|--------|------|--------|-------------|----------| | Display | duolingo-sans | 32px | 700 | normal | 0 | | Heading | feather | 48px | 700 | normal | 0 | | Body | duolingo-sans | 17px | 500 | 1.41 | 0 | | Nav | duolingo-sans | 15px | 700 | normal | 0.053em, uppercase | Font families on the page: duolingo-sans, feather. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence. ## Shape - Corner radius, most to least used: 12px
