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

Design analysis

The first conversion section pairs a playful character collage with a bold promise and two stacked actions, using a large amount of white space to make the entry point feel approachable.

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-1789146267-1.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

## Before you start
Ask what the user's product, brand personality, audience, and primary call to action are, then apply the principles below to that product rather than copying the reference.

Build a two-column hero beneath the navigation. Put an abstract or product-relevant visual on the left and a concise, friendly headline with supporting context and two vertically stacked actions on the right. Center the composition in a max-width container, with the visual and text vertically aligned and generous whitespace around both. Use a rounded display typeface for the headline, very dark charcoal text (#3C3C3C), a vivid green primary action (approximately #58CC02) with white text, and a white outlined secondary action with a subtle gray shadow or border (#D9D9D9). Buttons should be wide, pill-rounded rectangles around 44–52px tall, with clear hover and focus states. Keep the visual energetic but subordinate to the message.

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

More components