Kage Design logo kage
spira.ai
Spira Maxima hero component

Design analysis

The hero uses a patterned black field, a small status badge, a very large two-line promise, supporting explanation, and one bright pill CTA. The centered composition leaves enough breathing room for the product claim to feel premium.

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/spira-maxima/726c84dd-363c-4980-b0d9-b04757b4422a-1791266563-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/spira-maxima/726c84dd-363c-4980-b0d9-b04757b4422a-1791266451959-full.webp
- Component on Kage: https://kage.design/component/spira-maxima-hero

## Before you start
Ask what the user's product does, who it is for, and what the main conversion should be, then apply the following structure to that product.

Create a full-width centered hero directly below the navigation. Use a near-black background (#080909) with a very subtle abstract repeatable texture or glow, never a literal copied pattern. Add a small rounded eyebrow badge, then a bold responsive headline around 56–72px desktop with tight line-height (0.98–1.05), followed by a 16px muted description constrained to roughly 560px. Place a single high-emphasis pill CTA below it, using a light surface with dark text and a restrained orange-to-blue edge glow. Keep the hero vertically generous, with content centered in a max-width 760px column and clear separation between eyebrow, headline, copy, and button. Add a small low-emphasis scroll cue only if useful.

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

More components