← Visual Library / Trust bands

Pain-band problem statement

A dark interlude band that names the problems the product solves. Sits between hero and product showcase — interrupts the visual flow with high contrast to make readers say "yes, that's me." Italic-accent on the cathartic key phrase ("the part that hurts").

Trust bands Built
Use when — your product solves visceral, name-able problems (mangueras que se enredan, software lento que te hace perder horas, ropa que pica). Drop a pain-band right after the hero to confirm you understand the reader's frustration, before pivoting to your solution. Hormozi-style "AGITATE the problem" beat without being overdramatic.

Live demo

El problema

Tu manguera actual te frustra cada finde.

Las mangueras convencionales se enredan, pesan, se agrietan al primer invierno, y la pistola va dura. Nos lo dijiste tú, y por eso Mithjem existe.

Pesa demasiado. Arrastrarla por el jardín es un esfuerzo, no un placer.
Se enreda sola. Pasas más tiempo desliando que regando.
Se agrieta en invierno. Compras una nueva cada 2 años.

HTML

<section class="pain-band">
  <div class="pain-band-eyebrow">El problema</div>
  <h2>Tu manguera actual <em>te frustra cada finde.</em></h2>
  <p class="pain-band-sub">Las mangueras convencionales se enredan, pesan,
  se agrietan al primer invierno...</p>
  <div class="pain-bullets">
    <div class="pain-bullet">
      <svg>...icon...</svg>
      <span class="pain-bullet-text">
        <strong>Pesa demasiado.</strong> Arrastrarla por el jardín...
      </span>
    </div>
    <!-- 2-4 more bullets -->
  </div>
</section>

CSS — the canonical shape

.pain-band {
  background: #1a1a1a;        /* near-black, NOT pure black */
  color: #fff;
  padding: 60px 32px;          /* generous vertical, the band needs to breathe */
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pain-band-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);        /* brand color signals "this is a moment" */
  margin-bottom: 16px;
  font-weight: 600;
}
.pain-band h2 {
  font-size: clamp(24px, 3.4vw, 36px);
  max-width: 22ch;             /* short line, hits like a sentence */
  margin: 0 auto 14px;
  text-wrap: balance;
  line-height: 1.2;
}
.pain-band h2 em {
  color: var(--accent);        /* italic+accent on THE phrase that hurts */
  font-style: italic;
  font-weight: 600;
}
.pain-band-sub {
  color: rgba(255,255,255,0.7);
  max-width: 52ch;
  margin: 0 auto 32px;
}
.pain-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 800px;
  margin: 0 auto;
}
.pain-bullet {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-align: left;            /* bullets read left-aligned even though band is centered */
}

Copywriting recipe

1. Eyebrow = "El problema" (or equiv). Names what's coming. Reader's eye registers the section purpose in one glance.

2. Headline = the cathartic sentence. The whole reason the reader stops scrolling. Should be 6–10 words max, in second-person ("Tu manguera te frustra..." not "Las mangueras frustran..."). The italic+accent <em> wraps THE phrase that names the feeling — the part the reader was thinking but hadn't said out loud.

3. Sub = 1 sentence that acknowledges + transitions. Confirms you've heard the user ("Nos lo dijiste tú"). Sets up your product as the response without naming features yet.

4. 3 bullets = the specific frictions. Bold the problem itself ("Pesa demasiado."), then a one-line reformulation in plain language ("Arrastrarla por el jardín es un esfuerzo"). 3 bullets is the magic number — 2 feels sparse, 5+ feels like a complaint.

Dials

Background color. #1a1a1a reads as "serious" without going pure black (which feels designerly). Slightly warmer than pure neutral helps it feel human.

Italic + accent on ONE phrase. Tempting to italicize multiple phrases for "emphasis," but it dilutes the impact. Pick the most cathartic 3–4 words and own it.

Centered headline, left-aligned bullets. The headline is rhetorical (centered = pronouncement). The bullets are practical (left-aligned = scannable list).

Don't make this the hero. Pain-bands work because they're an interlude. They sit between the hero (aspirational, your product in use) and the product showcase (features). If you lead with pain, you signal "this site is going to be a slog."

Gotchas worth knowing

Don't pile on. Listing 6 pain points reads as whining. Keep it to 3. The reader fills in the rest.

Match the actual conversation. If your pain band says "convenes 12 hours of meetings a week" and your category research shows users complain about "too many slack notifications," you're guessing. Lift exact phrasings from Amazon reviews, Reddit threads, customer interviews.

Bullet icons can be any line-art. The pattern works with broken-circle / X / lightning / weight icons. Keep them all single-color (accent) for consistency. Don't pull from a multi-color illustration set.

Mobile. Bullets auto-stack via grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) — no media query needed. Each bullet remains touch-target sized at ~52px tall.

Pairs well with

Source: Mithjem homepage pain-band ("Tu manguera actual te frustra cada finde"), 2026-05-22+. Hormozi "agitate the problem" beat adapted to a Scandinavian / restrained tone — the italic accent does the emotional work without ALL CAPS or red text.