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

## Before you start
Ask what recognition, collection, or editorial program matters to the user's product and what tone the brand should use, then apply the principles below.

Create a curated collections section with a clear heading, a featured badge or abstract thumbnail on the left, and two columns of linked collection names on the right. Use a restrained editorial hierarchy: heading at `16–18px`, link text at `12–14px`, and muted metadata where useful. Keep the badge visually distinct with a warm accent such as `#e7c45c` and dark text, but use original shapes or artwork. Align the link columns to a grid, maintain `8–12px` row spacing, and let them stack on smaller screens.

Use a white background with generous top and bottom whitespace. Links may use a dark teal or brand accent and should have clear hover and focus states.

Never:
- use Goodreads logos, product names, exact reference copy, or the reference award graphic
- reuse book covers or imagery from the reference
- imply awards or rankings that are not real