Kage Design logo kage
opentable.com
opentable.com feature grid component

Design analysis

A compact experience category section highlights a single activity card with image, title, venue, price, and a direct reserve action.

Prompt preview
## 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/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146316-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146276379-full.webp
- Component on Kage: https://kage.design/component/opentable-feature-grid-4

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that context rather than reproducing a restaurant-booking site.

Create a compact experiences browse section. Follow these rules:
- Use a 18–20px heading and a single narrow card or horizontally scrolling row below it.
- Give the card a strong landscape image, then title, venue/category, price or starting value, and a clear text or button action.
- Separate the information layers with a light divider and keep the action visually quieter than the primary reservation action elsewhere.
- Use #fff surfaces, #e0e2e5 borders, 6px radius, charcoal text, muted gray metadata, and the same accent red #c53c50 for interactive emphasis.
- Provide hover elevation and keyboard focus; on mobile preserve image prominence and avoid shrinking text below accessible sizes.

Never: use logos, product names, copy, illustrations, imagery, or exact visual assets from the reference.

More components