tech-stack-logos

Summary

"Our stack" — a second logos strip listing third-party tools the agency works with (OpenAI, Make, Zapier, Slack, Notion, etc.). Visually identical pattern to the upper trust strip but with an "Our stack" eyebrow and tool logos instead of client logos.

HTML structure (minimal)

<section class="stack">
  <p class="stack__eyebrow">Our stack</p>
  <ul class="stack__row">
    <li><img src="/logos/openai.svg" alt="OpenAI"></li>
    <li><img src="/logos/make.svg"   alt="Make"></li>
    <li><img src="/logos/zapier.svg" alt="Zapier"></li>
    <li><img src="/logos/slack.svg"  alt="Slack"></li>
    <li><img src="/logos/notion.svg" alt="Notion"></li>
    <li><img src="/logos/linear.svg" alt="Linear"></li>
  </ul>
</section>

Key SCSS tokens

.stack {
  padding: 48px 32px;
  text-align: center;
  background: #ffffff;
  font-family: "Instrument Sans", system-ui, sans-serif;
}
.stack__eyebrow {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 24px;
}
.stack__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  list-style: none;
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.stack__row img {
  max-height: 28px;
  width: auto;
}

Notable details

• Reuses the same component pattern as the trust strip — no new layout primitives, just different eyebrow + different logos.
• Communicates technical maturity ("we use the tools you already use") without a prose paragraph.
• Same single typeface, same row geometry, same hairline-or-nothing chrome.

Use when

• Agencies / consultancies positioning around an integration story (fits "we plug into your stack" copy).
• B2B services where the buyer recognizes the third-party tool logos and that recognition itself is the trust signal.
• Pages where you've already used a "client logos" strip and want a parallel beat lower down.

Caveats

• Two logo strips on one page risks redundancy — only deploy this when the second strip carries a different message (clients vs tools).
• Tool brand assets often have their own usage rules (color, clear space) — check each before flattening to monochrome.
• On narrow viewports the row needs to wrap into a 3-up grid; the static-row pattern doesn't adapt by itself.