<div><span class="lbl">Hero over a faded grid</span>
<section class="bp-section bp-hero" aria-labelledby="bp-hero-title">
<p class="bp-eyebrow">Shiplog for product teams</p>
<h2 class="bp-title" id="bp-hero-title">Release notes your customers actually read</h2>
<p class="bp-lead">Draft updates from merged pull requests, tag them by audience and publish to an in-app widget, an email digest and a public page in one step.</p>
<div class="bp-actions"><a class="bp-btn bp-btn-primary" href="#">Start a free changelog</a><a class="bp-btn bp-btn-ghost" href="#">See a live example</a></div>
</section></div>
<div><span class="lbl">Dark hero with a gradient scrim</span>
<section class="bp-section bp-event" aria-labelledby="bp-event-title">
<div class="bp-copy">
<p class="bp-eyebrow">Northwind Live · 14 March · Lisbon</p>
<h2 class="bp-title" id="bp-event-title">A one-day summit on shipping design systems</h2>
<p class="bp-lead">Twelve talks from teams who run component libraries at scale, then an afternoon of hands-on workshops.</p>
<div class="bp-actions"><a class="bp-btn bp-btn-light" href="#">Get your ticket</a><a class="bp-btn bp-btn-outline" href="#">View the schedule</a></div>
</div>
</section></div>
<div><span class="lbl">Feature cards over a dot grid</span>
<section class="bp-section bp-features" aria-labelledby="bp-features-title">
<div class="bp-features-head"><h2 class="bp-title" id="bp-features-title">Everything a three-person support team needs</h2><p class="bp-lead">A shared inbox, saved replies and an audit trail, without the enterprise price.</p></div>
<div class="bp-cards">
<article class="bp-card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13h4l1.5 3h5L16 13h4"/><path d="M5.5 5h13L20 13v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-5z"/></svg><h3>Shared inbox</h3><p>Email, chat and contact-form messages land in one queue, with a warning when two people open the same ticket.</p></article>
<article class="bp-card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M8 9h8M8 12h5"/></svg><h3>Saved replies</h3><p>Write the answer to a common question once, insert it with a slash command and adjust the details.</p></article>
<article class="bp-card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4h6v3H9z"/><path d="M8 5.5H6a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6.5a1 1 0 0 0-1-1h-2"/><path d="M8.5 13l2.2 2.2L15.5 10.5"/></svg><h3>Audit trail</h3><p>Every assignment, tag change and refund is logged with who did it and when, ready for your next review.</p></article>
</div>
</section></div>
<div><span class="lbl">Signup band over waves</span>
<section class="bp-section bp-band" aria-labelledby="bp-band-title">
<div class="bp-band-inner">
<div><h2 class="bp-title" id="bp-band-title">Get the Thursday build log</h2><p class="bp-lead">One short email a week: what shipped, what broke and what we learned. 4,200 engineers read it.</p></div>
<form class="bp-form" action="#"><label class="sr-only" for="bp-email">Email address</label><input class="bp-input" id="bp-email" type="email" name="email" autocomplete="email" placeholder="[email protected]" required><button class="bp-btn bp-btn-accent" type="submit">Subscribe</button></form>
</div>
</section></div>
CSS
/* Section backgrounds with content on top. Patterns sit on ::before, scrims on ::after, both under the content; every text colour was checked at 4.5:1 against the brightest point of its pattern. */
/* Hero over a faded grid: the mask clears the lines behind the copy, so the text sits on plain white */
.bp-hero{--bp-color:#0f172a;--bp-size:32px;--bp-opacity:.1;position:relative;isolation:isolate;overflow:hidden;background:#fff}
.bp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity);background-image:linear-gradient(var(--bp-color) 1px,transparent 1px),linear-gradient(90deg,var(--bp-color) 1px,transparent 1px);background-size:var(--bp-size) var(--bp-size);background-position:center;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 40%,#000 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 40%,#000 100%)}
/* Dark hero: a vivid mesh on ::before and a scrim on ::after that is darkest behind the text (and solid on phones) */
.bp-event{--bp-c1:#f97316;--bp-c2:#db2777;--bp-c3:#7c3aed;--bp-scrim:2 6 23;position:relative;isolation:isolate;overflow:hidden;background:#1e1b4b}
.bp-event::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(60% 80% at 100% 0%,var(--bp-c1),transparent 70%),radial-gradient(55% 70% at 85% 100%,var(--bp-c2),transparent 70%),radial-gradient(50% 60% at 55% 40%,var(--bp-c3),transparent 70%),repeating-linear-gradient(135deg,rgb(255 255 255 / .08) 0 2px,transparent 2px 14px)}
.bp-event::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(var(--bp-scrim) / .92),rgb(var(--bp-scrim) / .7) 55%,rgb(var(--bp-scrim) / .15))}
@media (max-width:767.98px){.bp-event::after{background:rgb(var(--bp-scrim) / .8)}}
/* Feature cards over a dot grid: the cards are opaque, the heading sits on dots kept at 30% opacity */
.bp-features{--bp-color:#64748b;--bp-size:22px;--bp-dot:1.5px;--bp-opacity:.3;position:relative;isolation:isolate;overflow:hidden;background:#f1f5f9}
.bp-features::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity);background-image:radial-gradient(circle,var(--bp-color) var(--bp-dot),transparent calc(var(--bp-dot) + .5px));background-size:var(--bp-size) var(--bp-size)}
/* Signup band over waves: white waves at 10% keep body text above 4.5:1 on the blue */
.bp-band{--bp-color:#fff;--bp-size:120px;--bp-opacity:.1;--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'><path d='M0 8C20 0 40 0 60 8S100 16 120 8M0 24C20 16 40 16 60 24S100 32 120 24' fill='none' stroke='%23000' stroke-width='1.6'/></svg>");position:relative;isolation:isolate;overflow:hidden;background:#1e40af}
.bp-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity);background-color:var(--bp-color);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size) repeat;mask:var(--bp-svg) 0 0/var(--bp-size) repeat}
/* Layout and type shared by the four sections */
.bp-section{border-radius:20px;padding:48px 24px}
@media (min-width:768px){.bp-section{padding:48px}}
.bp-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.bp-title{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.bp-lead{font-size:1.0625rem;line-height:1.6;margin:0}
.bp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bp-hero{border:1px solid #e2e8f0;text-align:center;color:#0f172a}
.bp-hero .bp-eyebrow{color:#4338ca}
.bp-hero .bp-title{max-width:22ch;margin-inline:auto}
.bp-hero .bp-lead{max-width:56ch;margin-inline:auto;color:#475569}
.bp-hero .bp-actions{justify-content:center}
.bp-event{color:#fff}
.bp-event .bp-copy{max-width:34rem}
.bp-event .bp-eyebrow{color:#fdba74}
.bp-event .bp-lead{color:#e2e8f0}
.bp-features{color:#0f172a}
.bp-features-head{text-align:center;max-width:40rem;margin:0 auto 32px}
.bp-features-head .bp-lead{color:#334155}
.bp-band{color:#fff}
.bp-band .bp-title{font-size:1.5rem;margin-bottom:6px}
.bp-band .bp-lead{color:#dbeafe}
.bp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border:1px solid transparent;border-radius:10px;
font:inherit;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.bp-btn:focus-visible{outline:3px solid #4f46e5;outline-offset:3px}
.bp-btn-primary{background:#4f46e5;border-color:#4f46e5;color:#fff}
.bp-btn-primary:hover{background:#4338ca;border-color:#4338ca}
.bp-btn-ghost{background:#fff;border-color:#94a3b8;color:#0f172a}
.bp-btn-ghost:hover{border-color:#0f172a}
.bp-btn-light{background:#fff;border-color:#fff;color:#0f172a}
.bp-btn-light:hover{background:#e2e8f0;border-color:#e2e8f0}
.bp-btn-outline{background:transparent;border-color:rgb(255 255 255 / .7);color:#fff}
.bp-btn-outline:hover{background:rgb(255 255 255 / .12)}
.bp-event .bp-btn:focus-visible,.bp-band .bp-btn:focus-visible{outline-color:#fff}
.bp-btn-accent{background:#fbbf24;border-color:#fbbf24;color:#0f172a}
.bp-btn-accent:hover{background:#f59e0b;border-color:#f59e0b}
.bp-cards{display:grid;gap:16px}
@media (min-width:768px){.bp-cards{grid-template-columns:repeat(3,1fr)}}
.bp-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;box-shadow:0 1px 2px rgb(15 23 42 / .05)}
.bp-card svg{display:block;width:28px;height:28px;color:#4f46e5;margin-bottom:14px}
.bp-card h3{font-size:1.05rem;font-weight:700;margin:0 0 6px}
.bp-card p{font-size:.94rem;line-height:1.55;color:#475569;margin:0}
.bp-band-inner{display:grid;gap:24px;align-items:center}
@media (min-width:768px){.bp-band-inner{grid-template-columns:1fr minmax(0,26rem)}}
.bp-form{display:flex;flex-wrap:wrap;gap:8px}
.bp-input{flex:1 1 200px;min-width:0;min-height:46px;padding:10px 14px;border:1px solid #fff;border-radius:10px;font:inherit;font-size:1rem;color:#0f172a;background:#fff}
.bp-input::placeholder{color:#64748b}
.bp-input:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.bp-btn{transition:none}}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Hero over a faded grid</span>
<section class="bp-section bp-hero" aria-labelledby="bp-hero-title">
<p class="bp-eyebrow">Shiplog for product teams</p>
<h2 class="bp-title" id="bp-hero-title">Release notes your customers actually read</h2>
<p class="bp-lead">Draft updates from merged pull requests, tag them by audience and publish to an in-app widget, an email digest and a public page in one step.</p>
<div class="bp-actions justify-content-center"><a class="btn btn-primary" href="#">Start a free changelog</a><a class="btn btn-outline-secondary" href="#">See a live example</a></div>
</section></div>
<div><span class="lbl">Dark hero with a gradient scrim</span>
<section class="bp-section bp-event" aria-labelledby="bp-event-title">
<div class="bp-copy">
<p class="bp-eyebrow">Northwind Live · 14 March · Lisbon</p>
<h2 class="bp-title" id="bp-event-title">A one-day summit on shipping design systems</h2>
<p class="bp-lead">Twelve talks from teams who run component libraries at scale, then an afternoon of hands-on workshops.</p>
<div class="bp-actions"><a class="btn btn-light" href="#">Get your ticket</a><a class="btn btn-outline-light" href="#">View the schedule</a></div>
</div>
</section></div>
<div><span class="lbl">Feature cards over a dot grid</span>
<section class="bp-section bp-features" aria-labelledby="bp-features-title">
<div class="bp-features-head"><h2 class="bp-title" id="bp-features-title">Everything a three-person support team needs</h2><p class="bp-lead">A shared inbox, saved replies and an audit trail, without the enterprise price.</p></div>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col"><article class="card h-100"><div class="card-body"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13h4l1.5 3h5L16 13h4"/><path d="M5.5 5h13L20 13v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-5z"/></svg><h3 class="card-title">Shared inbox</h3><p class="card-text">Email, chat and contact-form messages land in one queue, with a warning when two people open the same ticket.</p></div></article></div>
<div class="col"><article class="card h-100"><div class="card-body"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M8 9h8M8 12h5"/></svg><h3 class="card-title">Saved replies</h3><p class="card-text">Write the answer to a common question once, insert it with a slash command and adjust the details.</p></div></article></div>
<div class="col"><article class="card h-100"><div class="card-body"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4h6v3H9z"/><path d="M8 5.5H6a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6.5a1 1 0 0 0-1-1h-2"/><path d="M8.5 13l2.2 2.2L15.5 10.5"/></svg><h3 class="card-title">Audit trail</h3><p class="card-text">Every assignment, tag change and refund is logged with who did it and when, ready for your next review.</p></div></article></div>
</div>
</section></div>
<div><span class="lbl">Signup band over waves</span>
<section class="bp-section bp-band" aria-labelledby="bp-band-title">
<div class="row g-4 align-items-center">
<div class="col-md"><h2 class="bp-title" id="bp-band-title">Get the Thursday build log</h2><p class="bp-lead">One short email a week: what shipped, what broke and what we learned. 4,200 engineers read it.</p></div>
<div class="col-md-auto bp-form-col"><form class="d-flex flex-wrap gap-2" action="#"><label class="visually-hidden" for="bp-email">Email address</label><input class="form-control" id="bp-email" type="email" name="email" autocomplete="email" placeholder="[email protected]" required><button class="btn btn-warning" type="submit">Subscribe</button></form></div>
</div>
</section></div>
CSS
/* Section backgrounds with content on top. Patterns sit on ::before, scrims on ::after, both under the content; every text colour was checked at 4.5:1 against the brightest point of its pattern. */
/* Hero over a faded grid: the mask clears the lines behind the copy, so the text sits on plain white */
.bp-hero{--bp-color:#0f172a;--bp-size:32px;--bp-opacity:.1;position:relative;isolation:isolate;overflow:hidden;background:#fff}
.bp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity);background-image:linear-gradient(var(--bp-color) 1px,transparent 1px),linear-gradient(90deg,var(--bp-color) 1px,transparent 1px);background-size:var(--bp-size) var(--bp-size);background-position:center;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 40%,#000 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 40%,#000 100%)}
/* Dark hero: a vivid mesh on ::before and a scrim on ::after that is darkest behind the text (and solid on phones) */
.bp-event{--bp-c1:#f97316;--bp-c2:#db2777;--bp-c3:#7c3aed;--bp-scrim:2 6 23;position:relative;isolation:isolate;overflow:hidden;background:#1e1b4b}
.bp-event::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(60% 80% at 100% 0%,var(--bp-c1),transparent 70%),radial-gradient(55% 70% at 85% 100%,var(--bp-c2),transparent 70%),radial-gradient(50% 60% at 55% 40%,var(--bp-c3),transparent 70%),repeating-linear-gradient(135deg,rgb(255 255 255 / .08) 0 2px,transparent 2px 14px)}
.bp-event::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(var(--bp-scrim) / .92),rgb(var(--bp-scrim) / .7) 55%,rgb(var(--bp-scrim) / .15))}
@media (max-width:767.98px){.bp-event::after{background:rgb(var(--bp-scrim) / .8)}}
/* Feature cards over a dot grid: the cards are opaque, the heading sits on dots kept at 30% opacity */
.bp-features{--bp-color:#64748b;--bp-size:22px;--bp-dot:1.5px;--bp-opacity:.3;position:relative;isolation:isolate;overflow:hidden;background:#f1f5f9}
.bp-features::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity);background-image:radial-gradient(circle,var(--bp-color) var(--bp-dot),transparent calc(var(--bp-dot) + .5px));background-size:var(--bp-size) var(--bp-size)}
/* Signup band over waves: white waves at 10% keep body text above 4.5:1 on the blue */
.bp-band{--bp-color:#fff;--bp-size:120px;--bp-opacity:.1;--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'><path d='M0 8C20 0 40 0 60 8S100 16 120 8M0 24C20 16 40 16 60 24S100 32 120 24' fill='none' stroke='%23000' stroke-width='1.6'/></svg>");position:relative;isolation:isolate;overflow:hidden;background:#1e40af}
.bp-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity);background-color:var(--bp-color);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size) repeat;mask:var(--bp-svg) 0 0/var(--bp-size) repeat}
/* Layout and type shared by the four sections */
.bp-section{border-radius:20px;padding:48px 24px}
@media (min-width:768px){.bp-section{padding:48px}}
.bp-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.bp-title{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.bp-lead{font-size:1.0625rem;line-height:1.6;margin:0}
.bp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bp-hero{border:1px solid #e2e8f0;text-align:center;color:#0f172a}
.bp-hero .bp-eyebrow{color:#4338ca}
.bp-hero .bp-title{max-width:22ch;margin-inline:auto}
.bp-hero .bp-lead{max-width:56ch;margin-inline:auto;color:#475569}
.bp-hero .bp-actions{justify-content:center}
.bp-event{color:#fff}
.bp-event .bp-copy{max-width:34rem}
.bp-event .bp-eyebrow{color:#fdba74}
.bp-event .bp-lead{color:#e2e8f0}
.bp-features{color:#0f172a}
.bp-features-head{text-align:center;max-width:40rem;margin:0 auto 32px}
.bp-features-head .bp-lead{color:#334155}
.bp-band{color:#fff}
.bp-band .bp-title{font-size:1.5rem;margin-bottom:6px}
.bp-band .bp-lead{color:#dbeafe}
/* Bootstrap components restyled through their CSS variables */
.bp-section .btn{--bs-btn-padding-x:20px;--bs-btn-padding-y:10px;--bs-btn-border-radius:10px;--bs-btn-font-weight:600;min-height:46px}
.bp-section .btn:focus-visible{outline:3px solid #4f46e5;outline-offset:3px;box-shadow:none}
.bp-event .btn:focus-visible,.bp-band .btn:focus-visible{outline-color:#fff}
.bp-hero .btn-primary{--bs-btn-bg:#4f46e5;--bs-btn-border-color:#4f46e5;--bs-btn-hover-bg:#4338ca;--bs-btn-hover-border-color:#4338ca;--bs-btn-active-bg:#3730a3;--bs-btn-active-border-color:#3730a3}
.bp-hero .btn-outline-secondary{--bs-btn-bg:#fff;--bs-btn-color:#0f172a;--bs-btn-border-color:#94a3b8;--bs-btn-hover-bg:#fff;--bs-btn-hover-color:#0f172a;--bs-btn-hover-border-color:#0f172a;--bs-btn-active-bg:#f1f5f9;--bs-btn-active-color:#0f172a}
.bp-event .btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-color:#0f172a;--bs-btn-hover-bg:#e2e8f0;--bs-btn-hover-border-color:#e2e8f0}
.bp-event .btn-outline-light{--bs-btn-border-color:rgb(255 255 255 / .7);--bs-btn-hover-bg:rgb(255 255 255 / .12);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:rgb(255 255 255 / .7)}
.bp-band .btn-warning{--bs-btn-bg:#fbbf24;--bs-btn-border-color:#fbbf24;--bs-btn-color:#0f172a;--bs-btn-hover-bg:#f59e0b;--bs-btn-hover-border-color:#f59e0b}
.bp-features .card{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:14px;--bs-card-spacer-y:24px;--bs-card-spacer-x:24px;box-shadow:0 1px 2px rgb(15 23 42 / .05)}
.bp-features .card svg{display:block;width:28px;height:28px;color:#4f46e5;margin-bottom:14px}
.bp-features .card-title{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.bp-features .card-text{font-size:.94rem;line-height:1.55;color:#475569}
.bp-band .bp-form-col{width:100%;max-width:26rem}
.bp-band .form-control{flex:1 1 200px;width:auto;min-width:0;min-height:46px;padding:10px 14px;border-color:#fff;border-radius:10px;color:#0f172a}
.bp-band .form-control::placeholder{color:#64748b}
.bp-band .form-control:focus{box-shadow:none}
.bp-band .form-control:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bp-section .btn{transition:none}}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Hero over a faded grid</span>
<section class="bp-hero rounded-[20px] px-6 py-12 md:p-12 border border-[#e2e8f0] text-center text-[#0f172a]" aria-labelledby="bp-hero-title">
<p class="mb-3 text-[.8rem] font-bold tracking-[.12em] uppercase text-[#4338ca]">Shiplog for product teams</p>
<h2 class="mb-3.5 text-[clamp(1.75rem,1.2rem+2vw,2.5rem)] leading-[1.15] font-extrabold tracking-[-.02em] mx-auto max-w-[22ch]" id="bp-hero-title">Release notes your customers actually read</h2>
<p class="text-[1.0625rem] leading-[1.6] mx-auto max-w-[56ch] text-[#475569]">Draft updates from merged pull requests, tag them by audience and publish to an in-app widget, an email digest and a public page in one step.</p>
<div class="mt-7 flex flex-wrap justify-center gap-3"><a class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] border px-5 py-2.5 text-base leading-normal font-semibold no-underline transition-colors duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 motion-reduce:transition-none border-[#4f46e5] bg-[#4f46e5] text-white hover:border-[#4338ca] hover:bg-[#4338ca] focus-visible:outline-[#4f46e5]" href="#">Start a free changelog</a><a class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] border px-5 py-2.5 text-base leading-normal font-semibold no-underline transition-colors duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 motion-reduce:transition-none border-[#94a3b8] bg-white text-[#0f172a] hover:border-[#0f172a] focus-visible:outline-[#4f46e5]" href="#">See a live example</a></div>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Dark hero with a gradient scrim</span>
<section class="bp-event rounded-[20px] px-6 py-12 md:p-12 text-white" aria-labelledby="bp-event-title">
<div class="max-w-[34rem]">
<p class="mb-3 text-[.8rem] font-bold tracking-[.12em] uppercase text-[#fdba74]">Northwind Live · 14 March · Lisbon</p>
<h2 class="mb-3.5 text-[clamp(1.75rem,1.2rem+2vw,2.5rem)] leading-[1.15] font-extrabold tracking-[-.02em]" id="bp-event-title">A one-day summit on shipping design systems</h2>
<p class="text-[1.0625rem] leading-[1.6] text-[#e2e8f0]">Twelve talks from teams who run component libraries at scale, then an afternoon of hands-on workshops.</p>
<div class="mt-7 flex flex-wrap gap-3"><a class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] border px-5 py-2.5 text-base leading-normal font-semibold no-underline transition-colors duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 motion-reduce:transition-none border-white bg-white text-[#0f172a] hover:border-[#e2e8f0] hover:bg-[#e2e8f0] focus-visible:outline-white" href="#">Get your ticket</a><a class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] border px-5 py-2.5 text-base leading-normal font-semibold no-underline transition-colors duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 motion-reduce:transition-none border-white/70 bg-transparent text-white hover:bg-white/12 focus-visible:outline-white" href="#">View the schedule</a></div>
</div>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Feature cards over a dot grid</span>
<section class="bp-features rounded-[20px] px-6 py-12 md:p-12 text-[#0f172a]" aria-labelledby="bp-features-title">
<div class="mx-auto mb-8 max-w-[40rem] text-center"><h2 class="mb-3.5 text-[clamp(1.75rem,1.2rem+2vw,2.5rem)] leading-[1.15] font-extrabold tracking-[-.02em]" id="bp-features-title">Everything a three-person support team needs</h2><p class="text-[1.0625rem] leading-[1.6] text-[#334155]">A shared inbox, saved replies and an audit trail, without the enterprise price.</p></div>
<div class="grid gap-4 md:grid-cols-3">
<article class="rounded-[14px] border border-[#e2e8f0] bg-white p-6 shadow-[0_1px_2px_rgb(15_23_42/.05)]"><svg class="mb-3.5 block size-7 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13h4l1.5 3h5L16 13h4"/><path d="M5.5 5h13L20 13v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-5z"/></svg><h3 class="mb-1.5 text-[1.05rem] font-bold">Shared inbox</h3><p class="text-[.94rem] leading-[1.55] text-[#475569]">Email, chat and contact-form messages land in one queue, with a warning when two people open the same ticket.</p></article>
<article class="rounded-[14px] border border-[#e2e8f0] bg-white p-6 shadow-[0_1px_2px_rgb(15_23_42/.05)]"><svg class="mb-3.5 block size-7 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M8 9h8M8 12h5"/></svg><h3 class="mb-1.5 text-[1.05rem] font-bold">Saved replies</h3><p class="text-[.94rem] leading-[1.55] text-[#475569]">Write the answer to a common question once, insert it with a slash command and adjust the details.</p></article>
<article class="rounded-[14px] border border-[#e2e8f0] bg-white p-6 shadow-[0_1px_2px_rgb(15_23_42/.05)]"><svg class="mb-3.5 block size-7 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4h6v3H9z"/><path d="M8 5.5H6a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6.5a1 1 0 0 0-1-1h-2"/><path d="M8.5 13l2.2 2.2L15.5 10.5"/></svg><h3 class="mb-1.5 text-[1.05rem] font-bold">Audit trail</h3><p class="text-[.94rem] leading-[1.55] text-[#475569]">Every assignment, tag change and refund is logged with who did it and when, ready for your next review.</p></article>
</div>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Signup band over waves</span>
<section class="bp-band rounded-[20px] px-6 py-12 md:p-12 text-white" aria-labelledby="bp-band-title">
<div class="grid items-center gap-6 md:grid-cols-[1fr_minmax(0,26rem)]">
<div><h2 class="mb-1.5 text-2xl leading-[1.15] font-extrabold tracking-[-.02em]" id="bp-band-title">Get the Thursday build log</h2><p class="text-[1.0625rem] leading-[1.6] text-[#dbeafe]">One short email a week: what shipped, what broke and what we learned. 4,200 engineers read it.</p></div>
<form class="flex flex-wrap gap-2" action="#"><label class="sr-only" for="bp-email">Email address</label><input class="min-h-[46px] min-w-0 flex-[1_1_200px] rounded-[10px] border border-white bg-white px-3.5 py-2.5 text-base text-[#0f172a] placeholder:text-[#64748b] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#fbbf24]" id="bp-email" type="email" name="email" autocomplete="email" placeholder="[email protected]" required><button class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] border px-5 py-2.5 text-base leading-normal font-semibold no-underline transition-colors duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 motion-reduce:transition-none cursor-pointer border-[#fbbf24] bg-[#fbbf24] text-[#0f172a] hover:border-[#f59e0b] hover:bg-[#f59e0b] focus-visible:outline-white" type="submit">Subscribe</button></form>
</div>
</section></div>
CSS
/* Section backgrounds with content on top. Patterns sit on ::before, scrims on ::after, both under the content; every text colour was checked at 4.5:1 against the brightest point of its pattern. The backgrounds are utilities; layout, type and buttons are utility classes in the markup. */
/* Hero over a faded grid: the mask clears the lines behind the copy, so the text sits on plain white */
@utility bp-hero{
position:relative;isolation:isolate;overflow:hidden;background:#fff;
&::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity,.1);background-image:linear-gradient(var(--bp-color,#0f172a) 1px,transparent 1px),linear-gradient(90deg,var(--bp-color,#0f172a) 1px,transparent 1px);background-size:var(--bp-size,32px) var(--bp-size,32px);background-position:center;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 40%,#000 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 40%,#000 100%)}
}
/* Dark hero: a vivid mesh on ::before and a scrim on ::after that is darkest behind the text (and solid on phones) */
@utility bp-event{
position:relative;isolation:isolate;overflow:hidden;background:#1e1b4b;
&::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(60% 80% at 100% 0%,var(--bp-c1,#f97316),transparent 70%),radial-gradient(55% 70% at 85% 100%,var(--bp-c2,#db2777),transparent 70%),radial-gradient(50% 60% at 55% 40%,var(--bp-c3,#7c3aed),transparent 70%),repeating-linear-gradient(135deg,rgb(255 255 255 / .08) 0 2px,transparent 2px 14px)}
&::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(var(--bp-scrim,2 6 23) / .92),rgb(var(--bp-scrim,2 6 23) / .7) 55%,rgb(var(--bp-scrim,2 6 23) / .15))}
@media (max-width:767.98px){&::after{background:rgb(var(--bp-scrim,2 6 23) / .8)}}
}
/* Feature cards over a dot grid: the cards are opaque, the heading sits on dots kept at 30% opacity */
@utility bp-features{
position:relative;isolation:isolate;overflow:hidden;background:#f1f5f9;
&::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity,.3);background-image:radial-gradient(circle,var(--bp-color,#64748b) var(--bp-dot,1.5px),transparent calc(var(--bp-dot,1.5px) + .5px));background-size:var(--bp-size,22px) var(--bp-size,22px)}
}
/* Signup band over waves: white waves at 10% keep body text above 4.5:1 on the blue */
@utility bp-band{
--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'><path d='M0 8C20 0 40 0 60 8S100 16 120 8M0 24C20 16 40 16 60 24S100 32 120 24' fill='none' stroke='%23000' stroke-width='1.6'/></svg>");position:relative;isolation:isolate;overflow:hidden;background:#1e40af;
&::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bp-opacity,.1);background-color:var(--bp-color,#fff);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size,120px) repeat;mask:var(--bp-svg) 0 0/var(--bp-size,120px) repeat}
}
About this set
Four full page sections that show how to put real content on a pattern and keep it readable. The hero for a changelog product called Shiplog sits on a grid whose lines are cleared behind the copy by a radial mask, so the headline and buttons sit on plain white while the edges keep the texture. The dark hero for the Northwind Live summit uses a vivid orange, pink and violet mesh with stripes, then a scrim on ::after that is darkest behind the text and fades toward the right; on phones, where the text spans the full width, the scrim becomes an even 80 percent. The support-desk section puts a heading on a dot grid kept at 30 percent and three opaque feature cards on top. The signup band puts white waves at 10 percent over blue, which keeps the pale body text above 4.5:1, with a labelled email field and a button. Each text colour was checked against the brightest point of its pattern, not the average. The pattern always sits on ::before and the scrim on ::after, both behind the content. The Bootstrap version uses .btn, .card, .form-control and the grid, restyled through Bootstrap variables.
What’s included
Hero, dark hero, feature cards and signup band over patterns
Mask and gradient scrims keep body text above 4.5:1
Scrim becomes solid on phones where text spans the full width
Bootstrap .btn, .card and .form-control restyled through variables
Plain CSS, Bootstrap 5 and Tailwind CSS 4 versions of the same design
Accessibility
Each section is labelled by its heading through aria-labelledby, the email field has a visually hidden label, and every text colour reaches 4.5:1 against the brightest point of the pattern under it. Links and buttons show a 3px outline on keyboard focus, and the hover transitions are removed under prefers-reduced-motion.
Customise it
Each section exposes --bp-color, --bp-size and --bp-opacity for its pattern; the dark hero also has --bp-c1 to --bp-c3 and --bp-scrim, an RGB triplet. In Bootstrap the buttons and cards are set through --bs-btn-* and --bs-card-* variables; in Tailwind the type and buttons are utility classes in the markup.
