## 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-1789142158-1.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-hero

## Before you start
Ask what the user's product does, who the target audience is, and what action the hero should drive. Apply these principles to that product and brand.

Create a centered SaaS hero directly below the navigation. Use a small pill eyebrow with a blue status dot, an oversized high-contrast serif headline in two balanced lines, concise centered supporting copy, and two actions: one dark primary button and one light outlined secondary button. Give the hero generous vertical breathing room, approximately 300–380px tall on desktop, with a very pale warm background (#fafbf8). Add extremely subtle outlined geometric panels or grid shapes at the far edges in #e9ece7 so they support the content without competing. Headline color should be near-black (#171817), around 50–60px desktop with tight line-height; body copy should be #555955 at 14–16px and max-width around 560px. Use 8px button radii, restrained shadows, and responsive stacking on mobile.

Never: copy the reference's logo, product name, copy, illustrations, imagery, dashboard artwork, or exact brand identity.