## 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-1789146590-4.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-feature-grid-2

## Before you start
Ask what user's product feature helps people understand or improve a recurring behavior, and ask for its brand and content constraints. Build a new version using these principles.

Create an alternating two-column feature band: explanatory copy on the left and a rounded visual composition on the right. Show a relevant product insight in a floating white card layered over the visual, making the feature understandable at a glance. Use a 32–40px heading, 16px body copy, an outlined pill CTA, 56–96px vertical padding, and a 48–72px gap. Use white, near-black #111111, gray #5E5E5E, #E8E8E8 borders, and a brand accent for meaningful UI signals only. Give imagery 28px corners and floating cards 12–16px corners with a restrained shadow. Reverse the order on mobile so the visual follows the heading and copy.

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