The Logo Cloud: Why "Trusted by" Is the Emptiest Social Proof on the Web (2026)

Open the inspector on the logo strip under almost any AI-built SaaS hero and you find the same thing: an SVG named logoipsum-241.svg. Not Stripe. Not Notion. Not a single company that has ever paid the product a dollar. A placeholder from logoipsum.com — the Lorem Ipsum of brand marks — sitting under the word "Trusted by" in a text-sm uppercase tracking-wider text-gray-400.

That is the whole genre in one detail. The element exists to perform the *shape* of social proof while containing none of the substance. It is a div that says "people like this" addressed to a page that, statistically, no one has bought yet.

I have audited enough of these to predict the markup before I open DevTools. Let me show you the exact pattern, why it converts nobody, and what you put there instead.

The artifact

Here is the strip, reconstructed from roughly the hundredth time I have seen it. Tailwind, because of course it is Tailwind.

<section class="py-12 border-t border-gray-100">
  <p class="text-center text-sm font-medium uppercase tracking-wider text-gray-400 mb-8">
    Trusted by teams at
  </p>
  <div class="flex items-center justify-center gap-12 flex-wrap">
    <img src="/logos/logoipsum-1.svg"  class="h-8 opacity-60 grayscale hover:opacity-100 transition" />
    <img src="/logos/logoipsum-2.svg"  class="h-8 opacity-60 grayscale hover:opacity-100 transition" />
    <img src="/logos/logoipsum-3.svg"  class="h-8 opacity-60 grayscale hover:opacity-100 transition" />
    <img src="/logos/logoipsum-4.svg"  class="h-8 opacity-60 grayscale hover:opacity-100 transition" />
    <img src="/logos/logoipsum-5.svg"  class="h-8 opacity-60 grayscale hover:opacity-100 transition" />
    <img src="/logos/logoipsum-6.svg"  class="h-8 opacity-60 grayscale hover:opacity-100 transition" />
  </div>
</section>

Four tells, all load-bearing:

• opacity-60 grayscale — the logos are deliberately muted. The stated reason is "visual cohesion," so a rainbow of brand colors doesn't fight the hero. The real effect is that you can't read them, which conveniently hides that they're fake.
• hover:opacity-100 — the one interaction nobody performs. You don't hover a logo strip. It exists so the component "feels" interactive in a Framer preview.
• gap-12 — six logos, evenly spaced, centered. Identical rhythm to the three-identical-card grid one section down. Same generative instinct: fill horizontal space with N equal things.
• The copy: "Trusted by teams at" — passive, hedged, plural. Not "Used daily by 1,200 engineers at Linear." Just *teams*, somewhere, at *places*.

When the designer wants more energy, the static flex becomes an infinite marquee, and the slop deepens.

The marquee escalation

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-marquee {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: scroll 30s linear infinite;
}
.logo-marquee:hover { animation-play-state: paused; }

<div class="overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
  <div class="logo-marquee">
    <!-- the same 6 logos, duplicated twice so the loop seams hide -->
  </div>
</div>

Three sub-tells worth naming because they travel as a set:

• translateX(-50%) with the logo list duplicated. The list is printed twice; the animation scrolls exactly half its width, then snaps to 0 invisibly. It's the canonical seamless-marquee trick, copy-pasted from the same Stack Overflow answer into every codebase. There is nothing wrong with the technique — it's the *reason* it's there that's hollow.
• The mask-image linear-gradient fade on both edges. Logos dissolve into the page at left and right. It looks expensive. It also means the logos at the edges are unreadable, which — again — hides that they're placeholders.
• animation: scroll 30s linear infinite. Constant velocity, no easing, no pause except on hover. Motion for the sake of motion, the print equivalent of fade-in-up on every scroll: movement that signals "modern" and communicates nothing.

Ask the obvious question the pattern is built to suppress: *why is the logo strip moving?* A wall of customer logos is a static fact — "these companies use us." You don't animate a fact. You animate it when you have six logos and need them to feel like sixty, when the scroll past the edge implies "and many more" that the customer list cannot actually deliver. The marquee is a confidence trick performed in CSS.

Why it persuades no one

Social proof works on a single mechanism: *someone like me, in a situation like mine, got a result I want.* Every word in that sentence is doing work. "Someone like me" — relevance. "Situation like mine" — context. "Result I want" — outcome. The logo cloud delivers none of the three.

It's anonymous in the wrong direction. A real testimonial names a person: title, company, face. The logo cloud names companies but no people, no use case, no result. "Spotify uses us" — for what? Their 300-person data team, or one intern who signed up for the free tier in 2023 and churned? The logo asserts a relationship and withholds every detail that would let you evaluate it.

The grayscale is an admission. Real customers are proud to be customers — they let you use their full-color logo, they give you a quote, they show up in a case study with a number. When a brand de-saturates and mutes its logo wall to opacity-60, it is telling you, in the visual grammar, *please don't look too closely at these.* Compare a page that puts one logo at full opacity, full color, next to "Increased trial-to-paid 34% in 6 weeks — Dana Cho, Head of Growth, Retool." That brand wants you to read it. The grayscale wall does not.

The visitor has seen it 400 times this month. This is the deeper problem and it's the same engine driving why every AI-generated website looks the same: when a pattern becomes the default output of v0, Lovable, and Framer's starter templates, it stops carrying information. A logo strip used to mean "this company landed real enterprise customers and is showing them off." Now it means "this is section three of the template." The signal decayed to noise the moment it became free to generate. Your visitor's pattern-matcher has filed "grayscale logo marquee" under *generic SaaS landing*, right next to the blue-purple gradient and the bento grid, and it gets the same amount of attention: zero.

Half the logos are fake and people can tell. Not consciously, always — but the fakery leaks. Logoipsum marks have a particular blandness: invented geometric glyphs paired with words like "Nexus," "Vertex," "Quantum." A visitor who has seen any real B2B page registers, somewhere below articulation, that these aren't companies they recognize, and the "trusted by" claim quietly fails to land. You spent a section of your most valuable real estate — directly under the hero, the second thing anyone sees — to make a claim the visitor's gut marked as false.

How to read it on someone else's site

Fast audit, in the spirit of reading the CSS for tells. Open DevTools, inspect the strip, and check four things in about fifteen seconds:

• Image filenames. logoipsum-*.svg, logo-1.svg, placeholder-*.svg, or anything sequential and unnamed → fake. Real logos are named stripe.svg, notion-logo.svg, acme-corp.svg.
• grayscale + opacity-60 together. The muting combo. Present on essentially every templated strip.
• A @keyframes named scroll, marquee, or slide with translateX(-50%) and a duplicated child list. The seamless-loop fingerprint.
• The headline copy. "Trusted by teams at" / "Powering the best teams" / "Join thousands of companies" with no number and no name → empty by construction.

Three or four hits and you're looking at scaffolding, not proof. The company has not earned the section; the generator installed it.

What real proof looks like

Replace the entire strip with one sentence that survives scrutiny. The format that works:

> One named customer + one specific number + one attributable human.

Concretely, swap the six grayscale ghosts for:

<figure class="max-w-2xl mx-auto text-center py-12">
  <blockquote class="text-xl leading-relaxed text-gray-900">
    "We cut our invoice reconciliation from 6 hours a week to 40 minutes.
     Paid for itself in the first month."
  </blockquote>
  <figcaption class="mt-4 flex items-center justify-center gap-3 text-sm text-gray-600">
    <img src="/avatars/dana-cho.jpg" class="h-10 w-10 rounded-full" alt="" />
    <span><strong>Dana Cho</strong>, Head of Finance ·
      <span class="text-gray-400">Lattice (180 employees)</span></span>
  </figcaption>
</figure>

No grayscale. No marquee. No opacity trick. A claim a competitor could fact-check, attached to a person with a last name and a job, at a company with a headcount. *That* is "someone like me, in a situation like mine, got a result I want."

If you genuinely have a wall of real customers — congratulations, you earned the section — then earn the rest of it too:

• Full color, full opacity. If Figma is a customer, show the Figma logo as Figma's brand team designed it. Muting a real logo throws away the only thing that made it worth showing.
• No animation. A static grid of real logos is more credible than a moving one. Motion reads as "we need these to feel like more than they are."
• Make at least one clickable to a real case study with a real number. "Ramp → read how they saved $400k" turns a logo from decoration into evidence.
• Caption the wall with a count that's true. "1,847 companies, including:" — a specific number, not "thousands," not "teams everywhere."

The asymmetry is the whole point. The fake logo cloud costs nothing to ship and returns nothing. One real testimonial costs a phone call with an actual customer — and that call is the work the company was avoiding by generating a placeholder strip instead. The strip is what you build when you don't have the testimonial. Visitors feel the difference even when they can't name it.

The deeper tell

The logo cloud is a tell about the *company*, not just the page. Shipping six grayscale placeholders under "Trusted by" the week you launch means you wrote the social-proof section before you had any social proof — you let the template dictate that this section must exist, then filled it with nothing because the template said so. That's the same backwards reasoning as a bento grid with no content to justify the cells, or a stats bar reading "10k+ users" before user one.

Real landing pages are written outward from facts the company actually has. If you have one delighted customer, you have a testimonial section, and it has one entry, and that is fine — one true thing beats six false ones. If you have zero, you don't have a "Trusted by" section yet. You have a "Be the first" section, or no section, and you spend that vertical space on the product instead.

Delete the marquee. Make the call. Get the number. Put the name on it. The emptiest 120 pixels on your page become the only 120 that convert.