## 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/airpods-5/0db86e09-94cf-4830-8c9a-1751c9bb478c-1789106647-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/airpods-5/0db86e09-94cf-4830-8c9a-1751c9bb478c-1789106585230-full.webp
- Component on Kage: https://kage.design/component/airpods-5-feature-grid-5

## Before you start
Ask me what my product is, who it is for, and what its brand and visual identity are. Then apply the principles below to create a version for my product—not a copy of the reference.

## Build a premium feature-grid section
Create a responsive product feature section that explains a product’s performance and supporting capabilities through a clear hierarchy of headline copy, large numeric highlights, and visual support cards.

### Layout and alignment
- Use a wide, centered content container with a maximum width of approximately 800–900px on desktop.
- Begin with a centered introductory block near the top: a short, bold headline followed by a larger supporting sentence or paragraph with a constrained line length.
- Place three benefit/stat columns beneath the introduction in a single row on desktop. Keep each column left-aligned, with equal widths and consistent gaps.
- Each stat should contain a small qualifier, an oversized highlighted value, and a compact explanatory description beneath it.
- Add generous vertical space between the introduction, the stats row, and the supporting cards so each layer reads as a separate information group.
- Finish with two equal-width visual feature cards in a two-column grid. Each card should have a large media area above a short explanatory caption.
- On smaller screens, stack the stats and cards vertically while retaining the same reading order and generous breathing room.
- Align the card captions with their media edges; do not center every element merely for symmetry.

### Typography hierarchy
- Use a clean modern sans-serif, or the product’s existing brand typeface if available.
- Make the introductory headline compact, bold, and highly legible, around 24–30px on desktop.
- Set the supporting introduction in a heavier medium-to-bold weight, around 22–28px, with a muted dark-gray colour and a comfortable line height.
- Use a small bold qualifier above each metric at roughly 16–18px.
- Make the metric value the visual focal point: approximately 42–52px, bold, tight tracking, and a vivid brand-accent colour.
- Set metric descriptions and card captions around 16–18px with a 1.25–1.4 line height. Use bold emphasis selectively for the opening phrase or key product term.
- Keep footnote markers small and raised if the product requires citations, but make them accessible and usable as links.

### Colour and surface treatment
- Start with a clean near-white background, approximately `#FFFFFF` or `#FAFAFA`.
- Use near-black for primary text, approximately `#1D1D1F`.
- Use a softer gray for secondary text, approximately `#6E6E73`.
- Choose one saturated accent colour for the large metrics; a fresh green such as `#18B875` can work, but derive the final colour from the user’s brand.
- Give the visual card media areas a very subtle cool-gray surface, approximately `#F5F5F7`, allowing pale product imagery or interface previews to remain visible without borders.
- Keep colour usage restrained: the accent should identify performance values, not decorate every element.

### Borders, radius, and imagery
- Use little or no visible border around the overall section and stat columns.
- Give media cards a soft corner radius of approximately 14–18px, with overflow clipped so imagery follows the shape.
- Avoid heavy shadows; if separation is needed, use a very subtle shadow such as `0 2px 12px rgba(0,0,0,0.04)`.
- Use simple, high-quality product-detail imagery, abstract material photography, or relevant interface visuals supplied by the user’s product. Keep the subject centered or deliberately positioned with ample negative space.
- Maintain consistent aspect ratios for the two media cards, preferably close to square or slightly taller than wide.

### Interaction and accessibility
- If cards link to deeper product information, make the entire card or its caption area a clear, keyboard-accessible target.
- Add a restrained hover treatment such as a slight image scale, subtle surface shift, or underline on linked text; avoid dramatic motion.
- Respect reduced-motion preferences.
- Ensure the accent colour meets contrast requirements wherever it is used as text, or reserve it for sufficiently large metric text.
- Use semantic headings, descriptive alternative text, logical heading order, and responsive type that remains readable without horizontal scrolling.

### Content behavior
- Write concise, evidence-led benefit statements rather than marketing paragraphs.
- Keep metric values visually short and let the supporting description explain context, conditions, or compatibility.
- Use consistent grammatical structure across all three stats.
- Make the two lower cards complementary: for example, one can explain a standard capability while the other highlights an optional, wireless, premium, or expanded capability.

## Never
- Never use logos, product names, branded marks, or proprietary copy from the reference.
- Never reproduce the exact statistics, claims, wording, footnotes, or product-specific feature descriptions shown in the reference.
- Never copy the reference’s imagery, illustrations, photography, or device renders.
- Never make the result look like a direct clone; adapt the layout principles, hierarchy, spacing, and visual language to the user’s product and brand.
- Never add decorative imagery or UI controls that do not support the feature explanation.