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

## Before you start
Ask what outcome the user's product automates or makes easier, and what imagery and brand palette should be used. Apply this reusable pattern to their product.

Build a two-column feature section with a rounded contextual image on the left and a text explanation on the right. Overlay a small white progress or status card across the image edge to show the product working in context. Use a concise 32–40px headline, 16px/1.5 supporting copy, and an outlined pill action. Maintain a 56–96px vertical rhythm, 48–72px gap, image radius around 28px, card radius 12–16px, and a soft shadow. Use #FFFFFF, #111111, #5E5E5E, #E6E6E6, and one meaningful accent. On mobile, stack the image before the text and prevent overlays from clipping.

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