Babbel
Feature Stack
Loading
Duolingo
Bright, playful geometry with rounded forms and welcoming, cheerful, sans-serif typography.
Click any value to copy. Roles are suggestions, not gospel.
- #f4b811oklch(81.6% 0.165 84)Dominant
- #5ccc04oklch(74.9% 0.227 137)Surface
- #f8b8d7oklch(85.0% 0.083 348)Ink
- #b0af73oklch(74.1% 0.080 107)Accent
- #c9cba8oklch(83.1% 0.047 110)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | duolingo-sans | 32px | 700 | 1.4 | 0 | Aa Bb Cc |
| h2 | feather | 48px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | sans-serif | 17px | 500 | 1.18 | 0 | Aa Bb Cc |
| button | duolingo-sans | 15px | 700 | 1.15 | 0.8px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f4b811;
--color-surface: #5ccc04;
--color-ink: #f8b8d7;
--color-accent: #b0af73;
--color-detail: #c9cba8;
}
/* CSS variables exposed by source */
:root {
--text-body-letter-spacing: 0;
--color-koala-always-dark: 72, 90, 98;
--color-unknown-935051: 147, 80, 81;
--color-narwhal: 20, 83, 163;
--color-walking-fish: 255, 223, 224;
--color-unknown-131757: 19, 23, 87;
--color-unknown-172071: 23, 32, 113;
--color-ocean: 0, 124, 143;
--color-wolf-always-light: 119, 119, 119;
--color-humpback: 43, 112, 201;
--color-tree-frog-always-light: 88, 167, 0;
--color-snow-always-light: 255, 255, 255;
--text-heading-weight-medium: 700;
--color-adventurer: 96, 12, 199;
--color-max-dark: 39, 10, 61;
--color-half-branded-outline-green: 38, 206, 155;
--color-twitter: 29, 161, 242;
--color-half-branded-outline-blue: 42, 136, 255;
--text-caption-size: 1rem;
--color-guinea-pig-always-light: 205, 121, 0;
--color-unknown-26ff55: 38, 255, 85;
--color-facebook-dark: 45, 67, 115;
--color-ether: 60, 89, 141;
--color-lily-radio: 144, 91, 179;
--color-streak-panel-frozen-text: 132, 216, 255;
--color-adventurer-progress-bar: 122, 13, 199;
--color-cloud-light: 221, 221, 221;
--color-diamond-tournament-purple: 161, 161, 238;
--color-seafoam: 158, 224, 233;
--color-streak-panel-milestone-gradient-start: 255, 147, 58;
--color-nyp-gradient-purple: 201, 98, 255;
--color-unknown-262472: 38, 36, 114;
--color-eddy-shine: 255, 105, 105;
--text-heading-size-small: 1.25rem;
--color-discoverer-progress-bar: 131, 50, 65;
--color-diamond-stat: 86, 219, 226;
--text-heading-letter-spacing-medium: 0;
--color-half-branded-background-purple-end: 140, 61, 186;
--color-duck: 251, 229, 109;
--color-unknown-048fd1: 4, 143, 209;
--color-canary: 255, 245, 211;
--color-rookie-progress-bar: 0, 198, 150;
--text-heading-line-height-medium: 2rem;
--text-heading-letter-spacing-xsmall: 0;
--color-trailblazer: 154, 143, 232;
--color-turtle-always-light: 165, 237, 110;
--color-unknown-013047: 1, 48, 71;
--color-polar: 247, 247, 247;
--color-half-branded-background-blue-middle: 6, 27, 75;
--color-fox-always-light: 255, 150, 0;
--color-falstaff-secondary: 150, 90, 58;
--color-unknown-e3e3e3: 227, 227, 227;
--color-unknown-696cee: 105, 108, 238;
--color-friends-quest-friend-incomplete: 145, 145, 145;
--color-wolf: 119, 119, 119;
--color-iguana-always-light: 221, 244, 255;
--color-streak-panel-frozen-background: 221, 244, 255;
--color-starling: 92, 108, 252;
--color-super-gradient-neutral-purple: 95, 60, 172;
--color-dark-mode-locked-path-section-text-color: 82, 101, 109;
}Drop-in prompt
Build a landing page in the visual style of Duolingo.
Reference design system (extracted from the live site):
- Palette: #f4b811, #5ccc04, #f8b8d7, #b0af73, #c9cba8
- Typefaces: duolingo-sans, feather, sans-serif
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/duolingo-com--courses
