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

## Before you start
Ask me what my product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original testimonial section for that product—not a literal copy of this reference.

## Goal
Build a credibility-focused testimonials section featuring a short category label, a confident proof-oriented headline, and two expert testimonials. The section should feel like evidence from people with unusually relevant experience, rather than a generic review carousel.

## Design language

### Layout and alignment
- Use a full-width, very dark section with a centered content container roughly 800–850px wide on desktop.
- Place a small outlined eyebrow label above the headline, centered horizontally.
- Use a large, centered headline spanning most of the container. Keep it to two lines on desktop where possible, with a clear, assertive statement about the expertise or outcome represented by the testimonials.
- Below the headline, arrange two testimonial columns with equal width and a generous gap. Align both columns to the same top baseline.
- Each testimonial begins with a compact person row: a rounded-square portrait placeholder on the left, with the person’s name and role stacked to the right.
- Put the supporting credential paragraph beneath each person row, aligned with the text—not beneath the portrait.
- On smaller screens, collapse the columns into a single vertical stack while preserving readable line lengths and generous separation.
- Use a maximum content width of about 820px and horizontal padding of 24px on mobile, 32–48px on larger screens.

### Typography hierarchy
- Use a bold contemporary sans-serif for the headline, approximately 40–46px on desktop, 32–36px on tablet, and 28–32px on mobile; line-height around 0.98–1.05 and slightly tight tracking.
- Use a compact uppercase eyebrow at approximately 10–11px with modest letter spacing and medium weight.
- Use names at approximately 17–18px, semibold or bold.
- Use roles as small uppercase metadata around 10–11px with increased letter spacing.
- Use testimonial credentials at 16–17px with a 1.45–1.55 line-height. Keep the copy to roughly 3–5 lines per column on desktop.
- Prefer a warm, highly legible sans-serif and maintain strong contrast without making every element pure white.

### Colour
- Use a near-black brown background around `#160D0E` or adapt the dark tone to the product’s brand.
- Use warm off-white for the headline and names, around `#F5F1E8`.
- Use a softer warm gray for body copy, around `#D8D0C7`.
- Use a muted cream or pale sand for borders and the eyebrow label, around `#C9BDA8`, at reduced opacity where appropriate.
- If the surrounding page includes a colour transition, use a broad, flat accent band at the section boundary rather than a gradient-heavy effect; choose the accent from the product’s palette.

### Borders, imagery, and shape
- Give the eyebrow a thin 1px border, a small radius around 4–5px, and compact horizontal and vertical padding.
- Use portrait placeholders as square or slightly rounded-square images, about 78–82px on desktop, with a 14–16px radius. If real user-provided portraits are unavailable, use neutral placeholders or generated portraits that match the product’s brand; do not invent recognizable public figures.
- Avoid cards, shadows, heavy dividers, and decorative containers. The columns should sit directly on the section background.
- Keep the overall geometry crisp and editorial, with only the portraits receiving a noticeably softer radius.

### Spacing
- Give the section generous vertical padding, approximately 72–96px above and below.
- Leave about 34–44px between the eyebrow and headline, and 28–36px between the headline and testimonial grid.
- Use 18–22px between a portrait row and its credential text.
- Maintain at least 48–64px between stacked testimonials on mobile.

### Interaction and accessibility
- This is a static proof section by default; do not add a carousel, autoplay, or unnecessary controls.
- If testimonial links are included, make the entire linked profile area keyboard accessible and provide visible focus states using a warm contrasting outline.
- Use semantic headings, figure/figcaption or equivalent testimonial structure, descriptive alt text for portraits, and sufficient colour contrast.
- Respect reduced-motion preferences and keep any hover treatment subtle, such as a slight change in border or text colour.

## Never
- Never reuse the reference’s logos, product names, person names, roles, testimonial copy, or company names.
- Never copy the exact headline, wording, portrait imagery, or distinctive brand assets from the reference.
- Never add illustrations, decorative imagery, gradients, or UI controls that are not necessary for the testimonial section.
- Never assume the user’s product has the same dark brown palette; adapt the colours while preserving the contrast, hierarchy, and editorial restraint.
- Never make unsupported claims about real customers or recognizable experts; use the user’s supplied testimonials or clearly marked placeholder content.