## 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/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192866-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192832645-full.webp
- Component on Kage: https://kage.design/component/cadenya-hero

## Before you start
Ask what the user's product is, what outcome it creates, and which visual metaphor or product visual best communicates that outcome. Apply these principles to that product and brand.

Create an asymmetrical hero for an innovative software product. Start directly below the navigation and give the hero generous vertical breathing room. Use a large, high-quality product visual or abstract brand object that can overlap the central grid, with a compact framed information panel positioned toward the upper-right. Put the main value proposition in a large editorial serif headline toward the lower-left, using two or three lines and strong contrast. Include a filled primary CTA with a small directional affordance plus a quiet outlined secondary link in the panel. Use a warm white canvas (#fbfbf7), near-black ink (#172021), thin gray grid lines (#e2e6df), and a restrained green accent (#0c6b50); use square corner brackets or clipped frame details as a recurring motif. Use a display serif around 42–58px with tight line-height and mono supporting copy around 11–13px. Ensure the hero remains legible if the visual is removed or loads slowly, and stack the panel and headline responsively.

Never: use logos, product names, copy, illustrations, or imagery from the reference.