Kage Design logo kage
flyweel.co
Flyweel banner component

Design analysis

A narrow promotional strip immediately follows the hero, pairing a pricing incentive with a small urgency label and a claim link.

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/flyweel/865e3c33-9e14-4c9c-942f-392b2bfd1af5-1792649013-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/flyweel/865e3c33-9e14-4c9c-942f-392b2bfd1af5-1792648958364-full.webp
- Component on Kage: https://kage.design/component/flyweel-banner

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

Build a full-width promotional banner on a white background with a thin divider and generous left/right padding. Use a bold but compact offer statement on the left, a muted qualification line beneath it, and a right-aligned eyebrow such as an early-access indicator with a claim action. Keep typography mostly 14–18px sans-serif, use charcoal text and mint accents, and make the claim action text-like with a small arrow. Add a floating trust badge only if the product genuinely has one; otherwise omit it. Ensure the strip remains legible and stacks cleanly on mobile.

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

More components