## 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/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073940-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Component on Kage: https://kage.design/component/together-testimonials

## Before you start
Ask the user what their product does, who it is for, and what their brand identity is (including preferred type, colours, tone, and accessibility requirements). Then apply the principles below to create an original testimonial section for that product—not a copy of the reference.

## Build a minimal testimonial showcase
Create a polished customer-testimonials section for the user's website. The section should feel confident, editorial, and spacious, using a strong introductory statement followed by a subtle preview of customer stories and one focused call to action.

### Structure and layout
- Use a light, nearly white section background with a very dark navy or black band immediately above it if it fits the surrounding page; otherwise make the section self-contained and preserve the same high-contrast transition.
- Place the content in a centered container roughly 1120–1240px wide with generous horizontal padding: 24px on mobile, 40–64px on desktop.
- Center-align the introductory content in the upper portion of the section.
- Use a concise headline that communicates customer credibility or outcomes. Keep it to one or two lines on desktop and avoid overlong marketing copy.
- Add one muted supporting sentence beneath the headline, with a maximum readable width of approximately 680–760px.
- Reserve substantial vertical breathing room after the introduction. The whitespace is intentional: it makes the section feel premium and gives the testimonials room to enter the composition.
- Add a compact row or grid of 3–4 testimonial cards near the lower edge of the section. In the initial state, cards may be partially revealed, visually subdued, or represented by their top edge to create anticipation for more stories. On responsive layouts, stack the cards or turn them into a horizontally scrollable carousel.
- Center a single primary CTA between the introduction and the testimonial row, or just above the row. The CTA should invite users to explore all customer stories.
- Keep the section height generous on desktop, approximately 680–820px depending on the surrounding design. Reduce it naturally on mobile while retaining clear separation between heading, CTA, and cards.

### Alignment and spacing rules
- Use a consistent centered vertical axis for the heading, supporting text, and CTA.
- Suggested spacing: 32–44px from heading to supporting text, 56–88px from supporting text to CTA, and 96–140px from CTA to the testimonial-card row.
- Give the card row equal column widths and consistent gaps of 16–24px.
- Do not fill every available area with content; the large empty field is part of the visual language.
- Ensure the CTA remains easy to find without becoming visually dominant.

### Typography
- Use the user's brand typeface where available; otherwise use a clean contemporary sans-serif with a geometric or neo-grotesk feel.
- Headline: approximately 36–48px desktop, 30–36px mobile; weight 600–700; line-height 1.05–1.15; tight letter spacing around -0.03em.
- Supporting text: approximately 15–18px; weight 400–500; line-height 1.45–1.6.
- CTA label: 10–12px, uppercase or compact title case, medium-to-bold weight, with slight tracking around 0.06–0.12em.
- Testimonial text should be larger and more conversational than metadata. Keep quotes easy to scan and avoid dense paragraphs.

### Colour and surfaces
- Base background: approximately #FFFFFF or #FAFAFA.
- Primary text: approximately #080808 or #0B0B12.
- Secondary text: approximately #8C8C93 to #A0A0A8.
- CTA background: approximately #050505; CTA text: #FFFFFF.
- Card borders or separators: a very light gray around #EEEEEE–#F2F2F2.
- If using the dark band above the section, use a near-black navy such as #05031D or adapt it to the user's brand colour. Keep it quiet and untextured.
- Avoid gradients, excessive accent colours, and heavy shadows unless they are essential to the user's brand.

### Borders, radius, and card treatment
- Use a small radius on the CTA, approximately 3–6px, for a crisp, technical feel; adapt it to the product’s established radius scale.
- Keep testimonial cards mostly white or subtly tinted against the light background.
- Use 1px borders or hairline separators rather than pronounced elevation. If cards need elevation, use an extremely soft shadow such as 0 4px 20px rgba(0,0,0,0.04).
- Keep card radii restrained, approximately 0–10px, and make all cards the same height in the desktop row.

### Interaction and responsive behaviour
- Add a subtle hover state to the CTA: slightly lighten the background, translate it upward by 1–2px, or reveal a small directional affordance. Include a clear keyboard focus ring.
- If the testimonials are interactive, make the whole card or an explicit story link clickable, with visible hover and focus states. Do not rely on hover alone to reveal the quote.
- On mobile, preserve the centered heading and CTA but reduce vertical whitespace. Use a stacked list or snap-scrolling card rail with accessible previous/next controls if carousel behaviour is used.
- Respect reduced-motion preferences; keep transitions short, opacity/transform based, and never make content depend on animation to be understood.
- Use semantic HTML: a labelled section, a heading, testimonial figures/figcaptions or blockquotes, and a real link or button for the CTA.

### Content guidance
- Write original placeholder testimonials relevant to the user's product, with specific outcomes and believable customer roles.
- Keep each quote concise enough to scan. Include a person’s name, role, or organization only if the user can provide that information; otherwise use clearly marked placeholders.
- Design for the reference state where story content may be below the fold or visually understated, but ensure the component remains useful and legible when populated.

## Never
- Never copy the reference’s logos, product names, customer names, exact wording, testimonial copy, or branded claims.
- Never reuse illustrations, photography, icons, or other imagery from the reference.
- Never reproduce the reference as a pixel-perfect clone; preserve only the general principles of centered hierarchy, generous whitespace, restrained cards, and a focused CTA.
- Never hide essential testimonial content, navigation, or focus states behind animation.
- Never sacrifice contrast, keyboard access, semantic structure, or responsive usability for visual similarity.