## 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-1789106703-6.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-2

# Build an integration logo-cloud section

## Before you start
Ask me what my product is, who it is for, and what visual identity or brand guidelines it uses. Then apply the principles below to create an original version for my product rather than reproducing the reference.

## Goal
Create a calm logo-cloud section that communicates breadth of integrations, ecosystem coverage, or customer trust. It should feel like a supporting proof point: visually rich at the top, but quiet enough to transition into the main content section beneath it.

## Design language

### Layout and alignment
- Use a warm off-white page background, approximately `#FAF8F5`.
- Place the logo cloud in a centered container about `960–1040px` wide on desktop.
- Arrange logos in three horizontal rows on desktop, with roughly `12–14` positions per row depending on the number of items. Use a consistent invisible grid rather than tightly packing logos.
- Keep each logo slot approximately `48–56px` wide and `40–48px` high, with generous horizontal and vertical gaps. Logos may be optically centered within their slots and may have different visible sizes, but their overall rhythm should remain even.
- Allow the cloud to fade or crop subtly at the far left and right edges so the collection feels expansive rather than like a rigid table. Do not let this compromise accessibility or hide essential content on small screens.
- On tablet, reduce the number of columns while preserving generous gaps. On mobile, use two or three columns, or a horizontally clipped/scrollable row pattern with an accessible alternative; avoid tiny logos.
- Leave substantial vertical space below the logo cloud before the next section. The reference uses the cloud as an airy lead-in rather than a boxed panel.
- Align the following content to the same overall page container, but give its heading a narrower readable measure, around `560–680px`.

### Logo treatment
- Use real integration or partner marks only when the product has permission and suitable assets. Otherwise use neutral, original placeholder marks or text-free geometric symbols during prototyping.
- Preserve each mark's aspect ratio and brand colours; do not force every logo into identical coloured tiles.
- Visually normalise the set through consistent slot sizing, optical centering, and restrained scale rather than applying a monochrome filter.
- Keep logos crisp and sufficiently large to recognise. Provide meaningful accessible labels such as “Integration name” for each mark, or mark decorative logos as hidden from screen readers when nearby text already communicates the same information.
- If logos are interactive, make the whole slot the target, add a visible tooltip or label on focus/hover, and use a subtle lift or opacity change—not a loud animation.

### Typography hierarchy
- The logo cloud itself may have no visible heading, or use a small eyebrow such as “Works with your stack” in a compact sans-serif style.
- If a heading is included, use a large, confident sans-serif heading below the cloud: approximately `40–48px`, `1.05` line height, medium or regular weight, and near-black `#171513`.
- Supporting copy should be `16–18px`, approximately `1.45` line height, in muted brown-gray `#6F6A64`.
- Keep the primary message and any actions below the cloud centred and concise. Use a maximum of two actions, with one dark filled button and one quiet outlined button if needed.

### Colour, borders, and radius
- Use near-black `#171513` for primary text and buttons, muted gray-brown `#6F6A64` for supporting text, and warm off-white `#FAF8F5` for the canvas.
- If logo tiles or cards are introduced, use a slightly lighter cream such as `#FFFDF9`, a fine warm border around `#DED8D0`, and a modest radius of `8–12px`.
- Prefer no visible container around the logo cloud. The open background and empty space are essential to the composition.
- Buttons should use a `10–12px` radius, compact horizontal padding, and a one-pixel border on secondary actions.
- Maintain at least `3:1` contrast for large text and `4.5:1` for normal text; do not rely on logo colour alone to convey meaning.

### Interaction and motion
- Keep the default state static and composed.
- If logo items link to integration pages, show a subtle hover/focus state: slight translate-up of `1–2px`, a soft shadow, or a small opacity adjustment. Make focus rings clearly visible.
- Respect `prefers-reduced-motion` and avoid auto-scrolling marquees unless the user explicitly requests one.
- If the cloud is a carousel or horizontally scrollable on mobile, provide keyboard access, touch scrolling, and a clear indication that more items exist.

### Responsive behaviour
- Preserve the visual density and generous whitespace rather than simply shrinking every asset.
- Reflow rows naturally at breakpoints; never distort marks or allow them to collide.
- Ensure the next section remains visible in a sensible scroll sequence and that the logo cloud does not create excessive empty space on short mobile screens.

## Never
- Never copy the reference site's logos, product names, headings, body copy, buttons, or exact content.
- Never use logos, trademarks, illustrations, or imagery from the reference as placeholders.
- Never reproduce the reference's exact logo ordering, dimensions, spacing measurements, or page composition.
- Never invent claims about customers, integrations, security, or compatibility.
- Never use a dense, noisy wall of marks, a distracting animated marquee, or inaccessible tiny logos.
- Never make the component dependent on the reference brand; adapt colours, type, content, and scale to my product and brand.