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

## Before you start
Ask what product capability the user's feature story should explain and what visual assets are available. Apply the following layout principles to that capability.

Build a generous two-column feature section with a visual on one side and explanation on the other. Use a rounded lifestyle/product image with a floating white UI card that demonstrates the benefit; keep the card partially overlapping the image with a soft shadow. On the text side, use a 32–40px heading, 16px muted body copy, and a compact outlined pill CTA. Use white background, #111111 type, #5E5E5E body text, white cards, subtle #E7E7E7 borders, and a restrained brand accent. Align the text block vertically around the visual center, use a 56–96px section padding, 48–72px column gap, 28px image radius, and 12–16px floating-card radius. Stack visual then text on mobile, keeping the explanatory CTA visible.

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