## 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-1789060756-8.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-4

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and type preferences are. Then apply the principles below to create an original hero for my product—not a copy of the reference.

## Build this section
Create a polished SaaS/product hero that introduces a major product capability and leads into an interactive product preview.

### Layout and alignment
- Use a warm, very light neutral page background, approximately `#F7F6F2`.
- Keep the hero content centered within a generous max-width of roughly `760px`.
- Add a small eyebrow/product category label above the headline. It may include a simple abstract mark made from CSS, but do not use a logo.
- Set the headline in two lines where possible: a dark first line followed by a softer muted second line. Use intentional line breaks on desktop, but allow natural wrapping on smaller screens.
- Place a concise supporting paragraph beneath the headline, constrained to approximately `680px`, with comfortable line height.
- Put the calls to action in one centered row below the paragraph. Use one filled primary button and one lightweight text/link action with a right-facing chevron.
- Leave substantial vertical breathing room before the preview. The preview should begin within the same section and align to a wide page container with roughly `24px` side margins on desktop.
- Make the preview wide and visually substantial, with a minimum height around `420px` on desktop. On mobile, reduce the height and stack or crop the internal UI without causing horizontal page overflow.

### Typography
- Use a modern sans-serif with a clean, slightly humanist feel; fall back to `Inter`, `ui-sans-serif`, or the system sans stack.
- Headline: approximately `44–56px` desktop, `1.02–1.1` line-height, normal-to-medium weight, and slightly tight tracking. Use `32–40px` on mobile.
- Eyebrow: approximately `14–16px`, medium or semibold, with modest letter spacing.
- Body: approximately `17–18px`, `1.45–1.6` line-height, medium-gray text.
- Button labels: approximately `14–16px`, medium weight.

### Colour and surfaces
- Primary text: near-black charcoal, approximately `#252326`.
- Secondary text: neutral gray, approximately `#686663`.
- Accent colour: choose a distinctive brand accent appropriate to my product; a violet similar to `#7448B8` may be used only if it fits the brand.
- Keep the page background calm and low contrast so the preview is the visual anchor.
- Use a muted preview canvas around `#DDDCD7`, with one or two subtle abstract colour fields behind the interface cards. These may be soft gradients in the product’s accent palette, such as pale lilac, blush, blue, or peach.

### Buttons and interaction
- Primary CTA: filled accent background, white or very light text, approximately `14px 12px` vertical/horizontal padding, `10–12px` radius, and a restrained hover state that slightly darkens or lifts the button.
- Secondary CTA: transparent background with accent-coloured text and a small chevron. On hover, increase text contrast and shift the chevron a few pixels.
- Ensure visible keyboard focus rings and accessible labels.

### Product preview composition
- Build an original, non-branded mock product interface inside the lower preview area. It can depict a document, dashboard, workspace, or workflow relevant to my product.
- Use layered white cards with approximately `12–16px` corner radii, subtle `1px` borders around `#E8E6E1`, and soft shadows such as `0 12px 35px rgba(35, 31, 38, 0.10)`.
- Place a larger primary interface card slightly right of center and a smaller assistant, detail, or utility card overlapping its upper-right edge. Add restrained interface details—toolbars, headings, rows, tags, or highlighted text—but keep them abstract enough to support the hero rather than become a full application.
- Add a short contextual caption or label in the left side of the preview if useful, using large dark text and muted supporting text. Keep it aligned to the preview’s internal padding.
- Use responsive positioning: convert overlapping cards into a clean stacked arrangement on narrow screens.

### Spacing and shape
- Eyebrow-to-headline: approximately `28–36px`.
- Headline-to-body: approximately `24–30px`.
- Body-to-CTA: approximately `42–52px`.
- CTA-to-preview: approximately `100–120px` on desktop, reduced to `64–80px` on mobile.
- Use generous section padding, approximately `24px` horizontal and `72–96px` top on desktop.
- Keep the overall visual language soft and editorial: restrained borders, medium corner radii, calm surfaces, and no unnecessary decoration.

### Accessibility and responsiveness
- Use semantic `section`, heading, paragraph, and navigation/button elements.
- Maintain strong text contrast and visible focus states.
- Respect reduced-motion preferences; keep hover and card motion subtle.
- At widths below roughly `700px`, reduce headline size, stack the CTAs if needed, simplify preview layers, and ensure all copy remains readable.

## Never
- Never use the reference product’s logo, product name, brand name, or exact copy.
- Never reproduce the reference screenshot, interface labels, layout artwork, or product-specific UI one-for-one.
- Never include copied illustrations, screenshots, imagery, icons, or decorative assets from the reference.
- Never invent a visual treatment that obscures the user’s own product and brand; adapt the accent, content, preview, and voice to my answers.