## 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/fide-island/e90b7c78-4279-44cf-a252-bbd8cdefeb5b-1789711571-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fide-island/e90b7c78-4279-44cf-a252-bbd8cdefeb5b-1789711455018-full.webp
- Component on Kage: https://kage.design/component/fide-island-hero

## Before you start
Ask what the user's product is, what transformation it provides, and what brand it should express. Adapt this structure to those answers.

Create a two-column hero on a warm off-white canvas. Put a small outlined eyebrow above a large high-contrast editorial serif headline on the left, followed by compact readable supporting copy, two pill CTAs, a small reassurance line, and a credibility badge or proof point. On the right, show a large rounded media frame with a dark interface/video placeholder and subtle ambient color behind it. Use an asymmetrical 48/52 split, align content to a common baseline, and keep the hero vertically generous. Use a large serif display face (#202020), compact neutral mono or grotesk utility text, #f7f6f3 background, cobalt #2d62d5 for the main CTA, soft mint and blush atmospheric gradients, 1px borders, and 28–34px media radius. Add accessible play behavior if media is interactive and stack columns on small screens.

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