## 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/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073774-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073735-full.webp
- Component on Kage: https://kage.design/component/trigger-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 an original hero section for my product, using my product’s messaging, colours, and assets rather than reproducing the reference.

## Build this section
Create a full-width SaaS landing-page hero with a persistent dark navigation bar above it and a cinematic product-focused background. The section should feel technical, premium, and confident, with the interface visual supporting the message rather than becoming the message itself.

### Layout and alignment
- Use a near-black page background, approximately `#0d0f12`, with a subtle horizontal divider beneath the navigation.
- Build a navigation row around 56–64px tall. Align the brand mark on the left, primary navigation links next to it, utility links or icons toward the right, and one vivid primary action at the far right.
- Make the hero occupy most of the first viewport, approximately 760–850px including navigation on desktop.
- Use a full-bleed background image, video, or product UI rendering positioned behind the content. Keep the focal product detail slightly above or behind the text, and apply a dark translucent overlay and soft blur/vignette so the copy remains readable.
- Center the hero content horizontally in a constrained column roughly 720–900px wide. Place it in the lower-middle area of the visual rather than at the very top.
- Stack the headline, supporting paragraph, and CTA row with clear rhythm. Keep the CTA row centered and allow it to wrap gracefully on narrow screens.
- On mobile, collapse or simplify navigation, reduce the hero height, and preserve the centered composition. Avoid letting the background image reduce legibility.

### Typography hierarchy
- Use a modern sans-serif with clean, slightly technical proportions.
- Set the headline in large, bold white or near-white type, approximately 56–64px desktop with a 0.98–1.08 line-height. Break it into two balanced lines when useful, but let the product’s actual message determine the line breaks.
- Use a supporting paragraph around 17–19px with a 1.45–1.6 line-height and a muted grey such as `#a5a7ad`. Keep it to two or three lines and explain the product outcome clearly.
- Use navigation text around 14–15px in `#c7c9cf`; reduce contrast for secondary utility links.
- Button labels should be 15–16px, medium or semibold, and easy to scan.

### Colour, borders, and shape
- Use near-black surfaces between `#0b0d10` and `#111318`.
- Use near-white headline text around `#f3f4f6`.
- Reserve one vivid brand accent for the primary CTA—an electric lime, cyan, orange, or another colour appropriate to the product. For a lime treatment, use approximately `#9cff3b` with dark text such as `#10150b`.
- Add a subtle green, blue, or brand-coloured glow only where it helps connect the background visual to the interface; keep it restrained.
- Use 1px borders around `#25282e` for navigation separators and outlined utility elements.
- Give buttons a compact radius around 4–7px, with a strong filled state and a slightly darker hover state. Use a small arrow or directional affordance only if it fits the brand.
- Keep the visual language crisp and restrained: no excessive gradients, ornamental cards, or decorative clutter.

### Interaction and accessibility
- Make the primary CTA the clearest action in both the navigation and hero. Add a subtle colour or translate transition on hover, approximately 150–200ms.
- If using a background video or animated UI, keep movement slow and low contrast, respect `prefers-reduced-motion`, and never rely on motion to communicate meaning.
- Ensure text and controls meet accessible contrast ratios against the background overlay.
- Provide meaningful alt text for a static product visual, or mark purely decorative imagery appropriately. Give icon-only controls accessible labels.
- Keep navigation links and buttons keyboard accessible with visible focus styles.

## Never
- Never copy the reference’s logos, product names, exact headline, supporting copy, navigation labels, or social-proof numbers.
- Never reuse its specific screenshot, interface artwork, illustration, image, or video.
- Never imitate the exact brand mark or distinctive visual asset; create or use assets appropriate to my product.
- Never allow the background visual to overpower the message, reduce readability, or make the hero feel like a generic template.