## 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/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059860-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059824-full.webp
- Component on Kage: https://kage.design/component/uini-hero

## Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create a distinctive hero for my product—not a copy of the reference.

## Build this section
Create a polished SaaS landing-page hero that communicates a clear product outcome and makes the product feel usable immediately. Use a restrained editorial layout: a compact top navigation, a centered message hierarchy, and a large product interface preview anchored below the call to action.

### Layout and alignment
- Use a full-width, very light warm background with a centered content container capped around 1160–1240px.
- Keep the navigation in a single horizontal row: brand area on the left, text links in the middle/right, and one filled CTA at the far right. On smaller screens, collapse links into a menu while preserving the primary CTA.
- Center the hero copy and constrain it to roughly 850–950px so the headline remains readable and visually forceful.
- Use a two-line headline where the first line is dark and the second line uses the brand accent colour. Let the line break be intentional rather than relying on arbitrary wrapping.
- Place supporting copy directly beneath the headline, followed by a smaller clarifying sentence, then one prominent CTA and a short reassurance line.
- Position the product preview below the hero content with enough overlap or visual continuity that it feels like the proof of the claim. The preview should be wide, slightly rounded, and aligned to the same container edges as the navigation.
- On mobile, reduce headline size, stack navigation actions, keep the copy centered, and make the product preview horizontally scrollable or selectively cropped without making the page overflow.

### Typography hierarchy
- Use a clean contemporary sans-serif with a friendly, slightly human feel.
- Navigation: 14–15px, medium weight.
- Main headline: approximately 62–72px on desktop, 40–48px on mobile, tight line-height around 0.98–1.05, regular-to-medium weight rather than heavy bold.
- Supporting paragraph: 18–20px with approximately 1.4 line-height and a muted charcoal colour.
- Secondary reassurance text: 13–14px, muted grey.
- Product preview labels and interface copy should be smaller and denser, around 12–15px, with clear contrast between headings, metadata, controls, and body text.

### Colour and surface treatment
- Base background: warm off-white, approximately #FCFCF9 or #FDFCF8.
- Main text: near-black charcoal, approximately #171717.
- Accent colour: warm coral-orange, approximately #E9724C or #E86F4A. Use it for the highlighted headline line, primary buttons, active states, and small product accents.
- Supporting text: muted slate-grey, approximately #5F625F.
- Product preview surfaces: white and soft neutral grey, approximately #FFFFFF and #F2F2EE.
- Add a very subtle field of tiny, low-contrast square or pixel-like marks behind the hero if it supports the brand. Keep them sparse, blurred or faint, and decorative rather than informational.
- Use green only for small positive/status indicators, approximately #37B77A, so it remains secondary to the warm accent.

### Borders, radius, and depth
- Use fine neutral borders around the product preview, approximately #DDDDD7, at 1px.
- Give the main preview a 12–16px radius and a soft, broad shadow such as 0 18px 45px rgba(30,30,20,.08).
- Use 8–12px radii for cards, chat bubbles, browser controls, and buttons; use a slightly larger radius, around 4–8px, for compact nav buttons depending on the brand language.
- Primary buttons should be solid accent colour with white text, generous horizontal padding, and a subtle arrow or directional affordance. Include a dark secondary action inside the product mockup only if it helps demonstrate the product workflow.

### Product preview composition
- Build a believable browser or application frame rather than a generic abstract card.
- Include a slim top frame with small browser dots or utility controls, then an application navigation/header area, then a realistic main workspace.
- Show a central task or decision area—such as plans, analytics, content, or workflow data—using neutral cards and clear hierarchy.
- Add a floating assistant or conversational panel over the lower-right portion of the preview. It should show a short sequence of messages, a small status indicator, and a clear completion or insight state.
- Make the preview tell a story: a user encounters a question or friction point, the product asks or answers something, and the interface surfaces a useful next step.
- Keep all mock data generic and invented for the user’s product; the interface is evidence of the product value, not the hero’s main reading layer.

### Interaction and responsive behaviour
- Add restrained hover states to navigation links and buttons: colour shift, underline, or a 1–2px lift.
- The primary CTA should have a clear focus ring and keyboard-accessible contrast.
- If the assistant panel is interactive, allow it to open, close, or reveal one additional message, but do not let animation distract from the hero message.
- Use short, subtle entrance transitions for the preview and decorative details; respect `prefers-reduced-motion`.
- Ensure the page remains usable at 320px width and that no decorative background element interferes with text contrast.

## Never
- Never use the reference product’s logo, icon, name, or exact brand marks.
- Never use the reference product’s product name, navigation labels, headline, supporting copy, pricing, or sample customer names.
- Never copy the reference interface, chat transcript, app layout, illustrations, decorative objects, or imagery one-for-one.
- Never reproduce the exact wording, dimensions, colours, spacing, or visual arrangement if they do not suit my product.
- Never add stock imagery or unrelated illustrations; keep the proof visual as an original interface concept tailored to my product.