salience.com
Design analysis
The hero combines a precise eyebrow, oversized two-line promise, explanatory copy, an inline URL form, reassurance bullets, supported-platform logos, and a path into the product demo.
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/salience/db9244f7-ec48-4516-9a93-11a957a9eab9-1792303418-1.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/salience/db9244f7-ec48-4516-9a93-11a957a9eab9-1792303314589-full.webp - Component on Kage: https://kage.design/component/salience-hero ## Before you start Ask what the user's product does, who the ideal customer is, and what action the hero should drive. Use those answers to create an original hero following these principles. Create a pale luminous hero with a centred, narrow content column. Start with a tiny uppercase eyebrow, then a bold 44–58px headline with a short two-line product promise and tight line-height. Follow with a muted 15–17px explanation constrained to roughly 560px. Place a wide URL or email input and dark submit button in one rounded bordered control, then add three short reassurance points below it. Finish with a small “works with” row of abstract platform labels or user-provided integrations, plus a subtle down-chevron/demo invitation. Use an airy gradient from soft green (#d8ffd1) to near-white (#f8fff7), black text (#0b0d0b), muted green-grey secondary text (#46634c), 1px translucent green borders, and 10–12px radii. Keep vertical rhythm generous: 16px eyebrow gap, 24px headline gap, 28px form gap. The form should have clear focus, hover, and loading states. Never use logos, product names, copy, illustrations, or imagery from the reference.
kage