## 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/rocketmoney-com/33d2822e-a753-4b7c-bf3f-3f514d417ce5-1789146589-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/rocketmoney-com/33d2822e-a753-4b7c-bf3f-3f514d417ce5-1789146528240-full.webp
- Component on Kage: https://kage.design/component/rocketmoney-hero

## Before you start
Ask what the user's product is, what primary transformation it offers, and what brand colors and tone should guide the design. Apply the principles below to that product rather than copying this page.

Create a two-column hero directly below the navigation. Place a large, short, benefit-led headline on the left, two to four lines of supporting copy beneath it, and one dark pill CTA. Place a tall product UI mockup or relevant product visual on the right, allowing it to crop slightly within a large soft-gray rounded container. Use near-black #111111 for type, #F4F4F4 or a brand-tinted neutral for the panel, and a restrained accent for highlights. Set the headline around 48–64px with tight line-height, body copy around 16px with 1.45 line-height, and a 16px CTA. Use a max-width around 780px, 48–80px inner padding, 8-column/4-column or 5-column/7-column responsive logic, and a 28–36px panel radius. On mobile, stack copy above visual and preserve a clear CTA hierarchy. Include subtle depth only where it clarifies the product UI.

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