## 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/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106574-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106536289-full.webp
- Component on Kage: https://kage.design/component/viso-now-hero

# Build an immersive AI workflow hero

## Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then adapt the principles below to my product and brand rather than reproducing any reference literally.

## Goal
Create a large, cinematic homepage hero for a software product. The section should communicate one clear promise above the fold and let visitors begin a primary workflow immediately, using a central input panel and a small set of example templates.

## Design language

### Layout and alignment
- Use a full-viewport or near-viewport hero, with a cinematic background video or image that relates to the product's domain. Keep the background visually rich but subordinate to the interface.
- Add a dark navy/black gradient and a subtle lower fade over the media so white text and controls remain readable.
- Place a slim navigation row at the top: brand mark on the left, a restrained set of links in the middle, and sign-in plus two calls to action on the right. Keep the content within a centered max-width container of roughly 1180–1280px.
- Center the main content horizontally. Put the headline in the upper-middle portion of the hero, followed by a prominent workflow composer.
- Use a headline width of about 760–900px so it wraps into two balanced lines on desktop. Below it, center a short or optional supporting line only if the product needs one.
- Build the composer at roughly 540–640px wide on desktop. Under it, show a “start from a template” row with three compact preview cards and left/right controls. On mobile, stack the navigation, reduce the headline width, make the composer full width, and turn the template row into a horizontal scroll area.
- Reserve enough bottom padding for the background to transition cleanly into the next section; do not let the hero feel cropped at the fold.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly geometric feel. The headline should be bold or semibold, approximately 64–78px on desktop with tight line-height around 0.95–1.05 and slight negative tracking. Scale to 42–52px on mobile.
- Navigation and supporting labels should be quiet and compact, around 13–15px.
- Composer labels and placeholder text should use 14–16px typography with clear contrast between instruction text and secondary metadata.
- Template titles should be 13–15px and sit over or below their previews without competing with the headline.

### Colour and contrast
- Use a dark blue-black base such as #071321 or #0B1728, with white headline text around #FFFFFF and muted text around #B7C0CC.
- Apply a translucent indigo/slate surface to the composer, approximately rgba(45, 61, 82, 0.78), with a subtle cool glow or backdrop blur if appropriate.
- Use a bright accent for the primary action, such as magenta/violet #C743B9 or a brand-specific equivalent. A secondary cool blue accent around #6FA8D8 can support focus states.
- Keep controls readable against the media: use translucent charcoal surfaces around rgba(20, 28, 40, 0.65), with white or pale-gray icons.
- Ensure WCAG-conscious contrast for all essential text, especially where background motion changes brightness.

### Composer interaction
- Make the central panel feel like a task launcher rather than a decorative card. Include a clearly labeled drag-and-drop/upload zone, supported-format metadata, a larger prompt or instruction field, and one obvious submit button.
- Use a dashed border for the upload area, approximately 1px rgba(255,255,255,0.18), with a simple upload icon and a clear hover/focus state.
- The prompt area may include a small mode selector or helper label, but keep the primary action visually dominant.
- On hover, lift or brighten the submit button slightly; on focus, show a visible accent-colored ring. Make the upload zone respond to drag-over with an accent border and softly tinted background.
- Template cards should be clickable shortcuts that populate or configure the workflow. Give the active or hovered card a subtle border, scale, or glow without causing layout shift.
- If the background is video, respect reduced-motion preferences and provide a static poster image fallback. Keep controls usable while media loads.

### Borders, radius, and depth
- Use rounded corners consistently: approximately 14–18px for the composer, 10–14px for template cards, and pill radii for navigation buttons.
- Give the composer a thin translucent light border, a restrained shadow, and optional backdrop blur. Avoid making it look like a heavy opaque dashboard widget.
- Template thumbnails should be edge-to-edge within their cards, with a dark gradient at the bottom if labels overlay the imagery.
- Keep shadows soft and diffuse, using depth to separate the foreground UI from the background rather than adding many visible borders.

### Responsive and accessibility details
- Maintain a minimum 44px touch target for buttons and carousel controls.
- Preserve a readable headline and a usable composer at widths below 768px; avoid forcing desktop navigation into cramped space.
- Include meaningful labels, keyboard access for upload, form fields, templates, and carousel controls, plus visible focus states.
- Add a pause or reduced-motion behavior for animated backgrounds where needed.

## Never
- Never use the reference company's logo, product name, navigation labels, or exact marketing copy.
- Never copy the reference upload panel, template names, imagery, layout measurements, or visual assets one-for-one.
- Never reuse the reference site's background video, screenshots, illustrations, or other imagery.
- Never make the background so bright or busy that the headline and primary workflow become hard to read.
- Never add interface elements that do not support the user's product workflow or primary conversion goal.