Kage Design logo kage
openship.io
OpenShip Cloud hero component

Design analysis

The centered hero pairs a large two-line headline with a lighter italic-style second line, concise supporting copy, dual CTAs, and a faint technology stack cue.

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/openship-cloud/9519eed9-0239-434c-a94e-7bf81cfc26ba-1792562626-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/openship-cloud/9519eed9-0239-434c-a94e-7bf81cfc26ba-1792562575709-full.webp
- Component on Kage: https://kage.design/component/openship-cloud-hero

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

Create a centered SaaS hero directly beneath the navigation. Use a small eyebrow, a large two-line headline with the second line visually softer or italic, a short muted paragraph constrained to roughly 300–420px, and two compact pill CTAs with one dark primary and one quiet secondary. Leave generous whitespace and add a subtle row of relevant ecosystem or capability labels beneath the actions. Use a white or warm-white canvas (#ffffff or #fafafa), near-black text (#111111), muted gray copy (#8d8d8d), 52–64px desktop headline sizing with tight line-height, and 16–24px spacing between text groups. Keep the section self-contained and let any visual cue remain low contrast.

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

More components