## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073899-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-testimonials

## Before you start
Ask what the user's product is, who it serves, and what its 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.

## Design language

Build a testimonial section that presents three substantial customer quotes in a calm, editorial card grid.

### Layout and alignment
- Place the section inside a wide, centered container with generous horizontal padding and a maximum width appropriate for the product's page.
- Use three equal-width cards in a single row on desktop, with a consistent narrow-to-medium gap between them.
- Give each card a tall, consistent minimum height so different quote lengths still form a clean visual band.
- Align all quote text to the top and place the author role and company/context at the bottom of every card, using a flex column layout with the metadata pushed down.
- On tablet, reduce the number of columns or allow a horizontally scrollable card row; on mobile, stack the cards vertically with comfortable spacing.
- Keep the section visually separated from adjacent content with substantial vertical padding. The background should extend beyond the cards and have softly rounded outer corners if the page layout supports that.

### Typography hierarchy
- Use a highly legible sans-serif or the product's existing brand typeface.
- Make the testimonial quote the dominant element: approximately 20–24px on desktop, 1.35–1.5 line-height, regular weight, and near-black text.
- Keep the quote editorial and easy to scan; avoid oversized quotation marks unless they are a genuine part of the user's brand.
- Style the author role as compact, medium-weight text around 12–14px.
- Style the industry, company type, or other context as smaller secondary text around 11–13px with reduced contrast.
- Ensure long quotes wrap naturally and never become cramped or overly narrow.

### Colour and atmosphere
- Use a very pale warm-to-cool gradient or diffuse colour field behind the cards. A useful starting range is blush pink `#FFD8E5`, soft lavender `#F3EEFA`, and pale cyan `#D8F5FA`, blended subtly rather than as hard bands.
- Keep cards close to white with a slight cool tint, such as `#FBFAFF`, so they remain distinct from the atmospheric background.
- Use deep charcoal or ink text around `#171522` for high contrast.
- Use muted lavender-gray metadata around `#77758A`.
- If the product has a stronger palette, reinterpret the gradient using its brand's light tints while preserving the low-contrast, optimistic mood.

### Borders, radius, and depth
- Add a thin, low-contrast border to each card, approximately `1px solid #D9D7E5` with reduced opacity where appropriate.
- Use a restrained radius around 10–14px on cards and approximately 16–24px on the outer section.
- Avoid heavy shadows. If separation is needed, use a very soft shadow such as `0 8px 24px rgba(30, 20, 60, 0.06)`.
- Keep card surfaces mostly flat so the typography and colour field do the visual work.

### Content and interaction
- Use realistic but original testimonial content that communicates a specific outcome, experience, or transformation. Vary the quote lengths slightly while keeping the visual rhythm balanced.
- Include only a role and lightweight professional context unless the user's product requires more attribution detail.
- Do not require headshots or logos; text-only attribution makes the section feel focused and keeps it adaptable.
- If cards are interactive, use a subtle border or background shift on hover and a visible focus state. Do not introduce distracting motion.
- Maintain accessible contrast, semantic blockquote and citation markup, keyboard accessibility, and responsive behaviour. If the cards are a carousel on small screens, include clear controls and announce slide changes.

## Never
- Never copy the reference's logos, product names, customer names, testimonial copy, footer content, or brand-specific wording.
- Never reuse the reference's exact illustration, imagery, decorative asset, or background treatment.
- Never make the section depend on imagery when the design can work with type and surfaces alone.
- Never sacrifice readable line length, contrast, or responsive spacing to reproduce the reference's dimensions exactly.
- Never present invented endorsements as real; use clearly authored sample content or the user's supplied testimonials.