## 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/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106492-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106455022-full.webp
- Component on Kage: https://kage.design/component/modeinspect-testimonials

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original testimonial section for their product—not a copy of the reference.

## Build a proof-point testimonial section
Create a responsive testimonials section that presents customer evidence as an editorial case-study feature. The section should feel calm, premium, credible, and outcome-oriented, with enough structure to scan quickly without becoming a dense dashboard.

### Content structure
- Use a short, high-contrast eyebrow or supporting sentence followed by a large two-line headline. Make the headline express a meaningful customer outcome, not a generic claim.
- Include a brief paragraph below the headline that frames the evidence in one or two sentences.
- Add a three-column metrics strip at the top of the main proof card. Each metric should have:
  - a large value or short phrase;
  - a smaller explanatory label;
  - concise, believable customer-specific evidence.
- Below the metrics, create one featured story card with:
  - a small customer/company identifier using text or a neutral placeholder mark;
  - a strong case-study headline on the left;
  - a compact author block on the right with an optional abstract avatar placeholder, name, and role;
  - a 2–4 sentence quote;
  - a pill-shaped text button such as “Read the story” with a directional arrow.
- Under the featured card, add three smaller testimonial cards in a responsive grid. Each card should include a lightweight customer identifier, author name and role, and a substantial quote. Vary the copy length slightly while preserving visual balance.
- Use realistic placeholder content related to the user’s product, but do not invent unverifiable logos, endorsements, or precise claims without clearly treating them as sample content.

### Layout and alignment
- Use a warm, softly contrasting section background and a centered content container with a maximum width around 1150–1250px.
- Keep the headline and introduction aligned to the left, with a generous top margin and clear separation before the proof cards.
- Make the main feature card full width. Divide its metrics row into three equal columns with subtle vertical rules.
- Separate the feature story from the metrics with a horizontal rule. Within the story area, use a two-column layout: roughly 55–60% for the case-study title and CTA, and 40–45% for the quote. Add a subtle vertical divider between them on desktop.
- Place three supporting cards in equal-width columns below, with consistent heights or balanced internal spacing.
- On tablet, reduce the grid to two columns where appropriate. On mobile, stack all content, turn the metric columns into rows or a compact two-column arrangement, and remove vertical dividers in favour of horizontal rules.
- Keep all text and controls aligned to a consistent internal padding system; use approximately 32–56px card padding on desktop and 22–28px on mobile.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly editorial feel. Match the user’s brand font where available.
- Use a large display headline around 54–72px on desktop, 38–48px on tablet, and 32–40px on mobile, with tight line-height around 0.95–1.05.
- Use metric values around 48–60px, with labels around 14–16px.
- Use featured story headlines around 28–34px with relaxed, readable line-height.
- Use supporting testimonial text around 16–18px with 1.45–1.6 line-height.
- Make names and company identifiers medium or semibold; keep roles and metadata smaller and lower contrast.
- Use restrained emphasis. The customer’s words should carry more weight than decorative labels.

### Colour and surface treatment
- Derive colours from the user’s brand first. If no brand system exists, use an approximate palette:
  - section background: warm stone `#E2DED7`;
  - card surface: soft ivory `#F7F4F0`;
  - primary text: near-black `#111111`;
  - secondary text: muted charcoal `#696762`;
  - borders and dividers: translucent warm grey, approximately `#D5D0C8`;
  - primary button: near-black `#111111` with ivory text `#F7F4F0`.
- Keep contrast accessible, especially for small metadata and quote text.
- Use very subtle shadows only if needed to distinguish cards from the background; prefer borders and tonal contrast over heavy elevation.
- Do not introduce bright accent colours unless they are part of the user’s existing brand.

### Borders, radius, and spacing
- Use a generous card radius around 14–18px, with a smaller 999px radius for pill buttons.
- Give the featured card a slightly larger visual presence than the supporting cards through size and padding, not decoration.
- Use a consistent spacing scale based on 8px increments, with larger 64–96px gaps between the section introduction and cards and 24–32px gaps inside card groups.
- Use thin 1px borders with low-contrast neutral colour. Avoid ornamental patterns or excessive separators.

### Interaction and accessibility
- Make the featured CTA and any linked customer story visibly interactive with hover, focus, and active states. A subtle background inversion, small arrow movement, or slight colour shift is enough.
- Ensure buttons and links have clear focus rings and meet accessible target sizes.
- If the section supports multiple testimonials, prefer a static grid over an auto-rotating carousel. If cards link to stories, make the entire intended card area discoverable without creating nested interactive controls.
- Respect reduced-motion preferences and keep motion subtle.
- Use semantic headings, blockquotes for testimonial text, accessible labels for avatars or decorative placeholders, and responsive text wrapping.

### Never
- Never copy the reference’s logos, product names, company names, people, quotes, metrics, or exact wording.
- Never use the reference’s illustrations, photography, avatars, or imagery.
- Never reproduce the reference as a pixel-for-pixel layout; adapt the structure to the user’s product and brand.
- Never use fake-looking endorsements or unsupported performance claims as if they were verified.
- Never overcrowd the section with badges, gradients, decorative UI, or unnecessary animation.