Kage Design logo kage
incredible.one
Incredible banner component

Design analysis

A slim dark announcement strip creates urgency and social proof while staying visually subordinate to the main navigation.

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/incredible/a967b774-2b17-4a91-b40d-fd5f367a0b1c-1791353133-0.webp
- Component on Kage: https://kage.design/component/incredible-banner

## Before you start
Ask what the user's product is, who it serves, and what brand personality it should express. Apply the principles below to that product rather than reproducing this reference.

Build a slim, full-width announcement banner at the very top of the page. Use a near-black background (#101010), white or soft-gray text in a compact 11–13px sans-serif, and a small accent-colored circular icon or badge at the left of the message. Keep the content centered on one line with generous horizontal padding, and include a clearly discoverable inline link or arrow at the end. Set the height around 28–32px and prevent wrapping on desktop; allow a clean two-line treatment on small screens. Use subtle hover color changes for the link and a dismiss control only if the product needs persistent announcements.

Never: use the reference's logo, product name, exact announcement copy, illustrations, imagery, or brand assets.

More components