Kage Design logo kage
flyweel.co
Flyweel hero component

Design analysis

The opening hero combines a dark emerald atmospheric visual with oversized editorial typography, a concise value proposition, and two clear conversion actions.

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-1792649012-1.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-hero

## 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.

Create a large rounded hero directly beneath the navigation, spanning most of the content width. Use a deep green-to-teal atmospheric background (#073b32, #0d6d5b) with a soft luminous gradient and subtle abstract texture, but no literal reference imagery. Center a very large editorial serif headline in off-white, optionally mixing a digital or monospace treatment into one phrase. Place a short sans-serif supporting sentence below, then a small proof line and two inline CTAs. Use a 40px radius, 56–80px vertical padding, centered alignment, and strong contrast. The headline should be responsive with a 64–96px desktop scale and tight line-height; buttons should use mint (#8ee1c1) for primary and translucent dark styling for secondary.

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

More components