Kage Design logo kage
duolingo.com
duolingo.com call to action component

Design analysis

A dark navy full-width banner sharply changes the visual mood and presents a premium upgrade with one focused action beside a large high-energy mascot 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-1789146269-5.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-cta

## Before you start
Ask what premium offering the user's product has, what upgrade promise is strongest, and what action should be taken, then apply the principles below to that product rather than copying the reference.

Build a full-width premium CTA banner with a deep navy background (approximately #111044), a two-column layout, and a bold high-contrast headline on the right or center. Pair the message with a large abstract or product-relevant hero visual on the opposite side. Use bright lime green and electric violet accents for emphasis, white supporting text, and a single compact light button with dark text. Give the banner generous vertical padding, keep content within a max-width container, and ensure the color contrast meets accessibility standards. Add a subtle hover lift to the button and make the entire composition responsive by stacking on small screens.

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

More components