Kage Design logo kage
ravio.com
Ravio call to action component

Design analysis

A cloud-backed promotional panel creates an emotional pause, presents one clear exploration action, then resolves into three large proof metrics.

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-1789142159-3.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-cta

## Before you start
Ask what the user's strongest coverage or scale claim is and which action should follow it. Apply these principles to the user's product.

Create a wide promotional CTA with a soft atmospheric background, such as a very subtle abstract texture or gradient rather than literal stock imagery. Center an editorial serif heading, one supporting sentence, and a dark filled button. Beneath the CTA panel, add a three-column metrics row separated by fine vertical borders. Use large serif numerals, compact labels, and generous whitespace. Keep the palette warm and airy: #eaf2f0, #f8faf7, near-black #171817, muted text #626662, and a single restrained accent. Use a 40–55px heading, 14px body, 36–44px metrics, 8px button radius, and ensure the metrics stack cleanly on mobile.

Never: copy the reference's product name, claims, copy, background imagery, illustrations, logos, or exact numbers.

More components