## 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/phantom-com/df84c488-d9fa-4f45-8b51-bd3e334c55b2-1789146859-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/phantom-com/df84c488-d9fa-4f45-8b51-bd3e334c55b2-1789146834018-full.webp
- Component on Kage: https://kage.design/component/phantom-hero

## Before you start
Ask what the user's product is, what the visitor should do first, and which visual or product proof belongs in the hero. Apply these principles to that product instead of copying the reference.

Create a large hero directly below the navigation, centered inside a wide container with a substantial rounded rectangle visual or media surface. Include a small eyebrow, a large multi-line headline, and one centered primary CTA with an optional device icon. The layout should feel spacious and calm: pale lavender page background around a medium gray or brand-specific visual panel, approximately #AAA9B1 for the panel and #F5F3FF for the page. Use a bold geometric sans-serif headline with responsive sizing around 48–64px desktop, tight line height, and a short eyebrow around 15px. Make the CTA a light lavender pill with dark text, ample horizontal padding, and a 999px radius. Preserve generous internal whitespace and ensure the panel ends after the CTA rather than clipping it.

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