## 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-1789060755-6.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-2

## Before you start
Ask what the user's product is, who it is for, and what their brand identity looks like. Then apply the principles below to create an original hero for that product rather than reproducing this reference.

## Build this section
Create a premium, centered SaaS hero for the top of a marketing page. The hero should communicate one clear customer outcome, support it with a concise explanation, and lead with a single high-priority action.

### Layout and alignment
- Use a warm, near-white hero background, approximately `#F8F7F4`, with a very shallow pastel band or gradient at the top in a lavender family such as `#E8E0FF`.
- Constrain the content to a readable max width of roughly `1100–1200px`, while allowing the hero to span the viewport.
- Center-align the upper content. Place a small product-category eyebrow above the headline, followed by the headline, supporting paragraph, and CTA row.
- Give the hero generous vertical breathing room: approximately `96px` top padding on desktop, `28–36px` between eyebrow and headline, `24px` between headline and paragraph, and `44–52px` before the CTAs.
- Below the CTA row, introduce a two-column visual preview grid. Use two large cards with a small gap, aligned to the same container edges. The cards should begin near the bottom of the hero and continue below the fold if necessary.
- On mobile, stack the preview cards, reduce horizontal padding to `20–24px`, and keep the headline centered with a comfortable maximum line length.

### Typography hierarchy
- Use a clean contemporary sans-serif with slightly soft, humanist proportions. If the product has a brand font, use it; otherwise use a system or modern sans stack.
- Make the main headline large and lightweight: approximately `44–52px` on desktop, `1.05–1.12` line height, with a maximum width around `600–700px`.
- Break the headline into two intentional lines when useful: emphasize the main outcome in a dark tone, then use a softer neutral tone for the clarifying phrase.
- Set supporting copy around `16–18px`, `1.45` line height, in a muted gray, with a max width around `760px`.
- Keep the eyebrow compact and semi-bold, around `14–16px`, with optional letter spacing of `0.02em`.
- Use button labels around `15–16px` with medium-to-semibold weight.

### Colour, borders, and shape
- Use near-black for the primary headline, approximately `#292727`, and muted gray for secondary text, approximately `#6F6D6A`.
- Use a distinctive brand accent for the primary CTA, such as a rich violet around `#7448B8`; adapt this to the user's actual brand colour.
- The primary button should have white text, no visible border, a medium radius around `10–12px`, and generous dimensions around `100–112px` wide by `52px` tall.
- The secondary action should be visually lighter: accent-coloured text with a thin chevron or arrow, no filled background, and enough hit area to feel like a real control.
- Preview cards should use a radius around `10–12px`, no heavy border, and an overflow-hidden treatment. Their contents can use dark, atmospheric surfaces with subtle gradients, blur, or abstract interface fragments relevant to the user's product.
- Avoid excessive shadows; the section should feel flat, polished, and calm.

### Interaction and responsive behaviour
- Add a restrained hover state to the primary button: slightly darken or brighten the accent and translate it upward by `1–2px` with a short ease-out transition.
- On hover, the secondary action may shift its chevron a few pixels to the right and gain contrast.
- Ensure both actions have visible keyboard focus styles with a clear accent-coloured outline.
- The preview cards may have a subtle hover lift or slow parallax effect, but motion should remain understated and respect `prefers-reduced-motion`.
- Preserve the hierarchy on narrow screens: eyebrow, headline, paragraph, CTA row, then visuals. Stack or wrap the CTA row without making the secondary action appear more important than the primary one.

## Never
- Never use the reference company's logo, product name, trademark, or copy.
- Never reproduce the reference headline, supporting sentence, CTA labels, or any other recognizable wording.
- Never copy the reference artwork, screenshots, card contents, gradients, or imagery.
- Never assume the user's product, audience, or brand colours; ask first and adapt the rules to their context.
- Never add decorative elements that compete with the central value proposition or primary CTA.