## 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/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060359-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060339-full.webp
- Component on Kage: https://kage.design/component/notion-hero

# Build a collaborative AI product hero

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

## Goal
Create a polished homepage hero for a collaborative software product. The section should quickly communicate the product's main promise, support that promise with one concise sentence, offer two clear actions, and show a believable product interface beneath the fold of the hero.

## Design language

### Layout and alignment
- Use a clean white or near-white page background.
- Add a slim top navigation bar with a small brand mark at the far left, centered or balanced navigation links, and authentication plus a primary action at the right.
- Keep the hero content centered within a wide max-width container, approximately 1120–1240px.
- Give the hero generous top spacing after navigation, around 88–120px on desktop.
- Use a large, multi-line headline as the focal point. Center it and constrain its width so the line breaks feel deliberate rather than accidental.
- Place a short supporting paragraph directly below the headline, followed by a horizontal pair of CTAs.
- Position a large product UI preview below the CTAs. Let it extend close to the container edges and slightly overlap or crop at the bottom of the viewport to create momentum into the next section.
- On smaller screens, collapse navigation, reduce headline size, stack the CTAs when necessary, and allow the product preview to remain horizontally scrollable or crop gracefully without breaking the layout.

### Typography hierarchy
- Use a modern sans-serif with strong geometric or grotesk characteristics.
- Set the main headline in a very heavy weight, approximately 68–96px on desktop, with tight letter spacing around -0.055em and line-height around 0.98–1.05.
- Use sentence case and a maximum of two or three lines. Keep the headline visually dominant over every other element.
- Add one short supporting line at approximately 19–22px, regular weight, with comfortable 1.35 line-height and a dark charcoal colour.
- Use compact, highly legible navigation and button labels around 14–16px.
- Avoid excessive text; this hero should be understood in a few seconds.

### Highlighted phrase
- Visually emphasize one meaningful phrase inside the headline using a soft, pale-blue rounded capsule or pill.
- Keep the capsule integrated with the text rather than making it look like a separate badge. Match its vertical padding and baseline to the surrounding headline.
- Add a small abstract blue dot or similarly minimal mark inside the highlighted phrase only if it supports the product's concept.
- The highlight must remain accessible: preserve strong text contrast and ensure it wraps cleanly on narrow screens.

### Colour
- Page background: white or approximately `#FFFFFF` / `#FCFCFB`.
- Primary text: near-black, approximately `#111111`.
- Secondary text: dark neutral, approximately `#292929`.
- Primary CTA: saturated medium blue, approximately `#0878C9` or an equivalent brand colour; use white text.
- Secondary CTA: very pale blue, approximately `#EAF5FC`; use a darker blue text colour.
- Headline highlight: soft sky blue, approximately `#E5F3FC`.
- Keep the palette restrained. Do not introduce gradients unless the product's own brand requires them.

### Borders, surfaces, and radius
- Use subtle neutral borders around the product preview, approximately `#E6E6E3`.
- Give the preview a small-to-medium radius, around 10–16px, with a restrained shadow such as `0 10px 30px rgba(0,0,0,0.08)`.
- Buttons should have a medium radius, around 8–10px, with compact horizontal padding and a clear hover state.
- Keep navigation mostly borderless so the hero retains an airy editorial feel.

### Product preview
- Build an original, simplified mock interface that reflects my product's workflows: for example, a sidebar, workspace header, multiple content columns, cards, tasks, or an AI-assisted panel.
- Use mostly white surfaces with very light gray dividers and one or two subtle tinted areas.
- Make the preview detailed enough to communicate software value, but visually subordinate to the headline.
- If decorative line-art or character elements are appropriate for the brand, use abstract original accents sparingly around the preview; otherwise omit them.
- Ensure the preview is responsive and does not rely on an external image.

### Interaction
- Primary and secondary buttons should have visible hover, focus, and pressed states using modest colour or elevation changes.
- Navigation dropdown indicators may open simple menus on click or hover, but keep the interaction lightweight.
- The product preview can remain static; do not add distracting animation. If adding motion, use a subtle fade or upward reveal on load and respect reduced-motion preferences.
- Preserve keyboard focus visibility and meet accessible contrast requirements.

## Never
- Never copy the reference's logo, product name, navigation labels, headline, supporting copy, customer names, or button text.
- Never reuse the reference's exact interface, screenshots, illustrations, characters, decorative marks, or imagery.
- Never present placeholder content that implies the reference brand; invent content appropriate to my product.
- Never make the headline so wide or dense that it becomes difficult to scan.
- Never sacrifice responsive behaviour, semantic HTML, keyboard access, or reduced-motion support for visual similarity.