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

## Before you start
Ask what the user's product recommends, what data powers those recommendations, and what brand style should guide the examples, then apply the principles below.

Build a recommendation showcase panel with a soft neutral background such as `#f3f2e8`, an understated heading, and two or more horizontal recommendation stories. Each story should show a source group, a directional connector, and a destination item or result. Use consistent thumbnail/card dimensions, modest `4–8px` corners, thin or no borders, and generous internal padding around `12–16px`. Keep labels small and secondary; make the visual sequence easy to scan from left to right. Use muted charcoal text `#333333`, accent green or teal around `#28745f` for links, and warm highlight tones sparingly.

Use original placeholder covers, avatars, products, or content thumbnails appropriate to the user's product. On narrow screens, allow horizontal scrolling or collapse each row into a compact carousel. Add accessible labels and keyboard controls if the rows are interactive.

Never:
- use Goodreads logos, product names, exact copy, or recognizable book covers
- reuse reference imagery or illustrations
- claim personalized data that the product cannot provide