Kage Design logo kage
saliency.dev
S-Roll hero component

Design analysis

The hero combines a large product mark, editorial headline, supporting explanation, Product Hunt proof point, and a prominent app download card.

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/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711385-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711333877-full.webp
- Component on Kage: https://kage.design/component/s-roll-hero

## Before you start
Ask what the user's product is, what action the landing page should drive, and what brand personality it has. Then adapt this structure to that product.

Create a spacious dark hero for a desktop software product. Use a two-column composition: a large rounded-square product visual or abstract placeholder on the left, and an editorial eyebrow, oversized serif headline, and concise supporting paragraph on the right. Below, add a credibility badge on the left and a wide download card on the right with an availability label, platform details, legal microcopy, and a strong but restrained CTA. Use a black background around #000000, warm off-white type around #f2eee8, muted gray body copy around #8f8a87, and a restrained mint accent around #8fe3be. Use generous vertical spacing, asymmetrical alignment, soft glows only behind the product visual, 1px dark-gray borders, and 18–24px corner radii. The headline should be large and tightly leading, while supporting text remains narrow for readability. Stack the columns and center the CTA content on small screens.

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

More components