Kage Design logo kage
krea.ai
Krea 3 hero component

Design analysis

A dark, full-width visual section demonstrates combining multiple references, with high-contrast overlay typography and small gallery controls.

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/krea-3/dbe75373-d211-428a-9d9b-aa6c396006bc-1792389814-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/krea-3/dbe75373-d211-428a-9d9b-aa6c396006bc-1792389704928-full.webp
- Component on Kage: https://kage.design/component/krea-3-hero-2

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

Create a full-bleed dark media feature that communicates combining several inputs into one result. Use a high-quality background image or video with a black gradient overlay, white left-aligned headline around 42–60px, and a short muted description. Add small bottom-aligned controls or metadata chips in translucent dark surfaces, plus a compact progress or gallery indicator. Use #0b0b0b, white, and 70–85% white for hierarchy; use 24–40px inner padding and 16px media corners only if the visual is inset. Keep controls accessible and allow reduced-motion fallback.

Never:
- use the reference logo or product name
- copy the reference headline or copy
- reuse its imagery or illustration
- reproduce the exact layout or visual assets

More components