Design Specification — Duolingo
| Field | Value |
|---|
| Site / Project | https://duolingo.com/ |
| Analyzed on | 2026-08-28 |
| Analysis mode | Automated code extraction (no AI) |
Overview
This design system was extracted programmatically from the source page. It is built on the detected palette. All type is set in KaTeX_Main. Detected font weights: 400, 500, 700. Detected style signatures: technical / mono accents.
Logo asset(s): https://d35aaqx5ub95lt.cloudfront.net/images/duolingo-touch-icon2.png
Color System
Detected palette (by frequency)
Typography
Primary typeface: KaTeX_Main — stack: KaTeX_Main
Font stacks (most used first)
KaTeX_Main"KaTeX_SansSerif"monospace,monospaceKaTeX_CaligraphicKaTeX_FrakturKaTeX_MathinheritKaTeX_AMSKaTeX_ScriptKaTeX_Size1
Derived type scale
| Token | Size |
|---|
| headline-lg | 32px |
| headline-md | 24px |
| title-lg | 19px |
| body-lg | 18px |
| body-md | 16px |
| label-md | 13px |
Font sizes (by frequency)
| Size | Count |
|---|
| 1em | 2 |
| 2em | 1 |
| 32px | 1 |
| 24px | 1 |
| 19px | 1 |
| 18px | 1 |
| 15px | 1 |
| 13px | 1 |
Weights in use: 400, 500, 700
Line heights (by frequency)
| Value | Count |
|---|
| 0 | 1 |
| 1.15 | 1 |
| 40px | 1 |
| 26px | 1 |
| 22px | 1 |
Spacing
Derived spacing scale
| Token | Value |
|---|
| xs | 5.6px |
| sm | 10.72px |
| lg | 40px |
Raw values (by frequency)
| Value | Count |
|---|
| .67em | 1 |
| .35em | 1 |
| 40px | 1 |
| 12px | 1 |
Borders & Radius
Derived radius tokens
Raw values (resolved, by frequency)
Layout
Breakpoints
Animation & Motion
Easing curves
Keyframes
@keyframes qnlsp { 0%{opacity:1}33.3333333333%{opacity:.25}66.6666666667%{opacity:.5}to{opacity:1} }
@keyframes tj_TT { 0%{transform:scale(1)}33.3333333333%{transform:scale(.8)}66.6666666667%{transform:scale(.8)}to{transform:scale(1)} }
@keyframes _3IjuS { 0%{opacity:1}33.3333333333%{opacity:.3}66.6666666667%{opacity:.3}to{opacity:1} }
@keyframes _2xhhK { 0%{opacity:.5}33.3333333333%{opacity:1}66.6666666667%{opacity:.25}to{opacity:.5} }
@keyframes _3wL1o { 0%{transform:scale(.8)}33.3333333333%{transform:scale(1)}66.6666666667%{transform:scale(.8)}to{transform:scale(.8)} }
@keyframes T-gio { 0%{opacity:.3}33.3333333333%{opacity:1}66.6666666667%{opacity:.3}to{opacity:.3} }
@keyframes EJauM { 0%{opacity:.25}33.3333333333%{opacity:.5}66.6666666667%{opacity:1}to{opacity:.25} }
@keyframes _2nQ30 { 0%{transform:scale(.8)}33.3333333333%{transform:scale(.8)}66.6666666667%{transform:scale(1)}to{transform:scale(.8)} }
@keyframes _2eBze { 0%{opacity:.3}33.3333333333%{opacity:.3}66.6666666667%{opacity:1}to{opacity:.3} }
@keyframes _2tb0b { 0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)} }
@keyframes lIsSW { 0%{transform:scale(1)}20%{transform:scale(1)}45%{transform:scale(1.2)}75%{transform:scale(1.2)}to{transform:scale(1)} }
@keyframes gTkFz { 0%{transform:translateY(100%)}to{transform:translateY(0)} }
@keyframes _1MFy_ { 0%{opacity:0}to{opacity:1} }
@keyframes qjYZL { 0%{opacity:1}to{opacity:0} }
@keyframes ikYiv { 0%{transform:scale(0)}to{transform:scale(1)} }
@keyframes _2Wi_s { 0%{transform:scale(1)}to{transform:scale(0)} }
@keyframes _3eO91 { 0%{background-position-y:20%}50%{background-position-y:30%}to{background-position-y:20%} }
@keyframes _3iy8w { 0%{opacity:.5;transform:rotate(-45deg) scale(1)}25%{opacity:0;transform:rotate(-45deg) scale(.5)}50%{opacity:.5;transform:rotate(-45deg) scale(1)}75%{opacity:0;transform:rotate(-45deg) scale(.5)}to{opacity:.5;transform:rotate(-45deg) scale(1)} }
Do's and Don'ts
Do
- Do stick to the detected font weight(s): 400, 500, 700.
Don't
- Don't introduce colors outside the detected palette — every hue above was found in the source.
- Don't add gradients — the source page uses flat fills exclusively.
- Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.
Design Tokens (copy-paste)
:root {
--font-sans: KaTeX_Main;
--font-size-headline-lg: 32px;
--font-size-headline-md: 24px;
--font-size-title-lg: 19px;
--font-size-body-lg: 18px;
--font-size-body-md: 16px;
--font-size-label-md: 13px;
--radius-sm: 5px;
--space-xs: 5.6px;
--space-sm: 10.72px;
--space-lg: 40px;
}
