## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106718-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-logo-cloud-2

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

## Design the section
Build a compact social-proof logo cloud that sits at the boundary between a credibility statement and the next major page section. It should feel understated, editorial, and premium.

### Layout and alignment
- Use a near-black full-width background, approximately `#050505` to `#080808`.
- Keep the content in a centered max-width container of roughly `1120px–1280px`, with responsive horizontal padding of `24px–72px`.
- Place a small trust eyebrow above the logos, aligned to the same left edge as the logo row. Use concise uppercase or small-cap styling with generous tracking.
- Arrange the logo marks in one evenly distributed horizontal row on large screens. Give each mark a flexible cell rather than manually positioning items; preserve each mark's natural aspect ratio and keep visual weight balanced.
- Add a thin full-width divider below the logo cloud, approximately `1px`, extending to the viewport edges or container edges depending on the surrounding page structure.
- On smaller screens, allow the row to wrap into two or three columns or become horizontally scrollable. Avoid cramped logos and maintain consistent cell height.
- Leave substantial vertical breathing room below the divider so the following section's headline feels like a deliberate second beat.

### Typography hierarchy
- Eyebrow: use a compact mono or technical sans font, around `10px–12px`, uppercase, with `0.16em–0.24em` letter spacing and muted opacity.
- If a supporting heading is present elsewhere in the composition, use a large clean sans-serif with a regular or medium weight; do not let the trust label become a headline.
- Keep line-height tight for the eyebrow and ensure the text remains legible against the dark background.

### Logo treatment
- Use the user's own customer or partner names, rendered as text-based wordmarks, supplied SVGs, or simple typographic marks.
- Convert marks to a restrained monochrome treatment: cool gray or soft white at approximately `#737373–#A0A0A0`, potentially with `55%–80%` opacity.
- Do not make every logo equally bright. Balance them by perceived visual mass, not only by CSS width.
- Preserve recognizable proportions, but keep the cloud quiet enough that it supports trust rather than becoming a gallery.
- If logos are interactive links, use a subtle opacity increase toward `#E5E5E5` on hover, with a short `160ms–220ms` transition. Do not add loud underlines, glow, or motion.

### Spacing, borders, and radius
- Use approximately `12px–20px` between the eyebrow and logo row.
- Give the logo row around `28px–44px` of vertical space, with `20px–40px` of horizontal gap between logo cells.
- Keep the divider extremely subtle, around `rgba(255,255,255,0.10)` or `#1B1B1B`.
- Avoid cards, visible containers, shadows, and decorative rounded corners. If individual logo tiles are needed for responsive layout, use no radius or a minimal `2px–4px` radius.

### Interaction and responsive behavior
- Keep the section visually stable; the logos should not bounce, scale dramatically, or animate independently.
- Ensure accessible contrast for the eyebrow and any linked logos, and provide meaningful accessible labels for image-based marks.
- On touch devices, use comfortable spacing and avoid requiring precise horizontal dragging unless the logo list is intentionally scrollable.
- Respect reduced-motion preferences.

## Never
- Never reuse the reference's logos, product names, customer names, copy, illustrations, or imagery.
- Never reproduce the exact logo sequence, wording, dimensions, or page-specific composition.
- Never invent recognizable brand marks for the user's product; use neutral typographic placeholders until real assets are available.
- Never turn the trust strip into a colorful logo wall, a card grid, or a dominant hero element.