## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060643-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-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 copy of the reference.

## Build this hero section
Create a polished, desktop-first SaaS hero with a two-part composition: a concise content column on the left and an oversized product interface preview extending from the right and lower half of the section. The section should feel calm, premium, technical, and product-led, with generous whitespace and a subtle sense of motion behind the interface.

### Layout and alignment
- Use a white or near-white full-width background with a centered max-width container of approximately 1100–1180px.
- Reserve the upper edge for a slim navigation bar if the surrounding page needs it; keep the hero visually separated with a very light horizontal rule.
- Position the main hero content around the upper-middle of the viewport, aligned to the container’s left edge.
- Make the text column approximately 360–430px wide. Place a small status or proof badge above the headline.
- Use a large visual preview on the right, beginning near the center of the page and extending below the fold or hero boundary. Let it overlap the content area slightly, but preserve clear reading space around the headline and CTAs.
- The product preview should be angled or positioned with a subtle perspective/crop only if it improves energy; otherwise use a large rounded rectangular browser/app panel with a soft shadow.
- Add a decorative background treatment behind the preview: thin flowing lines, gradients, or abstract paths that suggest data movement. Keep it extremely light so it supports rather than competes with the interface.
- On smaller screens, stack the content and preview vertically. Keep the headline readable, reduce the preview scale, and prevent decorative lines from creating horizontal overflow.

### Typography hierarchy
- Use a high-contrast editorial or humanist display face for the main headline, paired with a clean sans-serif for supporting text and controls.
- Make the headline large and compact: roughly 52–64px on desktop, 1.0–1.08 line-height, with 2–4 deliberate lines. Use a strong near-black such as #111111.
- Keep the supporting paragraph at 17–19px with around 1.45 line-height and a muted charcoal-gray such as #6B7280. Emphasize selected audience or outcome words with the primary text colour and medium weight.
- Use small UI text at 12–14px. Maintain clear weight contrast between labels, values, navigation, and secondary metadata.

### Spacing and rhythm
- Give the hero generous vertical padding, approximately 76–110px above the main content and 120px or more below it when the preview is intentionally cropped.
- Use 20–24px between the badge and headline, 22–28px between headline and paragraph, and 28–34px before the CTA row.
- Keep the CTA buttons in one row on desktop with an 8–12px gap; allow them to stack or wrap naturally on mobile.
- Align the left edge of the badge, headline, paragraph, and CTA group exactly.

### Colour and visual treatment
- Use #FFFFFF or #FCFDFC for the page background and #111111 for primary text.
- Use a restrained mint/teal accent around #19B889 or #20C997 for status values, active states, small highlights, and decorative data lines.
- Use pale mint surfaces around #EAF8F3 and subtle blue-green tints such as #E9F5F4 inside the product preview.
- Keep secondary text near #737373 and inactive interface items near #A8B0AD.
- Decorative lines should use low-opacity mint, cyan, and lime tones—approximately #8DE6C8, #8BD9E8, and #C9EE74—with opacity around 15–45% and soft fading at the edges.
- Avoid saturated gradients in the content area; any gradient should be broad, airy, and low contrast.

### Borders, radius, and depth
- Use 1px borders in #E7EBE9 for badges, secondary buttons, cards, and interface dividers.
- Give small controls and badges a 4–7px radius. Use 8–14px radius for the main product preview and its internal cards.
- The primary CTA should be a near-black filled button with white text, while the secondary CTA uses a white background, dark text, and a subtle border.
- Use soft, diffuse shadows for the product preview, such as a large low-opacity shadow with a pale mint glow near its top edge. Avoid harsh elevation.

### Interaction and visible UI behaviour
- Give buttons clear hover states: the primary darkens or lifts slightly, and the secondary gains a faint mint background.
- The proof/status badge may include a small arrow or chevron and should feel clickable without looking like a dominant CTA.
- Within the preview, show a believable application shell: a quiet sidebar, an active mint-highlighted navigation item, a tabbed content area, a search/control field, and a grid or list of content cards. Keep the preview slightly softened or faded toward its lower edge so it reads as a supporting product glimpse.
- Use restrained transitions for hover and focus states, around 150–220ms, with visible keyboard focus rings.
- Ensure the hero remains useful without animation; decorative paths may subtly move or draw in, but motion must be optional and respect reduced-motion preferences.

### Responsive and accessibility requirements
- Preserve a clear reading order: badge, headline, supporting copy, CTAs, then product preview.
- Use semantic heading and button/link elements, sufficient contrast, descriptive accessible labels, and a visible focus treatment.
- On mobile, reduce the display headline to approximately 38–46px, keep line length comfortable, and place the preview below the CTA group.

## Never
- Never reuse logos, product names, wording, or exact copy from the reference.
- Never reproduce the reference interface, navigation labels, sidebar labels, card content, or screenshot one-for-one.
- Never use the reference’s illustrations, decorative artwork, imagery, or exact flowing-line pattern.
- Never make the product preview more visually dominant than the product’s primary value proposition.
- Never rely on colour alone for status, selection, or interaction feedback.