## 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/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074882-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074849550-full.webp
- Component on Kage: https://kage.design/component/inngest-feature-grid

# Before you start
Ask what the user's product is, who it is for, and what visual brand it uses. Then apply the principles below to create an original feature section for that product—not a copy of the reference.

## Goal
Build a dark, high-confidence feature section that explains why the product is durable, reliable, or technically capable. Combine a strong positioning statement, explanatory body copy, a product UI preview or demo area, and a scannable grid of six supporting capabilities.

## Design language

### Layout and alignment
- Use a full-width section with a centered content container, approximately 1180–1240px wide.
- Place the section on a near-black charcoal background with a subtle grain, noise, or soft tonal variation if appropriate; keep it understated.
- Add a thin, low-contrast border around the main panel or section perimeter, with slightly rounded corners around 4–8px.
- Begin with a large all-caps or strongly editorial headline aligned to the left. Keep it on one line at wide desktop widths when possible, but allow natural wrapping on smaller screens.
- Under the headline, use a two-column composition: explanatory copy on the left and a wide product screenshot, dashboard preview, or video frame on the right. The copy should occupy roughly 33–38% of the row and the media 62–67%.
- Below that row, place six feature items in a three-column grid with two rows. Align each item to the same left edge within its column.
- On tablet, reduce the media width and preserve the two-column structure where practical. On mobile, stack copy above media and switch the feature grid to one column or two narrow columns depending on readability.
- Keep the section internally spacious: approximately 64–80px horizontal padding and 56–72px vertical padding on desktop, reducing proportionally on mobile.

### Typography hierarchy
- Use a clean modern grotesk or system sans-serif with a technical, contemporary feel.
- The main statement should be large, light-to-regular weight, uppercase or visually emphatic, around 52–60px desktop with tight line-height around 0.98–1.05.
- Body copy should be 17–19px with a 1.5–1.65 line-height and a muted light-gray tone. Break it into two short paragraphs when a second idea needs emphasis.
- Feature titles should be 28–32px, medium weight, and use normal capitalization. Keep titles short, generally one or two words.
- Feature descriptions should be 16–17px with a 1.5 line-height and a softer gray than the headline.
- Avoid excessive bolding, gradients in text, or dense technical jargon. Let spacing create hierarchy.

### Colour
- Main background: approximately #1D1D1D to #222222.
- Panel variation or media surround: approximately #202020–#262626.
- Primary text: approximately #F3F3F3.
- Secondary body text: approximately #B8B8B8.
- Tertiary text and icon strokes: approximately #858585–#9A9A9A.
- Dividers and borders: approximately rgba(255,255,255,0.14) or #3A3A3A.
- If the product brand has an accent colour, use it sparingly for one small status detail, media control, or hover state; do not turn the section into a colourful marketing panel.

### Media treatment
- Use a realistic product interface preview, animated demo, or product-specific visual rather than decorative imagery.
- Frame the media with a thin dark border, 4–8px radius, and a subtle shadow or inset highlight so it feels embedded in the panel.
- Preserve enough interface detail to communicate credibility, but avoid making tiny text essential to understanding the section.
- If the product has no suitable UI, create a restrained abstract data or workflow preview using the product's own visual language.
- Include visible controls only when they are meaningful. If the preview is interactive, support play/pause, keyboard focus, and reduced-motion preferences.

### Feature grid and icons
- Use six capabilities that explain distinct mechanisms or outcomes, not six variations of the same claim.
- Each item begins with a small monochrome line icon or geometric symbol, followed by the title on the same horizontal row.
- Keep icons around 26–34px, with thin strokes and subtle technical geometry. Use original or generic symbols rather than recognizable third-party marks.
- Add 16–22px between the icon/title row and its description.
- Use 42–56px row gaps and 32–48px column gaps so the grid feels airy rather than card-heavy.
- Do not place every feature in a separate bordered card. The open grid should feel like one coherent system.
- On hover, a feature may slightly brighten its icon and title or reveal a very subtle accent line; keep motion under 180ms and avoid distracting transformations.

### Interaction and accessibility
- Make the media responsive and keep its aspect ratio intact.
- Ensure text and controls meet accessible contrast requirements against the charcoal background.
- Use semantic headings and a logical reading order: section statement, supporting copy, media, then feature list.
- If feature items are clickable, make the entire item keyboard accessible with a clear focus ring. If they are informational only, do not imply clickability.
- Respect `prefers-reduced-motion`; avoid autoplaying motion or provide a static fallback.

## Never
- Never reuse logos, product names, brand marks, or proprietary interface details from the reference.
- Never copy the reference headline, feature names, descriptions, or any other wording.
- Never reproduce the reference screenshot, dashboard, video frame, icons, illustrations, or imagery.
- Never make the result a pixel-for-pixel recreation; adapt the structure and principles to the user's product and brand.
- Never add decorative complexity that competes with the product explanation or sacrifices readability.