## 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/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106702-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106621890-full.webp
- Component on Kage: https://kage.design/component/adscope-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 their product rather than reproducing this reference.

## Build a product-led SaaS hero
Create a responsive landing-page hero for the user's product. The section should communicate one specific customer outcome quickly, support it with a concise explanation, and show the product in use. Use the following as reusable design rules, adapting the content, visual style, and CTA to the user's brand.

### Layout and alignment
- Use a full-width, very light neutral hero background with a centered content container capped around 1100–1160px.
- On desktop, use a two-column layout: approximately 58–62% width for the copy and 38–42% for the product preview. Vertically center both columns, with the copy slightly higher if needed for visual balance.
- Keep the copy left-aligned and give it a generous maximum width so the headline wraps into three purposeful lines rather than becoming one long line.
- Place the product preview to the right, overlapping or floating slightly within the hero area. It should feel like a real interface snapshot, not a decorative illustration.
- On smaller screens, stack the copy above the preview. Preserve the headline's hierarchy, allow natural wrapping, and keep the preview within the viewport without horizontal overflow.
- If the page includes navigation above the hero, use a simple horizontal header with the brand at left, a small set of links in the center or near-center, and utility/login plus primary CTA actions at right.

### Typography hierarchy
- Use a clean modern sans-serif with a neutral, highly legible appearance.
- Make the eyebrow sentence compact and muted: approximately 16px desktop, medium weight, with modest letter spacing.
- Make the headline the dominant element: approximately 60–64px on desktop, 1.05–1.12 line-height, regular or medium weight, and tight but not cramped tracking. Use a responsive 40–48px range on mobile.
- Keep the supporting paragraph around 17px desktop with a 1.55–1.7 line-height and a readable measure of roughly 580–650px.
- Use short, outcome-oriented CTA labels. Supporting reassurance beneath the CTA should be smaller, around 14–15px, and visually quieter.

### Spacing and rhythm
- Give the hero generous vertical padding, roughly 96–120px on desktop and 64–80px on mobile.
- Establish a clear sequence: eyebrow to headline at 28–36px, headline to paragraph at 28–36px, paragraph to CTA at 28–32px, and CTA to reassurance at 16–20px.
- Keep the product preview aligned to the overall content grid rather than centered independently.
- Avoid filling every available area; the calm negative space is part of the premium, trustworthy feel.

### Colour and surface treatment
- Start with a warm off-white or cool neutral background, approximately #F4F5F3 or a close brand-specific equivalent.
- Use near-black for the headline and primary text, approximately #0A0A0A.
- Use a medium neutral gray such as #686868 for eyebrow text and reassurance copy.
- Make the primary CTA a vivid but soft accent chosen from the user's brand; for a similarly optimistic direction, use a pale chartreuse around #D8F46B with black text.
- Keep secondary controls white or near-white with a thin neutral border around #D8D8D8.
- Product-preview surfaces should be white or softly tinted, with restrained pastel data accents only where they support scanability.

### Borders, radius, and product preview
- Use a 1px low-contrast border on secondary buttons and interface cards.
- Give buttons a generous pill radius, approximately 999px, with horizontal padding around 24px and vertical padding around 14–17px.
- Give the main product preview a softly rounded rectangle, approximately 14–18px radius, with a subtle shadow such as 0 10px 30px rgba(0,0,0,.08).
- If showing a dashboard, prioritize a few clearly legible metric cards, tables, or charts. Keep the preview simplified and slightly smaller than the copy so it supports, rather than competes with, the headline.
- A mobile product view may overlap the desktop dashboard preview to demonstrate responsiveness, but use this only when it makes sense for the user's product.

### Interaction and responsive behaviour
- Primary CTA buttons should have a clear hover state: slightly darken or increase contrast, with a 150–200ms ease transition.
- Secondary navigation and login controls should receive a subtle background or border-colour change on hover and a visible keyboard focus ring.
- Do not rely on animation to communicate the value proposition. If the product preview is animated, use a restrained fade or small translate transition and respect `prefers-reduced-motion`.
- Ensure the CTA remains visible without excessive scrolling on common desktop and mobile viewports.
- Preserve accessible contrast, semantic heading order, descriptive preview alt text, and touch targets of at least 44px.

### Content guidance
- Write an eyebrow that names the category or differentiator.
- Write a direct headline focused on the user's outcome, not a list of features.
- Follow with one short paragraph explaining how the product achieves that outcome.
- Add one primary CTA and a low-friction reassurance line such as trial, setup, pricing, or cancellation information, tailored to the user's actual offer.

## Never
- Never copy the reference's logo, product name, brand assets, or exact copy.
- Never reuse the reference's dashboard, phone mockup, interface data, metric labels, or product screenshots.
- Never include the reference's exact illustrations, imagery, layout artwork, or decorative graphics.
- Never make the hero a generic marketing collage unrelated to the user's product.
- Never invent claims, pricing, trial terms, integrations, or guarantees that the user has not provided.
- Never sacrifice responsive behaviour, semantic accessibility, or readable contrast for visual similarity.