## 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-1789060754-2.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-3

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

## Design the hero
Build a polished SaaS landing-page hero with a compact global header, an optional announcement strip, and a dramatic two-column hero section.

### Layout and alignment
- Use a full-width page with a minimal header around 64–68px tall.
- Place the brand mark and wordmark on the left, primary navigation in the middle, and utility actions such as contact, sign-in, or account access on the right.
- Keep the header content within a centered max-width container of approximately 1200–1280px, with 24px horizontal padding on smaller screens.
- Add an optional announcement bar directly beneath the header. Center a short message and one text link with an arrow; keep it around 56px tall.
- Make the main hero a two-column composition at desktop widths: a dark content panel on the left and a large product-preview or visual-demo panel on the right. Use roughly a 50/50 split, with the visual allowed to bleed to the viewport edge.
- Give the left panel generous padding—approximately 48–64px on desktop—and vertically distribute its content so the headline and actions sit toward the upper third while supporting navigation or product categories sit near the bottom.
- On mobile, stack the content above the visual, hide or collapse secondary navigation, and preserve generous vertical spacing.

### Typography hierarchy
- Use a modern sans-serif with clean, neutral letterforms.
- Set the hero headline at approximately 44–58px desktop size, 1.05–1.12 line-height, medium or regular weight, and a tight maximum width of 520–600px.
- Use muted text for the first part of a headline and brighter text for the key product or outcome phrase when that supports the user's brand.
- Keep supporting labels around 14–16px and buttons around 14–15px with medium weight.
- Use restrained, readable navigation typography at 14–16px; avoid making every element visually loud.

### Colour and visual tone
- Use a near-black plum or charcoal for the content panel, approximately #17141F or #181522.
- Use warm white for primary text, approximately #F7F5F2, and a softened grey-lilac such as #AAA7B2 for secondary headline text.
- If using an announcement strip, choose a pale lavender or similarly light brand tint, approximately #E8E0FF, with dark text.
- Give the product visual a saturated, atmospheric background using the user's brand palette. A useful starting range is deep indigo #4132A5, electric violet #6D5CE7, and coral-red #D72846, blended softly rather than divided into hard blocks.
- Reserve the strongest contrast for the headline, primary call to action, and the focal product interaction.

### Buttons, borders, and radius
- Use a compact primary button with a light lavender or brand-accent fill, dark text, approximately 84–96px wide and 36–40px tall.
- Pair it with a low-emphasis text link and a small right arrow.
- Keep buttons softly rounded at approximately 7–9px; use pill shapes only if that matches the user's broader brand system.
- Use thin, low-contrast borders around header controls and interface cards, approximately rgba(255,255,255,.16) on dark surfaces or #D9D7DE on light surfaces.
- Product-preview cards should use medium rounded corners around 12–16px and layered elevation rather than heavy shadows.

### Product visual and interaction
- Show a believable, abstracted interface preview that visually demonstrates the product's core benefit. Use realistic hierarchy—tabs, rows, panels, labels, and a focused task or result card—but write original placeholder content relevant to the user's product.
- Layer a foreground interaction card over a larger background application surface to create depth. The foreground card should be the clearest focal point and show an action in progress or a useful result.
- Keep the preview partially cropped at the right and bottom edges on desktop to make the product feel expansive; ensure the important interaction remains visible.
- Add subtle gradients, soft blur, and minimal motion only if appropriate: for example, a gentle floating card or a barely perceptible ambient gradient shift. Respect reduced-motion preferences.
- The lower area of the dark panel may contain a compact product/category switcher: a small eyebrow such as “One toolkit…” followed by rows with an icon, product area, and short benefit statement. Use dividers and subdued inactive rows so this remains secondary.
- Make all links and controls keyboard accessible, provide visible focus states, and maintain sufficient colour contrast.

### Responsive behaviour
- At widths below approximately 900px, reduce the headline to 38–46px and allow the visual to become a normal-width block below the copy.
- At widths below approximately 640px, use 30–38px headline text, 20–24px page padding, and stack the primary and secondary actions if needed.
- Ensure the product preview does not cause horizontal scrolling; crop or reposition decorative layers rather than shrinking the interface until it becomes unreadable.

## Never
- Never reuse logos, product names, taglines, exact copy, interface labels, or brand identifiers from the reference.
- Never reproduce the reference's exact layout proportions, product UI, gradients, imagery, illustrations, or decorative treatment.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the visual mockup more prominent than the product's own value proposition.
- Never sacrifice accessibility, responsive behaviour, or legibility for visual similarity.