## 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/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106561-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106517952-full.webp
- Component on Kage: https://kage.design/component/mock-magic-video-presets-feature-grid

## Before you start
Ask what the user's product is, who it is for, and what its brand and visual identity are. Then apply the principles below to create an original feature-grid section for that product rather than reproducing this reference.

## Design language

Build a compact, three-column feature grid for a dark product website. The section should communicate three related capabilities at a glance and feel calm, premium, and highly scannable.

### Layout and alignment
- Use a centered content container with a maximum width of approximately 1120–1200px.
- Arrange three equal-width columns in a single row on desktop, with generous horizontal gaps of roughly 64–96px.
- Align every column to the same top baseline: icon first, then heading, then supporting copy.
- Keep the content left-aligned within each column.
- Add a thin divider spanning the content width beneath the grid, with roughly 72–88px of space between the copy and divider.
- On smaller screens, collapse to one column or a comfortable two-column layout, preserving consistent vertical spacing and readable line lengths.
- Give the section generous outer padding, approximately 72–104px vertically and 20–32px horizontally.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly strong weight for headings.
- Feature headings should be compact and prominent, around 18–20px, weight 600–700, with tight line-height around 1.2.
- Supporting descriptions should be around 16–17px, weight 400, with a relaxed line-height around 1.55–1.65.
- Limit descriptions to one or two short lines on wide screens; make the wording specific and benefit-oriented.
- Use clear text contrast: bright headings and muted body copy.

### Colour
- Use a near-black background around `#050505` or `#000000`.
- Use primary text around `#F5F5F5`.
- Use secondary text around `#B8B8B8` to `#C4C4C4`.
- Use a subtle divider around `#1C1C1C` or `#242424`.
- Icons should use a light neutral such as `#EDEDED`, with no large coloured fills.
- If a feature includes a small status or plan badge, use a restrained warm accent such as a muted copper/orange background around `#6B3A2E`, a light border around `#B87963`, and cream text around `#FFF1E8`. Keep it secondary to the feature title.

### Icons and badges
- Place a small, simple line icon above each heading, approximately 24–28px square.
- Use icons that semantically match each capability, but choose an icon set appropriate to the user's product.
- Keep strokes light and consistent, roughly 1.5–2px, with rounded joins where supported.
- A small inline badge may sit beside a heading when a capability is gated or premium. Make it pill-like with a 4–6px radius, compact horizontal padding, and uppercase text around 10–11px.

### Spacing and surfaces
- Leave approximately 18–24px between icon and heading.
- Leave approximately 10–14px between heading and description.
- Avoid cards, shadows, gradients, or decorative panels unless they are genuinely needed by the user's brand.
- The open background is intentional: the grid should feel like content placed directly on the page rather than three boxed modules.
- Use a subtle radius of 4–6px only for badges or small controls; the feature items themselves do not need rounded containers.

### Interaction and responsiveness
- This is primarily an informational section, so do not force hover interactions where none are useful.
- If feature items link to deeper product areas, add a gentle hover treatment such as a slight icon colour shift or underline on the heading, while preserving the restrained visual tone.
- Ensure badges, headings, and descriptions wrap cleanly without causing uneven horizontal overflow.
- Maintain accessible contrast, semantic heading structure, keyboard focus states for links, and meaningful labels for icons.

## Never
- Never copy logos, product names, brand names, or proprietary wording from the reference.
- Never reuse the reference's exact feature labels, descriptions, or badge text.
- Never copy its specific icons, illustrations, imagery, or visual assets; create original equivalents suited to the user's product.
- Never turn the section into a literal copy of the reference layout if the user's content or brand requires a better arrangement.
- Never add unnecessary card backgrounds, heavy borders, gradients, or decorative imagery that undermine the quiet feature-grid hierarchy.