## 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-1789146591-6.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-pricing-table

## Before you start
Ask what the user's product sells, what plans exist, and which capabilities are genuinely differentiated. Ask for the brand's tone and pricing rules before implementing.

Create a comparison section inside a broad light-gray rounded panel. Center a heading and explanatory paragraph above two aligned columns labeled for the lower and higher tier. Put each tier's features in white cards with generous padding, short bold labels, concise descriptions, and optional small accent icons for premium-only benefits. Use #F5F5F5 for the outer panel, #FFFFFF for cards, #111111 for headings, #5F5F5F for descriptions, #E4E4E4 dividers, and a brand accent used sparingly. Use 40–52px heading typography, 16px intro copy, 16–18px feature labels, 14–15px descriptions, 24–32px outer radius, 16px card radius, and 56–96px vertical padding. Keep columns equal width on desktop and stack them on mobile; make plan differences, price, and CTA state clear if they are part of the user's product.

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