## 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/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106490-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106455022-full.webp
- Component on Kage: https://kage.design/component/modeinspect-hero

## Before you start
Ask what the user's product does, who it is for, and what visual brand direction it uses. Then apply the principles below to create an original hero for that product—not a copy of the reference.

## Design goal
Build a polished, AI-forward SaaS hero that communicates the product promise immediately and makes the interface feel real. Use a generous editorial composition: concise navigation at the top, a strong text-led introduction, and a large product workspace preview that begins below the fold of the hero copy.

## Layout and alignment
- Use a full-width hero section with a minimum height of approximately `900px` on desktop; let the product preview extend toward the bottom edge.
- Apply a centered max-width container of roughly `1150–1280px` with `64px` horizontal padding on large screens and `24px` on small screens.
- Place the header in a single horizontal row near the top, around `16–20px` from the top edge. Keep the brand control on the left, navigation in a compact floating group near the center, and authentication/actions on the right.
- Position the main copy in the left half of the hero, beginning around `180–210px` from the top. Limit the text column to approximately `680px`.
- Use a large preview panel beneath the copy, with around `56–72px` of top spacing. Make it wide—roughly `calc(100% - 0px)` within the container—and visually heavier than the text area.
- On mobile, stack the header controls, hide or collapse secondary navigation, left-align the copy, reduce the headline size, and place the preview below the calls to action with intentional cropping or horizontal overflow rather than shrinking every detail until unreadable.

## Background and colour
- Create a soft atmospheric background that transitions from pale chartreuse/lime near the top (`#C8F276` or similar) into a warm off-white near the bottom (`#F3F0E9`).
- Add a very subtle blurred radial wash in the middle and lower background using low-opacity mint, yellow, and warm grey tones. The effect should feel luminous and tactile, not like a sharp gradient stripe.
- Use near-black text (`#111312`) for the headline and primary labels.
- Use muted olive-grey body text (`#66705D` or a comparable low-contrast neutral) while maintaining accessible readability.
- Use a vivid lime or fresh green for the primary action (`#B9F35D`–`#C9FA72`) and a quiet translucent white/off-white treatment for secondary controls.

## Header
- Make the header feel like a set of floating pills rather than a conventional full-width navbar.
- Use a small rounded brand capsule on the left with a translucent off-white fill, a fine white/green border, subtle shadow, and `10–12px` radius.
- Put the main navigation links inside a centered frosted capsule. Use compact text around `14px`, generous horizontal padding, and `8–12px` gaps.
- Place a light secondary action and green primary action on the right. Keep both compact, with approximately `12px` vertical and `16–18px` horizontal padding.
- Give interactive controls visible hover states: slightly increase brightness, strengthen the border, and lift the element by `1px`; use a clear focus ring for keyboard users.

## Typography hierarchy
- Use a modern grotesk or geometric sans-serif with clean, slightly tight letterforms.
- Set the headline at approximately `60–68px` on desktop, `0.94–0.98` line-height, and about `-0.045em` letter spacing. Use a maximum of two or three lines and make the wording specific to the user's product outcome.
- Set supporting copy around `18px` with a `1.45` line-height and a maximum width near `430px`.
- Set buttons and navigation labels around `14–16px`, medium weight, with concise action-oriented wording.
- Preserve strong contrast between the headline and supporting text; do not overfill the hero with extra badges or paragraphs.

## Calls to action
- Place two buttons in a horizontal row beneath the supporting copy, with approximately `16px` spacing and a `14–16px` vertical gap from the paragraph.
- Make the primary button lime-filled with dark text, a fine semi-transparent border, soft shadow, and roughly `10–12px` radius.
- Make the secondary button off-white/translucent with dark text and a subtle border. If it represents an external destination, use a small arrow icon, but choose an icon style appropriate to the user's brand.
- On mobile, allow the buttons to wrap or become full-width while preserving their visual priority.

## Product preview panel
- Anchor the hero with a large rounded workspace mockup, not a generic decorative image. Build an original preview that reflects the user's product category.
- Use an off-white surface around `#F8F8F5`, a `1px` warm grey border (`#D8D8D1`), a `14–18px` radius, and a soft shadow such as `0 18px 45px rgba(42, 45, 34, 0.14)`.
- Show enough believable interface structure to communicate value: a top toolbar, a primary workspace or canvas, one or two floating panels, and a compact side inspector or utility area. Keep details simplified and legible at hero scale.
- Use a faint dotted or grid canvas background in very low contrast (`#E9EBE4`) to imply an interactive design workspace without making it visually noisy.
- Include restrained blue, lime, and warm neutral accents only where they help establish hierarchy. Use realistic panel spacing, small controls, selection outlines, and subtle shadows.
- Add depth through layered floating cards and a slightly raised command/input bar, while keeping the preview lighter and quieter than the headline.
- The preview should feel like a working product rather than a static screenshot. If implementing interaction, support subtle hover elevation, selected-state outlines, and responsive cropping; do not make animation necessary for comprehension.

## Borders, radius, and depth
- Prefer thin, low-contrast borders over heavy outlines throughout the hero.
- Use `10–12px` radius for controls and `14–18px` radius for the main preview.
- Keep shadows diffuse and warm, with low opacity. Avoid glossy gradients, hard black shadows, and excessive glassmorphism.
- Maintain consistent inset spacing inside capsules and panels, generally in `12–20px` increments.

## Responsive and accessibility requirements
- Maintain a clear reading order: headline, supporting copy, primary action, secondary action, then product preview.
- Ensure all text and controls remain keyboard accessible, with visible focus states and semantic buttons/links.
- Preserve sufficient contrast for body text and controls against the luminous background.
- At narrow widths, prevent the header from colliding with the copy; collapse navigation into a menu or omit it from the hero if needed.
- Respect reduced-motion preferences and keep any decorative movement subtle.

## Never
- Never reuse the reference's logos, product names, brand language, exact headline, button copy, navigation labels, or interface text.
- Never copy the reference's editor screenshot, wireframes, panel arrangement, icons, illustrations, or imagery.
- Never use a generic stock image in place of a product-relevant interface preview.
- Never reproduce the exact dimensions, spacing, gradient shape, or visual composition; reinterpret the principles for the user's product and brand.
- Never sacrifice legibility for decorative blur, excessive transparency, or overly dense mockup details.