W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Duolingo
Duolingo is the world's largest language-learning platform — free, gamified, mobile-first, and anchored by Duo the green owl, one of the most recognizable mascots in consumer software. The brand voice is playful, character-led, and unapologetically extrinsic: streaks, hearts, gems, leagues, push notifications with personality. Visually, Duolingo is light-first with Snow / Polar canvases, an Eel ink text color (never pure black), and the famous Feather Green (#58CC02) as the primary action and identity color. The entire palette is animal-named — Owl, Macaw, Cardinal, Bee, Beetle, Eel, Swan, Hare — and that vocabulary is itself part of the brand's voice. Typography is the proprietary DIN Round Pro (body) and Feather Bold (display).
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/duolingo/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/duolingo/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Duolingo
Duolingo is the world's largest language-learning platform — free, gamified, mobile-first, and anchored by Duo the green owl, one of the most recognizable mascots in consumer software. The brand voice is playful, character-led, and unapologetically extrinsic: streaks, hearts, gems, leagues, push notifications with personality. Visually, Duolingo is light-first with Snow / Polar canvases, an Eel ink text color (never pure black), and the famous Feather Green (#58CC02) as the primary action and identity color. The entire palette is animal-named — Owl, Macaw, Cardinal, Bee, Beetle, Eel, Swan, Hare — and that vocabulary is itself part of the brand's voice. Typography is the proprietary DIN Round Pro (body) and Feather Bold (display).
Tags: duolingo, education, language-learning, gamified, brand, light-first, green, feather, owl
Atoms
Palette
Duolingo · [email protected] · Proprietary — All Rights Reserved
Duolingo's brand palette, captured directly from the published brand guidelines at design.duolingo.com. The system is famously animal-named — every color is a creature — and the primary brand color is Feather Green (the Owl), the signature of Duo the mascot. The light-first surface canvas is Snow on Polar, with Eel as the deep ink text color. Secondary characters Macaw (blue), Cardinal (rose-red), Bee (yellow), Beetle (purple), and Fox (orange) round out the playful educational identity. Duolingo's product UI is light-first by default; a dark mode flips Eel to canvas and Snow to text.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
feather-green |
Feather Green (Owl) | #58CC02 |
mask-green |
Mask Green | #89E219 |
tree-frog |
Tree Frog | #58A700 |
sea-sponge |
Sea Sponge | #D7FFB8 |
turtle |
Turtle | #A5ED6E |
snow |
Snow | #FFFFFF |
polar |
Polar | #F7F7F7 |
swan |
Swan | #E5E5E5 |
hare |
Hare | #AFAFAF |
wolf |
Wolf | #777777 |
eel |
Eel | #4B4B4B |
cardinal |
Cardinal | #FF4B4B |
fire-ant |
Fire Ant | #EA2B2B |
crab |
Crab | #FF7878 |
flamingo |
Flamingo | #FFB2B2 |
bee |
Bee | #FFC800 |
lion |
Lion | #FFB100 |
fox |
Fox | #FF9600 |
duck |
Duck | #FBE56D |
canary |
Canary | #FFF5D3 |
macaw |
Macaw | #1CB0F6 |
whale |
Whale | #1899D6 |
humpback |
Humpback | #2B70C9 |
narwhal |
Narwhal | #1453A3 |
blue-jay |
Blue Jay | #84D8FF |
moon-jelly |
Moon Jelly | #7AF0F2 |
beetle |
Beetle | #CE82FF |
betta |
Betta | #9069CD |
butterfly |
Butterfly | #6F4EA1 |
starfish |
Starfish | #FFAADE |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
snow |
#FFFFFF |
surface |
polar |
#F7F7F7 |
surface-elevated |
snow |
#FFFFFF |
text-primary |
eel |
#4B4B4B |
text-secondary |
wolf |
#777777 |
text-tertiary |
hare |
#AFAFAF |
primary |
feather-green |
#58CC02 |
primary-hover |
tree-frog |
#58A700 |
accent |
macaw |
#1CB0F6 |
accent-hover |
whale |
#1899D6 |
warning |
bee |
#FFC800 |
warning-hover |
lion |
#FFB100 |
error |
cardinal |
#FF4B4B |
success |
feather-green |
#58CC02 |
border |
swan |
#E5E5E5 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
eel |
#4B4B4B |
surface |
wolf |
#777777 |
surface-elevated |
hare |
#AFAFAF |
text-primary |
snow |
#FFFFFF |
text-secondary |
polar |
#F7F7F7 |
text-tertiary |
swan |
#E5E5E5 |
primary |
feather-green |
#58CC02 |
primary-hover |
mask-green |
#89E219 |
accent |
macaw |
#1CB0F6 |
accent-hover |
blue-jay |
#84D8FF |
warning |
bee |
#FFC800 |
warning-hover |
lion |
#FFB100 |
error |
cardinal |
#FF4B4B |
success |
mask-green |
#89E219 |
border |
wolf |
#777777 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
snow |
#FFFFFF |
on-identity |
eel |
#4B4B4B |
primary |
feather-green |
#58CC02 |
primary-hover |
tree-frog |
#58A700 |
accent |
macaw |
#1CB0F6 |
accent-hover |
whale |
#1899D6 |
mark |
feather-green |
#58CC02 |
success |
feather-green |
#58CC02 |
warning |
bee |
#FFC800 |
error |
cardinal |
#FF4B4B |
text-primary-light |
eel |
#4B4B4B |
text-primary-dark |
snow |
#FFFFFF |
background-light |
snow |
#FFFFFF |
background-dark |
eel |
#4B4B4B |
surface-light |
polar |
#F7F7F7 |
surface-dark |
wolf |
#777777 |
text-secondary-light |
wolf |
#777777 |
text-tertiary-light |
hare |
#AFAFAF |
border-light |
swan |
#E5E5E5 |
border-dark |
wolf |
#777777 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → roles.colors.primary
- allowed: feather-green, tree-frog
- forbidden: mask-green, macaw, bee, cardinal, beetle, fox
Feather Green (#58CC02) is Duo the owl's signature color and the brand's primary action color across every surface in the product. Mask Green is the brighter signage sibling reserved for illustration; Macaw, Bee, Cardinal, Beetle, and Fox are character / semantic secondaries that must not stand in for the primary brand action color.
colorChoice → roles.colors.text-primary-light
- allowed: eel, wolf
- forbidden: black
Duolingo's published guidelines explicitly avoid pure #000000 for body copy. The canonical text ink is Eel (#4B4B4B) on light surfaces; Wolf (#777777) is the secondary text grey. Pure black reads too harsh against the brand's playful, child-friendly posture and breaks the warmth of the Snow / Polar canvas.
colorChoice → roles.colors.mark
- allowed: feather-green
- forbidden: tree-frog, mask-green, macaw, bee, cardinal, beetle
Duo the owl mascot's body fill is Feather Green specifically. Tree Frog is the pressed / shadow variant and must not be used as the mark fill itself. Recolored mascots — purple Duo, blue Duo, red Duo — only appear in sanctioned editorial moments (e.g., Super promotional art) and are not part of the standard mark vocabulary.
forbiddenTreatment → logo
- treatments: stretched, skewed, rotated, drop-shadow, recolored-arbitrary, on-busy-photo, low-contrast-fill
Duo the owl and the Duolingo wordmark are precise brand assets. The mascot has a documented set of poses and emotions; arbitrary skew, rotation, or recoloring breaks the character vocabulary. Drop shadows conflict with the brand's flat, illustration-first visual system.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Eel (#4B4B4B) on Snow (#FFFFFF) gives roughly 9.5:1 — clears AA decisively. Duolingo's product surfaces are used by children and language learners worldwide; the AA contrast floor is the floor and consumers must not drop below it when composing custom text colors on the Snow / Polar canvas.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Duolingo pairs the heavier Feather Bold display face with DIN Round Pro for body prose on lesson and marketing surfaces. A 1.5× minimum display-to-prose size ratio preserves the typographic hierarchy that makes streak counters, XP rewards, and lesson titles read as celebrations rather than as labels.
contextRestriction → roles.colors.error
- forbiddenContexts: confirmation, completion, large-fill, hero
- allowedContexts: error-state, destructive-action, data-viz-negative
Cardinal (#FF4B4B) is reserved for wrong-answer feedback, streak-loss warnings, and destructive confirmations. Using Cardinal as a large background fill or hero accent conflicts with its established negative-feedback meaning in the product — learners read large red surfaces as mistakes.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Duolingo serves a global K-12 and adult learner audience; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700
Duolingo's product UI uses DIN Round Pro at Medium (500) and Bold (700) for body and headings, with Feather Bold (700) for display. The brand does not use Light (300) or Black (900) weights on product surfaces — they conflict with the rounded, friendly type voice. Inter substitutes preserve the same weight band.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: snow, polar, eel, tree-frog
- doesNotPairWith: mask-green, bee, fox
Feather Green reads cleanest against the Snow / Polar canvas or as a fill on the Eel ink. Placing Feather Green adjacent to Mask Green creates near-identical green-on-green; adjacent Bee and Fox introduce warm-cool conflict that fights the green for the same eye position without resolving into hierarchy.
Provenance
- Source: https://design.duolingo.com/
- License:
Proprietary — All Rights Reserved - Attribution: Duolingo, Inc. — visual identity captured from the published Duolingo Brand Guidelines (design.duolingo.com) and the deployed stylesheet on duolingo.com. The animal-named palette is the brand's own vocabulary. Duolingo, Duo, the green owl, the Feather typeface, and associated marks are property of Duolingo, Inc.
- Imported:
2026-05-19 - Notes: Duolingo's proprietary typefaces are DIN Round Pro (Regular, Medium, Bold) for body and Feather Bold for display headings. Neither is publicly distributed; this atom references inter@1 as the open-source substitute for both the display and body roles, with jetbrainsmono-nerdfont@1 for incidental code snippets in support content. The canonical text ink is Eel (#4B4B4B), NOT pure #000000 — pure black is forbidden in body copy per the published guidelines, which is encoded as a colorChoice rule below.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Duolingo
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Duolingo
A clear hierarchy in Duolingo's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ macaw #1CB0F6 accent-hover
→ whale #1899D6 background-dark
→ eel #4B4B4B background-light
→ snow #FFFFFF border-dark
→ wolf #777777 border-light
→ swan #E5E5E5 error
→ cardinal #FF4B4B identity
→ snow #FFFFFF mark
→ feather-green #58CC02 on-identity
→ eel #4B4B4B primary
→ feather-green #58CC02 primary-hover
→ tree-frog #58A700 success
→ feather-green #58CC02 surface-dark
→ wolf #777777 surface-light
→ polar #F7F7F7 text-primary-dark
→ snow #FFFFFF text-primary-light
→ eel #4B4B4B text-secondary-light
→ wolf #777777 text-tertiary-light
→ hare #AFAFAF warning
→ bee #FFC800 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from duolingo)
Light mode (15 roles)
accent
→ macaw accent-hover
→ whale background
→ snow border
→ swan error
→ cardinal primary
→ feather-green primary-hover
→ tree-frog success
→ feather-green surface
→ polar surface-elevated
→ snow text-primary
→ eel text-secondary
→ wolf text-tertiary
→ hare warning
→ bee warning-hover
→ lion Dark mode (15 roles)
accent
→ macaw accent-hover
→ blue-jay background
→ eel border
→ wolf error
→ cardinal primary
→ feather-green primary-hover
→ mask-green success
→ mask-green surface
→ wolf surface-elevated
→ hare text-primary
→ snow text-secondary
→ polar text-tertiary
→ swan warning
→ bee warning-hover
→ lion Rules (10 typed constraints)
error · 8 rules
colorChoice roles.colors.primary allowed feather-green, tree-frog forbidden mask-green, macaw, bee, cardinal, beetle, fox Feather Green (#58CC02) is Duo the owl's signature color and the brand's primary action color across every surface in the product. Mask Green is the brighter signage sibling reserved for illustration; Macaw, Bee, Cardinal, Beetle, and Fox are character / semantic secondaries that must not stand in for the primary brand action color.
colorChoice roles.colors.text-primary-light allowed eel, wolf forbidden black Duolingo's published guidelines explicitly avoid pure #000000 for body copy. The canonical text ink is Eel (#4B4B4B) on light surfaces; Wolf (#777777) is the secondary text grey. Pure black reads too harsh against the brand's playful, child-friendly posture and breaks the warmth of the Snow / Polar canvas.
colorChoice roles.colors.mark allowed feather-green forbidden tree-frog, mask-green, macaw, bee, cardinal, beetle Duo the owl mascot's body fill is Feather Green specifically. Tree Frog is the pressed / shadow variant and must not be used as the mark fill itself. Recolored mascots — purple Duo, blue Duo, red Duo — only appear in sanctioned editorial moments (e.g., Super promotional art) and are not part of the standard mark vocabulary.
forbiddenTreatment logo treatments stretched, skewed, rotated, drop-shadow, recolored-arbitrary, on-busy-photo, low-contrast-fill Duo the owl and the Duolingo wordmark are precise brand assets. The mascot has a documented set of poses and emotions; arbitrary skew, rotation, or recoloring breaks the character vocabulary. Drop shadows conflict with the brand's flat, illustration-first visual system.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Eel (#4B4B4B) on Snow (#FFFFFF) gives roughly 9.5:1 — clears AA decisively. Duolingo's product surfaces are used by children and language learners worldwide; the AA contrast floor is the floor and consumers must not drop below it when composing custom text colors on the Snow / Polar canvas.
fontPairing typography.display requires prose minSizeRatio 1.5 Duolingo pairs the heavier Feather Bold display face with DIN Round Pro for body prose on lesson and marketing surfaces. A 1.5× minimum display-to-prose size ratio preserves the typographic hierarchy that makes streak counters, XP rewards, and lesson titles read as celebrations rather than as labels.
contextRestriction roles.colors.error forbiddenContexts confirmation, completion, large-fill, hero allowedContexts error-state, destructive-action, data-viz-negative Cardinal (#FF4B4B) is reserved for wrong-answer feedback, streak-loss warnings, and destructive confirmations. Using Cardinal as a large background fill or hero accent conflicts with its established negative-feedback meaning in the product — learners read large red surfaces as mistakes.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Duolingo serves a global K-12 and adult learner audience; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 700 Duolingo's product UI uses DIN Round Pro at Medium (500) and Bold (700) for body and headings, with Feather Bold (700) for display. The brand does not use Light (300) or Black (900) weights on product surfaces — they conflict with the rounded, friendly type voice. Inter substitutes preserve the same weight band.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith snow, polar, eel, tree-frog doesNotPairWith mask-green, bee, fox Feather Green reads cleanest against the Snow / Polar canvas or as a fill on the Eel ink. Placing Feather Green adjacent to Mask Green creates near-identical green-on-green; adjacent Bee and Fox introduce warm-cool conflict that fights the green for the same eye position without resolving into hierarchy.
Provenance
- Source
- https://design.duolingo.com/
- License
Proprietary — All Rights Reserved- Attribution
- Duolingo, Inc. — visual identity captured from the published Duolingo Brand Guidelines (design.duolingo.com) and the deployed stylesheet on duolingo.com. The animal-named palette is the brand's own vocabulary. Duolingo, Duo, the green owl, the Feather typeface, and associated marks are property of Duolingo, Inc.
- Imported
2026-05-19- Notes
- Duolingo's proprietary typefaces are DIN Round Pro (Regular, Medium, Bold) for body and Feather Bold for display headings. Neither is publicly distributed; this atom references inter@1 as the open-source substitute for both the display and body roles, with jetbrainsmono-nerdfont@1 for incidental code snippets in support content. The canonical text ink is Eel (#4B4B4B), NOT pure #000000 — pure black is forbidden in body copy per the published guidelines, which is encoded as a colorChoice rule below.