← Visual Library / Trust bands

Risk-reversal band with badges

Hormozi-style dark band that reverses purchase risk in 5 seconds of reading: italic-accent on the promise verb ("the part the buyer cares about"), then 2 small glass-pill badges with single-color icons to back it up. Sits between the product showcase and the social-proof block.

Trust bands Built
Use when — you've named the problem (pain-band), shown the product (showcase), and now need to remove the "what if I don't like it?" objection that's blocking the click. Different from the guarantee-dark band (#24) — that one is single-claim, this one stacks multiple guarantees as glass pills.

Live demo

Cero riesgo

Si no es lo que esperabas, la devuelves.

Si por alguna razón nuestro producto no es lo que esperabas, te ofrecemos devolución de 30 días sin preguntas, sin pedir fotos ni nada por el estilo.

30 días · Devolución Amazon 3 años · Garantía UE

HTML

<section class="risk-band">
  <div class="risk-band-eyebrow">Cero riesgo</div>
  <h2>Si no es lo que esperabas, <em>la devuelves.</em></h2>
  <p class="risk-band-sub">Si por alguna razón nuestro producto no es lo
  que te esperabas, te ofrecemos devolución de 30 días sin preguntas...</p>
  <div class="risk-badges">
    <span class="risk-badge">
      <svg>...icon...</svg>
      <strong>30 días</strong> · Devolución Amazon
    </span>
    <span class="risk-badge">
      <svg>...icon...</svg>
      <strong>3 años</strong> · Garantía UE
    </span>
  </div>
</section>

CSS — the whole pattern

.risk-band {
  background: #050507;          /* darker than pain-band — this is "final" weight */
  color: #fff;
  padding: 80px 32px;            /* deeper than pain-band — this is a destination */
  text-align: center;
  position: relative;
  overflow: hidden;
}
.risk-band-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 22px;
}
.risk-band h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  max-width: 22ch;               /* short = punchy */
  text-wrap: balance;
  line-height: 1.2;
}
.risk-band h2 em {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;              /* heavier than the rest = emphasis */
}
.risk-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.risk-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: rgba(255,255,255,0.95);

  /* THE KEY VISUAL — glass-pill effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: background 300ms ease, border-color 300ms ease;
}
.risk-badge:hover {
  background: rgba(217, 119, 87, 0.10);
  border-color: rgba(217, 119, 87, 0.35);
}
.risk-badge svg { width: 18px; height: 18px; color: var(--accent); }
.risk-badge strong { color: #fff; font-weight: 700; }

Copywriting recipe

Eyebrow = the promise category. "Cero riesgo", "Sin compromiso", "Sin letra pequeña", "Sin esperar". Sets expectation in 2–3 words.

Headline = if X, then Y. Conditional structure. Subject is the buyer's worst-case worry ("if it's not what you expected"); object is the reversal ("you return it"). Italic+accent on the verb that resolves the worry ("la devuelves"). That verb is what the reader needed to hear.

Sub = remove every excuse. Pre-empt the next objection ("sin preguntas, sin pedir fotos"). This isn't padding — every phrase removes one micro-friction.

Badges = the proof points. 2 badges is the sweet spot (3 starts feeling defensive). Each badge: one number/duration (the bold strong), one short qualifier. Icons match: bag for returns, shield for warranty, lock for security.

Dials

Background depth. Pain-band is #1a1a1a; risk-band is darker, #050507. The risk-band is the "anchor" — going darker reads as more confident/final.

Headline em-weight. The italic+accent phrase here uses font-weight: 700 (heavier than the surrounding text at 600). Pain-band uses 600 for the em (same weight, accent color only). This band is more conclusive, so heavier weight signals "we mean it."

Badge hover. The hover state (terracotta-tinted background + border) makes the badges feel interactive even though they're not links. Subtle but adds a "this is solid, you can touch it" quality.

Glass effect. backdrop-filter: blur(10px) is the difference between "label" and "object on glass." Required on iOS Safari + Chrome 76+; doesn't degrade catastrophically on older browsers.

Light-mode override. This band typically stays DARK in both themes — risk-reversal is high-stakes and a dark band signals weight. In Mithjem's implementation, the light-mode override explicitly forces dark colors with !important.

Gotchas worth knowing

Don't link the badges. They're proof, not navigation. Linking them out (to a returns page) often hurts conversion — the badge's job is to make the buyer feel safe enough to click the CTA, not to send them off-page.

SVG color via currentColor. Setting color: var(--accent) on the badge wrapper + stroke="currentColor" on the SVG means the icon color inherits. Easier to theme than hard-coded fills.

Avoid emoji for the badges. Tempting to use 🛡️ or 💰 for the icons, but emoji render inconsistently across OSes and look cheap on a premium brand band. Stroke SVGs (1.7px stroke-width) match the line-art aesthetic.

Pairs well with

Source: Mithjem homepage + product pages "Cero riesgo" section, 2026-05-22+. Hormozi-formula risk-reversal beat. Light-mode override explicitly forces dark variant.