## 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/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060784-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060731-full.webp
- Component on Kage: https://kage.design/component/clerk-testimonials

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

## Build a testimonial quote mosaic
Create a light, editorial social-proof section made from several customer quote cards arranged in a staggered, masonry-like composition. The section should feel like a curated collection of real opinions: calm, credible, slightly informal, and easy to scan.

### Layout and alignment
- Place the testimonials inside a centered, wide container with generous horizontal padding; use roughly 1120–1240px max width on desktop.
- Use a three-column composition on large screens, with cards of different heights and vertical offsets so the arrangement feels organic rather than like a uniform pricing grid.
- Let one testimonial act as the visual anchor: make it slightly more spacious and include a large decorative opening quotation mark.
- Keep all card text left-aligned. Align attribution rows consistently at the bottom of each card where possible.
- Use a single column on small screens, preserving the card order and removing offsets so the reading flow is straightforward.
- Leave substantial breathing room around the mosaic and avoid adding a heavy section heading if the surrounding page already establishes context.

### Typography hierarchy
- Use a clean modern sans-serif with a neutral, highly legible appearance.
- Render quote copy at approximately 15–17px with a 1.45–1.6 line height and medium or regular weight.
- Make the featured quotation mark much larger—around 40–56px—with a pale, low-contrast treatment.
- Style the author name at 13–14px in semibold or bold; place role, company, or handle beneath it at 12–13px in a muted tone.
- Keep testimonial text conversational and avoid oversized marketing headlines inside the cards.

### Colour and surface
- Use a near-white page background, approximately `#FAFAFA` or `#F8F8F8`.
- Use white or subtly tinted card surfaces around `#FFFFFF` / `#FCFCFC` so the cards separate gently from the page.
- Use very dark charcoal text such as `#171717` rather than absolute black.
- Use muted secondary text around `#777777` to `#929292`.
- Treat the decorative quotation mark with a very pale gray such as `#E7E7E7`.
- Keep contrast sufficient for body text and attribution content; the softness should come from surfaces and secondary elements, not from unreadable copy.

### Borders, radius, and depth
- Give cards a thin, low-contrast border around `#E8E8E8` or a barely visible shadow.
- Use a modest corner radius of approximately 10–14px; the cards should feel polished but not playful or pill-shaped.
- Avoid strong drop shadows, gradients, glass effects, and excessive decoration.
- Use internal padding of roughly 20–28px, with the featured card allowed a little more room.

### Attribution treatment
- Include a compact author row with a small circular or rounded-square avatar placeholder, author name, and descriptor.
- If real portraits or brand marks are unavailable, use neutral placeholders or initials rather than inventing recognizable people or logos.
- Keep the attribution visually subordinate to the quote while making it easy to identify who said it.

### Interaction and responsiveness
- The section can remain mostly static; credibility comes from readable content rather than animation.
- If cards are interactive, use a restrained hover state: a slightly darker border, minimal lift, or subtle surface change.
- Respect reduced-motion preferences and avoid auto-rotating testimonial carousels.
- Ensure cards never clip text, and test long names, multi-line roles, and uneven quote lengths across breakpoints.

### Never
- Never copy the reference’s logos, product names, testimonials, author names, handles, or exact wording.
- Never reuse the reference’s imagery, illustrations, avatars, or brand marks.
- Never reproduce the exact card arrangement as a pixel-for-pixel clone; adapt the mosaic logic to the user’s product and content.
- Never invent claims, endorsements, or customer identities presented as real.
- Never overload the section with gradients, animations, badges, or decorative UI that competes with the testimonials.