The visual approach
Duolingo's design system runs on restraint. The brand palette narrows to three primaries: --color-brand-green: #58CC02 for conversion moments, --color-brand-blue: #1CB0F6 for active states and links, and --color-brand-purple: #7B4DFF as the Schools product accent. Text gets three tiers—--color-eel (#3C3C3C) for primary content, --color-wolf (#777777) for secondary, --color-hare (#AFAFAF) for tertiary—and backgrounds alternate between --color-swan (pure white) and --color-snow (#F7F7F7).
The type system uses DIN Round across five weights, from 12px captions to 48px hero copy, all at 400 or 700 weight. No intermediate sizes, no light variants. The component vocabulary stays minimal: nav, hero, CTA, card, footer. That compression makes sense when your product teaches through repetition. The visual grammar has to be learnable in seconds because the cognitive load belongs to verb conjugation, not interface decoding.
Motion carries the personality that the color palette holds back. Page transitions fade at 250ms ease-out—educational contexts prefer clarity to flourish—but scroll behavior layers in playful depth. Illustrated characters and geometric shapes (diamonds, stars) move at 0.3–0.5× scroll speed, creating parallax without distraction. Content blocks reveal with a 20px upward translate at 300ms using cubic-bezier(0.2, 0.8, 0.2, 1). Checkmark icons scale from 0.8 to 1.0 with a 200ms delay after their parent container, and list items stagger in with 60–80ms delays.
The primary CTA buttons lift 2px on hover with shadow expansion—transform: translateY(-2px); box-shadow: 0 6px 20px rgba(88, 204, 2, 0.3)—over 200ms ease-out. Active state adds a 0.98 scale. Secondary buttons thicken borders or fill with color at 250ms ease-in-out. Link underlines slide from the left at 150ms using cubic-bezier(0.4, 0, 0.2, 1), and navigation tabs animate an active indicator horizontally at 300ms.
What works
The green works because it signals one thing: forward progress. Every CTA, every completion state, every streak notification uses #58CC02. The color becomes Pavlovian. Blue handles the rest—links, tabs, focus rings—so users never confuse navigation with commitment. Purple stays fenced to the Schools offering, maintaining brand coherence without polluting the core flow.
The parallax scroll creates depth without demanding attention. Background elements drift at half speed while content stays anchored, giving the page dimensionality that feels accidental rather than choreographed. The 0.3–0.5× multiplier hits the threshold where motion registers as spatial rather than decorative. Faster would read as distracting, slower as broken.
Staggered reveals turn static content into narrative. A feature list doesn't appear all at once; each benefit materializes in sequence with an 80ms pause between items. The cadence mirrors natural reading speed, so the animation feels like good pacing rather than imposed rhythm. Checkmarks that scale in after their container create a tiny moment of arrival—visual confirmation that the point landed.
The hover lift on CTAs adds tactile weight. The button doesn't just change color; it responds to cursor proximity like a physical object. The 2px translateY combined with shadow expansion makes the interaction feel analog in a way that flat state changes don't. The 0.98 scale on active press completes the mechanical metaphor: you're pushing something down before it springs back.
What a builder can borrow
Use color scarcity to clarify intent. Duolingo's three-primary system forces every button, link, and accent to justify its hue. If you're assigning colors by category instead of by action, you've already lost hierarchy. Reserve one color for conversion and protect it.
Stagger reveals when sequence matters. The 60–80ms delay between list items costs nothing to implement—transition-delay: calc(var(--index) * 80ms)—but it transforms a wall of text into a guided tour. The technique works for pricing tiers, feature comparisons, testimonial carousels, anywhere linear reading improves comprehension.
Combine parallax with restraint. Background shapes moving at 0.3× scroll speed add depth without cognitive cost, but foreground content must stay locked to scroll position. The effect only works when the user can't tell whether it's intentional or a rendering artifact. Subtlety is the product.
Animate CTAs in three dimensions. Hover lift (translateY), shadow growth, and active scale create a button that feels mounted on springs. The combination is richer than any single-axis transition, and the 200ms duration keeps it snappy. Map the sequence to user intent: approach (lift), commit (press), release (return). The micro-interaction should feel like confirmation, not decoration.