## 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/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073962-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073922-full.webp
- Component on Kage: https://kage.design/component/mistral-logo-cloud

## Before you start
Ask what the user's product is, who it serves, and what its brand identity is. Then apply the principles below to create an original logo-cloud section for that product rather than reproducing the reference.

## Design the section
Build a horizontal enterprise logo cloud that feels calm, credible, and editorial. Use it as a social-proof band for recognizable customer, partner, or ecosystem brands.

### Layout and alignment
- Create a full-width section with a very light warm-white background, approximately `#fafaf8` or `#fbfbfa`.
- Arrange the logos in a single horizontal row of equal-width cells on large screens. Use five cells in the reference proportion, but make the number of items responsive to the user's content.
- Give each cell a consistent height of roughly `270px` on desktop, with a minimum usable height of `180px` on smaller screens.
- Separate cells with thin vertical rules. The rules should run through the full section height and use a low-contrast neutral such as `#dededb`.
- Add a thin horizontal border at the top and bottom of the band, using the same subtle neutral. Avoid a surrounding card or drop shadow.
- Center every logo both vertically and horizontally inside its cell. Do not align logos to their text baselines or to the top edge.
- Use responsive behavior: allow cells to become a two-column grid or a horizontally scrollable row on narrow screens, depending on the product's content volume. Preserve generous whitespace and consistent cell sizing.
- Keep the content container full bleed or nearly full bleed; this component should read as a structural band across the page rather than a boxed module.

### Logo treatment
- Use customer or partner marks supplied by the product owner; do not invent recognizable logos.
- Prefer monochrome black or near-black marks, approximately `#080808`, on the warm-white background.
- Preserve each logo's original proportions and clear space. Constrain marks with a shared maximum width and height, for example `max-width: 120px` and `max-height: 62px`, while allowing individual marks to be optically balanced.
- If the product has no approved logo assets, use neutral text placeholders or abstract internal brand labels only during prototyping, clearly separated from production content.
- Do not apply colourful tiles, gradients, badges, or inconsistent treatments between logos.

### Typography and hierarchy
- This component can be logo-only. If a heading or supporting sentence is needed, place it outside or above the grid with a restrained sans-serif hierarchy.
- Use a compact, medium-weight heading around `18–24px`, with body copy around `14–16px` and relaxed line height.
- Keep text near-black, approximately `#111111`, and avoid oversized marketing typography that would overpower the marks.

### Spacing, borders, and shape
- Use generous internal padding: approximately `32–56px` vertically and `24–40px` horizontally per cell, adjusted for the logo dimensions.
- Use a spacing system based on multiples of `8px`.
- Keep all corners square or nearly square, with a radius of `0–4px`; this is a structured grid, not a floating card collection.
- Make borders 1px and subtle. The visual emphasis should come from repetition, alignment, and whitespace rather than decoration.

### Interaction and accessibility
- If logos link to customer or partner stories, make each whole cell an accessible link with a clear focus state, such as a 2px outline in the product's accent colour with a small offset.
- Keep hover behavior restrained: a slight opacity or contrast change is sufficient. Do not animate logos aggressively.
- Provide meaningful accessible names for every logo and ensure decorative marks are hidden from screen readers when the cell already has equivalent text.
- Respect reduced-motion preferences and maintain readable focus indicators for keyboard users.

## Never
- Never copy the reference's logos, product names, company names, or exact brand marks.
- Never reuse the reference's copy, illustrations, imagery, or distinctive visual assets.
- Never assume the user's product has the same audience, number of logos, colours, or layout dimensions.
- Never distort, recolour, or fabricate customer logos without approved assets.
- Never turn the section into a noisy carousel, a promotional badge wall, or a collection of unrelated cards.