## 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/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106502-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106472876-full.webp
- Component on Kage: https://kage.design/component/hob-hero

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original hero section tailored to that product—not a copy of any reference.

## Design language

Build a clean, high-conviction SaaS product hero with a centered composition and generous whitespace.

### Layout and alignment
- Use a full-width white or near-white hero section with a compact navigation row at the top.
- Keep the navigation horizontally aligned: a small brand mark or wordmark on the left, primary links in the middle or left-of-center, and utility actions on the right.
- Give the navigation approximately 24–32px horizontal padding on desktop and 16–20px on mobile.
- Place the hero content in a centered column with a maximum width of roughly 850–980px.
- Add substantial top spacing below the navigation, around 80–110px on desktop and 56–72px on mobile.
- Set the headline to a maximum line length that naturally creates two balanced lines on desktop. Do not force awkward line breaks; use responsive wrapping.
- Place supporting copy directly below the headline, constrained to approximately 650–760px so it reads as two or three calm lines.
- Put the primary and secondary actions in a centered horizontal row, stacking vertically on narrow screens.
- Add a short reassurance note beneath the buttons, such as a trial, setup, or availability detail relevant to the user's product.
- Anchor a large product preview below the copy and CTAs. Let it extend wider than the text column, with a maximum width around 1080–1150px.
- Keep the preview close enough to the CTA group to feel connected, but give it enough breathing room to remain visually distinct.

### Typography hierarchy
- Use a modern sans-serif with clean, neutral letterforms.
- Make the headline very large and confident: approximately 56–68px on desktop, 38–46px on mobile, with a tight line-height around 0.98–1.05 and slight negative tracking.
- Use near-black headline text, approximately `#101114`.
- Set supporting copy at 18–20px desktop and 16–18px mobile, with a relaxed line-height around 1.45–1.6.
- Use a muted gray for supporting text, approximately `#62666B`.
- Keep navigation and button labels compact, around 13–15px, using medium weight rather than excessive boldness.
- Preserve a clear contrast between the oversized headline, readable description, and understated metadata.

### Colour and controls
- Use a white or very lightly tinted background, approximately `#FFFFFF` or `#FCFCFB`.
- Make the primary CTA a warm amber/yellow accent, approximately `#F5A800` or `#F2A300`, with near-black text.
- Use a white secondary CTA with a subtle neutral outline, approximately `#BFC1C3`.
- Keep the navigation's main action visually noticeable but less dominant than the hero's primary CTA.
- Ensure all text and controls meet accessible contrast requirements; do not rely on the yellow colour alone to communicate priority.

### Borders, radius, and product preview
- Use pill-shaped buttons with a radius of 999px and generous horizontal padding, roughly 24–30px.
- Give buttons a comfortable height of approximately 40–48px.
- Frame the product preview as a refined desktop application window or dashboard card with a 10–14px radius.
- Use a very subtle gray border such as `#E1E3E5`, plus a soft diffuse shadow like `0 14px 36px rgba(20, 24, 28, 0.14)`.
- The preview should show a believable, simplified interface relevant to the user's product: navigation or sidebar regions, a primary workspace, and one or two supporting panels. Keep it legible but subordinate to the headline.
- Avoid making the preview look like a generic blank rectangle; include realistic hierarchy, controls, rows, or content states without overcrowding it.

### Interaction and responsive behaviour
- Add restrained hover and focus states: primary buttons can darken slightly or lift by 1px, while secondary buttons can gain a faint background tint.
- Use a visible keyboard focus ring in a complementary amber or dark tone.
- Navigation dropdown indicators should be subtle and open on click or keyboard interaction if dropdowns are included.
- On mobile, collapse or simplify navigation, reduce headline size, stack the CTAs, and allow the product preview to scroll or scale without clipping important content.
- Preserve the centered visual hierarchy at every breakpoint and avoid excessive animation. If motion is used, keep it to a short fade or gentle upward reveal.

## Never
- Never reuse logos, product names, brand marks, or exact copy from the reference.
- Never reproduce the reference interface, screenshot, layout details, or visual assets one-for-one.
- Never use illustrations or imagery from the reference; create an original product preview appropriate to the user's product.
- Never invent claims, pricing, trial language, or CTA wording without adapting them to the user's product.
- Never sacrifice readability or accessibility for visual similarity.