## 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/domestika-org/a1bec580-5d19-4289-a277-048dcd6cb3c6-1789146410-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/domestika-org/a1bec580-5d19-4289-a277-048dcd6cb3c6-1789146385540-full.webp
- Component on Kage: https://kage.design/component/domestika-banner

## Before you start
Ask what the user's product, offer, and brand are, then apply the principles below to that context rather than reproducing this reference.

Build a slim promotional banner above a learning or marketplace website. Use a strong, brand-appropriate accent background (approximately `#f33108` here), white text, a concise urgency message, and an optional live countdown grouped on the right. Keep the banner around 56–64px tall, align content to the same max-width grid as the navigation, and make the countdown legible without competing with the message. Include a small circular brand/offer icon on the left and a subtle dismiss button on the far right. Use compact typography, generous horizontal padding, and responsive behavior that stacks or shortens the countdown on mobile.

Never: copy the reference's logo, product name, exact offer copy, countdown values, illustrations, or imagery.