## 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/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060757-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Component on Kage: https://kage.design/component/superhuman-hero

## Before you start
Ask the user what their product is, who it serves, and what their brand personality and visual identity are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build this section
Create a two-part hero experience for a premium software website. The upper panel should feel spacious, confident, and editorial: use a deep near-black plum or midnight background around `#241444`, a wide responsive container, and a two-column composition. Keep the text column left-aligned with a large, lightweight headline, a short supporting paragraph, and two actions. Let the visual/product preview occupy the right side, extending slightly beyond or behind the panel edge so the composition feels immersive rather than boxed in.

Use a headline around `clamp(3rem, 6vw, 6.5rem)` with tight line-height of roughly `0.95–1.05` and slightly negative letter spacing. Supporting text should be approximately `1.05–1.25rem`, line-height `1.45`, and use a softened lavender-white such as `#D8D0E8`. The headline should be near-white, around `#F7F4FF`. Keep the text measure controlled at roughly `28–38rem`.

Place a primary CTA beneath the copy using a pale lavender fill around `#D9C8FF` with dark plum text, generous horizontal padding, a height of about `3.25rem`, and a radius of `0.75rem`. Add a secondary text or ghost action beside it in muted lavender-white, optionally with a simple chevron or arrow. Make the action row wrap cleanly on small screens.

The right-side visual should suggest the product through an abstract interface preview, layered panels, or a blurred document/application surface. Use soft shadows, subtle transparency, and a small floating callout rather than a literal screenshot. Keep the visual low-contrast enough that the headline remains dominant. On mobile, stack the visual below the copy and prevent horizontal overflow.

Below the main hero, add a full-width conversion band with a short height of roughly `15–19rem`. Use an abstract, blurred atmospheric background: deep teal around `#073F40` with cobalt, violet, and indigo blooms such as `#4D58D9`, `#6551D8`, and `#293A9A`. The background may be made with layered radial gradients, a blurred decorative element, or an original generated texture; it should feel soft and slightly kinetic without distracting from the content.

Align the band content to the same page container. Place a concise, large white statement on the left, around `2.3–3.2rem`, with a single outlined CTA on the right. The outlined button should use a translucent white border around `rgba(255,255,255,.65)`, transparent fill, white text, approximately `3.25rem` tall, and a `0.8rem` radius. On smaller screens, stack the statement and button while preserving generous vertical padding.

Use a consistent max-width around `76–88rem`, horizontal gutters of `1.5–3rem`, and generous vertical spacing. Avoid hard dividers in the main hero; rely on the background change and spacing to separate regions. Use subtle transitions: buttons can shift upward by 1–2px, brighten slightly, and gain a soft shadow on hover; keyboard focus must have a clearly visible high-contrast outline. Respect reduced-motion preferences.

## Never
- Never use the reference company’s logo, product name, or brand language.
- Never reuse the reference copy or write a close paraphrase of it.
- Never copy the exact interface screenshot, floating callout, layout proportions, or decorative artwork.
- Never use illustrations, imagery, or visual assets from the reference.
- Never make the result look like a clone; adapt the structure and design principles to the user’s product and brand.
- Never sacrifice responsive behavior, readable contrast, keyboard accessibility, or semantic heading and button markup.