Open demo

CSS code

HTML 
<div><span class="lbl">Glow-border icon grid</span>
<section class="dk" aria-labelledby="dk-grid">
  <div class="dk-head">
    <p class="dk-eyebrow">Lumen observability</p>
    <h2 class="dk-title" id="dk-grid">See every request, <span class="dk-grad">from edge to database</span></h2>
    <p class="dk-lead">Traces, logs and query insights in one place, built for teams who run their own services.</p>
  </div>
  <ul class="dk-cards">
    <li class="dk-card"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><h3>Distributed tracing</h3><p>Follow one request across forty services, with timings for every hop and the query that slowed it down.</p><p class="dk-tag">OpenTelemetry native</p></li>
    <li class="dk-card"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 17 6-6-6-6M12 19h8"/></svg></span><h3>Logs linked to traces</h3><p>Jump from a slow span to the exact log lines it wrote, without copying an ID between tabs.</p><p class="dk-tag">Searches 2 TB in 1.4 s</p></li>
    <li class="dk-card"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3>Alerts that explain themselves</h3><p>Every alert arrives with the deploy, the error and the graph that triggered it.</p><p class="dk-tag">Chat, email, webhooks</p></li>
    <li class="dk-card"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg></span><h3>Query insights</h3><p>Spot N+1 queries and missing indexes from production traffic, ranked by time wasted.</p><p class="dk-tag">Postgres and MySQL</p></li>
    <li class="dk-card"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg></span><h3>A light agent</h3><p>A 6 MB agent that samples sensibly, so tracing can stay on in production.</p><p class="dk-tag">p99 overhead under 2 ms</p></li>
    <li class="dk-card"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3>Your data, your region</h3><p>Self-host, or pick the EU or US cloud. Personal data is masked before it leaves your servers.</p><p class="dk-tag">SOC 2 Type II</p></li>
  </ul>
</section></div>

<div><span class="lbl">Feature list beside a code panel</span>
<section class="dk dk-split" aria-labelledby="dk-sdk">
  <div>
    <p class="dk-eyebrow">Lumen SDK</p>
    <h2 class="dk-title" id="dk-sdk">Instrument a service in four lines</h2>
    <ul class="dk-list">
      <li><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><h3>Automatic spans</h3><p>HTTP, gRPC, queues and the common database drivers are traced as soon as the SDK loads.</p></li>
      <li><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><h3>Sampling you control</h3><p>Keep every error and slow request, and a fraction of the rest, set per service.</p></li>
      <li><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><h3>No vendor lock-in</h3><p>Data goes out as OpenTelemetry, so you can send it somewhere else tomorrow.</p></li>
    </ul>
    <a class="dk-btn" href="#">Read the quickstart <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
  </div>
  <div class="dk-code">
    <div class="dk-bar" aria-hidden="true"><i></i><i></i><i></i><span>server.ts</span></div>
    <pre><code><span class="dk-k">import</span> { lumen } <span class="dk-k">from</span> <span class="dk-s">"@lumen/node"</span>;

<span class="dk-m">// before your app starts</span>
lumen.<span class="dk-p">init</span>({
  <span class="dk-p">service</span>: <span class="dk-s">"checkout-api"</span>,
  <span class="dk-p">sampleRate</span>: <span class="dk-n">0.2</span>,
});</code></pre>
    <div class="dk-trace" role="img" aria-label="Trace received: 4 spans, 182 ms in total, slowest span db.query orders at 96 ms">
      <p><b>●</b> Trace received · 4 spans · 182 ms</p>
      <div class="dk-span"><span>GET /checkout</span><i style="--dk-w:100%;--dk-at:0%"></i><span>182 ms</span></div>
      <div class="dk-span"><span>auth.verify</span><i style="--dk-w:7%;--dk-at:0%"></i><span>12 ms</span></div>
      <div class="dk-span"><span>cart.load</span><i style="--dk-w:26%;--dk-at:7%"></i><span>48 ms</span></div>
      <div class="dk-span"><span>db.query orders</span><i style="--dk-w:53%;--dk-at:33%"></i><span>96 ms</span></div>
    </div>
  </div>
</section></div>
CSS 
/* Dark feature sections. Colours were picked for a near-black ground: body text #e5e7eb and secondary text #9ca3af
   both pass 4.5:1 on the darkest and lightest card colours. The headline gradient has a solid fallback colour, the
   card borders are gradients drawn with background-clip, and the code sample is real, selectable text. */
.dk{--dk-bg:#0b0f17;--dk-card:#111827;--dk-line:#1f2937;--dk-ink:#f3f4f6;--dk-text:#d1d5db;--dk-muted:#9ca3af;--dk-cyan:#22d3ee;--dk-lime:#a3e635;--dk-radius:28px;
  position:relative;overflow:hidden;border-radius:var(--dk-radius);padding:clamp(40px,6vw,88px) clamp(20px,5vw,64px);color:var(--dk-text);
  background:radial-gradient(60% 50% at 50% 0%,rgba(34,211,238,.14),transparent 70%),var(--dk-bg);border:1px solid var(--dk-line);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
.dk :where(h2,h3,p,ul,pre){margin:0;padding:0}
.dk ul{list-style:none}
.dk a:focus-visible{outline:3px solid var(--dk-cyan);outline-offset:3px}
.dk-eyebrow{font:600 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--dk-cyan)}
.dk-title{margin-top:12px!important;color:var(--dk-ink);font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.dk-grad{display:block;color:var(--dk-lime);background:linear-gradient(90deg,#67e8f9,#a3e635);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dk-lead{margin-top:16px!important;max-width:56ch;font-size:1.08rem;color:var(--dk-muted)}
.dk h3{color:var(--dk-ink);font-size:1.08rem;line-height:1.3;font-weight:700}
.dk h3+p{margin-top:8px;font-size:.96rem;color:var(--dk-muted)}
/* 1. glow-border grid */
.dk-head{max-width:720px;margin:0 auto;text-align:center}
.dk-head .dk-lead{margin-inline:auto}
.dk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px!important}
.dk-card{display:flex;flex-direction:column;align-items:flex-start;padding:26px;border:1px solid transparent;border-radius:20px;
  background:linear-gradient(var(--dk-card),var(--dk-card)) padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18) 38%,var(--dk-line) 60%) border-box;
  transition:box-shadow .25s,transform .25s}
.dk-card:hover{box-shadow:0 0 0 1px rgba(34,211,238,.25),0 24px 60px -24px rgba(34,211,238,.35);transform:translateY(-2px)}
.dk-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:12px;background:rgba(34,211,238,.12);color:#67e8f9;box-shadow:inset 0 0 0 1px rgba(34,211,238,.3)}
.dk-ico svg{width:22px;height:22px}
.dk-card h3+p{flex:1}
.dk-tag{margin-top:18px!important;padding:4px 10px;border-radius:8px;background:#0b1220;border:1px solid var(--dk-line);font:500 .78rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#bef264}
/* 2. feature list beside a code panel */
.dk-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6vw,72px);align-items:center;
  background:radial-gradient(50% 60% at 100% 100%,rgba(163,230,53,.1),transparent 70%),var(--dk-bg)}
.dk-list{display:grid;gap:22px;margin-top:30px!important}
.dk-list li{display:grid;grid-template-columns:auto 1fr;column-gap:14px}
.dk-list li>svg{grid-row:span 2;width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(163,230,53,.14);color:var(--dk-lime)}
.dk-list h3+p{margin-top:4px}
.dk-btn{display:inline-flex;align-items:center;gap:8px;margin-top:32px;min-height:48px;padding:0 22px;border-radius:12px;background:var(--dk-lime);color:#0b0f17;font-weight:700;text-decoration:none;transition:background .2s}
.dk-btn:hover{background:#bef264}
.dk-btn svg{width:18px;height:18px}
.dk .dk-btn:focus-visible{outline-color:var(--dk-lime)}
.dk-code{overflow:hidden;border:1px solid var(--dk-line);border-radius:18px;background:#0b1120;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.dk-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--dk-line);font:500 .8rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--dk-muted)}
.dk-bar i{width:10px;height:10px;border-radius:50%;background:#374151}
.dk-bar span{margin-left:8px}
.dk-code pre{padding:20px;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .9rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--dk-text)}
.dk-k{color:#c4b5fd}.dk-s{color:#bef264}.dk-p{color:#67e8f9}.dk-n{color:#fda4af}.dk-m{color:#9ca3af}
.dk-trace{padding:16px 20px 20px;border-top:1px solid var(--dk-line);font:500 .8rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dk-trace p{color:var(--dk-muted);margin-bottom:12px}
.dk-trace p b{color:#bef264;font-weight:600}
.dk-span{display:grid;grid-template-columns:130px 1fr 52px;align-items:center;gap:12px;padding:5px 0;color:var(--dk-text)}
.dk-span i{height:8px;border-radius:4px;margin-left:var(--dk-at);width:var(--dk-w);background:linear-gradient(90deg,#22d3ee,#67e8f9)}
.dk-span:last-child i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.dk-span span:last-child{text-align:right;color:var(--dk-muted)}
@media (max-width:991px){
  .dk-cards{grid-template-columns:repeat(2,1fr)}
  .dk-split{grid-template-columns:1fr}
}
@media (max-width:575px){
  .dk-cards{grid-template-columns:1fr}
  .dk-span{grid-template-columns:100px 1fr 48px;gap:8px}
  .dk-code pre{font-size:.8rem;padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .dk *{transition:none!important}
  .dk-card:hover{transform:none}
}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Glow-border icon grid</span>
<section class="dk" data-bs-theme="dark" aria-labelledby="b-dk-grid">
  <div class="mx-auto text-center" style="max-width:720px">
    <p class="dk-eyebrow">Lumen observability</p>
    <h2 class="dk-title" id="b-dk-grid">See every request, <span class="dk-grad">from edge to database</span></h2>
    <p class="dk-lead mx-auto">Traces, logs and query insights in one place, built for teams who run their own services.</p>
  </div>
  <ul class="list-unstyled row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 mt-5 mb-0">
    <li class="col"><div class="card dk-card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><h3>Distributed tracing</h3><p class="flex-grow-1">Follow one request across forty services, with timings for every hop and the query that slowed it down.</p><span class="badge dk-tag">OpenTelemetry native</span></div></div></li>
    <li class="col"><div class="card dk-card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 17 6-6-6-6M12 19h8"/></svg></span><h3>Logs linked to traces</h3><p class="flex-grow-1">Jump from a slow span to the exact log lines it wrote, without copying an ID between tabs.</p><span class="badge dk-tag">Searches 2 TB in 1.4 s</span></div></div></li>
    <li class="col"><div class="card dk-card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3>Alerts that explain themselves</h3><p class="flex-grow-1">Every alert arrives with the deploy, the error and the graph that triggered it.</p><span class="badge dk-tag">Chat, email, webhooks</span></div></div></li>
    <li class="col"><div class="card dk-card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg></span><h3>Query insights</h3><p class="flex-grow-1">Spot N+1 queries and missing indexes from production traffic, ranked by time wasted.</p><span class="badge dk-tag">Postgres and MySQL</span></div></div></li>
    <li class="col"><div class="card dk-card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg></span><h3>A light agent</h3><p class="flex-grow-1">A 6 MB agent that samples sensibly, so tracing can stay on in production.</p><span class="badge dk-tag">p99 overhead under 2 ms</span></div></div></li>
    <li class="col"><div class="card dk-card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="dk-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3>Your data, your region</h3><p class="flex-grow-1">Self-host, or pick the EU or US cloud. Personal data is masked before it leaves your servers.</p><span class="badge dk-tag">SOC 2 Type II</span></div></div></li>
  </ul>
</section></div>

<div><span class="lbl">Feature list beside a code panel</span>
<section class="dk dk-split" data-bs-theme="dark" aria-labelledby="b-dk-sdk">
  <div class="row align-items-center gy-5" style="--bs-gutter-x:clamp(36px,6vw,72px)">
    <div class="col-lg-5">
      <p class="dk-eyebrow">Lumen SDK</p>
      <h2 class="dk-title" id="b-dk-sdk">Instrument a service in four lines</h2>
      <ul class="dk-list list-unstyled d-grid gap-4 mt-4 pt-1 mb-0">
        <li class="d-flex gap-3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><div><h3>Automatic spans</h3><p>HTTP, gRPC, queues and the common database drivers are traced as soon as the SDK loads.</p></div></li>
        <li class="d-flex gap-3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><div><h3>Sampling you control</h3><p>Keep every error and slow request, and a fraction of the rest, set per service.</p></div></li>
        <li class="d-flex gap-3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><div><h3>No vendor lock-in</h3><p>Data goes out as OpenTelemetry, so you can send it somewhere else tomorrow.</p></div></li>
      </ul>
      <a class="btn dk-btn" href="#">Read the quickstart <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
    </div>
    <div class="col-lg-7">
      <div class="card dk-code">
        <div class="card-header" aria-hidden="true"><i></i><i></i><i></i><span class="ms-2">server.ts</span></div>
        <pre class="mb-0"><code><span class="dk-k">import</span> { lumen } <span class="dk-k">from</span> <span class="dk-s">"@lumen/node"</span>;

<span class="dk-m">// before your app starts</span>
lumen.<span class="dk-p">init</span>({
  <span class="dk-p">service</span>: <span class="dk-s">"checkout-api"</span>,
  <span class="dk-p">sampleRate</span>: <span class="dk-n">0.2</span>,
});</code></pre>
        <div class="dk-trace" role="img" aria-label="Trace received: 4 spans, 182 ms in total, slowest span db.query orders at 96 ms">
          <p><b>●</b> Trace received · 4 spans · 182 ms</p>
          <div class="dk-span"><span>GET /checkout</span><div class="progress"><div class="progress-bar" style="margin-left:0%;width:100%"></div></div><span>182 ms</span></div>
          <div class="dk-span"><span>auth.verify</span><div class="progress"><div class="progress-bar" style="margin-left:0%;width:7%"></div></div><span>12 ms</span></div>
          <div class="dk-span"><span>cart.load</span><div class="progress"><div class="progress-bar" style="margin-left:7%;width:26%"></div></div><span>48 ms</span></div>
          <div class="dk-span"><span>db.query orders</span><div class="progress"><div class="progress-bar" style="margin-left:33%;width:53%"></div></div><span>96 ms</span></div>
        </div>
      </div>
    </div>
  </div>
</section></div>
CSS 
/* Dark feature sections in Bootstrap 5, inside data-bs-theme="dark": .row / .row-cols-* for the grid, .card for the
   tiles and the code window, .badge for the tags and .btn for the action. This block adds the gradient borders, the
   glow and the syntax colours. Text colours pass 4.5:1 on every card and on the section ground. */
.dk{--dk-bg:#0b0f17;--dk-card:#111827;--dk-line:#1f2937;--dk-ink:#f3f4f6;--dk-text:#d1d5db;--dk-muted:#9ca3af;--dk-cyan:#22d3ee;--dk-lime:#a3e635;--dk-radius:28px;
  --bs-border-color:var(--dk-line);position:relative;overflow:hidden;border-radius:var(--dk-radius);padding:clamp(40px,6vw,88px) clamp(20px,5vw,64px);color:var(--dk-text);
  background:radial-gradient(60% 50% at 50% 0%,rgba(34,211,238,.14),transparent 70%),var(--dk-bg);border:1px solid var(--dk-line);line-height:1.55}
.dk :where(h2,h3,p,pre){margin:0}
.dk a:focus-visible{outline:3px solid var(--dk-cyan);outline-offset:3px;box-shadow:none}
.dk-eyebrow{font:600 .82rem/1.4 var(--bs-font-monospace);letter-spacing:.04em;color:var(--dk-cyan)}
.dk-title{margin-top:12px!important;color:var(--dk-ink);font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.dk-grad{display:block;color:var(--dk-lime);background:linear-gradient(90deg,#67e8f9,#a3e635);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dk-lead{margin-top:16px!important;max-width:56ch;font-size:1.08rem;color:var(--dk-muted)}
.dk h3{color:var(--dk-ink);font-size:1.08rem;line-height:1.3;font-weight:700}
.dk h3+p{margin-top:8px;font-size:.96rem;color:var(--dk-muted)}
.dk-card{--bs-card-spacer-x:26px;--bs-card-spacer-y:26px;--bs-card-border-radius:20px;border:1px solid transparent;
  background:linear-gradient(var(--dk-card),var(--dk-card)) padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18) 38%,var(--dk-line) 60%) border-box;
  transition:box-shadow .25s,transform .25s}
.dk-card:hover{box-shadow:0 0 0 1px rgba(34,211,238,.25),0 24px 60px -24px rgba(34,211,238,.35);transform:translateY(-2px)}
.dk-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:12px;background:rgba(34,211,238,.12);color:#67e8f9;box-shadow:inset 0 0 0 1px rgba(34,211,238,.3)}
.dk-ico svg{width:22px;height:22px}
.dk-tag{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.78rem;--bs-badge-font-weight:500;--bs-badge-color:#bef264;--bs-badge-border-radius:8px;
  margin-top:18px;background:#0b1220;border:1px solid var(--dk-line);font-family:var(--bs-font-monospace)}
.dk-split{background:radial-gradient(50% 60% at 100% 100%,rgba(163,230,53,.1),transparent 70%),var(--dk-bg)}
.dk-list>li>svg{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(163,230,53,.14);color:var(--dk-lime)}
.dk-list h3+p{margin-top:4px}
.dk-btn{--bs-btn-bg:var(--dk-lime);--bs-btn-border-color:var(--dk-lime);--bs-btn-color:#0b0f17;--bs-btn-hover-bg:#bef264;--bs-btn-hover-border-color:#bef264;--bs-btn-hover-color:#0b0f17;
  --bs-btn-active-bg:#bef264;--bs-btn-active-border-color:#bef264;--bs-btn-active-color:#0b0f17;--bs-btn-padding-x:22px;--bs-btn-font-weight:700;--bs-btn-border-radius:12px;
  display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:32px}
.dk-btn svg{width:18px;height:18px}
.dk .dk-btn:focus-visible{outline-color:var(--dk-lime)}
.dk-code{--bs-card-bg:#0b1120;--bs-card-border-color:var(--dk-line);--bs-card-border-radius:18px;--bs-card-cap-bg:transparent;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.dk-code .card-header{display:flex;align-items:center;gap:7px;padding:12px 16px;font:500 .8rem/1 var(--bs-font-monospace);color:var(--dk-muted)}
.dk-code .card-header i{width:10px;height:10px;border-radius:50%;background:#374151}
.dk-code pre{padding:20px;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .9rem/1.7 var(--bs-font-monospace);color:var(--dk-text)}
.dk-k{color:#c4b5fd}.dk-s{color:#bef264}.dk-p{color:#67e8f9}.dk-n{color:#fda4af}.dk-m{color:#9ca3af}
.dk-trace{padding:16px 20px 20px;border-top:1px solid var(--dk-line);font:500 .8rem/1.4 var(--bs-font-monospace)}
.dk-trace p{color:var(--dk-muted);margin-bottom:12px}
.dk-trace p b{color:#bef264;font-weight:600}
.dk-span{display:grid;grid-template-columns:130px 1fr 52px;align-items:center;gap:12px;padding:5px 0;color:var(--dk-text)}
.dk-span .progress{--bs-progress-height:8px;--bs-progress-bg:transparent;--bs-progress-border-radius:4px}
.dk-span .progress-bar{border-radius:4px;background:linear-gradient(90deg,#22d3ee,#67e8f9)}
.dk-span:last-child .progress-bar{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.dk-span span:last-child{text-align:right;color:var(--dk-muted)}
@media (max-width:575px){
  .dk-span{grid-template-columns:100px 1fr 48px;gap:8px}
  .dk-code pre{font-size:.8rem;padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .dk *{transition:none!important}
  .dk-card:hover{transform:none}
}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Glow-border icon grid</span>
<section class="relative overflow-hidden rounded-[28px] border border-[#1f2937] px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,88px)] leading-[1.55] text-[#d1d5db] [background:radial-gradient(60%_50%_at_50%_0%,rgba(34,211,238,.14),transparent_70%),#0b0f17]" aria-labelledby="t-dk-grid">
  <div class="mx-auto max-w-[720px] text-center">
    <p class="font-mono text-[.82rem] leading-[1.4] font-semibold tracking-[.04em] text-[#22d3ee]">Lumen observability</p>
    <h2 class="mt-3 text-[clamp(1.9rem,1.2rem+2.6vw,3rem)] leading-[1.08] font-extrabold tracking-[-.03em] text-[#f3f4f6]" id="t-dk-grid">See every request, <span class="block bg-linear-90 from-[#67e8f9] to-[#a3e635] bg-clip-text text-[#a3e635] [-webkit-text-fill-color:transparent]">from edge to database</span></h2>
    <p class="mx-auto mt-4 max-w-[56ch] text-[1.08rem] text-[#9ca3af]">Traces, logs and query insights in one place, built for teams who run their own services.</p>
  </div>
  <ul class="mt-[52px] grid grid-cols-1 gap-[18px] sm:grid-cols-2 lg:grid-cols-3">
    <li class="flex flex-col items-start rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18)_38%,#1f2937_60%)_border-box] transition duration-250 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(34,211,238,.25),0_24px_60px_-24px_rgba(34,211,238,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"><span class="mb-[18px] grid size-11 place-items-center rounded-xl bg-[rgba(34,211,238,.12)] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.3)]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Distributed tracing</h3><p class="mt-2 flex-1 text-[.96rem] text-[#9ca3af]">Follow one request across forty services, with timings for every hop and the query that slowed it down.</p><p class="mt-[18px] rounded-lg border border-[#1f2937] bg-[#0b1220] px-2.5 py-1 font-mono text-[.78rem] leading-[1.4] font-medium text-[#bef264]">OpenTelemetry native</p></li>
    <li class="flex flex-col items-start rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18)_38%,#1f2937_60%)_border-box] transition duration-250 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(34,211,238,.25),0_24px_60px_-24px_rgba(34,211,238,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"><span class="mb-[18px] grid size-11 place-items-center rounded-xl bg-[rgba(34,211,238,.12)] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.3)]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 17 6-6-6-6M12 19h8"/></svg></span><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Logs linked to traces</h3><p class="mt-2 flex-1 text-[.96rem] text-[#9ca3af]">Jump from a slow span to the exact log lines it wrote, without copying an ID between tabs.</p><p class="mt-[18px] rounded-lg border border-[#1f2937] bg-[#0b1220] px-2.5 py-1 font-mono text-[.78rem] leading-[1.4] font-medium text-[#bef264]">Searches 2 TB in 1.4 s</p></li>
    <li class="flex flex-col items-start rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18)_38%,#1f2937_60%)_border-box] transition duration-250 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(34,211,238,.25),0_24px_60px_-24px_rgba(34,211,238,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"><span class="mb-[18px] grid size-11 place-items-center rounded-xl bg-[rgba(34,211,238,.12)] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.3)]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Alerts that explain themselves</h3><p class="mt-2 flex-1 text-[.96rem] text-[#9ca3af]">Every alert arrives with the deploy, the error and the graph that triggered it.</p><p class="mt-[18px] rounded-lg border border-[#1f2937] bg-[#0b1220] px-2.5 py-1 font-mono text-[.78rem] leading-[1.4] font-medium text-[#bef264]">Chat, email, webhooks</p></li>
    <li class="flex flex-col items-start rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18)_38%,#1f2937_60%)_border-box] transition duration-250 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(34,211,238,.25),0_24px_60px_-24px_rgba(34,211,238,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"><span class="mb-[18px] grid size-11 place-items-center rounded-xl bg-[rgba(34,211,238,.12)] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.3)]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg></span><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Query insights</h3><p class="mt-2 flex-1 text-[.96rem] text-[#9ca3af]">Spot N+1 queries and missing indexes from production traffic, ranked by time wasted.</p><p class="mt-[18px] rounded-lg border border-[#1f2937] bg-[#0b1220] px-2.5 py-1 font-mono text-[.78rem] leading-[1.4] font-medium text-[#bef264]">Postgres and MySQL</p></li>
    <li class="flex flex-col items-start rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18)_38%,#1f2937_60%)_border-box] transition duration-250 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(34,211,238,.25),0_24px_60px_-24px_rgba(34,211,238,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"><span class="mb-[18px] grid size-11 place-items-center rounded-xl bg-[rgba(34,211,238,.12)] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.3)]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg></span><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">A light agent</h3><p class="mt-2 flex-1 text-[.96rem] text-[#9ca3af]">A 6 MB agent that samples sensibly, so tracing can stay on in production.</p><p class="mt-[18px] rounded-lg border border-[#1f2937] bg-[#0b1220] px-2.5 py-1 font-mono text-[.78rem] leading-[1.4] font-medium text-[#bef264]">p99 overhead under 2 ms</p></li>
    <li class="flex flex-col items-start rounded-[20px] border border-transparent p-[26px] [background:linear-gradient(#111827,#111827)_padding-box,linear-gradient(140deg,rgba(34,211,238,.55),rgba(163,230,53,.18)_38%,#1f2937_60%)_border-box] transition duration-250 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(34,211,238,.25),0_24px_60px_-24px_rgba(34,211,238,.35)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"><span class="mb-[18px] grid size-11 place-items-center rounded-xl bg-[rgba(34,211,238,.12)] text-[#67e8f9] shadow-[inset_0_0_0_1px_rgba(34,211,238,.3)]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Your data, your region</h3><p class="mt-2 flex-1 text-[.96rem] text-[#9ca3af]">Self-host, or pick the EU or US cloud. Personal data is masked before it leaves your servers.</p><p class="mt-[18px] rounded-lg border border-[#1f2937] bg-[#0b1220] px-2.5 py-1 font-mono text-[.78rem] leading-[1.4] font-medium text-[#bef264]">SOC 2 Type II</p></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Feature list beside a code panel</span>
<section class="relative overflow-hidden rounded-[28px] border border-[#1f2937] px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,88px)] leading-[1.55] text-[#d1d5db] grid grid-cols-1 items-center gap-[clamp(36px,6vw,72px)] [background:radial-gradient(50%_60%_at_100%_100%,rgba(163,230,53,.1),transparent_70%),#0b0f17] lg:grid-cols-[5fr_7fr]" aria-labelledby="t-dk-sdk">
  <div>
    <p class="font-mono text-[.82rem] leading-[1.4] font-semibold tracking-[.04em] text-[#22d3ee]">Lumen SDK</p>
    <h2 class="mt-3 text-[clamp(1.9rem,1.2rem+2.6vw,3rem)] leading-[1.08] font-extrabold tracking-[-.03em] text-[#f3f4f6]" id="t-dk-sdk">Instrument a service in four lines</h2>
    <ul class="mt-[30px] grid gap-[22px]">
      <li class="grid grid-cols-[auto_1fr] gap-x-3.5"><svg class="row-span-2 size-6 rounded-full bg-[rgba(163,230,53,.14)] p-1 text-[#a3e635]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Automatic spans</h3><p class="mt-1 text-[.96rem] text-[#9ca3af]">HTTP, gRPC, queues and the common database drivers are traced as soon as the SDK loads.</p></li>
      <li class="grid grid-cols-[auto_1fr] gap-x-3.5"><svg class="row-span-2 size-6 rounded-full bg-[rgba(163,230,53,.14)] p-1 text-[#a3e635]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">Sampling you control</h3><p class="mt-1 text-[.96rem] text-[#9ca3af]">Keep every error and slow request, and a fraction of the rest, set per service.</p></li>
      <li class="grid grid-cols-[auto_1fr] gap-x-3.5"><svg class="row-span-2 size-6 rounded-full bg-[rgba(163,230,53,.14)] p-1 text-[#a3e635]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg><h3 class="text-[1.08rem] leading-[1.3] font-bold text-[#f3f4f6]">No vendor lock-in</h3><p class="mt-1 text-[.96rem] text-[#9ca3af]">Data goes out as OpenTelemetry, so you can send it somewhere else tomorrow.</p></li>
    </ul>
    <a class="mt-8 inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#a3e635] px-[22px] font-bold text-[#0b0f17] transition-colors duration-200 hover:bg-[#bef264] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#a3e635] motion-reduce:transition-none" href="#">Read the quickstart <svg class="size-[18px]" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
  </div>
  <div class="overflow-hidden rounded-[18px] border border-[#1f2937] bg-[#0b1120] shadow-[0_40px_80px_-40px_rgba(0,0,0,.8)]">
    <div class="flex items-center gap-[7px] border-b border-[#1f2937] px-4 py-3 font-mono text-[.8rem] leading-none font-medium text-[#9ca3af]" aria-hidden="true"><i class="size-2.5 rounded-full bg-[#374151]"></i><i class="size-2.5 rounded-full bg-[#374151]"></i><i class="size-2.5 rounded-full bg-[#374151]"></i><span class="ml-2">server.ts</span></div>
    <pre class="p-4 whitespace-pre-wrap wrap-anywhere font-mono text-[.8rem] leading-[1.7] font-medium text-[#d1d5db] sm:p-5 sm:text-[.9rem]"><code><span class="text-[#c4b5fd]">import</span> { lumen } <span class="text-[#c4b5fd]">from</span> <span class="text-[#bef264]">"@lumen/node"</span>;

<span class="text-[#9ca3af]">// before your app starts</span>
lumen.<span class="text-[#67e8f9]">init</span>({
  <span class="text-[#67e8f9]">service</span>: <span class="text-[#bef264]">"checkout-api"</span>,
  <span class="text-[#67e8f9]">sampleRate</span>: <span class="text-[#fda4af]">0.2</span>,
});</code></pre>
    <div class="border-t border-[#1f2937] px-5 pt-4 pb-5 font-mono text-[.8rem] leading-[1.4] font-medium" role="img" aria-label="Trace received: 4 spans, 182 ms in total, slowest span db.query orders at 96 ms">
      <p class="mb-3 text-[#9ca3af]"><b class="font-semibold text-[#bef264]">●</b> Trace received · 4 spans · 182 ms</p>
      <div class="grid grid-cols-[100px_1fr_48px] items-center gap-2 py-[5px] text-[#d1d5db] sm:grid-cols-[130px_1fr_52px] sm:gap-3"><span>GET /checkout</span><i class="h-2 rounded bg-linear-90 from-[#22d3ee] to-[#67e8f9]" style="margin-left:0%;width:100%"></i><span class="text-right text-[#9ca3af]">182 ms</span></div>
      <div class="grid grid-cols-[100px_1fr_48px] items-center gap-2 py-[5px] text-[#d1d5db] sm:grid-cols-[130px_1fr_52px] sm:gap-3"><span>auth.verify</span><i class="h-2 rounded bg-linear-90 from-[#22d3ee] to-[#67e8f9]" style="margin-left:0%;width:7%"></i><span class="text-right text-[#9ca3af]">12 ms</span></div>
      <div class="grid grid-cols-[100px_1fr_48px] items-center gap-2 py-[5px] text-[#d1d5db] sm:grid-cols-[130px_1fr_52px] sm:gap-3"><span>cart.load</span><i class="h-2 rounded bg-linear-90 from-[#22d3ee] to-[#67e8f9]" style="margin-left:7%;width:26%"></i><span class="text-right text-[#9ca3af]">48 ms</span></div>
      <div class="grid grid-cols-[100px_1fr_48px] items-center gap-2 py-[5px] text-[#d1d5db] sm:grid-cols-[130px_1fr_52px] sm:gap-3"><span>db.query orders</span><i class="h-2 rounded bg-linear-90 from-[#f59e0b] to-[#fbbf24]" style="margin-left:33%;width:53%"></i><span class="text-right text-[#9ca3af]">96 ms</span></div>
    </div>
  </div>
</section></div>

About this set

Two feature sections for dark interfaces and developer products. Glow-border icon grid sets six features of an observability tool in cards whose borders are drawn as cyan to lime gradients with background-clip, each with an icon tile, a heading, a sentence and a monospace tag, under a headline whose second line is gradient text. Feature list beside a code panel puts three ticked features and a lime button next to a code window with a four-line setup snippet in real, selectable text and a trace waterfall below it. Use the grid for a features overview and the code panel where developers want to see the integration before they read on. Colours were chosen for a near-black ground: body text and secondary text pass 4.5:1 on the darkest and lightest card colours, the syntax colours do the same on the code background, and the gradient headline has a solid fallback colour. The Bootstrap version runs inside data-bs-theme dark. On phones the cards stack, the code wraps instead of scrolling and the waterfall labels narrow.

What’s included

  • Gradient card borders drawn with padding-box and border-box backgrounds
  • Gradient headline text with a solid fallback colour
  • Code window with real, selectable code and syntax colours that pass 4.5:1
  • Trace waterfall described with role img and an aria-label
  • Bootstrap version uses data-bs-theme dark
  • No JavaScript

Accessibility

Each section is named by its h2 and the features are list items with h3 headings. Text, secondary text and syntax colours were checked at 4.5:1 or better on the dark grounds, the decorative window dots are hidden and the trace waterfall has a written description. Links show a 3px outline in cyan or lime, and the card lift and all transitions are switched off under prefers-reduced-motion.

Customise it

Change --dk-bg, --dk-card, --dk-line, --dk-cyan, --dk-lime and --dk-radius on .dk; the syntax colours are the .dk-k, .dk-s, .dk-p, .dk-n and .dk-m classes. In Bootstrap the cards read --bs-card-* variables inside data-bs-theme dark; in Tailwind swap the #22d3ee and #a3e635 values.