## 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/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073748-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073722-full.webp
- Component on Kage: https://kage.design/component/upstash-testimonials

## Before you start
Ask what the user's 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 tailored to that product—not a copy of the reference.

## Build this section
Create a responsive customer-proof section that combines a featured testimonial carousel with a supporting customer grid and a simple case-study link. Keep the overall feeling calm, optimistic, polished, and developer-friendly, while adapting the content and styling to the user's brand.

### Layout and alignment
- Use a full-width section with a very pale mint-to-white background transition; keep content inside a centered max-width container of roughly 1120–1200px.
- Start with a short centered context statement above the testimonial, using a restrained width of about 650–760px.
- Place the featured quote in a large white card with generous horizontal padding, centered alignment, and a wide but readable text measure.
- Give the card a pronounced rounded radius around 28–34px. On smaller screens, reduce the radius and padding without losing the spacious feel.
- Put the attribution above or below the quote as a distinct signature/name treatment. If the product has no suitable handwritten typeface, use an elegant italic or expressive display style instead.
- Add compact carousel pagination directly below the card. Use small circular inactive indicators and one elongated active indicator.
- Follow with a responsive customer grid: five columns on wide screens, three or two columns at intermediate widths, and two or one column on mobile depending on available space.
- Render each customer item as a pill-like rounded tile with centered brand text or a neutral wordmark treatment. Do not rely on copied logos; use the user's own customer names, approved marks, or typographic placeholders.
- End the proof area with a centered underlined text link and a subtle arrow or directional cue.
- Maintain generous vertical rhythm before the next section; the testimonial and logo grid should feel like one proof module rather than separate unrelated blocks.

### Typography hierarchy
- Use a modern sans-serif for the main interface and quote. Aim for a friendly, highly legible appearance with slightly rounded forms.
- Context statement: 20–24px desktop, 17–20px mobile, medium weight, muted colour, relaxed line-height around 1.4.
- Quote: 20–23px desktop, 17–19px mobile, regular or book weight, line-height around 1.45–1.55. Keep the quote visually prominent but not oversized.
- Attribution: 18–24px, medium or semibold; use a contrasting expressive style only if it fits the brand.
- Customer tiles: 18–22px, semibold, with enough tracking and weight to remain legible at small sizes.
- Case-study link: 15–17px, semibold, underlined, with a clear hover state.

### Spacing
- Use a section top padding of roughly 72–112px and bottom padding of 88–128px.
- Leave approximately 80–100px between the context statement and the testimonial card.
- Give the card 42–64px vertical padding and 64–100px horizontal padding on desktop; reduce to 28–36px on mobile.
- Separate the card and pagination by 22–30px, and pagination from the customer grid by 72–96px.
- Use grid gaps of 12–16px horizontally and vertically. Keep tile heights consistent, around 64–76px desktop and 56–68px mobile.

### Colour
Use approximate values as a starting point, then tune them to the user's brand:
- Section background: very pale mint `#EEF9F5`, optionally fading toward warm white `#FAFCFB`.
- Card surface: white `#FFFFFF`.
- Primary ink: deep green-black `#073B31`.
- Quote and supporting text: muted slate-green `#687B76`.
- Customer tile surface: pale sage `#DDEDE8`.
- Active pagination and interaction accent: fresh green `#12B981` or an equivalent brand accent.
- Dividers and subtle outlines, if needed: `#E4EEEB`.
- Keep contrast accessible, especially for quote text, links, and pagination controls.

### Borders, shadows, and radius
- Prefer clean surfaces with little or no visible border.
- Use a very soft shadow on the testimonial card only, such as `0 8px 28px rgba(7, 59, 49, 0.04)`, or omit the shadow entirely for a flatter system.
- Use 28–34px radius for the main card, 28–36px for customer tiles, and fully rounded pills for pagination indicators.
- Avoid heavy outlines, glossy effects, gradients with strong contrast, and excessive elevation.

### Interaction and accessibility
- Make the testimonial carousel functional: allow pagination clicks, optional previous/next controls, keyboard navigation, and touch swiping on mobile.
- Animate quote changes with a short, subtle fade or crossfade of approximately 180–260ms; avoid dramatic sliding that shifts the layout.
- Keep the testimonial card height stable where possible to prevent page jumping.
- Provide an accessible carousel label, announce the active slide to screen readers, and give each pagination control an informative accessible name.
- Add a gentle colour or underline transition to the case-study link and a slight surface change to customer tiles on hover, while preserving reduced-motion preferences.
- Ensure the grid remains readable when brand marks are unavailable, and never make logos the only source of meaning.

## Never
- Never copy the reference's logos, product names, customer names, testimonial wording, signature, or case-study text.
- Never reuse the reference's exact layout proportions, typography, colour values, or visual assets as a branded replica.
- Never add illustrations, photographs, or decorative imagery from the reference.
- Never invent customer endorsements that the user's product cannot substantiate; use clearly labeled placeholder content during development.
- Never sacrifice accessibility, responsive behaviour, or readable contrast for visual similarity.