Kage Design logo kage
dockfix.app
DockFix 5.0 banner component

Design analysis

A short visual interlude resets the page rhythm with a landscape backdrop and a centered, multi-line statement in bold black type.

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/dockfix-5-0/2c092be4-cae6-431a-8bc7-3fef5352fd95-1789279442-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/dockfix-5-0/2c092be4-cae6-431a-8bc7-3fef5352fd95-1789279362906-full.webp
- Component on Kage: https://kage.design/component/dockfix-5-0-banner

## Before you start
Ask what the user's product is, who it is for, and what their brand personality and visual identity are. Apply the principles below to that product rather than reproducing this reference.

Create a full-width statement banner around 280–360px tall. Use a quiet atmospheric image or abstract texture spanning the entire section, with a soft warm overlay (#d8d4c9 at roughly 25–40% opacity) to keep text legible. Center a short two-to-four-line statement in a bold sans-serif, with a max width of 360–480px and tight line height. Keep the section intentionally simple: no extra controls, no card borders, and enough vertical breathing room for the image and headline to read as one composition. Use object-fit: cover and a responsive focal point.

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

More components