## 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/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389757-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389697138-full.webp
- Component on Kage: https://kage.design/component/inbox-zero-hero

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

Create a centered SaaS hero directly below the navigation. Start with a small pale-blue announcement pill, then a large bold two-line headline, concise gray supporting copy, one prominent blue CTA, and a small integrations hint. Below it, place a wide rounded product screenshot or demo frame with a very soft white fade around the edges and a centered circular play button. Use a white background, near-black typography (#171717), muted gray body copy (#737373), pale blue pill (#edf6ff), blue CTA (#3478e5), 56–64px headline text on desktop, and generous vertical whitespace. Keep the visual wider than the text column, with a faint border/shadow and 16–24px radius. Make the play control and CTA keyboard accessible.

Never use the reference's logo, product name, copy, illustrations, or imagery.