## 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/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073892-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073860-full.webp
- Component on Kage: https://kage.design/component/workos-testimonials

## Before you start
Ask the user what their product is, who it serves, and what their brand voice and visual identity are. Then apply the principles below to create an original testimonial section for that product—not a replica of the reference.

## Build this section
Create a polished customer-proof section for a B2B software marketing page. The section should combine two related moments:

1. **A value proposition block** near the top, with a small coloured eyebrow, a large outcome-focused headline, and two short paragraphs explaining the customer problem and the product benefit.
2. **A featured testimonial** below it, introduced by a subtle uppercase “powered by” style label and presented as a large central quote card. Include a generic customer mark area, a prominent quote, and a compact author row with an avatar placeholder, name, and role.

The testimonial should feel like the visual proof point that validates the promise above. Use realistic, product-specific content generated for the user’s product, but keep the copy concise and outcome-led.

## Design language

- **Layout:** Use a centered, spacious section within a max-width of approximately 1160–1240px. The value proposition is a two-column composition on desktop: text aligned to the left and a supporting media or resource teaser aligned to the right. Keep the text column narrower than the full grid so the heading remains punchy. Place the testimonial beneath with a centered, stacked presentation.
- **Alignment:** Align the eyebrow, heading, and body copy to a common left edge. Center the small label above the testimonial. Keep the quote content left-aligned inside the card, with the author row aligned to the quote.
- **Responsive behavior:** On smaller screens, stack the value proposition columns, move the supporting teaser below the text, and make the testimonial card nearly full width. Preserve generous vertical spacing while reducing horizontal padding.
- **Typography:** Use a modern sans-serif appropriate to the user’s brand. Set the eyebrow in medium-weight uppercase or sentence case at roughly 14–16px with generous letter spacing. Use a bold display heading around 48–60px on desktop and 36–44px on mobile, with tight line-height around 0.98–1.08. Body copy should be 18–20px with a relaxed 1.5–1.6 line-height. The quote should be the strongest element after the main heading: approximately 28–34px, bold, with tight but readable line-height.
- **Colour:** Start with a warm white or near-white background such as `#FFFFFF` or `#FCFCFB`. Use a deep charcoal for primary text such as `#283136`, a muted cool gray for body copy such as `#69717C`, and a saturated brand accent—approximately `#625CCB` or a hue derived from the user’s brand—for the eyebrow and links. Add a very subtle blurred or radial atmospheric wash behind the upper content using pale lavender, blue, or mint tones at low opacity; it must remain understated and never reduce contrast.
- **Supporting teaser:** If the product has a relevant video, report, or resource, show it as a compact media card beside the value proposition. Use a 16:9 thumbnail with a dark overlay and a circular play or action control, followed by an accent-coloured title and muted supporting text. If no media is appropriate, replace it with another quiet proof point rather than forcing a video pattern.
- **Testimonial card:** Place the quote in a wide central card, approximately 760–900px wide, with generous internal padding around 56–72px on desktop. Use a white or slightly tinted surface, a thin neutral border, a subtle shadow, and a restrained corner radius around 6–12px. Add one or two offset cards or faint side rails behind it to create depth, but keep them mostly empty and low contrast.
- **Card framing:** Add a thin dark or brand-coloured rule along the top edge of the primary quote card if it suits the brand. The background layers behind it can use very pale gray or tinted surfaces with low-opacity borders. The depth should come from spacing, shadows, and offset geometry—not decorative clutter.
- **Logo and author treatment:** Reserve a compact area for the customer’s wordmark or mark at the top of the quote card, but generate a brand-appropriate text or placeholder treatment for the user’s product rather than copying any reference identity. Use a small circular avatar or neutral portrait placeholder in the author row, with the name in a medium-weight 15–16px style and the role below or beside it in muted 14–15px text.
- **Spacing:** Use approximately 96–140px of vertical padding for the complete section. Keep 20–28px between eyebrow and heading, 18–28px between heading and body, 24–36px between paragraphs, 72–100px before the testimonial label, and 28–40px between the label and quote card. Use a consistent 8px spacing system.
- **Interaction:** Make the media teaser, resource title, or testimonial card link visibly interactive with a subtle colour shift, shadow lift, or translate-up effect on hover. Ensure keyboard focus states are clear. If multiple testimonials are provided, support discreet pagination or navigation controls without turning the section into a busy carousel.
- **Accessibility:** Use semantic headings and blockquote markup, sufficient colour contrast, descriptive link and media labels, visible focus rings, and a reduced-motion fallback for hover and entrance effects.

## Never

- Never copy logos, customer marks, product names, company names, people, or exact wording from the reference.
- Never reuse the reference’s testimonial, video thumbnail, portrait, or other imagery.
- Never reproduce the reference as a pixel-for-pixel layout; adapt the structure and visual principles to the user’s product and brand.
- Never use decorative gradients, shadows, offsets, or oversized type if they compete with the proof or reduce readability.
- Never invent unsupported customer claims, metrics, endorsements, or compliance statements.