## 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/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060436-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060413-full.webp
- Component on Kage: https://kage.design/component/loom-hero

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and typography they want to use. Then apply the design principles below to their product rather than reproducing any reference literally.

## Build a centered video-led SaaS hero
Create a polished responsive landing-page hero with four layers: a compact top navigation, a centered headline and supporting statement, a paired CTA row, and a large media preview beneath. The composition should feel calm, premium, approachable, and highly scannable, with generous white space and a clear path from explanation to action.

### Layout and alignment
- Use a white or near-white page background and a wide desktop container, approximately 1200–1280px max width with 24px horizontal gutters.
- Keep the navigation in a single horizontal row: brand area aligned left; sign-in, primary CTA, secondary CTA, and a circular menu control aligned right. On smaller screens, collapse secondary navigation into the menu and preserve a simple primary action.
- Give the hero content a centered column. Place the headline roughly 120–150px below the navigation on desktop, with a maximum text width around 950px.
- Use a strong vertical rhythm: headline, supporting copy, CTA row, then media. Target approximately 18–24px between headline and copy, 48–56px between copy and CTAs, and 54–64px between CTAs and media.
- Make the media preview nearly full container width, with a desktop aspect ratio around 16:9 or 1.7:1. On mobile, let it remain wide and crop or resize gracefully without horizontal overflow.
- Ensure the hero remains useful if video fails to load: show a poster image, muted placeholder, or product visual with a centered play affordance.

### Typography hierarchy
- Use a modern sans-serif with a friendly, highly legible appearance. Use a heavy display weight for the headline, approximately 52–60px desktop with tight line-height around 0.98–1.08; scale to roughly 36–44px on mobile.
- Keep the supporting statement at approximately 24–26px desktop, 1.35–1.5 line-height, and a maximum width of 720–780px. Use regular or medium weight.
- Navigation labels and button text should be 14–16px, medium or semibold, with comfortable tracking and clear contrast.
- Keep the headline to one or two lines on desktop where possible; allow natural wrapping on mobile rather than shrinking it excessively.

### Colour and visual tone
- Use a mostly white canvas, approximately #FFFFFF or #FCFCFB, with near-black text around #111315.
- Choose one saturated brand colour for the primary CTA and play control, approximately a vivid blue such as #1769D5–#2474D8, but derive the exact value from the user’s brand.
- Use a very pale cool tint for secondary buttons, approximately #EEF5FC, with dark text around #17202A.
- Keep supporting UI subdued: muted text around #555C63 and subtle borders around #E6E9ED.
- Add a restrained shadow beneath the media card, such as 0 12px 30px rgba(17, 19, 21, 0.10), rather than shadowing every element.

### Borders, radius, and controls
- Use a large media-card radius around 28–34px on desktop and 20–24px on mobile. Clip the poster/video to the radius.
- Use pill-shaped buttons with approximately 999px radius, 14–16px vertical padding, and 22–28px horizontal padding.
- Make the menu control circular, approximately 48px square, with a soft tinted background and a simple three-line menu icon.
- Place a prominent circular play button over the media centre. It should be approximately 84–112px desktop, use the primary colour, include a white triangular play icon, and have a subtle darker ring or shadow for separation.
- If the video includes playback metadata or controls, keep them compact, dark, translucent, and visually subordinate to the play action.

### Interaction and accessibility
- Add visible hover, focus, and pressed states to every button and link. Darken the primary colour slightly on hover and add a clear keyboard focus ring.
- Make the entire media preview or play control keyboard accessible with an accessible label such as “Play product video.”
- Respect reduced-motion preferences: avoid aggressive autoplay or animated scaling, and keep transitions around 150–220ms.
- Use a poster frame or muted preview rather than forcing sound. Ensure text and controls meet accessible contrast requirements.
- On mobile, stack or wrap the CTA buttons, keep their tap targets at least 44px high, and reduce navigation complexity.

### Content guidance
- Write a concise, outcome-oriented headline specific to the user’s product.
- Follow it with one sentence explaining the core benefit and intended audience.
- Make the primary CTA action-oriented and low-friction; use a secondary CTA for an alternative path such as viewing a demo, installing an integration, or contacting the team.

## Never
- Never use logos, product names, brand marks, or copy from the reference.
- Never copy the reference headline, supporting sentence, button labels, or navigation labels.
- Never reuse the reference video, poster frame, office scene, people, illustrations, or imagery.
- Never make the implementation dependent on the reference brand’s exact typography, colour values, layout measurements, or proprietary assets.
- Never autoplay video with sound, hide keyboard focus, or let decorative media overpower the product message.