## 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/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789141836-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789138376488-full.webp
- Component on Kage: https://kage.design/component/granola-hero

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

Create a two-column hero directly below the navigation. Give the left side an oversized editorial serif headline with a short supporting paragraph and one dark pill CTA, plus a small compatibility note beneath. Let the right side contain a rounded product-interface visual or abstract product preview with layered depth. Use an off-white/white canvas (#fbfbf7), near-black typography (#202020), and one bright brand accent such as lime/chartreuse (#bdd342) behind or beside the visual. Keep the headline around 58–76px desktop with tight line-height, body copy 14–16px, and a CTA around 44px high with a 999px radius. Align both columns to a shared vertical center and leave ample whitespace around the composition.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- recreate the specific headline, interface screenshot, or exact accent treatment
- crowd the hero with multiple competing CTAs