## 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/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073823-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073774-full.webp
- Component on Kage: https://kage.design/component/bun-feature-grid-2

# Build a production-proof feature grid

## Before you start
Ask me what my product is, who it serves, and what its brand personality, colours, and typography are. Then apply the principles below to create an original version for my product rather than reproducing the reference.

## Goal
Create a feature-grid section that presents credible customer or use-case proof. It should feel editorial, technical, direct, and highly scannable: a section label and bold heading establish the theme, a short paragraph supplies context, and a row of three cards gives each story a visual entry point, quote-like headline, supporting detail, and action.

## Layout and alignment
- Use a full-width section on a white or very lightly tinted background, separated from adjacent content by a thin horizontal rule.
- Constrain content to a centred max-width of approximately 1135–1200px, with generous horizontal gutters that reduce smoothly on smaller screens.
- Stack the intro content vertically: a compact eyebrow, a large heading, then a readable paragraph with a deliberately narrow measure of roughly 500–560px.
- Leave generous space between the intro and the card grid; the section should feel calm rather than densely packed.
- Use a three-column grid on desktop with equal-width cards and consistent gaps of approximately 24px.
- Collapse to two columns on medium screens and one column on small screens. Preserve the same card order and readable spacing.
- Align all card content to a consistent outer edge. Let cards have natural content height, but keep media ratios and internal padding consistent.

## Typography hierarchy
- Use a compact uppercase eyebrow in a monospaced or technical sans-serif style, around 11–12px, with increased letter spacing. Pair it with a small bright accent square or dot.
- Use a heavy, condensed-feeling display sans-serif for the section heading, around 64–76px desktop with tight line-height and slightly negative tracking. Scale it down substantially on mobile without losing impact.
- Set the intro paragraph in a neutral sans-serif around 18–20px with a 1.45–1.6 line-height and a muted dark-gray colour.
- In each card, use a small uppercase category label, a bold 20–24px headline, and a 15–17px supporting paragraph with relaxed line-height.
- Keep card metadata over media compact and legible: person name should be semibold, role and company should be smaller and lower contrast.
- Use sentence case for headlines and button labels. Avoid excessive capitalization outside the eyebrow and category label.

## Colour and visual language
- Start with a near-white background such as #FFFFFF or #FAFAFA.
- Use near-black for primary text and controls, approximately #0A0A0A or #111111.
- Use a soft neutral gray for secondary text, approximately #5F5F5F or #666666.
- Introduce one vivid brand accent for the eyebrow marker and selected actions, such as hot pink #F2298B, electric blue, lime, or another colour derived from the user's brand. Use it sparingly.
- Media thumbnails may use real product/customer imagery or a product UI preview supplied by the user. Add a subtle dark gradient at the bottom so overlaid metadata remains readable.
- Do not make every element colourful; the contrast between monochrome structure and one accent creates the editorial feel.

## Borders, surfaces, and radius
- Give each card a thin neutral border, approximately 1px solid #D8D8D8.
- Use square or very slightly rounded corners, around 0–3px, for a crisp technical character.
- Keep the media area flush with the card's top edge and use a consistent aspect ratio around 16:9.
- Separate the media region from the text region with the card border or a subtle divider.
- Use a white card surface against the page background; avoid heavy shadows and glassmorphism.

## Card structure and interaction
- Each card should contain: media thumbnail, optional central circular play control, overlaid person/testimonial metadata, category label, bold proof headline, supporting explanation, and a bottom action button.
- If video is available, use a large white circular play button with a dark triangular icon. On hover, slightly scale the thumbnail or play control and increase contrast without becoming distracting.
- Make the whole card or its primary action link accessible and keyboard focusable. Provide visible focus styling using the brand accent.
- Buttons should be solid near-black with white text and a simple right arrow; use the accent colour for one clearly prioritised action when appropriate.
- Keep button sizing compact but comfortable, with approximately 14–16px horizontal padding and a minimum 44px touch target.
- Add subtle hover transitions: border darkening, a small media zoom, and arrow movement of 2–4px. Respect reduced-motion preferences.
- Use real semantic headings, lists where appropriate, alt text for media, and captions or labels that make the testimonial context clear.

## Responsive behaviour
- On mobile, reduce section padding and heading size while keeping a clear gap between intro and cards.
- Make cards full width with media still maintaining its aspect ratio.
- Ensure metadata overlays do not collide with the play control; reposition or simplify them when space is tight.
- Keep buttons easy to tap and avoid relying on hover to reveal essential information.

## Content guidance
- Use original customer stories, implementation examples, or measurable outcomes relevant to the user's product.
- Give each card a distinct category and a specific, outcome-oriented headline.
- Keep the introduction concise and use the cards to provide detail.

## Never
- Never copy logos, product names, customer names, labels, headlines, body copy, button text, or other wording from the reference.
- Never reuse the reference's exact video stills, photographs, illustrations, or imagery.
- Never make a pixel-for-pixel replica; adapt the structure to the user's product, audience, and brand.
- Never use decorative imagery when it obscures the testimonial or makes the cards harder to scan.
- Never rely on colour alone to communicate hierarchy, status, or interaction.