## 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/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146330-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146302680-full.webp
- Component on Kage: https://kage.design/component/goodreads-feature-grid

## Before you start
Ask what the user's product is and what its brand voice, audience, and two most important user outcomes are, then apply the principles below.

Build a two-column benefits section below the hero. Each column should have a concise heading in dark text, followed by two or three lines of supporting copy. Align both columns to a shared top baseline, constrain the content to a readable width, and leave ample whitespace around the block. Use a light background such as `#ffffff`, body text around `#444444`, heading text around `#222222`, a sans-serif body at `13–15px`, and a slightly larger semibold heading at `16–18px`. On small screens, stack the columns vertically with `24–32px` gaps.

Use benefit-oriented copy structure—question or outcome as the heading, then a plain-language explanation—without copying the source wording. Do not add decorative cards unless the user's product needs stronger grouping.

Never:
- use Goodreads logos, product names, or exact reference copy
- reuse reference imagery or illustrations
- copy the exact benefit labels