## 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/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074883-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074849550-full.webp
- Component on Kage: https://kage.design/component/inngest-testimonials

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

## Goal
Build a dark, editorial testimonial feature for a software or technology product. Use one strong customer story as the focal point, supported by a short row of customer or partner marks and two practical actions. The section should feel credible, premium, and slightly cinematic without becoming decorative or difficult to read.

## Design language

### Layout and alignment
- Use a full-width section with a near-black textured or subtly graduated background. If texture is unavailable, use a restrained radial gradient or very low-contrast noise effect.
- Place the section inside a generous responsive container, approximately 92–96% wide on desktop with a maximum width around 1400–1500px.
- Start with an oversized all-caps editorial statement aligned to the left. Let it span most of the container width and wrap naturally across two lines on desktop.
- Below the heading, create a testimonial composition with two columns: a portrait or customer image on the left and the testimonial content on the right. Keep the image column noticeably narrower than the copy column.
- Above the quote, place a horizontal row of 3–4 muted customer marks, names, or category labels. Treat these as contextual proof, not as the visual focus.
- Align the quote, attribution, and controls to the same right-hand content column. Keep the portrait vertically aligned with the quote block rather than with the heading.
- Put the actions at the lower right of the content area. On smaller screens, stack the image, quote, attribution, and buttons in a single column while preserving generous breathing room.

### Typography hierarchy
- Use a clean modern sans-serif with slightly expanded tracking for the all-caps heading.
- Heading: uppercase, medium or regular weight, approximately 52–72px on desktop, tight line-height around 0.98–1.08, and modest letter spacing around 0.01–0.03em. Scale to roughly 32–44px on mobile.
- Quote: regular-weight body text, approximately 28–34px on desktop with 1.35–1.5 line-height. Make it feel substantial, but never sacrifice legibility.
- Attribution: 15–18px, medium weight for the person and regular weight for their role or company. Use a line break between the name and role when helpful.
- Buttons: compact uppercase labels, 11–13px, semibold or bold, with slight tracking. Use concise, action-oriented labels relevant to the user's product.

### Spacing
- Give the section approximately 96–144px of vertical padding on desktop and 64–88px on mobile.
- Leave a large gap between the editorial heading and the testimonial content—roughly 72–120px depending on viewport size.
- Keep 28–48px between the customer-mark row and the quote.
- Use 40–72px between the portrait and quote columns, with a smaller 24–32px gap on tablet layouts.
- Give the quote enough width to form a comfortable reading measure, ideally 520–760px.
- Maintain at least 24px between adjacent buttons and 32–48px between the attribution and actions.

### Colour and surface treatment
- Base background: approximately #111111 or #0D0D0D.
- Add subtle tonal variation using charcoal values such as #171717 and #242424; keep contrast low so the content remains dominant.
- Primary text: warm white around #F4F3F0 or #F7F7F5.
- Secondary text: muted gray around #B8B8B5.
- Customer marks: use off-white for the active or featured mark and gray values around #555555–#777777 for inactive marks.
- Portraits may use grayscale, duotone, or restrained monochrome treatment to integrate with the dark surface. Do not obscure faces or reduce accessibility.
- Avoid bright accent colours unless they are a meaningful part of the user's existing brand system.

### Borders, buttons, and radius
- Use thin, low-contrast borders around secondary controls, approximately 1px solid #666666 or rgba(255,255,255,0.45).
- Use a filled off-white button for the primary action with dark text, and an outlined transparent button for the secondary action.
- Keep button height around 42–48px and horizontal padding around 20–24px.
- Use a restrained radius, approximately 5–8px; avoid overly rounded pills.
- Add clear hover and focus states: slightly brighten the outline, invert or soften the filled button, and provide a visible keyboard focus ring.

### Interaction and responsive behaviour
- If multiple testimonials are available, make the customer marks selectable tabs or filters. The active mark should be brighter and the inactive marks should remain subdued.
- Changing the testimonial should update the quote, attribution, and portrait as one accessible content group; support keyboard navigation and announce changes to assistive technology.
- Keep the actions stable in position where possible so the layout does not jump between testimonials.
- If no carousel is needed, present a single static story and make the case-study action the primary conversion path.
- Respect reduced-motion preferences. Any image or quote transition should be subtle, short, and optional.
- Ensure text maintains WCAG-friendly contrast and that the testimonial remains readable at narrow widths.

## Content guidance
- Write an original, specific customer quote that demonstrates a measurable or concrete product benefit.
- Use a real role and company only when the user's product has supplied that information; otherwise use plausible placeholders that are clearly easy to replace.
- Keep the heading audience-focused and concise, with a confident editorial tone rather than a generic “What our customers say.”
- Keep customer marks visually secondary to the quote and attribution.

## Never
- Never copy the reference's logos, product names, customer names, testimonial copy, or button labels.
- Never use the reference's portrait, illustration, image, texture, or imagery.
- Never reproduce the exact heading, layout proportions, typography, or content verbatim; reinterpret the principles for the user's product and brand.
- Never make inactive customer marks compete with the active story.
- Never use low-contrast text, inaccessible controls, autoplaying motion, or a carousel without keyboard and screen-reader support.
- Never add decorative elements that distract from the credibility of the testimonial.