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

## Before you start
Ask what the user's product is, who it is for, and what visual brand language it uses. Then apply the principles below to create an original feature-highlights section for that product—do not reproduce the reference literally.

## Build this section
Create a premium, media-led feature grid or horizontal carousel that introduces the most important product benefits. The section should feel like an editorial product story: calm, spacious, highly legible, and visually confident.

### Layout and alignment
- Use a white or near-white section background with generous vertical breathing room.
- Constrain the main content to a wide responsive container, approximately 1120–1280px on desktop, with 64–80px side gutters.
- Place a compact media control row above the heading, centered or aligned to the content system. Include a circular play control and a pill-shaped progress/navigation control only if the product has a relevant film, demo, or walkthrough.
- Put the section heading and an optional text link on one horizontal row: heading aligned left, link aligned right. On smaller screens, stack them while preserving clear hierarchy.
- Below the header, use a horizontal carousel of large cards. Show one dominant card and a narrow slice of the next card on desktop to suggest additional content. On mobile, allow cards to snap into view one at a time with horizontal touch scrolling.
- Make the feature card wide and tall enough for its media to feel immersive; use an approximate desktop aspect ratio between 1.45:1 and 1.8:1.
- Keep text over the media in a safe upper-left region with generous inset padding, approximately 40–48px desktop and 24px mobile. Ensure the copy remains readable over every image using a subtle gradient or controlled image treatment.

### Typography
- Use a modern neutral sans-serif or the user's brand typeface.
- Make the section heading large and compact: approximately 52–64px desktop, 36–44px mobile, with a tight line-height around 0.98–1.05 and slightly negative tracking.
- Feature titles should be bold and concise, around 24–30px desktop and 20–24px mobile, with a 1.05–1.15 line-height.
- Keep supporting copy minimal. Use sentence case and avoid dense paragraphs.
- Links should be visually distinct but quiet, using medium weight and an optional small directional or play icon.

### Colour and media treatment
- Use a clean background around #FFFFFF or #F7F7F8 and primary text around #1D1D1F.
- Let each card have its own product-relevant visual colour or image treatment rather than forcing every card into one palette.
- For dark media, use light text around #F5F7FA; for light media, use dark text around #1D1D1F.
- Add a restrained overlay gradient where needed, such as transparent to rgba(0,0,0,0.28), without making the artwork muddy.
- Use an accent link colour that fits the user's brand; a cool blue around #0066A1 is an appropriate neutral starting point.

### Borders, radius, and depth
- Use large rounded corners on feature cards, approximately 24–32px desktop and 18–24px mobile.
- Avoid visible card borders when the media already provides separation. If needed, use a subtle border such as rgba(0,0,0,0.08).
- Keep shadows extremely soft or omit them entirely; the premium feel should come from whitespace, scale, and image quality.
- Style the play button as a light circular control with a subtle #F1F1F3 fill, dark icon, and a clear hover state. Style progress controls as a light pill with small circular indicators and one elongated active indicator.

### Interaction and accessibility
- Make carousel controls keyboard accessible and provide clear focus rings.
- Support previous/next controls, swipe gestures, and optional scroll snapping. Do not rely on the partially visible card alone as the navigation affordance.
- Pause or mute motion by default; if media plays, respect reduced-motion preferences and provide an accessible label.
- Ensure text contrast meets WCAG standards and provide meaningful alt text for informative imagery.
- On hover, use restrained motion such as a subtle image scale of 1.02 or a slight link colour shift; avoid dramatic animations.

## Never
- Never use logos, product names, branded marks, or copy from the reference.
- Never copy the reference imagery, people, compositions, illustrations, or photography.
- Never recreate the exact card text, dimensions, carousel count, or visual assets.
- Never assume the user's product is a consumer electronics product; adapt the content, media, controls, and tone to their product and brand.
- Never sacrifice readability, responsiveness, keyboard access, or reduced-motion support for visual similarity.