## 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/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060206-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Component on Kage: https://kage.design/component/linear-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 a tailored hero for my product rather than reproducing the reference.

## Build this section
Create a dark, premium SaaS landing-page hero with a compact top navigation and a large product preview beneath the messaging. The composition should feel calm, editorial, and highly polished, with the product UI acting as proof of the product rather than competing with the headline.

### Layout and alignment
- Use a near-black page background, approximately `#08090A`, with a thin horizontal divider below the navigation in `#202225`.
- Keep the navigation in a single centered container, approximately 1180–1280px wide, with a compact height of 72–76px.
- Align the brand mark and name to the left. Place navigation links in the middle or toward the right, followed by a subtle divider, a secondary sign-in action, and a compact light primary button.
- On desktop, place the hero content in a wide container with generous top padding, around 190–210px after the navigation. Align the text to the left rather than centering it.
- Constrain the headline to roughly 760–850px so it wraps into two purposeful lines. Beneath it, leave 24–32px of space before a muted supporting paragraph.
- Place a small contextual announcement or directional link on the far right of the supporting-content row when appropriate; it should remain visually secondary.
- Start the product preview around 70–85px below the supporting text. Let it extend beyond the viewport or container edges so the interface feels expansive and immersive.
- On smaller screens, reduce the hero top padding substantially, stack the supporting link below the paragraph, hide or collapse nonessential navigation links, and allow the product preview to crop horizontally without causing page overflow.

### Typography hierarchy
- Use a clean contemporary sans-serif with slightly tight tracking and strong rendering at large sizes.
- Set the main headline around 62–68px on desktop, with a line height near 0.98–1.05 and mildly negative letter spacing. Use a regular or medium weight rather than an overly bold display face.
- Use a 15–16px supporting paragraph with approximately 1.5 line height and a cool gray colour such as `#8B8E94`.
- Use navigation labels at 13–14px, medium-gray `#85878C`, with brighter text on hover.
- Use 12–14px labels inside the product preview, with stronger contrast reserved for titles and active states.

### Colour and surfaces
- Use a nearly black canvas around `#08090A` or `#0A0B0C`.
- Set the headline and key foreground text to soft white, approximately `#F1F2F3`, not pure white.
- Use muted neutrals between `#70747A` and `#999CA2` for supporting text and inactive controls.
- Use a pale gray primary navigation button around `#E8E9EB` with dark text around `#17181A`.
- Keep accents sparse inside the product preview: one warm yellow or amber accent around `#E5C51B` can indicate an active state, while cool blue or green accents should be used only when meaningful to the product.
- Add a subtle fade or dark gradient over the lower product preview so the transition back to the page background feels intentional.

### Borders, radius, and product preview
- Use 1px borders in low-contrast charcoal tones such as `#26282B` or `rgba(255,255,255,0.10)`.
- Give the main product preview a 9–12px radius, thin border, and very subtle shadow; avoid bright outlines.
- Construct the preview as a believable application shell: a dark sidebar, a top toolbar, a primary content area, cards or activity rows, and a secondary floating panel overlapping the lower-right region.
- Keep the preview slightly darker and lower contrast than the headline so it reads as a product glimpse, not a screenshot demanding equal attention.
- Use consistent internal spacing, small iconography, compact labels, and thin separators to communicate a dense but controlled workspace.

### Interaction and responsive behaviour
- Make navigation links, sign-in, the primary button, announcement link, and meaningful controls in the product preview keyboard-focusable.
- Add restrained hover states: brighten text, slightly lift the primary button, and shift borders toward `#3A3D42`; do not use flashy animations.
- If the product preview is interactive, support subtle hover highlighting for rows or cards and a gentle panel transition. If it is decorative, mark it appropriately so it does not create confusing controls.
- Respect reduced-motion preferences and keep all transitions short, roughly 150–220ms.
- Ensure the heading remains readable and the preview remains visually cropped but never causes horizontal scrolling.

## Never
- Never use the reference product’s logo, product name, navigation labels, trademarked copy, or UI text.
- Never copy the exact headline, supporting paragraph, announcement wording, or application data from the reference.
- Never reproduce the reference interface one-for-one; invent a product preview appropriate to my product and its workflows.
- Never use the reference’s illustrations, screenshots, imagery, avatars, or branded icons.
- Never add decorative gradients, glow effects, or animation that undermine the restrained dark editorial style.