## 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/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060437-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060413-full.webp
- Component on Kage: https://kage.design/component/loom-logo-cloud

## Before you start
Ask the user what their product is, who it serves, and what their brand identity is (including preferred typeface, colours, tone, and CTA). Then apply the principles below to create an original logo-cloud section for that product—not a copy of any reference.

## Design language

Build a standalone social-proof section that establishes trust through a centered customer statement, a clear call to action, and an orderly field of company marks.

### Layout and alignment
- Use a white or near-white full-width background with a centered content container, approximately 1120–1200px wide on desktop.
- Stack the content vertically: headline first, primary CTA beneath it, then a generous gap before the logo cloud.
- Center-align the headline and CTA. Keep the headline to roughly two lines at desktop widths, with a maximum width of about 620–700px.
- Arrange logos in several centered rows using CSS grid or flexbox. Aim for 5–6 marks per row on desktop, with consistent column spacing but enough flexibility for different logo proportions.
- Let the final row contain fewer marks and remain centered rather than stretching across the container.
- On tablet and mobile, reduce the number of columns progressively and preserve readable logo sizes. Use a 2-column or 3-column layout on small screens, with consistent vertical rhythm.
- Give every logo slot a similar visual footprint using a fixed or minimum height, while allowing each mark to keep its natural aspect ratio. Do not force all logos into identical widths.

### Typography hierarchy
- Use a modern, friendly sans-serif with a bold or extra-bold headline weight. If the product brand has a typeface, use that instead.
- Set the headline around 36–42px on desktop, with a tight line height around 1.05–1.15 and slightly negative tracking. Scale to approximately 28–32px on mobile.
- Use a short, action-oriented CTA label in a semibold 14–16px style.
- Logo names should be represented by supplied brand assets or brand-neutral placeholders, not recreated in arbitrary type. If text placeholders are necessary, vary weight and letter spacing subtly to suggest distinct wordmarks while keeping the overall treatment unified.

### Colour
- Use an approximately #FFFFFF background, or the product’s equivalent light neutral.
- Set the headline in near-black, approximately #111315 or #171717.
- Make the CTA a saturated brand colour—use the product’s primary action colour; as a neutral starting point, use approximately #2474D8—with white text.
- Render logos in a single muted grey, approximately #858585 to #969696. Avoid full-colour marks so the proof layer stays secondary to the message and CTA.
- Ensure text and CTA contrast meet accessibility requirements; treat logos as decorative or provide accessible names where they convey meaning.

### Borders, radius, and depth
- Use a pill-shaped CTA with a radius of 999px and comfortable horizontal padding, approximately 22–28px, plus 12–16px vertical padding.
- Keep the section and logo slots free of visible cards, shadows, and heavy borders. The open whitespace is part of the design.
- If a subtle responsive logo tile boundary is needed for usability, use a very light border around #F1F1F1 and a small radius around 8–12px, but prefer the borderless desktop presentation.

### Spacing and interaction
- Provide approximately 96–120px of top and bottom section padding on desktop, reducing to 64–80px on mobile.
- Use roughly 20–28px between the headline lines, 28–36px between headline and CTA, and 88–120px between CTA and the first logo row.
- Use approximately 48–72px of vertical spacing between logo rows and 40–76px of horizontal spacing between columns, adjusted based on logo width.
- Make the CTA visibly interactive: add a subtle colour darkening and small upward or scale transition on hover, plus a clear focus-visible outline for keyboard users.
- If logos link to customer stories, make the entire mark an accessible link with a restrained opacity or colour transition on hover. Otherwise, treat them as non-interactive trust signals.
- Keep the logo cloud static by default; avoid distracting carousels or auto-scrolling marquees.

## Never
- Never reuse logos, product names, wording, CTA copy, illustrations, imagery, or exact customer marks from the reference.
- Never copy the reference’s exact headline, row arrangement, spacing measurements, or visual identity.
- Never invent claims about customer count, adoption, or results unless the user supplies verified content.
- Never distort, recolour, or use unlicensed third-party brand assets; use the user’s approved assets or clearly labelled neutral placeholders.
- Never let the logo cloud overpower the headline or primary action.