## 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/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106664-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106606408-full.webp
- Component on Kage: https://kage.design/component/mastra-factory-logo-cloud

## 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 a version for that product—not a copy of the reference.

## Design the section
Build a dark social-proof logo cloud for a software product. The section should communicate that credible teams or customers are achieving meaningful outcomes, while giving visitors an easy path to explore the related case studies.

### Layout and alignment
- Use a full-width dark page background and place the content inside a large, centered rounded panel.
- Keep the panel narrower than the viewport with generous side gutters; on desktop it should span roughly 94–96% of the available width.
- Add a slim section header above the panel: a left-aligned statement about customer adoption or outcomes and a small right-aligned text link to the collection of stories.
- Inside the panel, arrange four equal-width columns on desktop. Each column is a self-contained case-study tile.
- Align the top copy consistently across all columns, with centered text and a controlled maximum width so line breaks feel deliberate.
- Create substantial vertical breathing room between the description and the logo row. The logos should sit near the lower portion of the panel, with the link directly below each mark where relevant.
- On smaller screens, collapse to one or two columns, preserve generous horizontal padding, and keep the reading order as statement → logo → link.

### Typography hierarchy
- Use a clean sans-serif UI typeface, or the user's brand typeface if available.
- Make the section heading medium-sized and calm rather than promotional: approximately 20–24px desktop, with a 1.2–1.35 line-height.
- Set case-study descriptions around 15–16px with a 1.45–1.6 line-height. Use normal or book weight, and allow selective emphasis for the customer or product name with a slightly brighter colour.
- Render logo wordmarks as visual assets or text treatments with a strong presence, approximately 25–32px in height depending on the mark.
- Use small supporting links around 14px, with enough contrast to remain legible but clearly subordinate to the logo.

### Colour and contrast
- Use an almost-black page background, approximately `#070707` to `#0A0A0A`.
- Use a subtly lighter panel, approximately `#101010` to `#121212`.
- Add a quiet 1px border in approximately `#282828` or `rgba(255,255,255,0.12)`.
- Use primary text around `#E8E8E8`, secondary description text around `#9B9B9B`, and muted links around `#888888`.
- Keep logos monochrome, generally off-white around `#F2F2F2`; if real brand assets are unavailable, use neutral typographic wordmarks rather than invented colourful marks.
- Avoid gradients, vivid accent colours, shadows, or decorative effects unless they are part of the user's established brand.

### Borders, radius, and spacing
- Give the outer panel a large radius, approximately 28–32px desktop and 20–24px on mobile.
- Use generous panel padding: roughly 68–72px top and bottom, with 48–68px horizontal padding on desktop.
- Maintain consistent column gutters of approximately 32–48px.
- Keep the header-to-panel gap around 48–64px and the logo-to-link gap around 16–20px.
- Use only the outer panel border; avoid individual card borders so the four columns read as one cohesive surface.

### Interaction and accessibility
- Make the header link and each case-study link visibly interactive with a subtle colour shift on hover and a clear keyboard focus ring.
- If the whole tile is clickable, ensure there is one clear accessible link target and do not create nested links.
- Preserve readable contrast, meaningful link text, alt text for logo assets, and responsive wrapping for long customer names.
- Keep hover motion restrained: a small upward shift or opacity/colour transition of roughly 150–200ms is sufficient.

## Never
- Never reuse the reference's logos, product names, customer names, case-study copy, or exact wording.
- Never reproduce the reference layout as a pixel-for-pixel copy; adapt the structure to the user's content and brand.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never invent trademarked customer marks when the user's product does not have approved assets; use neutral placeholders or text-based marks instead.
- Never let decorative treatment overpower the proof points or make the section feel like a generic logo strip.