## 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-5.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-2

## Before you start
Ask me what my product does, who it is for, and what visual brand it uses. Then apply the principles below to create an original feature-grid section for my product—not a copy of the reference.

## Goal
Build a responsive feature section that explains a product workflow as a progression from an initial problem to useful context and finally to an outcome or fix. The composition should feel editorial and immersive: a text-led sequence on the left, paired with one large product UI, dashboard, or abstract interface preview on the right.

## Design language

### Layout and alignment
- Use a full-width dark section with a centered content container, approximately 1120–1240px wide.
- On desktop, use a two-column grid: roughly 40% text and 60% visual media, with a 56–88px gap. Align both columns near the top, but allow the media panel to extend lower than the text sequence.
- Place a short, prominent workflow statement above the feature list, using a three-step progression separated by arrows or other restrained directional cues.
- Stack three feature statements vertically beneath it. Each item should have a narrow vertical accent rail on its left and comfortable inset padding, around 14–18px.
- Make the first item the active state: bright text and a warm multicolor accent rail. The following items should be visibly quieter, using lower-contrast text and cool violet rails. If the section is interactive, support selecting an item to update the media panel; otherwise preserve the hierarchy as a static narrative.
- Keep the next section partially discoverable below the fold with generous bottom space, so the feature area feels like part of a larger product story rather than an isolated card.
- On smaller screens, switch to one column. Put the media preview below the feature list, reduce decorative empty space, and preserve clear reading order.

### Typography hierarchy
- Use a modern sans-serif with a slightly technical, confident character.
- The workflow statement should be bold and compact, around 22–26px desktop with tight line height.
- Feature copy should be large and highly legible, around 22–28px desktop with a 1.3–1.45 line height. Keep each item to two or three short lines when possible.
- Use strong weight contrast rather than many font sizes. Active copy can be near-white; inactive copy should be muted but still readable.
- Any continuation heading below this section should be oversized and bold, around 52–72px, with deliberate line wrapping and a clear editorial rhythm.

### Colour
- Use a near-black blue-violet background, approximately #171329 or #1B1430.
- Use warm white for primary text, approximately #F7F5F2.
- Use muted lavender-gray for inactive text, approximately #898296, while maintaining accessible contrast.
- Use violet and electric purple accents, approximately #7C4DFF, #9B4DFF, and #C34DDB.
- For the active rail, blend a small vertical gradient from pink/coral near the top into lime/chartreuse near the bottom, approximately #EC5A9B → #B9DB45.
- Add extremely subtle blue-purple atmospheric texture or glow in the background, but keep it restrained and avoid distracting from the content.

### Media panel
- Build a large rounded product-preview frame on the right, around 14–18px radius, with a dark charcoal surface and a thin, low-contrast border around #322A49.
- The preview can show an original dashboard, timeline, analytics view, code surface, or other product-relevant interface. Use plausible placeholder data and neutral labels generated for the user's product.
- Add one clear visual focal point inside the preview, such as a highlighted region, magnified detail, trace line, spotlight, or selected state. It should communicate “investigation reveals context” without becoming a literal illustration.
- Use restrained shadows and a soft violet glow around the focal point. Keep controls, charts, and labels subordinate to the feature narrative.
- Preserve the preview's aspect ratio and crop gracefully on mobile; never let it become too small to understand.

### Borders, radius, and spacing
- Prefer thin 1px borders with low-opacity violet-gray rather than heavy card outlines.
- Use 16px or 18px corner radii for the media frame and 8–12px radii for internal interface elements.
- Use an 8px spacing base. Typical values: 24px between workflow statement and list, 28–40px between feature items, and 80–128px vertical section padding depending on viewport height.
- Avoid enclosing every feature in a separate card. The rails, typography, and whitespace should create the grid.

### Interaction and motion
- If feature items are selectable, make the entire item a clear interactive target with keyboard focus styling. Update the media preview with a short fade or crossfade, not a distracting animation.
- The active rail may animate its gradient or height subtly, but avoid pulsing effects.
- On hover, slightly brighten inactive text and reveal a restrained pointer or border cue. Respect reduced-motion preferences.
- Do not make the section depend on autoplay video; it must communicate effectively as a static composition.

## Content guidance
- Write concise, product-specific statements that move from an observable issue, to the missing context, to the action or resolution.
- Use the user's terminology and brand voice after asking for it. Avoid generic filler and avoid making every item the same length.
- Keep the workflow headline distinct from the three feature statements so the hierarchy is immediately scannable.

## Never
- Never use logos, product names, trademarked marks, or branded UI from the reference.
- Never reuse the reference's exact copy, phrases, labels, or narrative wording.
- Never copy the reference layout pixel-for-pixel; adapt the principles to the user's product and brand.
- Never use the reference's screenshots, illustrations, imagery, or media assets.
- Never make the section a collection of generic equal cards that removes the active/inactive narrative hierarchy.
- Never sacrifice contrast, keyboard access, responsive behavior, or reduced-motion support for visual similarity.