## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060644-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-logo-cloud

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colours, and customer proof they want to highlight. Then apply the principles below to create an original version for that product—not a replica of the reference.

## Design a split-panel customer logo cloud

Build a responsive social-proof section that communicates credibility through a concise statement, a secondary call-to-action, and a grid of customer or partner logos.

### Layout and alignment
- Use a wide, centered section with a subtle top and bottom divider.
- On desktop, divide the content into two columns: a narrower left panel for the headline and CTA, and a wider right panel for the logo grid. Use an approximate 30/70 split.
- Align the left-panel content to the same inner left edge as the page’s main content. Vertically distribute the copy near the top and the CTA near the bottom of the panel, while keeping the arrangement balanced rather than forcing excessive height.
- Use a 4-column logo grid on desktop and 2 columns on tablet/mobile, with each logo displayed inside an equal-height tile. On small screens, stack the statement above the grid and place the CTA directly below the statement.
- Keep consistent gutters between tiles, with approximately 12–16px gaps. Let the grid define its own height from the tiles rather than using a dense masonry layout.
- Center each logo horizontally and vertically within its tile. Preserve each logo’s aspect ratio and give every mark a similar visual footprint, even when their source dimensions differ.

### Typography hierarchy
- Use a compact, confident headline of roughly 24–28px on desktop, with a 1.05–1.15 line-height and medium-to-semibold weight.
- Emphasize the proof quantity or key phrase with a slightly darker or heavier treatment, while keeping the rest of the headline readable and understated.
- Use a simple sans-serif UI typeface with carefully adjusted letter spacing and no decorative display styling.
- Style the CTA as a small, direct label around 14px with medium weight. Include a subtle directional arrow or chevron only if the product’s interaction language supports it.

### Colour and surfaces
- Use a warm near-white page background, approximately `#FFFFFF` or `#FCFCFA`.
- Make the logo tiles a barely tinted neutral, approximately `#F8F8F5`, so they are distinguishable from the surrounding page without looking like filled cards.
- Use a dark charcoal for the headline, approximately `#171817`, and a softer gray for supporting text, approximately `#666866`.
- Use a high-contrast dark CTA, approximately `#111212`, with white text. Adapt the accent colour to the user’s brand only where it improves recognition or accessibility.
- Keep the logos in their authentic brand colours when supplied by the user, but do not let differing logo colours overpower the typography or layout.

### Borders, radius, and depth
- Separate the section from neighbouring content with thin, low-contrast rules around `#E8E9E5`.
- Give each tile a subtle 1px border in a similar neutral, with a small radius of approximately 6–8px.
- Avoid drop shadows or gradients; the component should feel crisp, editorial, and trustworthy.
- Give the CTA a small radius of approximately 3–5px and comfortable horizontal padding around 16px.

### Interaction and responsive behaviour
- Make the CTA visibly interactive with a hover state: slightly lighten or darken the background, preserve strong contrast, and move the arrow a few pixels if an arrow is present.
- Optionally add a very subtle tile hover treatment such as a border darkening, but do not make the logo cloud feel like a collection of product cards.
- Ensure keyboard focus states are clear and accessible for the CTA and any linked logos.
- On mobile, reduce the headline to approximately 22–24px, preserve generous vertical spacing, and ensure tiles remain large enough for logos to be recognized without crowding.
- Use accessible alt text for every logo and avoid relying on colour alone to communicate meaning.

### Content guidance
- Use a short, specific statement about the scale or quality of the customer base.
- Use a CTA that leads to customer stories, case studies, or another credible proof destination.
- Select a coherent set of customer marks with varied shapes, normalizing their optical size rather than forcing identical image dimensions.

## Never
- Never copy the reference’s logos, product names, headline wording, CTA wording, or exact customer count.
- Never use Mintlify branding, imagery, illustrations, or proprietary copy from the reference.
- Never reproduce the logo arrangement as a literal clone; choose a grid size and content order appropriate to the user’s product.
- Never distort, crop, recolour, or invent customer logos.
- Never add decorative imagery when the component’s purpose is a clean, text-and-logo trust signal.