---
id: seed:patterns/trust-signals
title: Trust signals patterns
source_type: seed_pattern
priority: warm
---

Trust signals reduce friction by confirming your credibility without demanding proof. Use when the visitor is on the fence and needs reassurance. Four working variations:

---

**Security badges row.** Logos/certifications showing compliance and data protection.

*Animation & Visual Details:*
- *Entrance*: Badges fade in with stagger (0.06s between), scale 0.9 → 1
- *Hover*: Badge has gradient border and tooltip appears
- *Gradients*: Badge icon has gradient fill (accent at 10%)
- *Radial circles*: Radial glow behind each badge icon
- *Scroll trigger*: IntersectionObserver at 20% threshold
- *JS interaction*: Tooltip on hover explaining the certification

```html
<section data-amb-section="trust" class="trust-section trust-section--security">
  <div class="container">
    <p class="trust-label">Security you can count on</p>
    <div class="trust-badges">
      <div class="trust-badge" title="SOC 2 Type II Certified - Annual security audit completed">
        <div class="trust-badge-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <span class="trust-badge-name">SOC 2</span>
        <span class="trust-badge-type">Type II</span>
      </div>
      <div class="trust-badge" title="GDPR Compliant - Full data protection regulation compliance">
        <div class="trust-badge-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        </div>
        <span class="trust-badge-name">GDPR</span>
        <span class="trust-badge-type">Compliant</span>
      </div>
      <div class="trust-badge" title="ISO 27001 Certified - Information security management">
        <div class="trust-badge-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <span class="trust-badge-name">ISO</span>
        <span class="trust-badge-type">27001</span>
      </div>
      <div class="trust-badge" title="256-bit SSL Encryption - Bank-level data protection">
        <div class="trust-badge-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        </div>
        <span class="trust-badge-name">SSL</span>
        <span class="trust-badge-type">256-bit</span>
      </div>
    </div>
  </div>
</section>
```

```css
:root {
  --trust-enter-duration: 0.5s;
  --trust-stagger: 0.06s;
}

.trust-section {
  padding: clamp(40px, 6vw, 60px) 0;
}

.trust-section--security {
  background: var(--color-bg-alt, #f8fafc);
}

.trust-label {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.trust-badge.is-visible {
  animation: trust-badge-enter var(--trust-enter-duration) ease-out forwards;
}

.trust-badge:nth-child(1).is-visible { animation-delay: 0s; }
.trust-badge:nth-child(2).is-visible { animation-delay: var(--trust-stagger); }
.trust-badge:nth-child(3).is-visible { animation-delay: calc(var(--trust-stagger) * 2); }
.trust-badge:nth-child(4).is-visible { animation-delay: calc(var(--trust-stagger) * 3); }

@keyframes trust-badge-enter {
  to { opacity: 1; transform: scale(1); }
}

.trust-badge:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

.trust-badge-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.05));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.trust-badge-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trust-badge:hover .trust-badge-icon::before {
  opacity: 1;
}

.trust-badge-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent, #6366f1);
}

.trust-badge-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.trust-badge-type {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .trust-badge {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const badges = document.querySelectorAll('.trust-badge');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });
badges.forEach(badge => observer.observe(badge));

badges.forEach(badge => {
  badge.addEventListener('mouseenter', () => {
    const tooltip = badge.getAttribute('title');
    if (tooltip) {
      badge.setAttribute('data-tooltip', tooltip);
      badge.setAttribute('title', '');
    }
  });
});
```

---

**Guarantee badge strip.** Money-back or satisfaction guarantees with visual emphasis.

*Animation & Visual Details:*
- *Entrance*: Badges slide in from bottom with stagger (0.08s between)
- *Hover*: Badge has shimmer animation across surface
- *Gradients*: Badge has gradient background (accent at 5%)
- *Radial circles*: Radial ring around guarantee icon
- *Scroll trigger*: IntersectionObserver at 25% threshold
- *JS interaction*: Shimmer animation on hover

```html
<section data-amb-section="trust" class="trust-section trust-section--guarantee">
  <div class="container">
    <div class="trust-guarantees">
      <div class="trust-guarantee">
        <div class="trust-guarantee-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        </div>
        <div class="trust-guarantee-content">
          <h3 class="trust-guarantee-title">14-day money back</h3>
          <p class="trust-guarantee-text">No questions asked. Cancel anytime in the first two weeks and get a full refund.</p>
        </div>
      </div>
      <div class="trust-guarantee">
        <div class="trust-guarantee-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <div class="trust-guarantee-content">
          <h3 class="trust-guarantee-title">99.9% uptime SLA</h3>
          <p class="trust-guarantee-text">We guarantee it in writing. If we miss the target, you get credited for the difference.</p>
        </div>
      </div>
      <div class="trust-guarantee">
        <div class="trust-guarantee-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        </div>
        <div class="trust-guarantee-content">
          <h3 class="trust-guarantee-title">Your data is yours</h3>
          <p class="trust-guarantee-text">Export everything anytime. We never hold your data hostage, even if you cancel.</p>
        </div>
      </div>
    </div>
  </div>
</section>
```

```css
.trust-section--guarantee {
  background: #fff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.trust-guarantees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.trust-guarantee {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--color-bg-alt, #f8fafc);
  border-radius: 16px;
  opacity: 0;
  transform: translateY(20px);
  position: relative;
  overflow: hidden;
}

.trust-guarantee.is-visible {
  animation: trust-guarantee-enter 0.5s ease-out forwards;
}

.trust-guarantee:nth-child(1).is-visible { animation-delay: 0s; }
.trust-guarantee:nth-child(2).is-visible { animation-delay: 0.08s; }
.trust-guarantee:nth-child(3).is-visible { animation-delay: 0.16s; }

@keyframes trust-guarantee-enter {
  to { opacity: 1; transform: translateY(0); }
}

.trust-guarantee::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}

.trust-guarantee:hover::after {
  left: 100%;
}

.trust-guarantee-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.05));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.trust-guarantee-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
}

.trust-guarantee-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent, #6366f1);
}

.trust-guarantee-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 4px;
}

.trust-guarantee-text {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.5;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .trust-guarantee {
    opacity: 1;
    transform: none;
  }
  .trust-guarantee::after {
    display: none;
  }
}
```

*JS behavior:*
```javascript
const guarantees = document.querySelectorAll('.trust-guarantee');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.25 });
guarantees.forEach(g => observer.observe(g));
```

---

**Team credibility block.** Founder photos, credentials, and social proof near conversion.

*Animation & Visual Details:*
- *Entrance*: Founder cards slide in from right, 0.2s stagger
- *Hover*: Card lifts with radial glow behind photo
- *Gradients*: Credentials have gradient text fill
- *Radial circles*: Radial ring behind founder photo
- *Scroll trigger*: IntersectionObserver at 20% threshold
- *JS interaction*: None beyond entrance

```html
<section data-amb-section="trust" class="trust-section trust-section--team">
  <div class="container">
    <h3 class="trust-team-title">Built by people who've been there</h3>
    <div class="trust-team">
      <div class="trust-founder">
        <div class="trust-founder-photo-wrapper">
          <div class="trust-founder-glow"></div>
          <img class="trust-founder-photo" src="https://placehold.co/80x80" alt="Sarah Chen" />
        </div>
        <div class="trust-founder-info">
          <h4 class="trust-founder-name">Sarah Chen</h4>
          <span class="trust-founder-role">CEO, ex-Stripe</span>
          <div class="trust-founder-cred">
            <span class="trust-cred-badge">8 years at Stripe</span>
          </div>
        </div>
      </div>
      <div class="trust-founder">
        <div class="trust-founder-photo-wrapper">
          <div class="trust-founder-glow"></div>
          <img class="trust-founder-photo" src="https://placehold.co/80x80" alt="Marcus Rodriguez" />
        </div>
        <div class="trust-founder-info">
          <h4 class="trust-founder-name">Marcus Rodriguez</h4>
          <span class="trust-founder-role">CTO, ex-Google</span>
          <div class="trust-founder-cred">
            <span class="trust-cred-badge">SRE at Google 6 years</span>
          </div>
        </div>
      </div>
      <div class="trust-founder">
        <div class="trust-founder-photo-wrapper">
          <div class="trust-founder-glow"></div>
          <img class="trust-founder-photo" src="https://placehold.co/80x80" alt="Priya Patel" />
        </div>
        <div class="trust-founder-info">
          <h4 class="trust-founder-name">Priya Patel</h4>
          <span class="trust-founder-role">Head of Design, ex-Figma</span>
          <div class="trust-founder-cred">
            <span class="trust-cred-badge">Design systems at 2 unicorns</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

```css
.trust-section--team {
  background: var(--color-bg-alt, #f8fafc);
  padding: clamp(48px, 6vw, 72px) 0;
}

.trust-team-title {
  text-align: center;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 32px;
}

.trust-team {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.trust-founder {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  opacity: 0;
  transform: translateX(30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-founder.is-visible {
  animation: trust-founder-enter 0.5s ease-out forwards;
}

.trust-founder:nth-child(1).is-visible { animation-delay: 0s; }
.trust-founder:nth-child(2).is-visible { animation-delay: 0.1s; }
.trust-founder:nth-child(3).is-visible { animation-delay: 0.2s; }

@keyframes trust-founder-enter {
  to { opacity: 1; transform: translateX(0); }
}

.trust-founder:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}

.trust-founder-photo-wrapper {
  position: relative;
}

.trust-founder-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trust-founder:hover .trust-founder-glow {
  opacity: 1;
}

.trust-founder-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.trust-founder-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-founder-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin: 0;
}

.trust-founder-role {
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
}

.trust-founder-cred {
  margin-top: 4px;
}

.trust-cred-badge {
  display: inline-block;
  padding: 3px 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(124,58,237,0.05));
  color: var(--color-accent, #6366f1);
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .trust-founder {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const founders = document.querySelectorAll('.trust-founder');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });
founders.forEach(f => observer.observe(f));
```

---

**Media mentions carousel.** Scrolling logos of publications that have covered you.

*Animation & Visual Details:*
- *Entrance*: Logos fade in with stagger (0.05s between)
- *Scroll*: Infinite horizontal scroll with CSS animation
- *Gradients*: Fade masks on left/right edges
- *Radial circles*: None
- *Scroll trigger*: Not applicable (auto-scroll)
- *JS interaction*: CSS-only infinite scroll animation

```html
<section data-amb-section="trust" class="trust-section trust-section--press">
  <div class="container">
    <p class="trust-press-label">As seen in</p>
    <div class="trust-press-track-wrapper">
      <div class="trust-press-track">
        <div class="trust-press-item">
          <svg viewBox="0 0 100 32" fill="currentColor"><text x="10" y="22" font-size="14" font-weight="bold">TechCrunch</text></svg>
        </div>
        <div class="trust-press-item">
          <svg viewBox="0 0 100 32" fill="currentColor"><text x="10" y="22" font-size="14" font-weight="bold">Forbes</text></svg>
        </div>
        <div class="trust-press-item">
          <svg viewBox="0 0 100 32" fill="currentColor"><text x="10" y="22" font-size="14" font-weight="bold">Wired</text></svg>
        </div>
        <div class="trust-press-item">
          <svg viewBox="0 0 100 32" fill="currentColor"><text x="10" y="22" font-size="14" font-weight="bold">Product Hunt</text></svg>
        </div>
        <div class="trust-press-item">
          <svg viewBox="0 0 100 32" fill="currentColor"><text x="10" y="22" font-size="14" font-weight="bold">The Verge</text></svg>
        </div>
        <div class="trust-press-item">
          <svg viewBox="0 0 100 32" fill="currentColor"><text x="10" y="22" font-size="14" font-weight="bold">Inc.</text></svg>
        </div>
      </div>
    </div>
  </div>
</section>
```

```css
.trust-section--press {
  background: #fff;
  padding: clamp(40px, 5vw, 56px) 0;
}

.trust-press-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.trust-press-track-wrapper {
  position: relative;
  overflow: hidden;
}

.trust-press-track-wrapper::before,
.trust-press-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.trust-press-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.trust-press-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

.trust-press-track {
  display: flex;
  gap: 48px;
  animation: trust-press-scroll 20s linear infinite;
  width: max-content;
}

.trust-press-item {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.trust-press-item:hover {
  opacity: 1;
}

.trust-press-item svg {
  height: 24px;
  width: auto;
  color: var(--color-text, #1e293b);
}

@keyframes trust-press-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-press-track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
  }
}
```

*JS behavior:*
```javascript
// CSS-only animation - no JS required
// To pause on hover, add this CSS:
// .trust-press-track:hover { animation-play-state: paused; }
```

---

Copy rules: trust signals work best when they're specific and verifiable. "SOC 2 Type II" beats "enterprise security." "8 years at Stripe" beats "experienced team." Only display press logos the visitor will recognize.

Layout rules: security badges belong near pricing/checkout. Guarantees work in the pricing section or near the CTA. Founder credibility works mid-page before pricing. Media logos work near the top under the hero.

CSS custom property summary:
```css
:root {
  --trust-enter-duration: 0.5s;
  --trust-stagger: 0.06s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```