## 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-6.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-feature-grid-3

## Before you start
Ask the user what their product does, who it is for, and what visual brand system they want to use. Then apply the principles below to create an original feature-grid section for that product—not a reproduction of the reference.

## Build this section
Create a full-width feature section for a modern software product, especially one that explains several capabilities around a central workflow. The composition should feel like a confident product-marketing moment: editorial typography on the left, a supporting interface visual on the right, and a stacked feature list that makes one benefit feel primary.

### Layout and alignment
- Use a deep, atmospheric background with a subtle texture, grain, or soft radial glow rather than a flat solid fill.
- Constrain the content to a centered max-width of approximately 1120–1200px with generous horizontal padding of 48–96px on desktop.
- Start with a left-aligned heading spanning roughly 65–75% of the content width. Let it wrap into two lines naturally; do not center it.
- Place a short supporting paragraph below the heading, constrained to approximately 680–760px so it remains readable and editorial.
- Below the introduction, use a two-column layout: a narrow text column around 38–44% wide and a larger visual column around 56–62% wide.
- Align the feature list and product visual to the same horizontal baseline. On smaller screens, stack the feature list above the visual.
- Keep the section spacious: approximately 88–128px top and bottom padding on desktop, reduced to 56–80px on mobile.

### Typography hierarchy
- Use a bold contemporary sans-serif with a slightly tight headline line-height, around 0.95–1.05.
- Set the main heading around 52–72px on desktop, 40–52px on tablet, and 34–42px on mobile. Use a heavy weight such as 700–800.
- Render one meaningful phrase in a saturated brand accent while keeping the remaining heading text near-white. Choose the phrase based on the user's product message.
- Set the supporting paragraph around 20–24px with a 1.35–1.5 line-height and strong contrast.
- Set feature statements around 22–28px with a 1.35–1.45 line-height. The active item should be bright and easy to scan; inactive items should be visibly quieter but still legible.
- If a feature item needs a small label or eyebrow, use 12–14px uppercase or semibold text with increased letter spacing, but avoid adding unnecessary UI chrome.

### Spacing and feature-list behavior
- Separate the heading, paragraph, and feature area with clear vertical rhythm: roughly 28–40px after the heading and 72–112px before the two-column area.
- Stack three feature statements with approximately 28–44px vertical gaps.
- Give each feature statement a slim vertical rule on its left, about 4px wide, with a small gap of 12–16px before the text.
- Make the first feature visually active using brighter text and a two-tone or gradient rule. Dim the other items with muted text and a cooler accent rule.
- If implementing interaction, allow clicking or keyboard navigation on feature items to change the active state and update the adjacent visual. Use a restrained transition of 180–280ms; do not make the section feel like a carousel.
- Preserve clear focus states and ensure the active state is communicated without relying on color alone.

### Colour and atmosphere
- Use a near-black violet background around `#171329` to `#211737`.
- Add a subtle deep-purple glow or noise treatment using tones near `#2B1648`, `#3A1B54`, and low-opacity black; keep it understated so text remains dominant.
- Use near-white text around `#F7F5F2`.
- Use a vivid warm pink/magenta accent around `#E83DAD` to `#F04BB8` for the emphasized headline phrase and key visual detail.
- Use a secondary electric violet around `#7354F6` for inactive feature rules or supporting accents.
- Use a small lime or yellow-green highlight around `#B7D94A` only where it helps distinguish the active state.
- Maintain accessible contrast for all body copy, including inactive feature items; muted does not mean unreadable.

### Visual treatment
- Place an original product interface mockup, diagram, or abstract workflow visualization in the right column. It should illustrate the user's product rather than imitate a specific reference interface.
- Give the visual a dark translucent surface, subtle border, and soft shadow. Use a radius around 14–20px.
- A magnified callout, highlighted region, or overlay can focus attention on the product's most important insight. Use it sparingly and ensure it supports the feature message.
- Keep decorative marks minimal: faint plus signs, grain, or glow are acceptable, but avoid busy illustration layers.
- If no product visual is available, build a convincing structured placeholder from panels, rows, labels, and data blocks rather than inserting generic stock imagery.

### Borders, radius, and responsive behavior
- Use fine borders in low-opacity white or violet, approximately `rgba(255,255,255,0.10–0.16)`.
- Keep corners moderately rounded, generally 14–20px for the main visual and 8–12px for internal cards.
- At widths below roughly 800px, switch to one column, reduce heading size, and make the visual full width.
- On mobile, keep the feature rules and text aligned consistently, avoid excessive horizontal padding, and ensure the product visual does not overflow the viewport.
- Respect reduced-motion preferences by disabling animated glows, state transitions, and visual movement when requested.

## Never
- Never copy the reference's logos, product names, brand marks, or proprietary interface text.
- Never reuse the reference's exact headline, feature copy, imagery, screenshots, illustrations, or decorative artwork.
- Never make the component look like a pixel-perfect clone; translate the layout and design principles into the user's own product and brand.
- Never rely on low-contrast muted text, color-only state changes, or inaccessible hover-only interactions.
- Never use imagery or placeholder content that implies capabilities the user's product does not have.