designlang
Brand guidelines #d7ffb8

June 25, 2026

duolingo.com

A reading of the visual language at https://duolingo.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 89/100
Tokens
18 colours · 9 sizes
Generated
designlang
Chapter 00

Essence

duolingo.com is a Creator brand — warm, kinetic, modern, bold and imaginative — anchored on #d7ffb8 and duolingo-sans, mixed motion.

Creator archetype · 82% fit · vs Jester

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 31% confidence
Material language
flat
Imagery style
flat-illustration
Component library
unknown
Stack
unknown
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 9 neutrals · 18 total

Primary #D7FFB8
RGB
215, 255, 184
HSL
94°, 100%, 86%
Secondary #0000EE
RGB
0, 0, 238
HSL
240°, 100%, 47%
Accent #DDF4FF
RGB
221, 244, 255
HSL
199°, 100%, 93%

Neutrals

#3C3C3C
#777777
#000000
#4B4B4B
#AFAFAF
#FFFFFF
#E5E5E5
#808080
#C1C1C1

Full palette

#3C3C3C
#777777
#000000
#A5ED6E
#4B4B4B
#58CC02
#AFAFAF
#1CB0F6
#D7FFB8
#FFFFFF
#0000EE
#000437
#042C60
#E5E5E5
#DDF4FF
#100F3E
#808080
#C1C1C1

WCAG 100% · 0 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

1 families · 9 sizes · 3 weights

Display
duolingo-sans
Body
duolingo-sans
Weights
500, 700, 400

Specimen

The free, fun, and effective way to learn a language!
free. fun. effective.

Scale

StepSizeSample
t00 64px The free, fun, and effective
t01 48px The free, fun, and effective
t02 32px The free, fun, and effective
t03 19px The free, fun, and effective
t04 17px The free, fun, and effective
t05 16px The free, fun, and effective
t06 15px The free, fun, and effective
t07 14px The free, fun, and effective
t08 13px The free, fun, and effective
Chapter 05

Spacing

Base 4px · 10 steps captured

Rhythm

1px
8px
23px
40px
48px
64px
80px
96px
140px
185px
Chapter 06

Shape

2 radii · 1 elevation tiers

Border radii

2px
12px

Elevation

xs
Chapter 07

Iconography

unknown · 4 captured

Library
unknown
Confidence
0%
Stroke style
roundedCaps
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 3 durations · 2 easings

Duration scale

200ms
300ms
500ms

Easings

Chapter 09

Components

unknown · 1 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
—
Sizes
—
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
0 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #d7ffb8;
  --font-display: "duolingo-sans";
  --space-base: 4px;
  --radius-md: 12px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#d7ffb8' },
      fontFamily: { display: ['duolingo-sans', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '12px' },
    },
  },
};

Run npx designlang pack duolingo.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.