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

Design analysis

A large blue conversion band uses an organic layered background, a phone interface visual, concise benefit-led copy, and two contrasting actions. It transitions directly into the dark footer.

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/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146617-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146549729-full.webp
- Component on Kage: https://kage.design/component/ynab-cta

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

Build a full-width closing conversion section with an energetic blue background and layered organic wave shapes in darker blue, mint, and lime. Use a two-column composition: a large mobile or product preview on the left, and a concise benefit-led headline, supporting paragraph, and two actions on the right. Make the primary action a lime filled button and the secondary action a transparent white-outline button. Use white text, approximately #5057f5 background, #1c2b77 darker waves, #42ce99 mint, and #b7ed58 lime. Make the section feel immersive with 100–140px vertical padding and enough visual scale for the product preview to overlap the decorative shapes. Stack and center content on mobile.

Never: reuse logos, product names, copy, illustrations, imagery, or exact branding from the reference.

More components