## 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/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060207-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Component on Kage: https://kage.design/component/linear-logo-cloud

## Before you start
Ask what the user's product is, who it is for, and what its brand direction is. Then apply the principles below to create an original logo-cloud section for that product rather than reproducing the reference.

## Build this section
Create a full-width, low-profile logo-cloud section for a modern software website. Its purpose is to provide quiet social proof: a single horizontal row of several recognizable customer or ecosystem marks, followed by a small supporting eyebrow below the row.

### Design language

- **Layout and alignment:** Use a deep near-black background, approximately `#090A0B`. Place the logo row inside a centered container with generous horizontal padding, approximately 40–48px on desktop and 24px on mobile. Arrange 6–8 marks in one evenly distributed horizontal row on wide screens, with each mark centered in its own flexible area. Keep the row visually balanced rather than sizing each column by logo width. On smaller screens, allow a controlled two-column or horizontally scrollable layout, but avoid cramped marks.
- **Logo treatment:** Render the marks as simple white or cool-white monochrome wordmarks/icons, approximately `#F4F4F5`, with no coloured brand fills. Preserve each mark's proportions and give every mark enough clear space to remain legible. Use a restrained range of visual sizes so one logo does not dominate the strip.
- **Typography hierarchy:** The logo row is the primary element and should feel quiet but confident. Add a small uppercase or all-caps supporting line beneath it, around 10–11px, with generous letter spacing around `0.12em`–`0.18em`. Use a muted grey such as `#6B6D72`; the line should read as a subtle caption, not a headline. Choose a clean grotesk or system sans-serif with slightly technical character.
- **Spacing:** Keep approximately 42–56px of top and bottom breathing room. Separate the logo row from the eyebrow by roughly 34–44px. Use a compact line height for the caption, around 1.2. Do not add unnecessary cards, headings, or decorative elements.
- **Colour and contrast:** Maintain a nearly black field with high-contrast marks and a deliberately low-contrast caption. If a boundary is needed, use a very subtle top or bottom rule around `#17191C`; otherwise let the background run edge to edge.
- **Borders and radius:** The section itself should be rectangular and flush with the page. Avoid pills and individual logo containers. If the section is placed inside a bordered panel, use a thin `#202226` border and a modest 8–12px radius, but do not let the container become the visual focus.
- **Interaction:** Logos may have a restrained hover state: slightly increase opacity or brightness and transition over 160–220ms. Do not add large scale effects, tooltips, click affordances, or distracting animation. If the marks link to customer stories, use a subtle pointer cursor and accessible focus ring.
- **Responsive behavior:** At narrow widths, preserve generous clear space and legibility. Either wrap into two balanced rows or enable unobtrusive horizontal scrolling with hidden scrollbar styling. Keep the caption aligned with the content container and prevent long labels from colliding.
- **Accessibility:** Use meaningful accessible names for linked logos, provide alt text for image marks, and maintain keyboard-visible focus states. The section should remain understandable if logos fail to load.

## Never
- Never copy the reference's logos, product names, wording, or exact brand arrangement.
- Never use the source company's logo set, including OpenAI, Vercel, Salesforce, Figma, Cursor, Coinbase, or Ramp.
- Never reuse the reference caption or any other exact copy from it.
- Never include illustrations, photography, gradients, or unrelated imagery from the reference.
- Never make every mark a separate card, add heavy shadows, or turn the trust strip into a promotional hero.
- Never assume the user's product, customer names, or brand colours; ask first and adapt the component to their context.