## 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/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073822-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073774-full.webp
- Component on Kage: https://kage.design/component/bun-logo-cloud

## Before you start
Ask me what my product does, who it is for, and what its brand looks and sounds like. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build this section
Create a responsive logo-cloud section for a developer-focused product or software platform. Treat the logo cloud as understated social proof rather than the main headline: pair a concise eyebrow or trust statement with a broad field of customer, partner, or ecosystem marks.

### Layout and alignment
- Use a clean, full-width section with a centered max-width container of approximately 1120–1240px.
- On desktop, place the short supporting statement in a narrow column or at the top of the section, then arrange the marks below in a loose but intentional multi-column grid.
- Keep the visual field asymmetrical enough to feel editorial, while maintaining consistent optical alignment and even row rhythm.
- On small screens, collapse to one or two columns and preserve generous horizontal padding of roughly 24px.
- Use substantial vertical whitespace: approximately 96–144px above and below the component, with 32–56px between the statement and the logo field.
- Logos should have a consistent visual footprint. Constrain each mark by a shared height or bounding box rather than forcing every logo to the same width.

### Typography
- Use a compact uppercase or small-cap eyebrow with noticeable letter spacing, around 11–13px, medium weight, and muted contrast.
- If there is a supporting heading, use a bold grotesk or sans-serif with a tight line height around 0.95–1.05 and a strong but not oversized scale, approximately 32–56px depending on viewport.
- Keep any explanatory text short, using 15–18px with a relaxed line height of 1.4–1.6.
- Avoid decorative type treatments; let scale, spacing, and weight create the hierarchy.

### Colour
- Default to a warm near-white or white background around #FAFAF8 or #FFFFFF.
- Use near-black text around #111111 or #0A0A0A.
- Render logos in a single neutral treatment—black, dark charcoal, or muted gray around #6B6B6B—so the cloud feels cohesive even when the source marks differ.
- If the product brand uses colour, introduce it sparingly through hover states or one subtle accent, not as a rainbow logo wall.

### Borders and shape
- Prefer no enclosing card border; the section should feel integrated into the page.
- If the logo field needs separation, use a very thin 1px rule around #E7E7E3 or a faint top border rather than a heavy container.
- Use little or no radius. If individual logo cells are interactive, a restrained radius of 6–10px is enough.
- Avoid shadows, gradients, and glossy treatments.

### Interaction
- If marks link to customer or partner pages, make the entire logo cell clickable with a clear but quiet hover state: increase opacity, shift from gray toward near-black, or add a subtle background tint.
- Add a short transition of roughly 150–220ms and preserve keyboard-visible focus rings.
- Do not animate logos continuously or use marquee movement; the component should remain calm and readable.
- Ensure marks remain legible in high-contrast mode and provide accessible labels for every logo.

### Responsive and accessibility details
- Use CSS grid or flexbox with a consistent gap, approximately 24–48px horizontally and 28–40px vertically.
- Hide or simplify decorative marks only if necessary for small screens; never let them overflow or become illegible.
- Maintain sufficient contrast between the marks and background, and do not rely on colour alone to communicate links.
- Keep the section useful if logos fail to load by reserving stable space and providing text alternatives.

## Never
- Never reuse logos, product names, copy, illustrations, imagery, or exact content from the reference.
- Never reproduce the reference site's brand identity or make the section look like a direct clone.
- Never use a noisy marquee, random logo sizing, excessive colour, heavy cards, or decorative effects that compete with the trust signal.
- Never invent customer claims or imply endorsements that the user's product cannot substantiate.