## 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/umbra-mail/e5ad193a-88e6-403f-9829-5608575fa4bb-1792476320-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/umbra-mail/e5ad193a-88e6-403f-9829-5608575fa4bb-1792476206048-full.webp
- Component on Kage: https://kage.design/component/umbra-mail-hero

## Before you start
Ask what the user's product and brand are, then apply the principles below to that context rather than reproducing this reference.

Create a full-width hero that introduces a software product with a strong, atmospheric visual backdrop. Use a deep blue-to-lilac-to-warm sunset gradient fading into a very dark navy lower area; approximate colors can include #0646B8, #2476D8, #B9B4E8, #F4B36D, and #020A28. Center the upper content with a refined serif display heading, a short sans-serif value proposition, one supporting line, and a high-contrast white pill button. Leave generous vertical breathing room.

Below the copy, show a large centered browser-window product preview with rounded corners, a dark chrome bar, translucent layered surfaces, subtle blur, and realistic but generic rows/content. Keep the preview within a max-width container with approximately 7% side margins. Add a compact horizontal benefit list underneath using tiny muted text and dot separators. Use rounded corners around 12–16px, soft shadows, low-contrast borders, and restrained animation such as a gentle hover lift on the button and preview. Maintain a clear hierarchy: serif headline, small supporting text, then the visual proof.

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