## 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/shrine/ff477ea2-1694-4783-bdc4-4322fec31da4-1792130651-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/shrine/ff477ea2-1694-4783-bdc4-4322fec31da4-1792130580085-full.webp
- Component on Kage: https://kage.design/component/shrine-hero

## Before you start
Ask what the user's product does, who should adopt it, and what brand voice and palette they want. Build an original hero using the principles below rather than reproducing the reference.

- Center the hero content in a constrained column and use generous top and bottom whitespace.
- Lead with a large, distinctive two-line headline; follow it with one concise sentence that explains the product outcome rather than its implementation.
- Place one dark, high-contrast primary CTA beneath the copy, followed by quiet supporting metadata such as platform or eligibility information.
- Use near-black text on a warm white background, with a restrained gray for secondary copy and a single optional accent color.
- Use a display typeface for the headline and a clean sans-serif for supporting text; create a clear scale between heading, body, button, and metadata.
- Add a compact row of compatibility or integration labels only when relevant, with small icons and even spacing.
- Ensure the CTA has hover, focus, and pressed states and remains usable on narrow screens.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact visual assets.