## 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/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192910-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192849096-full.webp
- Component on Kage: https://kage.design/component/raycast-2-0-hero

## Before you start
Ask what the user's product, brand, audience, headline, supporting message, CTA, and visual asset are. Apply these principles to that product rather than reproducing the reference.

Create a full-width dark hero directly below the navigation. Center a large responsive headline with a tight two-line rhythm, using an off-white color (#eeeeef), approximately 46–54px desktop size, 1.08 line-height, and regular-to-medium weight. Place a muted supporting sentence below in #8e8e92 at 14px, then a compact light primary download/action button with black text, 8px radius, and generous horizontal padding. Add a tiny monospace or letter-spaced compatibility note below the button in #77777b. Reserve the lower half for a wide product UI preview or abstract interface image, centered and heavily vignetted with black gradients so it feels embedded in the page rather than pasted on. Use generous vertical spacing, with the visual fading before the section ends. On mobile, reduce type size and let the visual crop horizontally without causing overflow.

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