## 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/bonds/92b84629-52db-439e-9b50-1b68fbcd9bda-1792562653-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bonds/92b84629-52db-439e-9b50-1b68fbcd9bda-1792562529975-full.webp
- Component on Kage: https://kage.design/component/bonds-hero

## Before you start
Ask what the user's product does, who the audience is, and which single promise should lead the page. Ask for the brand colours and tone, then apply the following structure to that product.

Create a first-screen hero directly beneath the navigation. Use a large rounded panel with a vivid electric-blue-to-indigo gradient (`#182cff` to `#5f5cff`), approximately 16–24px radius, and generous inset padding. Center a short, assertive headline in an extra-bold condensed display face, mostly uppercase, around 64–88px desktop with tight line height; use one accent colour such as blue or violet on a key phrase. Place the main product visual or character beneath/behind the headline, and add a few small floating conversation elements near the lower edges to suggest activity without competing with the message. Include a small scroll cue only if the page needs discovery. Ensure the hero has a clear focal point, responsive type scaling, and enough bottom padding for the visual.

Never: use the reference's logos, product names, copy, illustrations, imagery, or exact visual assets.