## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074851-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Component on Kage: https://kage.design/component/convex-testimonials

## Before you start
Ask the user what their product is, who it serves, and what their brand identity is (including preferred colours, type style, and tone). Then apply the following principles to create a testimonial section that feels native to their product—not a copy of any reference.

## Goal
Build a premium testimonial section for a software product. Use one featured customer quote as the emotional focal point, supported by two compact testimonial cards beneath it. The section should communicate trust and product impact without feeling like a conventional review grid.

## Design language

### Layout and alignment
- Create a full-width, spacious section with a dark, muted brand-tinted background rather than pure black or white.
- Constrain the content to approximately 820–960px on desktop, centered horizontally.
- Stack the content vertically in this order: small section label, featured quote, featured attribution, then supporting testimonial cards.
- Center-align the label, featured quote, and attribution. Align the supporting cards’ text to the left.
- Use a two-column card row on desktop with equal-width cards and a 12–16px gap. Collapse to one column on small screens.
- Give the featured quote substantially more vertical space than the cards; the section should feel like a pause in the page rather than a dense content block.
- On mobile, reduce the quote width and type size while preserving the centered editorial composition. Keep cards comfortably readable with generous horizontal padding.

### Typography hierarchy
- Use a small uppercase label with noticeable letter spacing, approximately 10–12px, medium weight.
- Set the featured quote in a refined serif or high-contrast display face, italic if appropriate to the product brand. Use approximately 52–68px on desktop with tight line-height around 0.95–1.05; use 34–44px on mobile.
- Keep the featured quote to roughly two or three lines at desktop widths. Avoid overly long paragraphs in the focal quote.
- Set the featured person’s name in a small display or serif style, around 14–17px, with the role and company beneath it in uppercase or compact sans-serif text around 10–12px.
- Use a highly legible sans-serif for card quotes, around 15–16px with 1.45–1.6 line-height.
- Make card names semibold and card companies slightly smaller and lower contrast.

### Colour
- Choose a deep, desaturated background derived from the user’s brand, such as olive-charcoal `#414332`, ink-plum `#211519`, or another similarly subdued hue.
- Use warm off-white for the main quote and primary text, approximately `#F2EFE6`.
- Use a softer warm grey for metadata, approximately `#C7C5B8`.
- Make supporting cards a subtly lighter or more transparent version of the background, approximately `#5B5B48` at 75–90% opacity.
- Use a quiet warm border for the label, approximately `#B7B49B`, with enough contrast to remain visible but not decorative.
- If the brand is not editorial, adapt these colours to its existing palette while preserving low saturation and strong text contrast.

### Borders, radius, and spacing
- Use a thin 1px border around the small label; give it a compact pill or softly rounded rectangle shape with a 3–5px radius.
- Give supporting cards a restrained 14–16px radius. Avoid excessive pills or highly rounded containers.
- Use approximately 36–48px between the label and featured quote, 28–36px between quote and attribution, and 56–72px before the supporting cards.
- Give cards 24–28px of internal padding on desktop and 20–24px on mobile.
- Maintain a section padding of approximately 88–120px vertically on desktop and 64–80px on mobile.

### Content and interaction
- Use realistic but original testimonial content relevant to the user’s product. Do not invent exaggerated claims that conflict with the product.
- The primary quote should express a specific transformation, advantage, or feeling in a concise, memorable sentence.
- Supporting cards may contain longer quotes, but keep each to approximately 2–5 lines where possible.
- Include attribution for every quote: person name plus company, role, or context when available.
- If multiple testimonials are available, optional unobtrusive previous/next controls may sit below or beside the card row. Keep controls minimal and do not disrupt the centered composition.
- Add subtle hover elevation or a slight border-colour change to cards only if the cards are interactive. Do not animate the text aggressively.
- Ensure keyboard focus states are visible and all controls have accessible labels.

### Responsive behaviour
- At tablet widths, preserve the featured quote’s centered hierarchy and reduce its maximum width rather than letting it span edge to edge.
- At mobile widths, stack the supporting cards, use full available width with 16–20px page gutters, and keep the attribution legible.
- Prevent horizontal overflow and avoid forcing the quote into awkward single-word lines.

## Never
- Never copy the reference’s logos, product names, company names, people, testimonial copy, or exact wording.
- Never reuse the reference’s illustrations, imagery, photos, or decorative assets.
- Never reproduce the exact colour values, typography pairing, spacing measurements, or layout as a pixel-for-pixel clone; adapt the principles to the user’s brand.
- Never use unsupported customer claims, fake endorsements, or fabricated credentials presented as real.
- Never make the section so dense that the featured quote loses its visual priority.