## 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/elevenlabs-io/25703c4f-1ec9-434f-a8f0-8548c2191604-1789060951-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elevenlabs-io/25703c4f-1ec9-434f-a8f0-8548c2191604-1789060912-full.webp
- Component on Kage: https://kage.design/component/elevenlabs-logo-cloud

## Before you start
Ask the user what their product is, who it serves, and what visual brand system it uses. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a restrained enterprise logo-cloud section
Create a wide social-proof section that communicates credibility through a quiet collection of customer or partner logos. The component should feel editorial, premium, and trustworthy, with the logos supporting the page rather than becoming the visual focus.

### Structure and layout
- Use a full-width section with a centered content container, approximately 1120–1200px wide on desktop.
- Place a compact header row above the logo area:
  - Align a short trust statement to the left.
  - Align one understated pill-shaped secondary CTA to the right.
  - Vertically center both elements and keep the row visually light.
- Separate the header row from the logo area with a thin horizontal divider.
- Arrange approximately 18 logos in a 3-row by 6-column grid on desktop. Use equal columns and consistent row spacing rather than tightly packing the marks.
- Give the logo panel generous vertical padding, around 40–56px, and preserve open space around every mark.
- Keep the overall section calm and balanced; avoid cards, shadows, gradients, or decorative backgrounds.
- On smaller screens, collapse the header into a stacked layout and reduce the grid to 2 columns, or use a horizontally scrollable row only if the product genuinely has many logos. Preserve readable spacing and avoid logo collisions.

### Alignment and sizing
- Keep the trust statement and CTA aligned to the same horizontal container edges.
- Center each logo within its grid cell, both horizontally and vertically.
- Normalize logo visual weight rather than forcing identical dimensions: constrain each mark with a shared maximum height, approximately 20–28px, and a reasonable maximum width.
- Use object-contain behavior for image assets and leave extra whitespace around wide or unusually shaped marks.
- Make the logo grid feel optically even, not mechanically dense.

### Typography
- Use a clean sans-serif typeface appropriate to the user’s brand.
- Style the trust statement as a small-to-medium body label, approximately 15–17px, with regular or medium weight and comfortable letter spacing.
- Keep the CTA at approximately 14–16px with medium weight.
- Do not use oversized headings; the credibility message should remain secondary to the product’s main narrative.

### Colour and visual treatment
- Use the product’s brand palette for the section’s text and CTA, but keep the logo treatment monochrome and subdued.
- A suitable neutral baseline is:
  - section background: #FFFFFF or #FAFAFA
  - primary text: #171717
  - muted logo colour: #A8A8A8 to #B8B8B8
  - divider and CTA border: #E5E5E5
- Render logos in grayscale or muted single-colour versions so they feel like a unified collection.
- Ensure the trust statement remains clearly readable while the logos have lower contrast.
- If logos are interactive, increase contrast slightly on hover and transition over roughly 150–200ms.

### Borders, radius, and CTA
- Use 1px hairline dividers with low-contrast neutral colours.
- Give the CTA a compact pill shape with a fully rounded radius, approximately 999px.
- Use a transparent or white CTA background with a subtle 1px border.
- Add restrained hover feedback: a slightly darker border, a very light background tint, and an optional 1–2px upward movement.
- Do not add individual borders or containers around each logo.

### Interaction and accessibility
- Make the CTA a real button or link with a clear accessible label and visible keyboard focus state.
- If individual logos link to customer stories, use meaningful accessible names and preserve a minimum 44px interaction target without changing the visual density.
- Provide alt text for informative logos; use empty alt text when a logo is purely decorative.
- Ensure sufficient contrast for the statement, CTA text, focus ring, dividers, and any hover state.
- Respect reduced-motion preferences.

### Content guidance
- Use a short, factual trust statement tailored to the user’s product and audience.
- Use the user’s actual customers, partners, or integrations only when they have permission to be shown.
- Keep the CTA action-oriented and relevant, such as viewing customer stories, partner highlights, or case studies.
- Use placeholder marks during development rather than inventing recognizable company logos.

## Never
- Never copy the reference’s logos, product names, customer names, or exact copy.
- Never use ElevenLabs branding, marks, wording, or visual identity.
- Never reuse the reference’s exact logo arrangement, proportions, or pixel-level spacing.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never make up endorsements or imply relationships the user’s product does not have.
- Never overpower the section with bright colours, oversized typography, heavy cards, gradients, or decorative imagery.