ravio.com
Design analysis
The footer uses a dark background, brand/legal block, multiple organized link columns, and compliance badges to close the information architecture.
Prompt preview
## 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-1789142161-9.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-footer ## Before you start Ask what navigation groups, legal links, social channels, compliance requirements, and brand assets the user's product needs. Apply these principles to that product. Create a deep charcoal multi-column footer (#111619) with a centered max-width layout. Put the brand/legal block on the left, including a wordmark, optional social icon, region or origin note, and copyright. Arrange remaining links into clearly titled columns such as Product, Resources, Company, Legal, Solutions, Compare, and Learn, using 12–14px text with 8–14px vertical spacing. Titles should be white or near-white; links should be muted #a5abad with hover color #ffffff. Include approved compliance badges only if the user's product has them, and keep them visually secondary. Use a thin divider above the lower link area, 48–64px padding, and responsive columns that collapse into two or one columns on mobile. Never: copy the reference's logo, product name, link labels, legal copy, compliance badges, imagery, or exact footer structure.
kage