## 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/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106505-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106452566-full.webp
- Component on Kage: https://kage.design/component/ai-observability-by-openobserve-hero

# Build a product hero section for an AI software product

## Before you start
Ask the user what their product does, who it is for, and what their visual brand should feel like. Then apply the principles below to create an original hero for that product rather than reproducing the reference.

## Goal
Create a polished, conversion-oriented hero for a technical SaaS, developer platform, or AI product. The section should quickly communicate the category, the primary outcome, and the next action, while using a believable product UI preview to establish credibility.

## Structure and layout
- Place the hero below the site header with a centered content column and generous vertical whitespace.
- Optionally include a slim breadcrumb or context row aligned to the main page container above the hero content.
- Add a small outlined category badge above the headline. Include a compact status dot or simple geometric marker, not a logo.
- Center-align the main hero content on desktop. Keep the text block around 760–1000px wide so the headline remains powerful but readable.
- Use a two-part headline: a dark, high-contrast category or problem phrase followed by a colorful phrase describing the desired outcome. The emphasized phrase may use a smooth left-to-right gradient.
- Put a concise supporting paragraph below the headline. Limit it to roughly 2–3 lines on desktop and explain the practical capabilities, deployment or integration benefit, and/or business value.
- Place two adjacent actions beneath the paragraph: one filled primary CTA and one outlined secondary CTA. The primary action should be visually dominant without becoming oversized.
- Add a large product interface preview beneath the actions. Use a wide, shallow dashboard or workflow visualization with subtle framing, a soft shadow, and enough visible detail to suggest real product depth. On smaller screens, crop or stack it carefully rather than making the UI unreadable.
- If the product has a timely campaign or social-proof message, add a floating card near one lower corner of the preview. Keep it clearly secondary, compact, dismissible, and responsive; it must not cover the main headline or primary CTA.

## Typography
- Use a modern sans-serif with a friendly but technical character.
- Use a bold display headline, approximately 44–58px on desktop, with tight line-height around 1.05–1.12 and slight negative tracking.
- Make the supporting copy 16–18px with a 1.5–1.65 line-height and a medium gray tone.
- Use 14–16px semibold text for buttons and badges.
- On mobile, reduce the headline to approximately 34–42px and allow intentional wrapping; preserve a clear reading order.

## Colour direction
- Keep the main canvas near white, such as #FFFFFF or #FCFCFD.
- Use near-black for primary text, such as #17151B, and a neutral gray such as #5F5C67 for supporting copy.
- Use a vivid purple primary accent around #5B22C9–#6A2BD5.
- For the headline emphasis, use a multi-stop gradient moving through violet/indigo, blue, cyan, and green, for example #7B4BE2 → #3688D8 → #22B9B8 → #86B85A. Adjust it to the user's brand palette.
- Use pale lavender or cool gray fills for secondary controls and interface framing, such as #F3F0FC and #F4F5F7.
- Ensure all text and controls meet accessible contrast requirements; do not rely on the gradient alone to convey meaning.

## Borders, radius, and depth
- Use thin, low-contrast borders around badges, secondary buttons, the product preview, and floating cards: approximately #D8D2E5 or #E1E3E8.
- Use rounded controls with 8–10px radii; use a slightly larger 12–18px radius for cards and the product preview.
- Give the primary button a restrained shadow, for example 0 4px 10px rgba(73, 35, 160, 0.18).
- Keep the product preview shadow soft and broad, such as 0 18px 50px rgba(35, 25, 70, 0.10). Avoid excessive glassmorphism or decorative effects.

## Interaction and responsive behaviour
- Buttons should have visible hover, focus, and pressed states. Slightly deepen the primary purple on hover and add a clear keyboard focus ring.
- Add a subtle arrow or directional icon to action labels if appropriate, but keep it secondary to the text.
- If the floating campaign card is included, provide a close control, preserve its dismissal state for the session, and reposition it below the preview or hide it on narrow screens.
- Make the header and hero adapt cleanly to tablet and mobile widths: stack CTAs when necessary, reduce spacing, left-align only if that better suits the product brand, and prevent horizontal overflow.
- Use semantic headings, buttons, links, alt text for the product preview, and a logical keyboard tab order.

## Content guidance
- Write original copy for the user's product. The headline should state what the product category is and the meaningful result it enables.
- Keep the supporting text concrete and specific rather than using generic AI marketing language.
- The interface preview should reflect the user's product domain, but use invented data and neutral UI labels.

## Never
- Never copy the reference's logos, product names, exact wording, campaign copy, dates, navigation labels, or CTA labels.
- Never reuse the reference's dashboard screenshot, illustrations, imagery, icons, or brand marks.
- Never make the hero dependent on a raster screenshot; create an original mock interface or use the user's own approved product assets.
- Never let a promotional overlay obscure essential content, block interaction, or reduce accessibility.
- Never use the gradient, decorative colour, or visual density at the expense of clear hierarchy and readable contrast.