Kage Design logo kage
holavoicemail.com
Hola AI banner component

Design analysis

Two stacked announcement strips create urgency: a coral launch notice followed by a black promotional offer bar with contrasting badges and buttons.

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/hola-ai/6afc16ea-d4a5-4b10-89cd-47c92dad80e5-1790143387-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hola-ai/6afc16ea-d4a5-4b10-89cd-47c92dad80e5-1790143310582-full.webp
- Component on Kage: https://kage.design/component/hola-banner

## Before you start
Ask what the user's product, launch status, offer, and brand colours are. Then create announcement messaging tailored to that context using these reusable principles.

Build two compact stacked announcement banners beneath the navigation. The first should use a vivid coral/red background around #FF635E with centered announcement text, a small circular event badge, a white outlined or filled action button, and a small secondary link. The second should use near-black #050505 with white text, a pale yellow discount badge around #FFF08A, and a light-yellow claim button. Keep each row short, horizontally centered, and dense without feeling cramped; use 11–13px semibold text and pill radii of 8–999px. Ensure banners wrap cleanly on mobile and make the offer button keyboard accessible. Use a thin dark divider between bands.

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

More components