# Duolingo — Marketing Site Design Spec > Source: duolingo.com (live DOM, computed styles), 2026-07-25 (desktop 1512px). > Coverage: home. Logged-in learning app: behind login (`needs-dashboard`). Responsive: breakpoints not captured. Motion: partial (button press mechanics captured). ## 1. Visual Theme & Atmosphere Duolingo's marketing is deliberately toy-like and friendly: a bright white canvas, one rounded sans, a single grass-green brand colour and a cast of flat vector "World Character" illustrations doing all the emotional work. The signature element is the chunky 3D button — a solid colour face sitting on a darker same-hue "lip" (a hard, un-blurred 4px offset shadow) that visibly depresses when pressed, so the whole UI feels tactile and game-like. Big section headlines are set in the heavier Feather display face and coloured green, while everything else stays in the rounded Duolingo Sans over calm grey text. Nothing is sharp or corporate; structure comes from generous whitespace and colour, not borders or drop shadows. Feels: playful, rounded, tactile, cheerful. ## 2. Color Palette & Roles ### Brand & accent | Token (brand name) | Hex | Role / usage | |---|---|---| | feather green | `#58cc02` | Primary brand: buttons, display headlines, logo, footer | | button lip (seaSponge) | `#58a700` | Darker-green 3D bottom lip under the primary button | | macaw blue | `#1cb0f6` | Links, secondary-button text, blue accents | | iceberg | `#ddf4ff` | Light-blue section tint | ### Text | Token | Hex | Role / usage | |---|---|---| | eel | `#4b4b4b` | Primary text, hero headline | | wolf | `#777777` | Secondary text, nav labels | | hare | `#afafaf` | Tertiary / muted | | snow | `#f1f7fb` | Text on green / dark sections | ### Surfaces & borders | Token | Hex | Role / usage | |---|---|---| | polar | `#ffffff` | Page canvas, cards, button faces | | swan | `#e5e5e5` | Borders, secondary-button lip | | whale (deep navy) | `#100f3e` | Dark feature-section background | | navy variants | `#000437` / `#042c60` | Deep-navy text / sections | Rule: green is the hero colour — reserved for primary CTAs, big display headlines, the logo and the footer. Rule: structure is whitespace + colour, never hairline borders or blurred shadows. ## 3. Typography Rules - `duolingo-sans` — the rounded workhorse: hero headline, body, buttons, nav. - `feather` (Feather Bold) — heavier display face for big section headlines (always green). | Role | Family | Size/Line | Weight | Tracking | Case | |---|---|---|---|---|---| | Section display | feather | 48 | 700 | normal | lower | | Hero headline (h1) | duolingo-sans | 32 | 700 | normal | sentence | | Body | duolingo-sans | 17 | 500 | normal | sentence | | Button / UI label | duolingo-sans | 15 | 700 | +0.8px | UPPERCASE | | Nav / eyebrow | duolingo-sans | ~13 | 700 | wide | UPPERCASE | Patterns: display headlines are set lowercase in green Feather; buttons and nav labels are UPPERCASE bold with positive tracking. Weight is bold (700) for emphasis, medium (500) for body. ## 4. Component Stylings ### Buttons — the signature 3D control - **Primary**: face bg `#58cc02`, text white, `box-shadow: 0 4px 0 0 #58a700` (hard 3D lip), radius `12px`, height `50px`, `duolingo-sans` 15px/700 UPPERCASE +0.8px. On press the face translates down onto the lip. - **Secondary**: face bg `#ffffff`, text macaw `#1cb0f6`, 2px `#e5e5e5` border, `box-shadow: 0 2px 0 0 #e5e5e5` (grey lip), radius `12px`, height `50px`, same type. ### Cards / tiles - Rounded white tiles (course/flag icons) at ~12–16px radius; flat, no drop shadow. ### Nav - White bar, height ~72px; green owl logo + wordmark left, grey "SITE LANGUAGE" selector right; a green primary button appears on scroll. ### Illustration - Flat vector "World Characters" and objects in the full brand palette — the primary source of colour and personality. ### Inputs - Not captured on the marketing home. ## 5. Layout Principles - Centered hero: green owl/book illustration beside a dark headline + green primary + white secondary stacked CTAs. - Alternating full-width feature rows: green Feather headline + eel body + macaw link on one side, a character illustration on the other. - A language-course selector strip with flags along the bottom of the hero. - Green footer; occasional deep-navy `#100f3e` feature sections for contrast. - Whitespace-driven rhythm, content roughly centered around ~1100–1200px. ## 6. Depth & Elevation - Radii: `12px` (buttons and most controls), rounded tiles ~16px, `2px` tiny. - Signature depth: the **hard 3D lip** — `box-shadow: 0 Npx 0 0 ` (4px on primary, 2px on secondary), never a blurred shadow. - Otherwise flat: no blurred drop shadows, no hairline-border scaffolding. ## 7. Motion - Buttons **depress** on press: the face translates down and the 3D lip collapses (a tactile, game-like click). - Playful, bouncy micro-interactions and character animations throughout (exact keyframes not captured). ## 8. Backgrounds, Effects & WebGL - Flat white canvas; all atmosphere comes from flat vector character illustrations, not gradients. - Green footer and deep-navy `#100f3e` feature bands provide colour blocking. - No CSS gradients, canvas or WebGL observed. Feather icon-font supplies some UI glyphs. ## 9. Do's and Don'ts ### Do - Make green `#58cc02` the hero colour — primary CTAs, big display headlines, logo, footer. - Give every button the 3D lip: a hard `0 4px 0 ` offset shadow, radius 12px, 50px tall, and depress it on press. - Set big section headlines lowercase in the green Feather display face; keep body in rounded Duolingo Sans (eel `#4b4b4b`). - Set button and nav labels UPPERCASE bold with +0.8px tracking. - Carry colour and personality through flat vector character illustrations. - Use macaw blue `#1cb0f6` for links and secondary-button text. - Keep everything rounded (12px) and flat except the 3D button lip. ### Don't - Don't use blurred drop shadows — depth is the hard colour lip only. - Don't scaffold with hairline borders; use whitespace and colour blocks. - Don't introduce a second bright brand colour to compete with feather green. - Don't set display headlines in a thin weight or all-caps — they are lowercase Feather Bold. - Don't make the buttons static; the press-down depress is core to the feel. ## 10. Responsive Behavior - Not captured (desktop 1512px only). Mobile app-store badges present in the hero. ## 11. Agent Prompt Guide Quick token reference: - Canvas `#ffffff` · Text `#4b4b4b` · Muted `#777777` · Green `#58cc02` (lip `#58a700`) · Blue `#1cb0f6` · Border `#e5e5e5` - Fonts: `duolingo-sans` (rounded, body/UI) / `feather` (Feather Bold, green display) · Body 17px · Radius 12px · Button height 50px - Primary button: `#58cc02` face + `box-shadow:0 4px 0 #58a700` lip, white UPPERCASE 15/700 +0.8px · depress on press Use the Duolingo design language: a bright white canvas, one grass-green brand colour (feather `#58cc02`), calm grey text (eel `#4b4b4b`, wolf `#777777`), and a cast of flat vector character illustrations that carry all the colour and personality. Two faces: rounded `duolingo-sans` for the hero headline (32/700 eel), body (17/500) and UPPERCASE bold button/nav labels (+0.8px tracking); and the heavier `feather` Feather Bold for big lowercase section headlines, always set in green. The signature component is the chunky 3D button: a solid `#58cc02` face on a hard darker-green lip (`box-shadow:0 4px 0 #58a700`), radius 12px, 50px tall, white UPPERCASE label, that visibly depresses on press; the secondary is a white face with macaw-blue `#1cb0f6` text and a grey `#e5e5e5` lip. Everything is rounded (12px) and flat — depth is only the hard colour lip, never a blurred shadow, and structure comes from whitespace and colour blocks (green footer, occasional deep-navy `#100f3e` bands), never hairline borders. Feels: playful, rounded, tactile, cheerful. Avoid: blurred drop shadows, hairline-border scaffolding, a competing second brand colour, thin or all-caps display headlines, and static non-depressing buttons.