## 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/basedash-in-espanol-francais-portugues/b3381e01-f9b6-42c9-8798-975c026618b1-1789106701-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/basedash-in-espanol-francais-portugues/b3381e01-f9b6-42c9-8798-975c026618b1-1789106655341-full.webp
- Component on Kage: https://kage.design/component/basedash-in-espanol-francais-portugues-logo-cloud

# Build an editorial customer logo cloud

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to my product rather than reproducing the reference literally.

Create a responsive customer-logo cloud section for a premium B2B software website. Its job is to communicate social proof quickly and quietly, using a compact eyebrow and a row of customer or partner marks.

## Design language

- **Layout and alignment:** Use a warm off-white page background and a centered content container with a maximum width of approximately 980–1,050px. Place a small eyebrow above the marks, centered horizontally. The eyebrow should sit around 24–30px from the top of the section. Below it, arrange 5–7 monochrome logo marks in one evenly distributed horizontal row on desktop, with consistent optical rather than strictly mathematical spacing. Align the logos around a shared vertical centerline; allow each logo to retain its natural aspect ratio. Keep the section intentionally sparse, with approximately 38–48px between the eyebrow and logo row and ample breathing room beneath it.
- **Responsive behavior:** On tablet and mobile, let the logo row wrap into two or three balanced rows or become a horizontally scrollable strip if there are many marks. Preserve generous gaps and avoid shrinking marks until they become illegible. Keep the eyebrow centered and prevent the logo cloud from touching the viewport edges; use roughly 24px side padding on small screens.
- **Typography hierarchy:** Set the eyebrow in a compact uppercase sans-serif, around 10–11px, with 0.16–0.22em letter spacing and medium contrast. It should read as a contextual label, not a headline. Do not add a large heading to this component. Use the product’s brand typeface where possible, but retain the restrained scale and editorial feel.
- **Colour:** Use an understated warm ivory background close to `#F8F6F2` or adapt it to the product palette. Render logos in near-black `#161616` or a single muted charcoal such as `#343331`. Keep the eyebrow slightly lighter, around `#77736D`. Avoid colourful logo treatments so the row feels cohesive; if brand recognition requires colour, use a very subtle single-tone treatment instead.
- **Logo treatment:** Use real customer/partner logos supplied by the product owner, preferably as SVGs with transparent backgrounds. Normalize their visual weight and height rather than forcing identical widths; a typical visible height is 24–32px. Preserve each mark’s proportions and wordmark details. If no assets exist, use neutral typographic placeholders during development, clearly marked for replacement.
- **Borders and radius:** Avoid cards, containers, shadows, and decorative borders. This component should feel open and editorial. If a separating rule is needed, use a very subtle 1px line near `#E7E2DA`, but omit it by default. Logo images themselves should have no visible radius.
- **Interaction:** The logos may be static. If each mark links to a case study or customer page, use an accessible link with a subtle opacity change on hover, for example from 100% to 65%, with a 150–200ms ease transition. Do not add underlines, tooltips, bouncing effects, or large hover transformations. Ensure keyboard focus has a clear, restrained outline.
- **Accessibility:** Give each logo an accurate `alt` label, or use an empty alt attribute when the adjacent text already names the organization. Maintain sufficient contrast, use semantic section markup, and ensure the row remains understandable when logos are unavailable.

## Content guidance

Use a short, factual eyebrow appropriate to the user’s product, such as a statement about the number or type of teams using it. Keep it in the same compact uppercase style, but write original copy for the user’s product. Do not include testimonials, avatars, case-study links, or a second section inside this component.

## Never

- Never copy logos, product names, customer names, or copy from the reference.
- Never use the reference’s exact brand marks, typography assets, text, or image treatment.
- Never add logos, product names, copy, illustrations, or imagery from the reference.
- Never invent customer relationships or imply endorsement without supplied assets and approval.
- Never turn the logo cloud into a card grid, colourful carousel, or dense dashboard-like block.
- Never use decorative illustrations, stock photography, gradients, excessive shadows, or prominent UI chrome.