## 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/stripe-com/f883ce83-9776-477f-9170-0bb4400c0ec7-1789067511-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/stripe-com/f883ce83-9776-477f-9170-0bb4400c0ec7-1789060217-full.webp
- Component on Kage: https://kage.design/component/stripe-hero

# Build a distinctive product hero inspired by this reference

## 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—do not reproduce the reference literally.

## Goal
Create a responsive homepage hero for a modern software or infrastructure product. The section should communicate a broad business outcome quickly, offer a clear primary conversion path, provide a lower-friction secondary action, and reinforce trust with a compact customer-proof strip.

## Design language

### Layout and alignment
- Use a clean, full-width page with a slim top navigation and a large hero area beneath it.
- Keep the main content in a centered container, approximately 1080–1160px wide on desktop.
- Align the hero copy to the left, with the text block occupying roughly 60–70% of the available width.
- Give the hero generous top and bottom whitespace; use approximately 72–88px vertical padding on desktop.
- Place an abstract decorative colour field in the upper-right and right edge of the hero. It may extend beyond the viewport and crop naturally, but must remain behind the content.
- Finish the hero with a bordered customer-proof row containing several evenly distributed names or neutral customer labels. On mobile, allow horizontal scrolling or wrap the items cleanly.
- On smaller screens, collapse the navigation into a compact menu, stack the actions, reduce the decorative field, and keep the headline comfortably within the viewport.

### Typography hierarchy
- Use a modern sans-serif with a crisp, editorial feel; choose a similar licensed/system alternative rather than relying on a specific brand font.
- The headline should be very large and compact: approximately 42–52px on desktop, 1.05–1.12 line-height, with slight negative tracking. Reduce to approximately 34–40px on mobile.
- Use a short eyebrow or metric line above the headline at approximately 13–15px, medium weight.
- Write the headline as two to four lines of outcome-oriented messaging. Use a mostly dark ink colour, with an optional restrained secondary colour on one phrase or line for emphasis.
- Keep supporting copy minimal or omit it if the headline already explains the value clearly.
- Use 14–16px labels for buttons and navigation, with strong contrast and medium-to-semibold weight.

### Colour
- Use a near-white background around `#FAFBFC` or `#FFFFFF`.
- Use deep navy/ink for primary text around `#0A1733`.
- Use a vivid blue-violet primary action around `#5140E8` or `#5542F5`, with a darker hover state around `#3D2CC7`.
- If highlighting part of the headline, use a muted blue-violet or slate accent around `#536D91`; keep it readable and avoid gradients in small text.
- Create the decorative background as an original abstract sweep using broad, soft-edged bands of violet, magenta, coral, orange, and pale blue. Keep it low-detail and non-representational, with enough opacity and contrast to feel energetic without reducing text legibility.
- Use subtle divider lines around `#E3E7EC` and muted secondary text around `#5D6878`.

### Borders, buttons, and radius
- Use 1px neutral borders for the navigation boundary, secondary button, and proof rail.
- Keep corners modest: approximately 3–6px radius for controls and panels. Avoid overly rounded pills.
- Make the primary button solid, compact, and visually dominant, with a small directional cue such as an arrow or chevron.
- Make the secondary action white or transparent with a thin border and an optional provider/icon treatment only when appropriate to the user's product.
- Give buttons approximately 12–16px horizontal padding and 10–13px vertical padding.
- Provide visible hover, focus, and keyboard states; do not rely on colour alone.

### Interaction and accessibility
- Navigation dropdowns should open on click or keyboard activation, not hover alone, and must close on Escape.
- Buttons should have clear focus rings and meet accessible contrast requirements.
- Keep the decorative artwork marked as presentational so it does not interfere with screen readers.
- Ensure the complete hero remains useful with JavaScript disabled or if the decorative artwork fails to load.
- Preserve a logical reading order: eyebrow, headline, actions, then customer proof.

## Never
- Never copy the reference site's logos, product names, navigation labels, customer names, or marketing copy.
- Never use the reference brand identity as if it belonged to the user's product.
- Never reproduce the decorative artwork exactly; create a new abstract composition using the user's brand palette.
- Never include copied illustrations, imagery, icons, or provider marks from the reference.
- Never sacrifice headline readability, responsive behaviour, or accessibility for visual similarity.