## 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/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106745-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106649540-full.webp
- Component on Kage: https://kage.design/component/frigade-assist-api-testimonials

## Before you start
Ask the user what their product is, who it serves, and what their brand identity looks like. Then apply the principles below to create a testimonial section tailored to that product and brand—not a copy of the reference.

## Build this section
Create a responsive social-proof section with three layers:

1. **Intro block**
   - Use a white or near-white background.
   - Center a concise eyebrow or omit it if unnecessary.
   - Add a large, confident headline across two lines at desktop widths, approximately 44–52px, 700–800 weight, with tight line-height around 0.98–1.08.
   - Add a supporting paragraph below, approximately 16px, muted gray, with a comfortable 1.5 line-height and a maximum width around 480px.
   - Keep the intro vertically generous: roughly 96–128px top and bottom padding.

2. **Featured testimonial**
   - Place a wide, edge-to-edge feature panel directly below the intro, constrained to the same content width.
   - Use a very dark navy/charcoal background around `#171824` or adapt it to the user’s brand.
   - Split the panel into two visual zones: a text area taking roughly 50–55% width and a decorative area taking the remainder.
   - In the text area, show a small customer/company marker, a short quote in 21–24px semibold type, and a compact author row with an avatar, name, and role/company.
   - Use generous internal padding, approximately 40–48px desktop and 24px mobile.
   - The decorative zone should be abstract and low contrast: use diagonal hairline stripes, a subtle radial gradient, or a geometric texture. It must support the quote without competing with it.
   - If the brand has a recognizable accent colour, use it sparingly in the decorative zone or company marker rather than flooding the card.

3. **Supporting testimonial grid**
   - Under the feature panel, create three equal-width testimonial columns on desktop, collapsing to one column on small screens.
   - Separate columns with 1px vertical rules in a very light gray such as `#E8E9ED`; avoid floating-card clutter.
   - Each item should contain a small uppercase eyebrow such as “CUSTOMER” or a brand-specific equivalent, with letter spacing around 0.14em and font size 10–11px.
   - Follow it with a longer quote in 16–18px regular or medium type, approximately 1.45–1.6 line-height.
   - Align the author row to the bottom when cards have different quote lengths, using flex layout and a consistent minimum height. Include a small circular avatar, author name, and muted role/company text.
   - Use approximately 32–40px internal padding on desktop and 24px on mobile.

## Design language
- **Layout:** Use a centered max-width container around 1040–1120px. Keep the intro centered, while testimonial content is left-aligned for readability. Maintain a clear vertical rhythm between intro, featured quote, and grid.
- **Typography:** Prefer a clean modern sans-serif. Use dark navy text around `#182038` or `#1B2033`, muted text around `#737782`, and strong weight contrast between headings, quotes, and metadata. Avoid overly decorative type.
- **Colour:** Base background `#FFFFFF` or `#FCFCFD`; light rules `#E6E8ED`; feature panel `#171824` with a subtle blue-violet texture around `#252844`. Ensure all text meets accessible contrast.
- **Borders and radius:** Keep the overall composition editorial and structured. Use thin borders rather than shadows. A small radius of 0–4px works well for the feature panel; use larger radii only if that matches the user’s brand system. Avatars are circular.
- **Spacing:** Use an 8px spacing system. Prioritize generous whitespace around the intro and consistent padding within every testimonial. Do not let quotes touch borders or feel vertically cramped.
- **Interaction:** Testimonials may remain static. If there are more quotes than fit, optionally add subtle carousel controls or a “read more” interaction, but preserve the visible featured quote and supporting grid. Hover states should be understated: slight background tint or accent shift, never a dramatic lift or shadow.
- **Responsive behavior:** On tablet, reduce headline size and panel padding. On mobile, stack the feature panel zones, hide or simplify the decorative texture if needed, and stack supporting testimonials with horizontal separators instead of vertical rules.
- **Content quality:** Use believable, product-relevant testimonial lengths. Make each quote specific about an outcome, workflow, or transformation rather than generic praise. Keep attribution visually secondary but clearly legible.

## Never
- Never use logos, product names, customer names, testimonial copy, avatars, illustrations, or imagery from the reference.
- Never reproduce the exact wording, brand marks, decorative pattern, or testimonial arrangement as a direct copy.
- Never invent claims, metrics, or customer identities for the user’s product; use placeholders or ask for approved content.
- Never make every testimonial a separate floating card with heavy shadows.
- Never sacrifice readability for decorative textures or oversized branding.