## 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/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067840-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067801-full.webp
- Component on Kage: https://kage.design/component/datafa-hero

# Build a revenue-focused SaaS hero section

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and primary conversion goal are. Then apply the principles below to my product rather than reproducing the reference literally. If I do not have an established brand system, propose a restrained visual direction that suits the product.

## Objective
Create a polished, conversion-oriented landing-page hero for a modern software product. The section should make the product’s core outcome immediately understandable, provide one low-friction primary action, establish trust with social proof, and show the product in use through a large interactive-looking preview.

## Design language and reusable rules

### Layout and alignment
- Use a very light warm-white page background, approximately `#FBFAF8` or `#FCFBF9`.
- Build the hero as a centered vertical composition inside a wide responsive container, with generous top and bottom whitespace.
- Start with a global navigation row: brand mark and wordmark aligned left, a small set of text links centered or toward the right, and a compact secondary action at the far right.
- Keep the main headline, supporting paragraph, form, reassurance note, and social proof centered on the same vertical axis.
- Use a headline width of roughly 700–850px so it remains bold but easy to scan. Keep supporting copy to approximately 2 lines and 560px maximum width.
- Place the product preview below the conversion block with a large gap. Let it occupy most of the available desktop width while maintaining comfortable outer margins.
- On smaller screens, collapse the navigation, reduce headline size, stack or widen form controls, and allow the preview to crop or scroll horizontally rather than becoming unreadably small.

### Typography hierarchy
- Use a modern grotesk or humanist sans-serif with a clean, slightly friendly character.
- Set the headline in near-black `#202020`, heavy weight 700–800, tight tracking around `-0.03em`, and a large desktop size around 56–64px with a line-height near 1.05.
- Set the supporting paragraph in muted charcoal `#5C5B59`, around 20px desktop, 1.35 line-height, and regular weight.
- Use compact navigation and form text around 14–16px. Use slightly heavier weight for buttons and key dashboard figures.
- Keep labels, reassurance text, chart metadata, and annotations smaller and lower contrast, but never below comfortable accessibility sizes.

### Conversion block
- Make the primary action a compact website/product entry form rather than a generic “get started” button when the product can act on a URL or account identifier.
- Combine a small leading icon area and a text input into a single rounded control, then place a full-width primary button directly beneath it or adjacent to it depending on available space.
- Use warm coral/orange for the primary button, approximately `#E96845`, with white text and a slightly darker hover state around `#D95736`.
- Add a short, low-commitment reassurance line below the button, such as a trial or no-card message, using muted grey.
- Keep the form visually compact so the headline and product preview remain the dominant elements.

### Social proof
- Place a small overlapping avatar row below the form. Use varied, generic faces or abstract placeholders only when real user imagery is available and permitted.
- Follow it with a concise trust statement containing a clearly readable user/customer count or equivalent proof point.
- Keep the social proof understated: it should support the CTA without competing with the headline.

### Product preview
- Show a large, high-fidelity dashboard or product interface inside a browser-like frame. It should feel like a real preview, not a decorative screenshot.
- Use a white or near-white preview surface, a thin light-grey border around `#E2E1DE`, a subtle shadow, and a generous radius around 18–24px.
- Include a minimal browser chrome strip with small coloured status dots, a subdued URL/title area, and an optional expand control.
- Inside the preview, establish clear dashboard hierarchy: a toolbar with a product selector and date/filter controls, a row of key metrics, a large chart, and supporting breakdown panels below.
- Use pale blue for analytical line/area treatments, approximately `#B9E0F5`, and coral/orange for bars or highlighted data, approximately `#E77B5E`. Keep grid lines and secondary labels very light, around `#E7E8E7` and `#8B8D8D`.
- Prefer a restrained amount of data: enough detail to communicate depth, but with clear whitespace and readable grouping. Avoid making the preview look like an overly dense admin screen.
- If interaction is implemented, make filters, date ranges, tabs, refresh controls, and expand actions visibly clickable. Provide hover/focus states and preserve keyboard accessibility.

### Annotation and discovery affordances
- You may add one or two small handwritten-style or informal callouts around the preview to point toward an interactive feature or an interesting control.
- Keep annotations secondary, thin, and muted grey; they should guide attention without looking like permanent product UI.
- Add small floating discovery controls only if they are useful, such as a preview toggle or help/demo button. Use near-black circular buttons with white icons and subtle hover motion.

### Borders, radius, and depth
- Use thin 1px borders rather than heavy outlines. Prefer `#E5E3E0` for controls and cards.
- Use 8–12px radius for inputs and buttons, and 18–24px radius for the main product frame and larger cards.
- Keep shadows soft and broad: for example `0 8px 30px rgba(35, 32, 28, 0.08)`. Avoid harsh elevation or glossy effects.
- Buttons may have a faint warm glow or shadow to reinforce the primary action, but the overall page should remain calm and editorial.

### Responsive and accessibility behaviour
- Maintain strong contrast for headline, body text, controls, and buttons.
- Give every input, button, link, tab, and chart control an accessible name and visible keyboard focus state.
- Ensure the form has a clear label or placeholder and usable error/success states.
- At mobile widths, reduce decorative annotations, keep the CTA easy to reach, and preserve the dashboard’s key story through selective cropping or a horizontally scrollable preview.
- Respect reduced-motion preferences; use only subtle transitions for hover, loading, and preview interactions.

## Never
- Never copy the reference’s logo, product name, domain, headline, supporting copy, customer names, user count, or dashboard data.
- Never reuse the reference’s exact illustrations, avatars, annotations, screenshots, chart values, labels, or imagery.
- Never make the result look like a pixel-for-pixel clone; translate the composition and conversion principles into the user’s own product and brand.
- Never use fake claims, unverifiable testimonials, or misleading product metrics. Use placeholders or clearly fictional sample data until real content is supplied.
- Never sacrifice readability, keyboard access, responsive behaviour, or semantic HTML for visual similarity.