## 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/nani/f548445b-7dd2-48a7-847f-0684381711f2-1792217069-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/nani/f548445b-7dd2-48a7-847f-0684381711f2-1792217012251-full.webp
- Component on Kage: https://kage.design/component/nani-hero

## Before you start
Ask what the user's product does, what promise matters most to its audience, and what brand voice and colors should guide the design. Then apply these principles to an original hero.

Create a centered hero beneath the navigation with a tiny capability badge, an oversized two-line rounded display headline, a short paragraph limited to a readable measure, and two horizontally aligned actions: a filled primary action and a lighter secondary demo action. Add a small eligibility or platform note below the buttons. Under the copy, place a wide rounded product preview with a dark application chrome, colorful language tiles, and a prominent subtitle/transcript overlay; let a small decorative character or abstract accent peek from behind the preview without overpowering the product. Use a pale cool-gray background around #f5f6f8, deep navy text around #17192f, muted body text around #737783, blue/green/yellow accents, and a dark preview around #1d2038. Use generous vertical spacing, 56–72px headline size on desktop, 1.0–1.05 line height, 14–16px body text, 12–16px corner radii, and soft shadows. Buttons should have clear hover lift and focus states.

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