## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sentry-io/7f1d8e63-d1c6-4f27-8b0e-be764e2f10af-1789073848-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sentry-io/7f1d8e63-d1c6-4f27-8b0e-be764e2f10af-1789073668428.webp
- Design on Kage: https://kage.design/designs/sentry-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, logo, colours, typeface). Wait for the answers before writing any code — everything below is applied to their product, not to the reference site.

## Page structure
1. **Sticky top nav** — logo left; dropdown menu items, two plain links, a Sign In link, an outlined secondary CTA pill and a solid light CTA pill on the right. Thin bottom border or no border over the dark background.
2. **Announcement pill** — small rounded chip centered above the hero with a short product announcement and a link.
3. **Hero** — oversized centered headline with one word coloured in the accent pink, a deadpan two-line subhead, and two CTAs (solid accent + outlined). Below it, an illustrated mascot scene flanked left and right by floating dark UI cards: real product surfaces (replay players, traces, an AI reasoning panel with green progress bars).
4. **Logo band** — single row of 5–6 recognisable customer logos in muted grey, separated from the hero by whitespace.
5. **Feature statement + 2×2 card grid** — big two-line heading (white line, accent line), then four dark cards each with a thin gold border, rounded corners, and a small embedded mockup (terminal, AI panel, agent trace, chat). Each card gets a bold caption and a 1–2 sentence paragraph beneath it with inline underlined links.
6. **Capability split section** — big statement heading, a one-line thesis with underlined keywords, then left column: a short "Issue → Context → Fix" line plus three steps with 2px coloured left-border rules; right column: a dark product screenshot with a hand-drawn pink ring highlighting the key UI element.
7. **AI/context split section** — same layout with the heading's second line in accent pink, three left-ruled paragraphs on the left, screenshot with pink highlight ring on the right.
8. **Testimonial trio** — heading (second line accent), then three quotes in an offset/uneven grid, each with a small avatar chip, name, and title/company line.
9. **Quick start block** — heading (second line accent), short subhead, a dropdown to pick a framework, and a dark terminal window with a copyable install command, flanked by two small cartoon characters.
10. **Trust section** — heading, one short paragraph, a row of 4–5 compliance/security badges (drawn as monochrome marks), and two outlined buttons (policy, contact).
11. **Newsletter section** — heading (second line accent), a bordered card with email label, input, consent checkbox with small legal text, and a sign-up button; a retro illustration anchored to the right.
12. **Closing CTA** — giant two-word heading, one centered paragraph, two buttons (solid accent, outlined).
13. **Footer** — four link columns with uppercase column titles and many small links, a hand-drawn squiggle divider, legal links, small logo mark, social icons, and a copyright line.

## Design language
- **Background:** deep purple-black starfield. Base ≈ #1b1038, darker section bands ≈ #120b26, with tiny scattered star/sparkle dots at low opacity. Never pure flat black.
- **Accent system:** one hot pink accent ≈ #f0568f for headline emphasis, left-border rules, primary buttons and drawn highlight rings; lime green ≈ #c4e34a reserved for data/AI progress bars inside mockups; gold ≈ #e8a83c thin 1px borders on cards; purple ≈ #7a5af8 for illustration fills and secondary UI. Accents never exceed two per component.
- **Headline pattern:** every section heading repeats the same move — first line in white, second line in the accent pink, set in a chunky rounded grotesque. Hero ≈ 72–96px, section headings ≈ 44–56px, tight line-height (~1.05) and sentence-style punctuation.
- **Body type:** 16–18px lavender-grey ≈ #b9b3d1 for paragraphs; white for captions and card titles; monospace face for terminals, code and command text.
- **Cards & mockups:** near-black panels (≈ #17102e) with 14–16px radius, 1px gold border, no drop shadows; each card embeds a miniature, simplified product UI so proof lives inside the layout rather than beside it.
- **Buttons:** fully rounded pills. Solid accent pink with white text as primary; 1px white/grey outlined transparent pill as secondary; small uppercase or semi-bold labels.
- **Steps and lists:** three-step explanations use 2–3px coloured left-border rules (pink) with 8–12px padding, muted text for less important steps so hierarchy reads instantly.
- **Illustration:** retro-futuristic flat cartoon style in the brand palette (purple base, orange and pink pops), used sparingly — hero mascot, two quick-start characters, one newsletter illustration. Keep it decorative, never load-bearing.
- **Rhythm down the page:** dense proof-heavy blocks (card grid, split sections) alternate with airy breathing room (logo band, testimonials); utility sections (terminal, badges, newsletter) compress vertical padding before the loud closing CTA.
- **Highlight rings:** overlay imperfect, hand-drawn pink circle strokes on screenshots to point at the important element instead of arrows or callout boxes.
- **Motion:** minimal — hover colour/underline shifts on links and buttons, subtle float on hero UI cards; no large scroll animations required.

## Never
No logos, wordmarks, product names, copy, mascot illustrations, starfield artwork or icon sets from the reference. Do not reuse its customer names, testimonial quotes, or compliance badge designs. Never present the result as that product — apply this design language to the user's own brand.