Kage Design logo kage
duolingo.com
duolingo.com feature grid component

Design analysis

Four spacious alternating feature bands explain the product promise: effectiveness, science, motivation, and personalization. Each uses a short green heading, compact copy, and a contrasting playful visual.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146268-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146240317-full.webp
- Component on Kage: https://kage.design/component/duolingo-feature-grid

## Before you start
Ask what four to six benefits matter most for the user's product and what visual assets are available, then apply the principles below to that product rather than copying the reference.

Build a vertical feature narrative made of alternating two-column rows. Each row should contain a short benefit heading, two to four lines of supporting copy, and a product-relevant visual or lightweight illustration. Alternate the visual side between rows to create rhythm, while keeping text blocks aligned to a consistent content grid. Use a bright green accent for headings (approximately #58CC02), charcoal body copy (#666666), white backgrounds, and generous vertical spacing of roughly 120–180px per row. Let visuals be large and expressive but preserve ample negative space; avoid card borders so the section feels editorial rather than dashboard-like. Add subtle entrance motion only if appropriate, with reduced-motion support.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components