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

Design analysis

A calm white promotional row introduces a related testing product with concise explanatory copy, an outlined action, and a large educational visual on the right.

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-1789146269-6.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-2

## Before you start
Ask what adjacent product, certification, or professional service the user's product offers, who it is for, and what proof or action matters, then apply the principles below to that product rather than copying the reference.

Build a two-column cross-sell section with a concise green heading, a short paragraph, one outlined CTA, and a large supporting visual on the opposite side. Use a centered max-width container and generous whitespace. Keep the heading in a friendly rounded display style with a vivid green accent (#58CC02), body copy in medium gray (#666666), and a white button with a pale border and blue or teal label. The supporting visual can be an abstract certification, assessment, or achievement motif, but should remain secondary to the content. Stack columns gracefully on mobile.

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

More components