flyweel.co
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.
kage