## 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-6.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-logo-cloud

## Before you start
Ask which integrations matter to the user's audience and whether the product needs a directory link, search, or request-integration action. Apply these principles to the user's brand.

Build a centered integrations section with a small status pill, an editorial serif heading, concise supporting copy, and one light outlined action. Surround the content with a faint architectural grid using #edf0eb lines on #fbfcfa. Place integration names or approved logos in a balanced multi-row grid, with ample cell padding and low visual weight so the heading remains primary. Use muted grayscale marks by default, introducing brand color only on hover or when appropriate. Maintain 12–16px cell labels, 1px dividers, and a 40–64px vertical padding. On mobile, reduce to two columns and keep the action accessible.

Never: copy the reference's integration logos, names, product copy, exact grid, illustrations, or branding.