opentable.com
Design analysis
A full-width gradient banner switches audience from diners to businesses, combining a bold proposition, two actions, and a product-interface visual on the right.
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-1789146317-10.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-cta-2 ## 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 high-impact B2B CTA banner. Follow these rules: - Use a wide rounded container with a left-to-right gradient from deep violet #351047 through magenta #cb214d to orange #ffb000. - Place a concise white headline and two actions on the left: a filled light button for the primary action and a transparent/outlined button for the secondary action. - Reserve the right side for an original abstract dashboard/device composition or geometric product visualization; it should support the message without being required to understand it. - Use a 22–26px bold heading, 14px buttons, 4–6px radius, and 32–40px internal padding. Maintain strong contrast and generous whitespace. - Stack content on mobile, move the visual below the actions, and ensure the banner remains readable without relying on the image. Never: use logos, product names, copy, illustrations, imagery, or exact visual assets from the reference.
kage