Kage Design logo kage
duolingo.com
duolingo.com hero component

Design analysis

A centered app-download message sits inside a large white promotional field, surrounded by floating device and icon imagery to communicate portability and cross-device use.

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-4.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-hero-2

## Before you start
Ask what platforms the user's product supports, which app stores matter, and what download action should be emphasized, then apply the principles below to that product rather than copying the reference.

Build a spacious app-promotion section with a centered headline, a short supporting line, app-store badges or platform buttons, and a decorative composition of angled devices and floating abstract UI symbols around the lower area. Use a white background and a deep navy headline color (approximately #0B3B70), with restrained blue, teal, purple, and orange accents in the decorative elements. Keep the headline prominent but compact, center the store buttons beneath it, and ensure the device composition does not interfere with text or overflow unpredictably on mobile. Store badges should be real accessible links with visible focus states.

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

More components