## 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-1789146615-1.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-hero

## 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.

Create a high-impact split hero directly below the header. Place a concise, emotionally resonant headline and supporting copy on the left with one prominent trial or signup button and a small reassurance line beneath it. Reserve the right half for the product's most recognizable interface visual, using a slightly rotated device or dashboard composition with a few abstract floating accents. Use a saturated blue-to-indigo background around #5057f5 and #214c9b, white typography, and a bright lime CTA around #b7ed58. Make the headline 52–68px with tight line height, body copy 18–20px, and use an asymmetric composition rather than a rigid centered grid. Include an organic curved or wave-shaped lower edge into the next section. On mobile, stack copy above the visual and reduce rotation.

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