## 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/takweem-ai/0f53cdf8-216d-4033-bf99-d7586d054974-1791439458-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/takweem-ai/0f53cdf8-216d-4033-bf99-d7586d054974-1791439356553-full.webp
- Component on Kage: https://kage.design/component/takweem-banner

## Before you start
Ask the user what their product is, who it serves, and what brand personality and promotion they need. Then apply the principles below to create an original announcement bar for that product.

- Build a 28–32px full-width utility banner above the site navigation.
- Keep the content centered in a single horizontal row with very small neutral sans-serif text.
- Use a pale warm background and a thin accent rule; use a compact outlined coupon pill for the code and a simple underlined action link.
- Include a discreet dismiss icon at the far right with a generous hit area.
- Keep the banner visually subordinate to navigation and hero content.
- On narrow screens, allow the message to wrap or shorten rather than overflow.
- Use approximate colours: background #f7f7f5, text #555555, border #eadfe1, accent #ef6684, dark text #171717.

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