## 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/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073948-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073879-full.webp
- Component on Kage: https://kage.design/component/render-logo-cloud

## Before you start
Ask the user what their product is, who it serves, and what their brand guidelines are. Apply the principles below to create a logo-cloud section for their product rather than copying the reference.

## Design language
Build a quiet, high-trust customer-logo section that can sit between major areas of a SaaS or developer-product landing page.

- **Layout and alignment:** Use a full-width, near-white or white section with a thin horizontal rule at the top and bottom. Constrain the content to a centered max-width of roughly 1000–1100px. Place a small centered eyebrow above the logos, then arrange customer marks in two evenly spaced rows with five positions per row on desktop. Keep the grid optically, not mathematically, balanced because logos have different widths. On smaller screens, collapse to two columns or a horizontally scrollable row while preserving generous gutters and avoiding cramped marks.
- **Typography hierarchy:** Set the eyebrow in uppercase, muted gray, letter-spaced sans-serif text at approximately 12–13px with medium weight. Keep it short and factual, such as a customer-count or trust statement that is specific to the user's product. Do not add a headline unless the surrounding page requires one. Use a neutral sans-serif for supporting text and ensure the eyebrow remains secondary to the brands.
- **Spacing:** Give the section about 70–90px of vertical padding on desktop. Separate the eyebrow from the first logo row by roughly 50–60px, and use approximately 45–55px between logo rows. Provide at least 55–75px of horizontal breathing room between grid positions. Scale marks to a consistent optical height of about 24–28px, allowing their intrinsic widths to vary. Reduce vertical padding and row gaps proportionally on mobile.
- **Colour:** Use a white or very lightly tinted background around `#FFFFFF` to `#FAFAF9`. Render logos in solid near-black around `#090909`, either using supplied monochrome assets or applying a monochrome treatment where appropriate. Use muted gray around `#686868` for the eyebrow and a subtle divider around `#E5E5E3`.
- **Borders and radius:** Use 1px horizontal dividers with no card containers. Avoid individual logo tiles, shadows, gradients, or decorative backgrounds. The section itself should have no visible radius; it should feel integrated into the page.
- **Logo treatment:** Preserve each customer's recognizable silhouette while normalizing visual weight, height, and baseline alignment. Use real approved logo assets supplied by the user, with accessible alt text. Never distort marks; contain them within a consistent height box and tune each mark's width or spacing optically.
- **Interaction:** Logos may be static. If they link to customer stories or case studies, make the entire mark a subtle link with a restrained hover treatment such as a slight opacity shift or transition to a softer gray. Include visible keyboard focus styles and do not rely on hover alone. Avoid animated marquees unless the user's content volume genuinely requires one.
- **Responsive behavior:** At narrow widths, maintain the hierarchy and breathing room. Use a two-column grid with consistent minimum heights, or a controlled horizontal scroller with hidden scrollbar and clear accessible labeling. Ensure long wordmarks do not collide and that the trust statement remains centered.

## Never
- Never reuse logos, product names, customer names, wording, or exact copy from the reference.
- Never copy the reference's exact logo arrangement, spacing measurements, or visual identity.
- Never include unlicensed brand marks; ask the user to provide approved assets or use clearly fictional placeholders during development.
- Never add illustrations, decorative imagery, gradients, busy patterns, or prominent cards to this section.
- Never stretch, recolour inaccurately, or otherwise alter a customer logo in a way that violates its brand guidelines.