## 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/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060353-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060301-full.webp
- Component on Kage: https://kage.design/component/supabase-testimonials

# Before you start
Ask what the user's product is, who the community is for, and what brand personality and visual system should shape the section. Then apply the principles below to create an original community testimonials section for that product—not a copy of any reference.

## Design language

Build a light, editorial social-proof section that invites visitors to join a community and then lets authentic member voices provide evidence.

### Layout and alignment
- Use a full-width section on a warm, near-white background such as `#FCFCFC` or `#FFFFFF`.
- Create a centered intro block with a max width of roughly `720px`; align the heading, supporting sentence, and CTA centrally.
- Give the intro generous vertical breathing room: approximately `112–144px` above the heading and `64–88px` below the CTA before the testimonials begin.
- Place testimonials in a horizontally oriented, staggered card field that extends wider than the main content container. Use several columns with different top offsets and card heights to create a loose masonry rhythm rather than a rigid grid.
- Keep the card field visually connected to the intro but allow it to feel like an incoming stream of community posts. On smaller screens, convert it into a vertically stacked list or a horizontally scrollable track with comfortable touch spacing.
- Clip or mask the outer edges of the testimonial field so cards can appear to enter and leave the viewport without creating awkward hard boundaries.
- Keep the main content readable and avoid letting the social cards compete with the centered heading and CTA.

### Typography hierarchy
- Use a modern sans-serif with a clean, humanist feel.
- Set the section heading in a bold or semibold weight, approximately `32–40px` on desktop with tight line height around `1.1`; scale to `28–32px` on mobile.
- Use a muted supporting line at approximately `16–18px`, line height `1.5`, with enough contrast to remain accessible.
- Style the CTA label at `14–15px`, medium weight, with concise action-oriented text.
- Set testimonial text at approximately `15–16px`, line height `1.5–1.65`, in a dark neutral such as `#5B5B5B`.
- Make author handles or names slightly smaller or equal in size to the quote, with medium weight and a darker neutral such as `#202020`.

### Colour
- Use an almost-white page background: `#FFFFFF` or `#FCFCFC`.
- Use near-black for the main heading: `#111111`.
- Use medium gray for supporting copy: `#6B6B6B`.
- Use white testimonial cards against the pale page background, with dark gray text and restrained contrast.
- If author avatars or social icons are shown, keep them visually secondary and use neutral or brand-appropriate colours rather than prominent decoration.

### Borders, radius, and surfaces
- Give each testimonial card a thin, low-contrast border such as `1px solid #E7E7E7`.
- Use a modest corner radius around `12–16px`; the cards should feel like product UI surfaces, not floating marketing bubbles.
- Avoid heavy shadows. If elevation is needed, use a very soft shadow such as `0 4px 20px rgba(0,0,0,0.04)`.
- Keep card padding around `24–32px`, with consistent internal spacing between identity, quote, and any metadata.
- Make cards moderately narrow—roughly `220–300px`—so multiple voices are visible at once on wide screens.

### Interaction and behaviour
- The primary CTA should look like a compact outlined button with a white or transparent fill, a subtle gray border, a small radius around `6–8px`, and a clear hover state that slightly darkens the border or adds a very light background tint.
- Testimonial cards may subtly lift or change border colour on hover, but interaction should remain understated.
- If the stream is scrollable, support mouse-wheel, touch, and keyboard access; provide visible focus styles and avoid autoplay that makes reading difficult.
- Preserve readable contrast, semantic heading order, accessible button labels, and reduced-motion behaviour. On reduced motion, disable marquee-like movement and show a static, scrollable arrangement.
- Use real-looking but original avatar placeholders only if the user's product needs them; do not rely on external imagery to communicate credibility.

## Never
- Never reuse logos, product names, testimonial copy, handles, avatars, social-platform marks, or other brand-specific content from the reference.
- Never reproduce the exact card arrangement, wording, dimensions, or visual treatment; reinterpret the staggered community-feed idea for the user's product.
- Never use illustrations or decorative imagery from the reference.
- Never make the testimonial stream so dense or animated that the community invitation and primary CTA lose focus.
- Never substitute invented social proof for real, permissioned customer or community quotes in a production implementation.