## 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/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073818-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073789-full.webp
- Component on Kage: https://kage.design/component/prisma-logo-cloud

# Build a trusted-by logo strip

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colour palette, and customer logos are. Apply the principles below to my product rather than reproducing the reference literally.

Create a responsive customer-logo cloud section for a modern B2B software website. The section should communicate credibility quietly: one short centered label above a horizontal row of recognizable customer or partner marks, with generous whitespace and no unnecessary card treatment.

## Design language

### Layout and alignment
- Use a full-width, white or near-white section with a centered content container, approximately `max-width: 1180px` to `1240px`.
- Place a small uppercase eyebrow at the top, centered horizontally. Keep it visually secondary and leave approximately `48px–64px` between the eyebrow and the logo row.
- Arrange 6–8 logos in one evenly distributed row on large screens. Use flex or grid with equal-width columns and consistent horizontal gaps rather than manually positioning marks.
- Vertically center every logo within a shared row height of roughly `40px–48px`; normalize each asset by optical height, not just its file dimensions. Aim for most marks to appear around `24px–30px` tall.
- Give the section generous vertical breathing room: approximately `72px–104px` top and bottom padding on desktop, reducing to `48px–72px` on mobile.
- On smaller screens, allow the row to wrap into two or three columns, or use a deliberate horizontal scroll if the brand count requires it. Avoid cramped logos or accidental overflow.
- Keep the content aligned to the same central grid as the surrounding page sections.

### Typography
- Use a clean contemporary sans-serif consistent with the product brand.
- Set the eyebrow in uppercase with moderate letter spacing, around `0.08em–0.12em`, a font size of `12px–14px`, medium weight, and a neutral grey.
- Do not add a large headline, paragraph, button, or explanatory copy; this component works through a brief trust cue and the marks themselves.

### Colour
- Use a white or very slightly warm background, approximately `#FFFFFF` or `#FAFAF9`.
- Set the eyebrow to a muted charcoal grey, approximately `#5F6368`.
- Prefer logos in their supplied brand colours only when they remain visually balanced; otherwise use monochrome or softened versions. Keep overall contrast restrained so the strip supports, rather than dominates, the hero.
- If logos are treated with CSS, use a neutral charcoal such as `#202124` and optionally reduce opacity to approximately `0.8–0.9`. Do not force colour changes that harm logo legibility or brand guidelines.

### Borders, radius, and surfaces
- Do not use logo cards, individual backgrounds, shadows, or visible containers.
- The section should generally have no border. If separation from an adjacent section is needed, use a subtle one-pixel divider around `#F0F0F0` rather than a heavy rule.
- Avoid rounded corners for the logo row; this is an open, editorial trust band rather than a card.

### Interaction and accessibility
- Logos may be static if they are only social proof. If they link to customer stories or company pages, make the entire logo a clear link with a subtle hover treatment such as increased opacity, a slight colour shift, or an understated underline on accessible text.
- Add meaningful `alt` text for every logo, such as the company name, and ensure decorative duplicates use empty alt text.
- Preserve keyboard focus visibility for linked logos.
- Do not rely on colour alone to communicate meaning, and ensure the eyebrow meets readable contrast.
- Use responsive image loading and fixed dimensions or aspect-ratio boxes to prevent layout shift.

## Content structure
- Include one concise trust label, for example a brand-appropriate equivalent of “Trusted by leading companies.”
- Populate the row with the user's own customer, partner, or integration marks. Keep the number of logos limited enough that each has visual breathing room.
- If the product has no customer logos yet, use a truthful alternative such as technology ecosystems, communities, or integration categories rather than inventing endorsements.

## Never
- Never copy the reference's logos, product names, exact wording, or brand marks.
- Never use logos, copy, illustrations, photography, gradients, or imagery from the reference as assets.
- Never invent customer relationships or imply endorsement without permission.
- Never make the logo row so large, colourful, or animated that it competes with the primary conversion area.
- Never use uneven baselines, inconsistent optical sizing, cramped gaps, or low-resolution logo files.
- Never reproduce the reference page's exact spacing, typography, or layout mechanically; adapt the system to my product and brand.