## 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-1789141839-7.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-feature-grid-3

## 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 feature chapter with an eyebrow, oversized serif headline, and one dark pill CTA. Follow it with four or five horizontally structured feature rows: each row has a short serif title and concise explanatory copy in one column, and a wide rounded media panel in the other. Media panels can show product UI, device frames, diagrams, or abstract branded visuals, but should be purpose-built for the user's product. Separate rows with thin rules, keep a consistent 12-column grid, and use 20–28px media radii. Alternate alignment sparingly; the repeated rhythm should make the chapter easy to scan. Use warm white (#fbfbf7), black text (#202020), light rules (#e7e6df), and occasional saturated media backgrounds.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the reference’s feature titles, screenshots, or meeting-app icons
- make every module visually identical or text-heavy