## 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/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060422-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060392-full.webp
- Component on Kage: https://kage.design/component/cal-logo-cloud

# Build a restrained social-proof logo cloud

## Before you start
Ask me what my product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to my product rather than reproducing the reference literally.

## Goal
Create a minimal logo-cloud section for a modern software landing page. The section should communicate trust through a short centered statement and a flexible row or grid of customer marks beneath it. Keep the visual presence quiet: this is a credibility cue, not the hero of the page.

## Design language

### Layout and alignment
- Use a full-width section inside the page’s main content frame, with a centered inner container and generous vertical breathing room.
- Place a short, two-line maximum trust statement at the top center of the section.
- Add a logo area below the statement, using evenly distributed columns or a responsive flex/grid layout. Keep the logo row visually balanced rather than tightly packed.
- Align the section to the same left and right content boundaries as adjacent sections.
- On mobile, allow logos to wrap into two or three columns, reduce the logo count shown if needed, and preserve comfortable horizontal padding.
- If the surrounding page uses a construction grid, use it subtly as a structural detail: thin guide lines or edge markers should remain secondary to the content.

### Typography
- Use the product’s existing sans-serif typeface, or a neutral contemporary sans-serif fallback.
- Set the trust statement in a small body size, approximately 14–16px on desktop and 13–15px on mobile.
- Use regular or medium weight, relaxed line-height around 1.4–1.6, and center alignment.
- Keep the copy muted and short; avoid a large headline or promotional language.
- Customer names or marks should not compete with the statement and should use a consistent visual scale.

### Colour
- Start from the product’s brand palette, but keep this section low contrast.
- Use a soft neutral background such as #F7F7F6 or #FAFAFA, or the page background if it already provides enough separation.
- Use muted text around #858585–#A0A0A0.
- Use logo marks in a restrained neutral such as #8B8B8B, #A3A3A3, or monochrome versions of the supplied brand marks.
- Use very subtle structural rules around #E5E5E3 or #EBEBE9.
- Ensure text remains accessible; do not make the statement so faint that it becomes difficult to read.

### Borders, radius, and structure
- Prefer whitespace and hairline rules over cards or heavy containers.
- If the section needs a boundary, use a 1px solid border in a low-contrast neutral.
- Avoid rounded cards unless the host product’s design system clearly calls for them; if used, keep the radius modest, approximately 8–12px.
- Do not add shadows, gradients, badges, or decorative ornaments.
- Maintain a clean rectangular rhythm and let the logo spacing create the visual pattern.

### Logo treatment
- Use placeholder customer marks or abstract wordmark placeholders created specifically for the implementation.
- Keep all marks optically similar in height, approximately 20–28px, while allowing natural width differences.
- Prefer monochrome or low-saturation marks with consistent opacity.
- Give each mark enough surrounding space that the group feels calm and premium.
- If logos are interactive links, add a subtle opacity or colour transition on hover and a visible keyboard focus state. If they are not links, do not imply interaction.

### Responsive and accessible behaviour
- Use CSS grid or flexbox so the layout adapts without awkward compression.
- Preserve a minimum touch target of 44px for linked marks.
- Provide meaningful accessible labels for every linked customer mark; decorative marks should use an empty alt attribute.
- Keep contrast and focus indicators compliant with the product’s accessibility standards.
- Respect reduced-motion preferences and keep transitions short and nonessential.

## Never
- Never copy the reference’s logos, product names, brand names, or exact customer list.
- Never reuse the reference’s trust statement or any other verbatim copy.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never turn this into a prominent testimonial, carousel, or dense logo wall.
- Never use decorative imagery, stock photography, gradients, dramatic shadows, or excessive animation.
- Never force all logos into one row on small screens or sacrifice readability for visual density.