## 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/sentry-io/7f1d8e63-d1c6-4f27-8b0e-be764e2f10af-1789073904-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sentry-io/7f1d8e63-d1c6-4f27-8b0e-be764e2f10af-1789073848-full.webp
- Component on Kage: https://kage.design/component/sentry-hero-2

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Apply the principles below to their product and brand rather than reproducing the reference.

## Build a connected-product hero section
Create a responsive website hero for a technical software product. The section should feel confident, editorial, and high contrast, with a concise message about bringing multiple parts of a workflow together.

### Content structure
- Use a short two-line headline aligned to the left. Keep the first line neutral and bright; make the key connective or outcome-oriented word/phrase the accent colour.
- Place a short supporting paragraph beneath it, roughly two to three lines on desktop. It may include a few inline underlined links or emphasized terms, but use the user’s own terminology and copy.
- Add a compact outcome statement or directional line below the paragraph, such as a sequence of workflow stages separated by arrows. Keep it text-led rather than turning it into a row of cards.
- Optionally place a cropped, low-emphasis product UI preview along the lower edge of the hero. It should suggest the product in use without becoming the primary focal point.

### Layout and alignment
- Use a full-width hero with a generous minimum height, approximately 560–720px on desktop.
- Keep content in a centered max-width container, around 1080–1200px, with generous horizontal padding.
- Align all text to the same left edge. On desktop, constrain the copy block to approximately 700–800px so the headline remains dominant and readable.
- Position the UI preview or atmospheric detail toward the bottom, allowing it to be partially cropped by the viewport. Do not let it disrupt the text hierarchy.
- On mobile, reduce the hero height, stack content naturally, preserve the left alignment, and either simplify or hide the preview if it harms readability.

### Typography
- Use a modern, bold sans-serif with strong letterforms and excellent rendering at large sizes.
- Set the headline around 56–72px on desktop with a tight line-height of roughly 0.95–1.05 and slightly negative tracking. Use approximately 36–48px on mobile.
- Set supporting copy around 22–26px on desktop, with a 1.25–1.35 line-height and a maximum width that avoids long lines. Use 18–20px on mobile.
- Make the lower outcome statement bold and compact, around 22–26px desktop.
- Ensure the accent headline word has the same weight and scale as the neutral line; colour, not size, should distinguish it.

### Colour and atmosphere
- Use a near-black plum or charcoal background, approximately `#151022` to `#1B132B`.
- Use warm white text around `#F7F5F2`.
- Choose one vivid brand accent for the highlighted headline phrase, such as a saturated pink, coral, lime, cyan, or violet. A pink example is approximately `#F238A8`, but adapt it to the user’s brand.
- Add a very subtle radial or linear atmospheric gradient behind the copy, using a darker violet or the chosen accent at low opacity. The background should remain mostly dark and calm.
- If adding texture, use extremely faint abstract noise, glow, or barely visible interface detail. It must support depth, not look decorative or noisy.

### Spacing, borders, and radius
- Use a generous top offset, approximately 96–140px on desktop, so the hero feels spacious.
- Keep 28–40px between the headline and supporting paragraph, 56–88px between the paragraph and the outcome line, and at least 24px between major elements on mobile.
- Avoid visible card containers around the main copy.
- If the UI preview includes panels, use subtle 1px borders around `rgba(255,255,255,0.10)`, dark translucent surfaces, and modest 8–14px corner radii.
- Do not overuse rounded pills or decorative borders; the composition should feel sharp and editorial.

### Interaction and responsive behaviour
- Underlined inline links should have a clear hover state: brighter colour, accent tint, or a slightly thicker underline.
- If the hero includes a background glow or preview, keep motion slow and restrained—subtle opacity or translation only, respecting `prefers-reduced-motion`.
- Preserve strong contrast and keyboard focus states for every interactive element.
- Make sure the headline wraps intentionally at sensible phrase boundaries and does not collide with the preview.

### Never
- Never use the reference company’s logos, product names, brand names, or exact copy.
- Never copy the reference layout so literally that it becomes a visual replica; reinterpret the hierarchy for the user’s product.
- Never reuse its illustrations, imagery, screenshots, UI content, icons, or decorative marks.
- Never add generic stock imagery or unrelated illustrations just to fill space.
- Never sacrifice readability for atmospheric effects, oversized type, or a cropped interface preview.