## 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/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060457-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060424-full.webp
- Component on Kage: https://kage.design/component/attio-logo-cloud

## Before you start
Ask the user what their product does, who it is for, and what their brand identity looks like. Then apply the principles below to create an original logo-cloud section for that product—not a copy of the reference.

## Design goal
Build a quiet, premium social-proof logo grid that feels like part of an editorial product page. The component should communicate credibility through consistency and restraint: logos are treated as a system of visual marks rather than a collection of promotional badges.

## Layout and alignment
- Place the section inside a wide, centered container with a maximum width around 1200–1280px.
- Use a responsive grid with five equal columns on desktop and two columns on small screens; allow the final row to remain intentionally incomplete rather than forcing visual filler.
- Use two compact rows on desktop, with each cell approximately 95–100px tall. Let the component height adapt naturally on mobile.
- Draw thin, continuous dividers between cells using a 1px border. Keep the outer edge subtle and aligned with the page’s main content grid.
- Center each logo horizontally and vertically within its cell. Preserve each mark’s native proportions, but constrain it to a consistent visual footprint: approximately 120–165px wide and 22–34px high depending on the logo shape.
- Keep consistent horizontal and vertical padding; use approximately 24–32px desktop cell padding and 20–24px mobile padding.
- If the logos are links, make the entire cell the hit area. Add a small northeast arrow near the upper-right corner of selected or all cells, inset approximately 18–24px from the edges. Keep it understated and avoid letting it collide with the logo.

## Typography and logo treatment
- Treat brand marks as bespoke typographic assets, not ordinary body text. If real logo files are unavailable, create abstract text-based stand-ins with varied typographic personalities while keeping the overall treatment coherent.
- Use near-black monochrome marks, approximately `#202124` or `#242528`, on a warm off-white background around `#F8F8F6`.
- Avoid shadows, gradients, badges, coloured fills, or decorative containers around individual marks.
- Preserve differences between logos—some may be geometric, some serif, some bold sans-serif—but normalize their apparent visual weight and size so no single mark dominates.
- For the corner arrows, use a small 12–14px neutral glyph in approximately `#A4A6A5`; increase contrast slightly on hover.

## Colour, borders, and shape
- Use a very light warm-gray surface, approximately `#FAFAF8` or `#F8F8F7`.
- Use dividers around `#DFE0DD` at 1px. They should be visible enough to establish the grid but never read as heavy boxes.
- Use square or nearly square cells with no card shadows. Keep the section radius at `0–2px`; the reference language is architectural rather than rounded.
- Ensure the contrast ratio of any meaningful text or accessible labels meets WCAG requirements, even if the visual logos are intentionally restrained.

## Interaction and accessibility
- Give each linked cell a clear hover state: lightly tint the cell background toward `#F1F2EF`, shift the arrow toward `#202124`, and optionally translate the arrow 2–3px diagonally.
- Add a short, subtle transition of about 160–220ms using an ease-out curve.
- Provide visible keyboard focus with a 2px outline or inset ring in the product’s accent colour; never rely only on the hover state.
- Use descriptive accessible labels for each logo link. Do not expose decorative arrows as separate controls.
- On narrow screens, maintain comfortable touch targets and prevent logos from overflowing their cells. Consider horizontal overflow only as a last resort; a responsive grid is preferable.

## Content guidance
- Use a curated, limited set of recognizable customer, partner, or community marks relevant to the user’s product.
- Keep the number of logos balanced and the visual density low. The component works best when it feels like a considered proof point, not an exhaustive directory.
- If the product has a supporting headline or eyebrow, keep it outside the grid and visually subordinate to the page’s primary hero content.

## Never
- Never copy the reference’s logos, product names, wordmarks, icons, or exact copy.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never use a noisy carousel, animated logo marquee, heavy card styling, gradients, or oversized brand marks.
- Never distort, crop, or recolour a real customer logo against its usage guidelines.
- Never make the arrows or grid lines more visually prominent than the logos themselves.