## 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/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789142160-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789141806972-full.webp
- Component on Kage: https://kage.design/component/ravio-feature-grid

## Before you start
Ask what two or three core workflows your product simplifies and what product screens best explain them. Apply these principles to the user's product.

Create a feature section beginning with a small eyebrow and a large left-aligned serif heading. Below it, use a two-column grid of generous pale cards, each pairing a custom abstract product visual with a concise feature title and explanatory paragraph. The first visual can depict relationships or taxonomy; the second can depict a clean analytics chart or breakdown. Follow the cards with a full-width secondary product-preview panel and a short title plus description beneath or beside it. Use a warm off-white page (#fbfcf9), cards in #f7f8f2, subtle #edf0e9 borders, 8–12px radius, and dark charcoal typography. Maintain a consistent 32–48px section rhythm, 28–40px card padding, and responsive one-column stacking. Visuals should be built from HTML/CSS/SVG or the user's own data, not copied screenshots.

Never: copy the reference's product name, feature labels, copy, UI screenshots, illustrations, charts, logos, or imagery.