## 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/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106542-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106501929-full.webp
- Component on Kage: https://kage.design/component/gojo-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 for that product—not a replica of the reference.

## Build this section
Create a large, immersive landing-page hero contained in a rounded outer frame. The section should feel like a focused first impression: atmospheric visual depth in the background, minimal navigation at the top, a concise centered value proposition, and a believable product preview anchored near the bottom.

### Layout and alignment
- Use a tall hero section, approximately 760–900px on desktop, with a max-width around 1240–1280px and 12–16px outer margin.
- Clip all background and foreground content to a generous 18–22px outer radius.
- Use a three-part vertical composition:
  1. A top navigation row with the brand area on the left, a small horizontal link group centered or slightly offset toward center, and one contrasting action on the right.
  2. A centered content block in the upper-middle area. Keep the text column narrow, approximately 560–680px.
  3. A product preview or interface mockup positioned below the message, partially approaching or crossing the lower fold.
- Keep the hero copy optically centered rather than merely mathematically centered. Leave enough breathing room between navigation, headline, supporting text, preview, and CTA.
- Place the primary CTA below the preview or immediately below the main message, depending on the product. Add a short reassurance line beneath it.
- On smaller screens, stack navigation links or hide secondary links behind a menu, reduce the preview width to the viewport with safe side padding, and keep the headline readable without excessive line breaks.

### Typography hierarchy
- Use a modern sans-serif with a clean, friendly, slightly editorial feel. Prefer a system or variable sans-serif if no brand font is available.
- Make the headline the dominant element: bold or semibold, approximately 56–68px on desktop, 42–50px on mobile, with tight line-height around 0.95–1.05 and slightly negative tracking.
- Use deliberate line breaks or a constrained max-width to create a compact multi-line statement, but adapt the wording for the user’s product.
- Set supporting text at approximately 17–19px desktop and 15–17px mobile, with 1.35–1.5 line-height and a readable measure of roughly 520–600px.
- Navigation and utility text should be quiet and compact, around 14–16px.
- Use sentence case for navigation, buttons, and supporting copy. Keep the headline direct and benefit-led.

### Colour and atmosphere
- Use a dark, cinematic base background such as near-black navy or charcoal, approximately `#17191D` or `#202126`.
- Add an abstract, heavily softened background treatment suited to the user’s brand: a blurred gradient, ambient light field, subtle grain, or an original low-detail visual. Example tones may include muted mauve `#76565D`, dusk orange `#B56A52`, olive gold `#B49A62`, and deep blue-gray `#35434A`.
- Keep the background low contrast behind text. Add a dark translucent overlay or gradient veil, approximately `rgba(10, 13, 18, 0.28–0.55)`, to preserve legibility.
- Use warm or cool off-white text rather than pure white where appropriate, approximately `#F6F4EF`.
- Make the primary button a high-contrast light surface, approximately `#FFFDF8`, with dark text around `#202124`. Reserve saturated colour for small product details or subtle atmospheric accents.
- Ensure all text meets accessible contrast, especially over the background image or gradient.

### Product preview treatment
- Show an original preview of the user’s product, not a generic decorative card. It can be a desktop panel, dashboard, device surface, media control, editor, or other interface appropriate to the product.
- Give the preview a dark or light elevated surface with a thin border, soft shadow, and a restrained glass or hardware-like edge if that fits the brand.
- Use approximate preview dimensions of 660–700px wide and 210–250px tall on desktop, scaling fluidly down on mobile.
- Make the preview feel functional through a few believable controls, status indicators, content blocks, and hierarchy—but avoid overcrowding it with detail.
- Keep the mockup visually secondary to the headline while making it concrete enough to communicate what the product does.
- Use a subtle shadow such as `0 18px 45px rgba(0, 0, 0, 0.35)` and, if suitable, a low-opacity outer glow that echoes the backdrop.

### Borders, radius, and spacing
- Use a 1px translucent border on elevated surfaces, approximately `rgba(255, 255, 255, 0.14–0.22)`.
- Use 10–14px radius for buttons and 16–24px radius for the product preview, with the outer hero radius around 18–22px.
- Use a spacing system based on 8px increments. Typical gaps: 28–36px between headline and supporting text, 26–34px between supporting text and preview, 26–32px around the CTA, and 10–14px between CTA and reassurance text.
- Keep navigation inset approximately 22–30px from the hero edges on desktop and 16–20px on mobile.

### Interaction and motion
- Make the top-right action and primary CTA visually obvious, with a subtle hover transition: brighten or darken the surface, slightly shift the shadow, and translate upward by 1px at most.
- Give navigation links a restrained colour or opacity transition on hover and a visible keyboard focus ring.
- If the background is animated, keep it extremely slow and subtle; do not let motion compete with the message.
- Let the product preview respond gently to hover or scroll only if it supports comprehension—for example, a slight lift or parallax effect. Respect `prefers-reduced-motion`.
- Ensure every interactive element has a clear focus state and accessible label.

### Responsive behaviour
- On mobile, reduce the hero height to fit content naturally while preserving generous vertical padding.
- Keep the headline no wider than about 92vw and use 38–48px text depending on the brand font.
- Let the preview overflow horizontally only if it remains intentionally clipped and usable; otherwise scale it to the available width.
- Move the CTA and reassurance text into a clear vertical stack, and avoid placing essential content over busy background areas.

## Never
- Never copy the reference’s logo, product name, headline, supporting copy, navigation labels, or button wording.
- Never reuse the reference’s product interface, media artwork, icons, imagery, or exact visual composition.
- Never use the reference brand’s illustrations, photography, background scene, or distinctive graphic assets.
- Never invent a product preview that misrepresents the user’s actual product.
- Never sacrifice readability, accessibility, or responsive behaviour for a visually similar result.