Open demo

CSS code

HTML 
<div class="dk">
<div><span class="lbl">Glow status badges · pipeline runs</span>
<ul class="dk-row">
  <li><span class="db run">Running</span></li>
  <li><span class="db queue">Queued</span></li>
  <li><span class="db deploy">Deploying</span></li>
  <li><span class="db fail">Failed</span></li>
  <li><span class="db">Paused</span></li>
</ul></div>

<div><span class="lbl">Story rings · new and seen</span>
<ul class="stories">
  <li><a class="story" href="#"><span class="ring"><span style="--a:#0f766e;--b:#0369a1" aria-hidden="true">NH</span><span class="plus" aria-hidden="true"><svg viewBox="0 0 10 10"><path d="M5 1.5v7M1.5 5h7"/></svg></span></span>Your story<span class="sr-only">, add a story</span></a></li>
  <li><a class="story" href="#"><span class="ring"><span aria-hidden="true"><svg viewBox="0 0 64 64"><rect width="64" height="64" fill="#c7d2fe"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#4f46e5"/><circle cx="32" cy="34" r="14" fill="#f6c9a4"/><path d="M17 33c0-11 6-18 15-18s15 7 15 18c-3-5-8-8-15-8s-12 3-15 8z" fill="#1e1b4b"/><circle cx="26.5" cy="36" r="1.8" fill="#1e1b4b"/><circle cx="37.5" cy="36" r="1.8" fill="#1e1b4b"/><path d="M28 41.5c2.4 2.2 5.6 2.2 8 0" fill="none" stroke="#1e1b4b" stroke-width="1.8" stroke-linecap="round"/></svg></span></span>Maya<span class="sr-only">, new story</span></a></li>
  <li><a class="story" href="#"><span class="ring"><span aria-hidden="true"><svg viewBox="0 0 64 64"><rect width="64" height="64" fill="#fde68a"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#0f766e"/><circle cx="32" cy="34" r="14" fill="#8d5a3b"/><path d="M18.5 31c1-8 6.5-12 13.5-12s12.5 4 13.5 12c-4-3-8.5-4-13.5-4s-9.5 1-13.5 4z" fill="#1c1917"/><circle cx="26.5" cy="35.5" r="1.8" fill="#1c1917"/><circle cx="37.5" cy="35.5" r="1.8" fill="#1c1917"/><path d="M27 41c2.8 2.6 7.2 2.6 10 0" fill="none" stroke="#1c1917" stroke-width="1.8" stroke-linecap="round"/></svg></span></span>Kofi<span class="sr-only">, new story</span></a></li>
  <li><a class="story" href="#"><span class="ring"><span style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span></span>June<span class="sr-only">, new story</span></a></li>
  <li><a class="story seen" href="#"><span class="ring"><span aria-hidden="true"><svg viewBox="0 0 64 64"><rect width="64" height="64" fill="#fbcfe8"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#334155"/><circle cx="32" cy="34" r="14" fill="#d6a06e"/><g fill="#3f2a1d"><circle cx="20" cy="27" r="5"/><circle cx="26" cy="21" r="5.5"/><circle cx="33" cy="19" r="5.5"/><circle cx="40" cy="21.5" r="5.5"/><circle cx="45" cy="27.5" r="4.5"/></g><path d="M24 44.5c2-1.5 5-2 8-2s6 .5 8 2c-1 3.5-4 5.5-8 5.5s-7-2-8-5.5z" fill="#3f2a1d"/><circle cx="26.5" cy="35" r="1.8" fill="#3f2a1d"/><circle cx="37.5" cy="35" r="1.8" fill="#3f2a1d"/></svg></span></span>Rafael<span class="sr-only">, seen</span></a></li>
  <li><a class="story seen" href="#"><span class="ring"><span style="--a:#334155;--b:#475569" aria-hidden="true">TR</span></span>Tomás<span class="sr-only">, seen</span></a></li>
</ul></div>

<div><span class="lbl">Checkbox chips · no JavaScript</span>
<fieldset class="dchips">
  <legend>Follow topics</legend>
  <label class="dchip"><input type="checkbox" checked><span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Rust</span></label>
  <label class="dchip"><input type="checkbox"><span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>WebAssembly</span></label>
  <label class="dchip"><input type="checkbox" checked><span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Edge functions</span></label>
  <label class="dchip"><input type="checkbox"><span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Databases</span></label>
  <label class="dchip"><input type="checkbox"><span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Observability</span></label>
</fieldset></div>

<div><span class="lbl">Presence card · status dots on a dark card</span>
<section class="pcard" aria-labelledby="oncall-h">
  <div class="pcard-head">
    <div><h3 id="oncall-h">Platform on-call</h3><p>2 online · 1 away · 1 offline</p></div>
    <button class="bell" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9a6 6 0 1 1 12 0c0 6 2.5 8 2.5 8h-17S6 15 6 9"/><path d="M10.3 20.5a2 2 0 0 0 3.4 0"/></svg><span class="sr-only">Alerts,</span><b>5<span class="sr-only"> unread</span></b></button>
  </div>
  <ul class="people">
    <li><span class="dav" aria-hidden="true">LV<i class="on"></i></span>Lena Vogt<small>Online</small></li>
    <li><span class="dav" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA<i class="on"></i></span>Omar Aziz<small>Online</small></li>
    <li><span class="dav" style="--a:#b45309;--b:#c2410c" aria-hidden="true">KM<i class="away"></i></span>Kai Moreno<small>Away · 20 min</small></li>
    <li><span class="dav" style="--a:#334155;--b:#475569" aria-hidden="true">TR<i class="off"></i></span>Tomás Ruiz<small>Offline</small></li>
  </ul>
</section></div>
</div>
CSS 
/* Dark badges and avatars: tinted status badges with a glow dot, story rings, checkbox chips and a presence card.
   Colours are picked for contrast on a near-black ground; the state is always a word, never only a colour. */
.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}
.dk{--bg:#0b0f17;--card:#121826;--line:#232c3d;--text:#e6e9f2;--muted:#9aa4b8;--focus:#67e8f9;display:flex;flex-direction:column;gap:44px;color:var(--text)}
/* status badges */
.dk-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.db{--c:148,163,184;--t:#cbd5e1;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid rgba(var(--c),.35);border-radius:999px;
  background:rgba(var(--c),.12);color:var(--t);font-size:.76rem;font-weight:600;line-height:1.25;white-space:nowrap}
.db::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 0 3px rgba(var(--c),.18),0 0 10px rgba(var(--c),.8)}
.db.run{--c:74,222,128;--t:#86efac}
.db.queue{--c:56,189,248;--t:#7dd3fc}
.db.queue::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgb(var(--c))}
.db.fail{--c:248,113,113;--t:#fca5a5}
.db.fail::before{border-radius:2px;transform:rotate(45deg)}
.db.deploy{--c:167,139,250;--t:#c4b5fd}
.db.deploy::before{animation:dk-pulse 1.4s ease-in-out infinite}
@keyframes dk-pulse{50%{box-shadow:0 0 0 6px rgba(var(--c),0),0 0 14px rgba(var(--c),1)}}
/* story rings */
.stories{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none}
.story{display:flex;flex-direction:column;align-items:center;gap:8px;width:72px;color:#cbd5e1;font-size:.74rem;font-weight:600;text-align:center;text-decoration:none;border-radius:12px}
.story:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.ring{position:relative;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b);transition:transform .2s ease}
.story:hover .ring{transform:scale(1.05)}
.story.seen .ring{background:#3a4660}
.ring>span{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border:3px solid var(--bg);border-radius:50%;
  background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));color:#fff;font-size:1rem;font-weight:700}
.ring svg{width:100%;height:100%}
.ring .plus{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:22px;height:22px;border:3px solid var(--bg);border-radius:50%;
  background:#22d3ee;color:#06202a}
.ring .plus svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
/* checkbox chips */
.dchips{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.dchips legend{float:left;width:100%;margin-bottom:10px;font-size:.88rem;font-weight:700;color:var(--text)}
.dchip{position:relative;cursor:pointer}
.dchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.dchip span{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid #3a4660;border-radius:999px;color:#cbd5e1;
  font-size:.84rem;font-weight:500;transition:background-color .15s,border-color .15s,color .15s}
.dchip svg{display:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dchip:hover span{border-color:#56627c}
.dchip input:checked+span{border-color:#22d3ee;background:rgba(34,211,238,.12);color:#a5f3fc;font-weight:600;padding-left:10px}
.dchip input:checked+span svg{display:block}
.dchip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
/* presence card */
.pcard{max-width:420px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.pcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard h3{font-size:1rem;font-weight:700}
.pcard h3+p{margin-top:3px;font-size:.8rem;color:var(--muted)}
.bell{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #3a4660;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;
  transition:background-color .15s}
.bell:hover{background:#1a2233}
.bell:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bell b{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--card);border-radius:999px;background:#f43f5e;
  color:#fff;font-size:.66rem;font-weight:800;line-height:16px;text-align:center}
.people{display:grid;gap:12px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.people li{display:flex;align-items:center;gap:12px;font-size:.88rem;font-weight:600}
.people small{margin-left:auto;font-size:.76rem;font-weight:500;color:var(--muted)}
.dav{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));
  color:#fff;font-size:.78rem;font-weight:700}
.dav i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2.5px var(--card)}
.dav i.on{background:#4ade80}
.dav i.away{background:radial-gradient(circle at 32% 32%,var(--card) 0 34%,transparent 36%),#fbbf24}
.dav i.off{background:var(--card);box-shadow:inset 0 0 0 2px #8792a8,0 0 0 2.5px var(--card)}
@media (prefers-reduced-motion:reduce){.db.deploy::before{animation:none}.ring,.dchip span,.bell{transition:none}.story:hover .ring{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="dk">
<div><span class="lbl">Glow status badges · pipeline runs</span>
<ul class="dk-row list-unstyled d-flex flex-wrap align-items-center m-0">
  <li><span class="badge rounded-pill db run">Running</span></li>
  <li><span class="badge rounded-pill db queue">Queued</span></li>
  <li><span class="badge rounded-pill db deploy">Deploying</span></li>
  <li><span class="badge rounded-pill db fail">Failed</span></li>
  <li><span class="badge rounded-pill db">Paused</span></li>
</ul></div>

<div><span class="lbl">Story rings · new and seen</span>
<ul class="stories list-unstyled d-flex flex-wrap m-0">
  <li><a class="story text-decoration-none" href="#"><span class="ring rounded-circle"><span style="--a:#0f766e;--b:#0369a1" aria-hidden="true">NH</span><span class="plus" aria-hidden="true"><svg viewBox="0 0 10 10"><path d="M5 1.5v7M1.5 5h7"/></svg></span></span>Your story<span class="visually-hidden">, add a story</span></a></li>
  <li><a class="story text-decoration-none" href="#"><span class="ring rounded-circle"><span aria-hidden="true"><svg viewBox="0 0 64 64"><rect width="64" height="64" fill="#c7d2fe"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#4f46e5"/><circle cx="32" cy="34" r="14" fill="#f6c9a4"/><path d="M17 33c0-11 6-18 15-18s15 7 15 18c-3-5-8-8-15-8s-12 3-15 8z" fill="#1e1b4b"/><circle cx="26.5" cy="36" r="1.8" fill="#1e1b4b"/><circle cx="37.5" cy="36" r="1.8" fill="#1e1b4b"/><path d="M28 41.5c2.4 2.2 5.6 2.2 8 0" fill="none" stroke="#1e1b4b" stroke-width="1.8" stroke-linecap="round"/></svg></span></span>Maya<span class="visually-hidden">, new story</span></a></li>
  <li><a class="story text-decoration-none" href="#"><span class="ring rounded-circle"><span aria-hidden="true"><svg viewBox="0 0 64 64"><rect width="64" height="64" fill="#fde68a"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#0f766e"/><circle cx="32" cy="34" r="14" fill="#8d5a3b"/><path d="M18.5 31c1-8 6.5-12 13.5-12s12.5 4 13.5 12c-4-3-8.5-4-13.5-4s-9.5 1-13.5 4z" fill="#1c1917"/><circle cx="26.5" cy="35.5" r="1.8" fill="#1c1917"/><circle cx="37.5" cy="35.5" r="1.8" fill="#1c1917"/><path d="M27 41c2.8 2.6 7.2 2.6 10 0" fill="none" stroke="#1c1917" stroke-width="1.8" stroke-linecap="round"/></svg></span></span>Kofi<span class="visually-hidden">, new story</span></a></li>
  <li><a class="story text-decoration-none" href="#"><span class="ring rounded-circle"><span style="--a:#c2410c;--b:#be185d" aria-hidden="true">JP</span></span>June<span class="visually-hidden">, new story</span></a></li>
  <li><a class="story seen text-decoration-none" href="#"><span class="ring rounded-circle"><span aria-hidden="true"><svg viewBox="0 0 64 64"><rect width="64" height="64" fill="#fbcfe8"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#334155"/><circle cx="32" cy="34" r="14" fill="#d6a06e"/><g fill="#3f2a1d"><circle cx="20" cy="27" r="5"/><circle cx="26" cy="21" r="5.5"/><circle cx="33" cy="19" r="5.5"/><circle cx="40" cy="21.5" r="5.5"/><circle cx="45" cy="27.5" r="4.5"/></g><path d="M24 44.5c2-1.5 5-2 8-2s6 .5 8 2c-1 3.5-4 5.5-8 5.5s-7-2-8-5.5z" fill="#3f2a1d"/><circle cx="26.5" cy="35" r="1.8" fill="#3f2a1d"/><circle cx="37.5" cy="35" r="1.8" fill="#3f2a1d"/></svg></span></span>Rafael<span class="visually-hidden">, seen</span></a></li>
  <li><a class="story seen text-decoration-none" href="#"><span class="ring rounded-circle"><span style="--a:#334155;--b:#475569" aria-hidden="true">TR</span></span>Tomás<span class="visually-hidden">, seen</span></a></li>
</ul></div>

<div><span class="lbl">Checkbox chips · no JavaScript</span>
<fieldset class="dchips d-flex flex-wrap">
  <legend class="dchips-legend">Follow topics</legend>
  <input class="btn-check" type="checkbox" id="topic-1" autocomplete="off" checked><label class="btn rounded-pill dchip" for="topic-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Rust</label>
  <input class="btn-check" type="checkbox" id="topic-2" autocomplete="off"None><label class="btn rounded-pill dchip" for="topic-2"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>WebAssembly</label>
  <input class="btn-check" type="checkbox" id="topic-3" autocomplete="off" checked><label class="btn rounded-pill dchip" for="topic-3"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Edge functions</label>
  <input class="btn-check" type="checkbox" id="topic-4" autocomplete="off"None><label class="btn rounded-pill dchip" for="topic-4"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Databases</label>
  <input class="btn-check" type="checkbox" id="topic-5" autocomplete="off"None><label class="btn rounded-pill dchip" for="topic-5"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Observability</label>
</fieldset></div>

<div><span class="lbl">Presence card · status dots on a dark card</span>
<section class="card pcard" aria-labelledby="oncall-h">
  <div class="pcard-head d-flex align-items-center justify-content-between">
    <div><h3 class="m-0" id="oncall-h">Platform on-call</h3><p class="mb-0">2 online · 1 away · 1 offline</p></div>
    <button class="btn bell position-relative" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9a6 6 0 1 1 12 0c0 6 2.5 8 2.5 8h-17S6 15 6 9"/><path d="M10.3 20.5a2 2 0 0 0 3.4 0"/></svg><span class="visually-hidden">Alerts,</span><span class="badge rounded-pill bell-count position-absolute">5<span class="visually-hidden"> unread</span></span></button>
  </div>
  <ul class="people list-unstyled">
    <li><span class="dav rounded-circle" aria-hidden="true">LV<i class="on"></i></span>Lena Vogt<small>Online</small></li>
    <li><span class="dav rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">OA<i class="on"></i></span>Omar Aziz<small>Online</small></li>
    <li><span class="dav rounded-circle" style="--a:#b45309;--b:#c2410c" aria-hidden="true">KM<i class="away"></i></span>Kai Moreno<small>Away · 20 min</small></li>
    <li><span class="dav rounded-circle" style="--a:#334155;--b:#475569" aria-hidden="true">TR<i class="off"></i></span>Tomás Ruiz<small>Offline</small></li>
  </ul>
</section></div>
</div>
CSS 
/* Dark badges and avatars in Bootstrap's dark colour mode (data-bs-theme="dark"): .badge, .btn-check chips, .card and .btn, restyled through --bs-* variables.
   Colours are picked for contrast on a near-black ground; the state is always a word, never only a colour. */
.dk{--bg:#0b0f17;--card:#121826;--line:#232c3d;--text:#e6e9f2;--muted:#9aa4b8;--focus:#67e8f9;display:flex;flex-direction:column;gap:44px;color:var(--text)}
/* status badges */
.dk-row{gap:10px}
.db{--c:148,163,184;--t:#cbd5e1;--bs-badge-padding-x:11px;--bs-badge-padding-y:5px;--bs-badge-font-size:.76rem;--bs-badge-font-weight:600;--bs-badge-color:var(--t);
  display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(var(--c),.35);background:rgba(var(--c),.12);line-height:1.25}
.db::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 0 3px rgba(var(--c),.18),0 0 10px rgba(var(--c),.8)}
.db.run{--c:74,222,128;--t:#86efac}
.db.queue{--c:56,189,248;--t:#7dd3fc}
.db.queue::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgb(var(--c))}
.db.fail{--c:248,113,113;--t:#fca5a5}
.db.fail::before{border-radius:2px;transform:rotate(45deg)}
.db.deploy{--c:167,139,250;--t:#c4b5fd}
.db.deploy::before{animation:dk-pulse 1.4s ease-in-out infinite}
@keyframes dk-pulse{50%{box-shadow:0 0 0 6px rgba(var(--c),0),0 0 14px rgba(var(--c),1)}}
/* story rings */
.stories{gap:18px}
.story{display:flex;flex-direction:column;align-items:center;gap:8px;width:72px;color:#cbd5e1;font-size:.74rem;font-weight:600;text-align:center;text-decoration:none;border-radius:12px}
.story:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.ring{position:relative;display:grid;place-items:center;width:66px;height:66px;padding:3px;
  background:conic-gradient(from 200deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b);transition:transform .2s ease}
.story:hover .ring{transform:scale(1.05)}
.story.seen .ring{background:#3a4660}
.ring>span{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border:3px solid var(--bg);border-radius:50%;
  background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));color:#fff;font-size:1rem;font-weight:700}
.ring svg{width:100%;height:100%}
.ring .plus{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:22px;height:22px;border:3px solid var(--bg);border-radius:50%;
  background:#22d3ee;color:#06202a}
.ring .plus svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
/* checkbox chips */
.dchips{gap:8px;min-width:0}
.dchips-legend{float:left;width:100%;margin-bottom:10px;font-size:.88rem;font-weight:700;line-height:normal;color:var(--text)}
.dchip{--bs-btn-padding-x:14px;--bs-btn-padding-y:0;--bs-btn-font-size:.84rem;--bs-btn-font-weight:500;--bs-btn-color:#cbd5e1;--bs-btn-border-color:#3a4660;--bs-btn-bg:transparent;
  --bs-btn-hover-color:#cbd5e1;--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:#56627c;--bs-btn-active-color:#a5f3fc;--bs-btn-active-bg:rgba(34,211,238,.12);--bs-btn-active-border-color:#22d3ee;
  display:inline-flex;align-items:center;gap:6px;height:34px;transition:background-color .15s,border-color .15s,color .15s}
.dchip svg{display:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.btn-check:checked+.dchip{font-weight:600;padding-left:10px}
.btn-check:checked+.dchip svg{display:block}
.btn-check:focus-visible+.dchip{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
/* presence card */
.pcard{--bs-card-bg:var(--card);--bs-card-border-color:var(--line);--bs-card-border-radius:18px;--bs-card-color:var(--text);max-width:420px;padding:18px}
.pcard-head{gap:12px}
.pcard h3{font-size:1rem;font-weight:700;line-height:normal}
.pcard h3+p{line-height:normal;margin-top:3px;font-size:.8rem;color:var(--muted)}
.bell{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--text);--bs-btn-border-color:#3a4660;--bs-btn-border-radius:12px;--bs-btn-hover-color:var(--text);--bs-btn-hover-bg:#1a2233;--bs-btn-hover-border-color:#3a4660;
  --bs-btn-active-color:var(--text);--bs-btn-active-bg:#1a2233;--bs-btn-active-border-color:#56627c;display:grid;place-items:center;width:40px;height:40px;flex:none;transition:background-color .15s}
.bell:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
.bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bell-count{--bs-badge-padding-x:5px;--bs-badge-padding-y:0;--bs-badge-font-size:.66rem;--bs-badge-font-weight:800;--bs-badge-color:#fff;top:-7px;right:-7px;min-width:20px;height:20px;border:2px solid var(--card);background:#f43f5e;line-height:16px}
.people{display:grid;gap:12px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.people li{display:flex;align-items:center;gap:12px;font-size:.88rem;font-weight:600}
.people small{margin-left:auto;font-size:.76rem;font-weight:500;color:var(--muted)}
.dav{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));
  color:#fff;font-size:.78rem;font-weight:700}
.dav i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2.5px var(--card)}
.dav i.on{background:#4ade80}
.dav i.away{background:radial-gradient(circle at 32% 32%,var(--card) 0 34%,transparent 36%),#fbbf24}
.dav i.off{background:var(--card);box-shadow:inset 0 0 0 2px #8792a8,0 0 0 2.5px var(--card)}
@media (prefers-reduced-motion:reduce){.db.deploy::before{animation:none}.ring,.dchip,.bell{transition:none}.story:hover .ring{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex flex-col gap-11 text-[#e6e9f2]">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa4b8] uppercase">Glow status badges · pipeline runs</span>
<ul class="flex flex-wrap items-center gap-2.5">
  <li><span class="inline-flex items-center gap-[7px] rounded-full border px-[11px] py-[5px] text-[.76rem] leading-[1.25] font-semibold whitespace-nowrap before:size-[7px] before:flex-none before:rounded-full border-[rgba(74,222,128,.35)] bg-[rgba(74,222,128,.12)] text-[#86efac] before:bg-[rgb(74,222,128)] before:shadow-[0_0_0_3px_rgba(74,222,128,.18),0_0_10px_rgba(74,222,128,.8)]">Running</span></li>
  <li><span class="inline-flex items-center gap-[7px] rounded-full border px-[11px] py-[5px] text-[.76rem] leading-[1.25] font-semibold whitespace-nowrap before:size-[7px] before:flex-none before:rounded-full border-[rgba(56,189,248,.35)] bg-[rgba(56,189,248,.12)] text-[#7dd3fc] before:shadow-[inset_0_0_0_1.5px_rgb(56,189,248)]">Queued</span></li>
  <li><span class="inline-flex items-center gap-[7px] rounded-full border px-[11px] py-[5px] text-[.76rem] leading-[1.25] font-semibold whitespace-nowrap before:size-[7px] before:flex-none before:rounded-full border-[rgba(167,139,250,.35)] bg-[rgba(167,139,250,.12)] text-[#c4b5fd] before:bg-[rgb(167,139,250)] before:shadow-[0_0_0_3px_rgba(167,139,250,.18),0_0_10px_rgba(167,139,250,.8)] before:animate-dk-pulse motion-reduce:before:animate-none">Deploying</span></li>
  <li><span class="inline-flex items-center gap-[7px] rounded-full border px-[11px] py-[5px] text-[.76rem] leading-[1.25] font-semibold whitespace-nowrap before:size-[7px] before:flex-none before:rounded-full border-[rgba(248,113,113,.35)] bg-[rgba(248,113,113,.12)] text-[#fca5a5] before:bg-[rgb(248,113,113)] before:shadow-[0_0_0_3px_rgba(248,113,113,.18),0_0_10px_rgba(248,113,113,.8)] before:rotate-45 before:rounded-[2px]">Failed</span></li>
  <li><span class="inline-flex items-center gap-[7px] rounded-full border px-[11px] py-[5px] text-[.76rem] leading-[1.25] font-semibold whitespace-nowrap before:size-[7px] before:flex-none before:rounded-full border-[rgba(148,163,184,.35)] bg-[rgba(148,163,184,.12)] text-[#cbd5e1] before:bg-[rgb(148,163,184)] before:shadow-[0_0_0_3px_rgba(148,163,184,.18),0_0_10px_rgba(148,163,184,.8)]">Paused</span></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa4b8] uppercase">Story rings · new and seen</span>
<ul class="flex flex-wrap gap-[18px]">
  <li><a class="group flex w-[72px] flex-col items-center gap-2 rounded-xl text-center text-[.74rem] font-semibold text-[#cbd5e1] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#67e8f9]" href="#"><span class="relative grid size-[66px] place-items-center rounded-full p-[3px] transition-transform duration-200 ease-in-out group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100 bg-[conic-gradient(from_200deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b)]"><span class="grid size-full place-items-center overflow-hidden rounded-full border-[3px] border-[#0b0f17] bg-linear-135 text-[1rem] font-bold text-white from-[#0f766e] to-[#0369a1]" aria-hidden="true">NH</span><span class="absolute right-0 bottom-0 grid size-[22px] place-items-center rounded-full border-[3px] border-[#0b0f17] bg-[#22d3ee] text-[#06202a]" aria-hidden="true"><svg class="size-2.5" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 1.5v7M1.5 5h7"/></svg></span></span>Your story<span class="sr-only">, add a story</span></a></li>
  <li><a class="group flex w-[72px] flex-col items-center gap-2 rounded-xl text-center text-[.74rem] font-semibold text-[#cbd5e1] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#67e8f9]" href="#"><span class="relative grid size-[66px] place-items-center rounded-full p-[3px] transition-transform duration-200 ease-in-out group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100 bg-[conic-gradient(from_200deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b)]"><span class="grid size-full place-items-center overflow-hidden rounded-full border-[3px] border-[#0b0f17] bg-linear-135 text-[1rem] font-bold text-white from-[#4f46e5] to-[#9333ea]" aria-hidden="true"><svg class="size-full" viewBox="0 0 64 64"><rect width="64" height="64" fill="#c7d2fe"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#4f46e5"/><circle cx="32" cy="34" r="14" fill="#f6c9a4"/><path d="M17 33c0-11 6-18 15-18s15 7 15 18c-3-5-8-8-15-8s-12 3-15 8z" fill="#1e1b4b"/><circle cx="26.5" cy="36" r="1.8" fill="#1e1b4b"/><circle cx="37.5" cy="36" r="1.8" fill="#1e1b4b"/><path d="M28 41.5c2.4 2.2 5.6 2.2 8 0" fill="none" stroke="#1e1b4b" stroke-width="1.8" stroke-linecap="round"/></svg></span></span>Maya<span class="sr-only">, new story</span></a></li>
  <li><a class="group flex w-[72px] flex-col items-center gap-2 rounded-xl text-center text-[.74rem] font-semibold text-[#cbd5e1] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#67e8f9]" href="#"><span class="relative grid size-[66px] place-items-center rounded-full p-[3px] transition-transform duration-200 ease-in-out group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100 bg-[conic-gradient(from_200deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b)]"><span class="grid size-full place-items-center overflow-hidden rounded-full border-[3px] border-[#0b0f17] bg-linear-135 text-[1rem] font-bold text-white from-[#4f46e5] to-[#9333ea]" aria-hidden="true"><svg class="size-full" viewBox="0 0 64 64"><rect width="64" height="64" fill="#fde68a"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#0f766e"/><circle cx="32" cy="34" r="14" fill="#8d5a3b"/><path d="M18.5 31c1-8 6.5-12 13.5-12s12.5 4 13.5 12c-4-3-8.5-4-13.5-4s-9.5 1-13.5 4z" fill="#1c1917"/><circle cx="26.5" cy="35.5" r="1.8" fill="#1c1917"/><circle cx="37.5" cy="35.5" r="1.8" fill="#1c1917"/><path d="M27 41c2.8 2.6 7.2 2.6 10 0" fill="none" stroke="#1c1917" stroke-width="1.8" stroke-linecap="round"/></svg></span></span>Kofi<span class="sr-only">, new story</span></a></li>
  <li><a class="group flex w-[72px] flex-col items-center gap-2 rounded-xl text-center text-[.74rem] font-semibold text-[#cbd5e1] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#67e8f9]" href="#"><span class="relative grid size-[66px] place-items-center rounded-full p-[3px] transition-transform duration-200 ease-in-out group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100 bg-[conic-gradient(from_200deg,#f59e0b,#ec4899,#8b5cf6,#22d3ee,#f59e0b)]"><span class="grid size-full place-items-center overflow-hidden rounded-full border-[3px] border-[#0b0f17] bg-linear-135 text-[1rem] font-bold text-white from-[#c2410c] to-[#be185d]" aria-hidden="true">JP</span></span>June<span class="sr-only">, new story</span></a></li>
  <li><a class="group flex w-[72px] flex-col items-center gap-2 rounded-xl text-center text-[.74rem] font-semibold text-[#cbd5e1] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#67e8f9]" href="#"><span class="relative grid size-[66px] place-items-center rounded-full p-[3px] transition-transform duration-200 ease-in-out group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100 bg-[#3a4660]"><span class="grid size-full place-items-center overflow-hidden rounded-full border-[3px] border-[#0b0f17] bg-linear-135 text-[1rem] font-bold text-white from-[#4f46e5] to-[#9333ea]" aria-hidden="true"><svg class="size-full" viewBox="0 0 64 64"><rect width="64" height="64" fill="#fbcfe8"/><path d="M10 64c2-11 11-16 22-16s20 5 22 16z" fill="#334155"/><circle cx="32" cy="34" r="14" fill="#d6a06e"/><g fill="#3f2a1d"><circle cx="20" cy="27" r="5"/><circle cx="26" cy="21" r="5.5"/><circle cx="33" cy="19" r="5.5"/><circle cx="40" cy="21.5" r="5.5"/><circle cx="45" cy="27.5" r="4.5"/></g><path d="M24 44.5c2-1.5 5-2 8-2s6 .5 8 2c-1 3.5-4 5.5-8 5.5s-7-2-8-5.5z" fill="#3f2a1d"/><circle cx="26.5" cy="35" r="1.8" fill="#3f2a1d"/><circle cx="37.5" cy="35" r="1.8" fill="#3f2a1d"/></svg></span></span>Rafael<span class="sr-only">, seen</span></a></li>
  <li><a class="group flex w-[72px] flex-col items-center gap-2 rounded-xl text-center text-[.74rem] font-semibold text-[#cbd5e1] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#67e8f9]" href="#"><span class="relative grid size-[66px] place-items-center rounded-full p-[3px] transition-transform duration-200 ease-in-out group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100 bg-[#3a4660]"><span class="grid size-full place-items-center overflow-hidden rounded-full border-[3px] border-[#0b0f17] bg-linear-135 text-[1rem] font-bold text-white from-[#334155] to-[#475569]" aria-hidden="true">TR</span></span>Tomás<span class="sr-only">, seen</span></a></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa4b8] uppercase">Checkbox chips · no JavaScript</span>
<fieldset class="flex min-w-0 flex-wrap gap-2">
  <legend class="float-left mb-2.5 w-full text-[.88rem] font-bold text-[#e6e9f2]">Follow topics</legend>
  <label class="group relative cursor-pointer"><input class="peer sr-only" type="checkbox" checked><span class="inline-flex h-[34px] items-center gap-1.5 rounded-full border border-[#3a4660] px-3.5 text-[.84rem] font-medium text-[#cbd5e1] transition-[background-color,border-color,color] duration-150 group-hover:border-[#56627c] peer-checked:border-[#22d3ee] peer-checked:bg-[rgba(34,211,238,.12)] peer-checked:pl-2.5 peer-checked:font-semibold peer-checked:text-[#a5f3fc] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#67e8f9] motion-reduce:transition-none [&>svg]:hidden peer-checked:[&>svg]:block"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Rust</span></label>
  <label class="group relative cursor-pointer"><input class="peer sr-only" type="checkbox"><span class="inline-flex h-[34px] items-center gap-1.5 rounded-full border border-[#3a4660] px-3.5 text-[.84rem] font-medium text-[#cbd5e1] transition-[background-color,border-color,color] duration-150 group-hover:border-[#56627c] peer-checked:border-[#22d3ee] peer-checked:bg-[rgba(34,211,238,.12)] peer-checked:pl-2.5 peer-checked:font-semibold peer-checked:text-[#a5f3fc] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#67e8f9] motion-reduce:transition-none [&>svg]:hidden peer-checked:[&>svg]:block"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>WebAssembly</span></label>
  <label class="group relative cursor-pointer"><input class="peer sr-only" type="checkbox" checked><span class="inline-flex h-[34px] items-center gap-1.5 rounded-full border border-[#3a4660] px-3.5 text-[.84rem] font-medium text-[#cbd5e1] transition-[background-color,border-color,color] duration-150 group-hover:border-[#56627c] peer-checked:border-[#22d3ee] peer-checked:bg-[rgba(34,211,238,.12)] peer-checked:pl-2.5 peer-checked:font-semibold peer-checked:text-[#a5f3fc] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#67e8f9] motion-reduce:transition-none [&>svg]:hidden peer-checked:[&>svg]:block"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Edge functions</span></label>
  <label class="group relative cursor-pointer"><input class="peer sr-only" type="checkbox"><span class="inline-flex h-[34px] items-center gap-1.5 rounded-full border border-[#3a4660] px-3.5 text-[.84rem] font-medium text-[#cbd5e1] transition-[background-color,border-color,color] duration-150 group-hover:border-[#56627c] peer-checked:border-[#22d3ee] peer-checked:bg-[rgba(34,211,238,.12)] peer-checked:pl-2.5 peer-checked:font-semibold peer-checked:text-[#a5f3fc] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#67e8f9] motion-reduce:transition-none [&>svg]:hidden peer-checked:[&>svg]:block"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Databases</span></label>
  <label class="group relative cursor-pointer"><input class="peer sr-only" type="checkbox"><span class="inline-flex h-[34px] items-center gap-1.5 rounded-full border border-[#3a4660] px-3.5 text-[.84rem] font-medium text-[#cbd5e1] transition-[background-color,border-color,color] duration-150 group-hover:border-[#56627c] peer-checked:border-[#22d3ee] peer-checked:bg-[rgba(34,211,238,.12)] peer-checked:pl-2.5 peer-checked:font-semibold peer-checked:text-[#a5f3fc] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#67e8f9] motion-reduce:transition-none [&>svg]:hidden peer-checked:[&>svg]:block"><svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg>Observability</span></label>
</fieldset></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa4b8] uppercase">Presence card · status dots on a dark card</span>
<section class="max-w-[420px] rounded-[18px] border border-[#232c3d] bg-[#121826] p-[18px]" aria-labelledby="oncall-h">
  <div class="flex items-center justify-between gap-3">
    <div><h3 class="text-[1rem] font-bold" id="oncall-h">Platform on-call</h3><p class="mt-[3px] text-[.8rem] text-[#9aa4b8]">2 online · 1 away · 1 offline</p></div>
    <button class="relative grid size-10 flex-none cursor-pointer place-items-center rounded-xl border border-[#3a4660] text-[#e6e9f2] transition-[background-color] duration-150 hover:bg-[#1a2233] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#67e8f9] motion-reduce:transition-none" type="button"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9a6 6 0 1 1 12 0c0 6 2.5 8 2.5 8h-17S6 15 6 9"/><path d="M10.3 20.5a2 2 0 0 0 3.4 0"/></svg><span class="sr-only">Alerts,</span><b class="absolute -top-[7px] -right-[7px] h-5 min-w-5 rounded-full border-2 border-[#121826] bg-[#f43f5e] px-[5px] text-center text-[.66rem] leading-4 font-extrabold text-white">5<span class="sr-only"> unread</span></b></button>
  </div>
  <ul class="mt-4 grid gap-3 border-t border-[#232c3d] pt-4">
    <li class="flex items-center gap-3 text-[.88rem] font-semibold"><span class="relative grid size-9 flex-none place-items-center rounded-full bg-linear-135 text-[.78rem] font-bold text-white from-[#4f46e5] to-[#9333ea]" aria-hidden="true">LV<i class="absolute -right-px -bottom-px size-3 rounded-full bg-[#4ade80] shadow-[0_0_0_2.5px_#121826]"></i></span>Lena Vogt<small class="ml-auto text-[.76rem] font-medium text-[#9aa4b8]">Online</small></li>
    <li class="flex items-center gap-3 text-[.88rem] font-semibold"><span class="relative grid size-9 flex-none place-items-center rounded-full bg-linear-135 text-[.78rem] font-bold text-white from-[#0f766e] to-[#0369a1]" aria-hidden="true">OA<i class="absolute -right-px -bottom-px size-3 rounded-full bg-[#4ade80] shadow-[0_0_0_2.5px_#121826]"></i></span>Omar Aziz<small class="ml-auto text-[.76rem] font-medium text-[#9aa4b8]">Online</small></li>
    <li class="flex items-center gap-3 text-[.88rem] font-semibold"><span class="relative grid size-9 flex-none place-items-center rounded-full bg-linear-135 text-[.78rem] font-bold text-white from-[#b45309] to-[#c2410c]" aria-hidden="true">KM<i class="absolute -right-px -bottom-px size-3 rounded-full [background:radial-gradient(circle_at_32%_32%,#121826_0_34%,transparent_36%),#fbbf24] shadow-[0_0_0_2.5px_#121826]"></i></span>Kai Moreno<small class="ml-auto text-[.76rem] font-medium text-[#9aa4b8]">Away · 20 min</small></li>
    <li class="flex items-center gap-3 text-[.88rem] font-semibold"><span class="relative grid size-9 flex-none place-items-center rounded-full bg-linear-135 text-[.78rem] font-bold text-white from-[#334155] to-[#475569]" aria-hidden="true">TR<i class="absolute -right-px -bottom-px size-3 rounded-full bg-[#121826] shadow-[inset_0_0_0_2px_#8792a8,0_0_0_2.5px_#121826]"></i></span>Tomás Ruiz<small class="ml-auto text-[.76rem] font-medium text-[#9aa4b8]">Offline</small></li>
  </ul>
</section></div>
</div>
CSS 
/* The pulsing glow on the Deploying badge's dot. Everything else is utility classes in the markup. */
@theme{--animate-dk-pulse:dk-pulse 1.4s ease-in-out infinite}
@keyframes dk-pulse{50%{box-shadow:0 0 0 6px rgba(167,139,250,0),0 0 14px rgba(167,139,250,1)}}

About this set

Badges and avatars designed for dark interfaces, where light-theme tints turn muddy. Glow status badges for a deployment pipeline read Running, Queued, Deploying, Failed and Paused on translucent tints, each with a glowing dot whose shape differs: a hollow ring for Queued, a diamond for Failed and a pulsing dot for Deploying. Story rings show a row of profile links with a gradient ring for new stories, a grey ring for seen ones and an add button on your own story, mixing initials and drawn faces. Checkbox chips let a reader follow topics such as Rust and Edge functions with native checkboxes and no JavaScript. A presence card for an on-call rota lists four people with online, away and offline dots, their status in words, and an alerts button with 5 unread. Use the set in developer tools, dashboards and media apps with a dark theme. Text colours are lightened to pass 4.5 to 1 on the near-black ground, and the Bootstrap version runs in data-bs-theme=”dark”.

What’s included

  • Glow status badges whose dots also differ in shape
  • Story rings with new and seen states on profile links
  • Checkbox chips built on native inputs, no JavaScript
  • Presence card with status dots, status text and an alerts count
  • Bootstrap version in data-bs-theme="dark"

Accessibility

Status badges are words and their dots differ in shape as well as colour. Story links include hidden text such as new story or seen, chips are native checkboxes in a fieldset with a legend, and the alerts button reads Alerts, 5 unread. Focus shows a 2px cyan outline on links, chips and the button, and the pulse, ring scale and colour transitions switch off under prefers-reduced-motion.

Customise it

Colours live in --bg, --card, --line, --text, --muted and --focus on .dk, and each status badge takes an RGB triple in --c plus a text colour in --t. Bootstrap restyles .btn-check chips, .card and .badge through --bs-* variables; in Tailwind edit the arbitrary rgba() colour utilities.