## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060097381.webp
- Design on Kage: https://kage.design/designs/superhuman-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type, imagery, and logo). Wait for their answers before designing. Apply everything below to their product, not to the reference site.

## Page structure
1. **Global navigation and announcement bar** — Use a slim white navigation row with a compact brand mark at left, several dropdown product links, utility links at right, and a small sign-in control. Immediately below, add a pale lavender announcement strip with centered text and a short arrow link.
2. **Primary hero** — Build a dark, two-part hero with a large left-aligned headline, two compact CTAs, and a bottom product switcher/list explaining the suite. Let the right side be a large cropped product UI composition with luminous purple, red, and blue atmospheric gradients behind it.
3. **Customer logo proof** — Transition to an off-white section with generous vertical space, a centered trust statement, and a single bordered six-column logo row.
4. **AI assistant product introduction** — Add a centered eyebrow, large headline, supporting sentence, and two CTAs for the first product. Keep the section sparse before introducing the media.
5. **AI feature showcase grid** — Place one wide rounded feature card followed by two smaller cards, using tinted backgrounds, oversized UI mockups, and short text anchored near the lower-left. Add a horizontal tab/category navigation beneath the cards.
6. **AI integrations/features cards** — Below the tabs, show three equal bordered cards with small coloured app tiles, bold benefit headlines, and concise supporting copy. Keep this area lighter and denser than the intro.
7. **Customer testimonial** — Use a full-width pale lavender band with a large centered quotation, bold emphasis on selected words, attribution, role, and a subtle text link.
8. **Mail product introduction** — Repeat the centered product-section pattern on the off-white background: eyebrow, two-line headline, explanatory copy, primary button, and secondary link.
9. **Mail feature showcase** — Use an asymmetric grid: one large purple/colourful card on the left and two stacked cards on the right. Include email UI compositions and short feature descriptions inside the cards.
10. **Docs product introduction** — Repeat the same restrained centered intro pattern with a Docs-specific eyebrow, headline, supporting paragraph, and CTA pair.
11. **Docs feature showcase** — Add one wide top card and two smaller cards below it. Use pale gray, lavender, and dark burgundy panels with floating document and AI interface mockups.
12. **Enterprise section** — Switch to a deep purple full-width band. Put enterprise eyebrow, large left-aligned headline, paragraph, and buttons on the left; use a layered browser/interface composition on the right.
13. **Final CTA strip** — Add a short full-width atmospheric image/blurred-gradient band with a large white heading at left and an outlined action button at right.
14. **Footer** — Finish with a dark burgundy footer. Arrange the brand statement in the first column and Products, Company, Legal, and Connect link lists in subsequent columns. Include social links, privacy controls, and a giant low-contrast background wordmark treatment along the bottom.

## Design language
- Build hierarchy through large, calm sans-serif headlines, small uppercase or compact eyebrow labels, short paragraphs, and one clearly coloured primary action per section.
- Keep the main canvas warm off-white, approximately `#f8f7f3` or `#faf9f6`, with dark near-black text around `#17151d`; reset the rhythm using large colour blocks rather than heavy separators.
- Use purple as the interaction and product-signature colour, approximately `#7047c5` to `#8d5be8`, with pale lavender surfaces around `#e8ddff`. Pair it with deep plum/burgundy around `#351526`, deep violet around `#251447`, and occasional teal around `#0e5553`.
- Pair a clean modern sans-serif for all interface and body text. Scale hero and section headlines generously, but keep line lengths narrow and use a noticeably smaller, muted supporting size for descriptions and navigation.
- Alternate sparse centered introductions with dense media sections. Give each product family its own generous vertical opening, then let the following feature grid compress into rounded cards and tighter text/image relationships.
- Treat cards as soft containers: use 10–14px corner radii, thin gray borders around neutral cards, little or no shadow, and stronger contrast through background colour and imagery instead of elevation.
- Use large product screenshots as compositional objects rather than flat screenshots: crop them, layer them, blur their surroundings, and add coloured atmospheric gradients behind them. Keep text legible over dark panels with white or warm-white type.
- Use asymmetric bento layouts: one dominant wide card beside or above smaller supporting cards, with consistent gutters and aligned outer edges.
- Buttons should be compact and rounded, with purple filled buttons for the main action and quiet text/arrow links for the secondary action; invert to pale or outlined controls on dark bands.
- Let testimonials and announcements create pauses in the page: use a single soft lavender background for the quote and a short, low-height gradient/image strip for the final CTA.
- Keep visible interaction restrained: dropdown chevrons, arrow links, category tabs, and subtle hover emphasis are sufficient. Avoid loud animation; if motion is added, use slow gradient drift and gentle card/UI fade or lift on scroll.

## Never
- Do not use any logos, wordmarks, product names, copy, illustrations, photography, screenshots, interface content, or icon sets from the reference.
- Do not present the result as Superhuman or imply any affiliation with it.
- Replace all reference content with the user's product, audience, brand assets, and original interface imagery.