Kage Design logo kage
autocaptioner.com
autocaptioner.com hero component

Design analysis

A pale blue hero centers a small product mark, oversized two-line headline, supporting copy, a prominent upload button, trust rating, and a row of example captioned videos.

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/autocaptioner-com/ff4d8c71-c21f-4141-9075-b069f1384c25-1792109432-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/autocaptioner-com/ff4d8c71-c21f-4141-9075-b069f1384c25-1792109412255-full.webp
- Component on Kage: https://kage.design/component/autocaptioner-hero

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

Create a centered hero directly below the navigation. Use a very pale blue background near #eef5ff, generous top and bottom whitespace, and a narrow readable content measure. Place a small brand/product symbol above an oversized two-line headline, using a 48–56px bold sans-serif with one emphasized phrase in a dark rounded capsule. Add two short lines of supporting copy in #53606d, then a large blue pill-shaped primary upload/action button with a subtle glow and a small secondary reassurance line below it. Include a compact trust-rating row. Beneath the CTA, show four evenly spaced portrait media cards with rounded 8px corners, thin borders, and caption overlays; use generic placeholder media rather than specific source imagery. Maintain a calm visual hierarchy and make the CTA keyboard accessible.

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

More components