## 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-1789073902-1.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

# Build a dark, immersive product hero section

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and visual assets are. Then apply the principles below to my product rather than reproducing the reference literally. If I have no suitable artwork, propose a product-specific abstract visual system or use clearly labelled placeholders that can be replaced later.

## Goal
Create a responsive above-the-fold hero for a developer-focused software product. It should communicate one sharp value proposition immediately, support it with a concise explanation, offer two clear conversion paths, and use a rich visual field below the copy to suggest the product in action.

## Structure and layout
- Use a full-width, deep dark section with a minimum desktop height around 760–900px; allow the content to extend naturally on smaller screens.
- Keep the navigation separate from the hero message but visually integrated: a compact horizontal header at the top, with primary links, one outlined secondary action, and one filled primary action. Collapse it into a mobile menu at narrow widths.
- Center the hero content on the page with a max-width around 1050–1180px.
- Place a small announcement badge above the headline. It should be centered, compact, and readable as an optional promotional or product-update link.
- Use a large headline of roughly 72–96px on desktop, 48–64px on tablet, and 40–52px on mobile. Keep the line length controlled and use a confident, tight line-height around 0.95–1.05.
- Emphasize one meaningful phrase in the headline with a contrasting accent colour, slight rotation or irregular baseline, or another restrained typographic gesture. Keep the rest of the headline neutral and highly legible.
- Add a centered supporting paragraph beneath the headline, approximately 18–28px on desktop, with a maximum width around 650–760px and a relaxed line-height.
- Place two horizontally aligned CTAs beneath the paragraph. On mobile, stack or wrap them while preserving a clear primary-versus-secondary distinction.
- Reserve the lower third or half of the hero for a visual composition: abstract product panels, UI fragments, data traces, or custom artwork arranged around a central focal element. Let some elements crop at the viewport edges to create depth, but never obscure the headline or CTAs.
- Use layered positioning, glow, grain, and soft overlap to make the visual feel atmospheric rather than like a flat screenshot collage. Keep the visual secondary to the message.

## Design language

### Colour
- Page background: deep ink purple, approximately `#1E142F` to `#241736`.
- Main text: warm white, approximately `#F8F7F4`.
- Secondary text: muted lavender-white, approximately `#D8D1E3`.
- Accent: vivid pink or magenta, approximately `#F03B9D` to `#FF4FA8`.
- Announcement badge: medium violet gradient or solid violet, approximately `#6854C9` to `#8068D8`.
- Primary button: warm white background with near-black text.
- Secondary button: transparent dark surface with a pink-lavender border.
- Supporting visual accents may use electric violet, cyan, lime, and hot pink, but keep them concentrated in the lower artwork.
- Add a subtle radial purple glow behind the visual composition and a low-contrast grain/noise layer over the background. The texture must not reduce text contrast.

### Typography
- Use a modern grotesk or geometric sans-serif with strong weights and clean numerals.
- Navigation and buttons should be uppercase or compact title case, bold, and approximately 13–15px with modest letter spacing.
- The headline should be heavy, tightly tracked, and visually dominant. Avoid excessive all-caps for the main statement.
- Supporting copy should use regular or medium weight and a generous line-height.
- Keep the typographic hierarchy obvious: announcement < navigation/actions < supporting copy < headline.

### Spacing and alignment
- Use a 12-column desktop grid and a centered content container with generous horizontal gutters, around 32–64px depending on viewport size.
- Header height should feel compact, approximately 72–88px.
- Use around 28–40px between the announcement badge and headline, 22–32px between headline and paragraph, and 36–52px between paragraph and CTAs.
- Use consistent button padding around 14–18px vertically and 22–28px horizontally.
- Align the main copy to the center; use the visual composition to create asymmetry below it.

### Surfaces, borders, and radius
- Use subtle translucent panels in the artwork with backgrounds around `rgba(54, 39, 100, 0.75)` and borders around `rgba(150, 121, 255, 0.24)`.
- Use 8–12px radius for buttons and announcement elements; use larger 12–20px radii for floating product cards.
- Borders should be thin and low contrast except for the secondary CTA, which needs a clear accent outline.
- Add restrained shadows and violet glows to floating panels; avoid generic white cards on the dark hero.

## Interaction and responsive behaviour
- Buttons should have clear hover, focus, and pressed states: slight lift or brightness increase, stronger border contrast, and a visible keyboard focus ring.
- The announcement badge may behave as a link with a subtle background or arrow transition on hover.
- If the visual uses animated elements, keep motion slow and ambient: drifting glow, subtle grain, or gently moving data lines. Respect `prefers-reduced-motion` and disable nonessential animation when requested.
- On mobile, reduce the background artwork density, move the focal visual below the CTAs, and prevent decorative panels from creating horizontal overflow.
- Preserve strong contrast and readable tap targets of at least 44px.

## Content guidance
- Write a short, specific headline that states the product outcome rather than a generic category.
- Highlight one phrase that carries the emotional or memorable hook.
- Keep the supporting statement to one or two lines where possible.
- Make the primary CTA the lowest-friction next step and the secondary CTA useful for prospects who need more confidence.

## Never
- Never use the reference company's logo, name, product names, exact copy, navigation labels, or CTA wording.
- Never copy the reference illustration, characters, screenshots, UI panels, decorative marks, or imagery.
- Never reproduce the exact headline treatment, artwork composition, or visual assets; create a new system suited to my product and brand.
- Never let decorative texture, animation, or imagery reduce readability or distract from the main conversion action.
- Never rely on imagery alone to explain the product; the core value proposition must work without it.