Eager Green
#58cc02Green text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Duolingo
duolingo.comWebsite preview
The design language
Duolingo's interface treats the page like a children's storybook: white paper canvas, chubby rounded display type, and a single saturated green that reads as 'correct answer' the moment it appears. Body copy stays calm in mid-gray so the green and its accent blue can do all the emotional work — green for progress and headings, blue for interactive links and secondary actions. Components are pill-shaped or chunky-rounded with thick 2px borders in black or color, giving every button the feel of a sticker pressed onto the page rather than a flat UI control.
Color palette
brand
Storybook Green
#d7ffb8Soft highlight wash on light surfaces, subtle background tints behind footer navigation labels
accent
Spark Blue
#1cb0f6Blue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Fresh Leaf
#a5ed6eGreen text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Night Ink
#000437Violet text accent for links, tags, and emphasized short phrases.
neutral
Paper White
#ffffffPage canvas, card surfaces, button text on green/dark fills
Charcoal
#4b4b4bHero headings and primary body copy — the workhorse dark text that lets colored headings stand out
Pencil Gray
#777777Muted body paragraphs, secondary descriptive text — recedes so colored elements lead
Faded Gray
#afafafDisabled or low-emphasis nav labels and button borders
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
64px · 700 · 1.2 · -1.28px trackingThe quick brown fox jumps
heading
48px · 700 · 1.2 · -0.96px trackingThe quick brown fox jumps
heading-sm
32px · 700 · 1.2The quick brown fox jumps
subheading
19px · 700 · 1.4The quick brown fox jumps
body
17px · 500 · 1.18The quick brown fox jumps
nav-label
15px · 700 · 1.33 · 0.795px trackingThe quick brown fox jumps
text-14
14px · 700 · 1.21The quick brown fox jumps
caption
13px · 700 · 1.23The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
feather
- Weights
- 700
- Sizes
- 48px, 64px
- Line height
- 1.20
- Letter spacing
- -0.0200em
Display headlines for section titles like 'free. fun. effective.' and 'duolingo english test' — a custom rounded display face that gives the brand its toy-like, mascot-friendly voice. Substitute with 'Feather Bold' or 'Nunito Black' at matching weight. letter-spacing: -0.0200em
Additional typeface
duolingo-sans
- Weights
- 500
- Sizes
- 13px, 14px, 15px, 17px, 19px, 32px
- Line height
- 1.15, 1.18, 1.20, 1.21, 1.23, 1.33, 1.40, 1.41, 1.47
- Letter spacing
- normal
Body paragraphs and nav links at 17px/500 — a geometric sans that stays readable while letting weight 700 carry emphasis. Substitute with 'DIN Next', 'Inter', or 'Nunito Sans'
Additional typeface
duolingo-sans
- Weights
- 700
- Sizes
- 13px, 14px, 15px, 17px, 19px, 32px
- Line height
- 1.23, 1.21, 1.33, 1.40, 1.20
- Letter spacing
- 0.0530em
All weight-700 uses: uppercase nav labels at 15px (ls 0.0530em), subheadings at 19px and 32px, link emphasis at 13px. Same family as body — the visual distinction is weight, not face change. letter-spacing: 0.0530em on uppercase nav
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 16-24px
- Element gap
- 12px
Border radius
links
12pxbuttons
12pxnav-items
12pxSpacing scale
1px8px10px12px14px16px23px24px30px32px40px48px64px80px96px101px185px219pxGuidelines
Do
- Use #58cc02 for any heading or CTA that needs to read as 'progress' or 'go' — it is the only saturated color allowed on large display text.
- Set display headlines at 48-64px in feather 700 with -0.0200em letter-spacing; this rounded weight is the brand voice.
- Give every button and pill a 12px border-radius and pair it with a 2px solid border in #afafaf or color — outlined buttons are first-class citizens, not a fallback.
- Reserve uppercase at 15px with 0.0530em tracking for nav labels and language pills; never apply it to body copy.
- Keep body text in #777777 at 17px/500 — mid-gray is the default so colored elements can lead.
- Use #1cb0f6 (Spark Blue) exclusively for interactive links and outlined secondary CTAs; it is the 'curious' companion to the green.
- Build sections as white-on-white with illustrations floating beside text; introduce #58cc02 only at the footer band and within display headings.
Don’t
- Don't put colored text in body paragraphs — body stays in #777777 or #4b4b4b so the green headlines own the page.
- Don't use sharp corners; even small tags and pills use 12px radius.
- Don't introduce gradients, shadows, or glass effects — Duolingo's surfaces are flat sticker-like fills with thick borders.
- Don't use feather at sizes below 48px; it is a display face only. Subheadings 19-32px use duolingo-sans 700.
- Don't place CTA buttons on colored backgrounds without testing contrast — green on green or blue on green will disappear.
- Don't apply the secondary palette (pink, purple, mascot illustration colors) to UI chrome; those colors live only inside character art.
- Don't stretch the green to small UI text; #58cc02 is for headings, CTA fills, and the footer band, not body or link text.
Components
Primary CTA Button
Filled green button for 'Get started' and top-of-page conversionFill #58cc02, white text, duolingo-sans 700 at 15px uppercase with 0.0530em tracking, 12px border-radius, 16px horizontal padding. No border — color alone carries the button. Sits directly on white canvas.
Outlined Account Button
Secondary CTA below primary on heroTransparent fill, text in #1cb0f6, duolingo-sans 700 at 14px, 12px border-radius, 16px horizontal padding, 2px solid border in #afafaf. Pairs with the green CTA as a calm ghost alternative.
Nav Language Pill
Language selector in top headerTransparent fill, text in #777777 at 15px uppercase with 0.0530em tracking, 12px border-radius, 10px vertical and 16px horizontal padding, 2px solid border in #afafaf. Behaves like a sticker tag.
Section Headline
Display heading for marketing sectionsfeather 700 at 48-64px, line-height 1.2, letter-spacing -0.0200em, color #58cc02. The signature voice of the brand — large, rounded, unmistakably green.
Hero Headline
Opening page headline above CTAduolingo-sans 700 at 32px, color #4b4b4b (Charcoal). Stays neutral so the green CTA below it carries the color weight.
Body Paragraph
Marketing body text in sectionsduolingo-sans 500 at 17px, line-height 1.18, color #777777 (Pencil Gray). Mid-gray intentionally recedes so colored headlines dominate.
Footer Background
Full-width green band at bottom#58cc02 fill, white and #d7ffb8 text labels, generous 48px vertical padding, contains language grid and site links. The colored surface that anchors the page.
Footer Link Item
Text links in footer navduolingo-sans at small sizes, color #a5ed6 (Fresh Leaf) for links, white for section headers. 8px margin between items, stacked vertically.
Language Flag Pill
Language selector in mid-page bandCircular flag emoji + language name in duolingo-sans 700 at 15px uppercase, inline arrangement with 10-12px gaps, no background fill.
App Store Badge
Download badge for mobile appsBlack rectangular badge with white icon and duolingo-sans text, 4b4b4b text color. Functions as a visual anchor on white sections.
Section Feature Illustration
Decorative mascot illustration beside textFlat colored mascot characters placed in the right half of each section, no container or background. Illustrations carry the secondary palette (pink, purple, yellow, orange) while UI stays green/blue.
Surfaces & elevation
Level 0
Paper White
#ffffffPage canvas — every section sits on pure white
Level 1
Storybook Green
#d7ffb8Soft tint wash behind highlighted footer labels
Level 2
Eager Green
#58cc02Footer band and primary CTA fills — bold colored surface
Level 3
Night Ink
#000437Deep accent surface for emphasis text and dark CTAs
Layout & imagery
Layout
Single-column full-width sections stacked vertically, each ~800-900px tall. Max content width ~1200px centered. Sections alternate text-left/illustration-right with generous vertical breathing room (80-120px between sections). No card grids or multi-column feature layouts — each section is a single text block paired with one illustration. Navigation is a minimal top bar with logo and language selector, reappearing as a sticky bar between sections. Footer is a full-bleed green band spanning the page width. The rhythm is editorial: headline, paragraph, CTA, illustration, repeat.
Imagery
Illustration-driven storybook language: flat 2D mascot characters (the owl Duo and diverse human figures) with rounded geometric shapes, bold black outlines, and a secondary palette of pink, purple, yellow, orange, and blue that never appears in the UI chrome itself. Illustrations sit beside text in the right half of each section on pure white, no containers or backgrounds. Photography is absent — the characters are the visual content. Iconography uses thick outlined strokes consistent with the mascot style. Image density is moderate: each section gets one large character illustration, leaving the rest of the page to typography and whitespace.
Design notes
Agent Guide
Quick Color Reference: - text (heading): #58cc02 - text (body): #777777 - text (hero/heading dark): #4b4b4b - background (page): #ffffff - background (footer band): #58cc02 - border (outlined button): #afafaf - accent (interactive link): #1cb0f6 - primary action: no distinct CTA color Example Component Prompts: No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 3. Section Headline: feather 700 at 48px, line-height 1.2, letter-spacing -0.0200em, color #58cc02. Used for 'free. fun. effective.' and similar section titles. 5. Body Paragraph: duolingo-sans 500 at 17px, line-height 1.18, color #777777, max-width ~480px to keep reading comfortable.
Similar brands
Headspace
Same mascot-led illustration system with thick outlines and a single saturated accent color against white canvas
Babbel
Light-mode language-learning landing pages with rounded display type and green as the primary CTA color
Khan Academy Kids
Flat rounded mascots, playful rounded display headings, and bold sticker-style buttons with thick borders
Memrise
Minimal white-canvas marketing pages with one dominant green and casual rounded display typography
ClassDojo
Playful rounded mascot illustrations, thick outlined UI components, and bright single-accent CTAs on white backgrounds
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
