## 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-4.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-3

## Before you start
Ask what users search for in the product, how its taxonomy is organized, and whether a quote or testimonial-like moment supports the brand, then apply the principles below.

Build a content discovery section with three layers. First, add a compact search field with a clear label or heading, a `40–44px` input, rounded or lightly squared corners, `1px solid #cfcfcf`, a subtle search icon, and a useful placeholder. Second, present category links in three or four aligned columns with tight vertical rhythm, `12–14px` text, and an accent colour around `#28745f`; allow the columns to reflow responsively. Third, add a quote or short user insight with an optional circular avatar, quote marks, attribution, and a small adjacent list of related links.

Keep the overall surface white, use dark charcoal headings around `#222222`, muted body text around `#555555`, and spacing of `20–32px` between layers. Make search keyboard accessible, categories visibly link-like, and avoid overcrowding on mobile.

Never:
- use Goodreads logos, product names, exact reference copy, or source portrait imagery
- reuse the reference quote or illustration
- make the taxonomy difficult to scan