opentable.com
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.
kage