## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067454-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-testimonials

## Before you start
Ask what the user's product is, who it serves, and what visual brand system it already uses. Then apply the principles below to that product and brand rather than reproducing the reference literally.

Build a responsive customer testimonials and social-proof section with a dark, editorial, high-energy visual language. The section should feel like a curated wall of recognizable customer stories: combine portrait-led testimonial cards with metric-led proof cards, using varied content but a consistent grid.

### Structure
- Use a near-black navy background, approximately `#08061C` or `#09071F`, with generous vertical padding: roughly 120–160px on desktop and 72–96px on mobile.
- Place a centered introductory block above the grid. Keep its maximum width around 760–860px.
- Add a small uppercase eyebrow above the heading in a vivid pink/lilac accent, approximately `#E56BB5`, with medium-heavy weight and increased letter spacing.
- Set the main heading in an all-caps, bold display style. Use a tight line-height around 0.95–1.05 and a responsive size around 42–64px. Keep it white or slightly warm white, approximately `#F8F7F4`.
- Add a supporting paragraph below with a maximum width around 680px, 18–22px text, 1.35–1.5 line-height, and a soft lavender-white colour such as `#E4E0F2`.
- Follow the intro with a wide mosaic grid. On desktop, use four equal columns with 20–28px gaps. Let cards occupy a consistent tall footprint, approximately 320–430px, and alternate image cards and stat cards to create rhythm.
- On tablet, collapse to two columns. On small screens, use one column or a horizontally scrollable row only if the product context benefits from browsing; never allow the layout to become cramped.

### Card design
- Use two card families:
  1. **Portrait testimonial cards:** full-bleed customer photography with a dark gradient overlay from transparent near the top to approximately `rgba(5, 5, 20, 0.9)` at the bottom. Place the person’s name and role/publication near the lower edge.
  2. **Metric proof cards:** deep indigo surfaces, approximately `#100D2D` to `#15113A`, with a small contextual label or customer identifier near the top and a large metric anchored toward the lower half. Add a concise explanation beneath the metric.
- Use moderate corner rounding, approximately 10–16px. Avoid excessive pill shapes or soft, generic SaaS cards.
- Give cards subtle separation with a low-contrast border such as `1px solid rgba(220, 215, 255, 0.06)` and, if needed, a restrained shadow.
- Preserve strong internal padding on stat cards: roughly 24–32px desktop and 20–24px mobile.
- Metrics should be the strongest element inside proof cards: use an oversized bold display face around 56–76px, with a pale lavender or periwinkle colour such as `#B9B7FF`. Keep supporting copy around 15–18px with a muted lavender colour such as `#AAA7D5`.
- Keep identity text on image cards highly legible: use white for names and a lower-contrast lavender-white for secondary labels. Avoid placing text over visually busy faces where possible.
- If using customer marks or publication names, treat them as typographic identifiers in the card composition and give them generous space; do not make every tile look like a logo lockup.

### Alignment and rhythm
- Center-align the intro, but left-align all card content for quick scanning.
- Align metrics and testimonial metadata to a shared lower baseline where practical, while allowing the mosaic to retain slight variation.
- Use a clear vertical rhythm: eyebrow → heading → paragraph → generous gap → card grid.
- Keep the outer grid aligned to the same content container as the intro, with a maximum width around 1240–1320px.
- Make the visual contrast between image and metric cards intentional: the images provide human warmth, while the dark stat tiles provide credibility and measurable outcomes.

### Interaction and accessibility
- Add a restrained hover treatment: image cards may slightly brighten or raise by 2–4px; stat cards may shift toward a subtly lighter indigo. Use a 180–250ms ease-out transition.
- If cards link to case studies, make the entire card clickable and provide a visible focus ring in a bright lavender or pink accent. Do not rely on hover alone to communicate interactivity.
- Use meaningful alt text for portraits and publication imagery. Ensure all text meets accessible contrast against its background, and preserve readable text sizing on mobile.
- Respect reduced-motion preferences by disabling transforms and image zoom effects.

### Never
- Never copy logos, product names, customer names, testimonial copy, metrics, imagery, illustrations, or exact card content from the reference.
- Never reproduce the reference’s exact grid order, wording, photography, brand marks, or visual assets.
- Never use placeholder lorem ipsum in the finished section; create content appropriate to the user’s product.
- Never sacrifice responsive behavior, keyboard focus visibility, or text contrast for visual resemblance.