Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="dk-i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></symbol>
  <symbol id="dk-i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13M16 5.5v13" stroke-width="3"/></symbol>
  <symbol id="dk-i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6v12l-8.5-6zM6 6v12"/></symbol>
  <symbol id="dk-i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6v12l8.5-6zM18 6v12"/></symbol>
  <symbol id="dk-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
  <symbol id="dk-i-volume" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z"/><path d="M15.5 9a4.5 4.5 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11"/></symbol>
  <symbol id="dk-i-chevl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m15 6-6 6 6 6"/></symbol>
  <symbol id="dk-i-chevr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></symbol>
  <symbol id="dk-i-tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5" stroke-width="3"/></symbol>
  <symbol id="dk-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
  <symbol id="dk-i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3L19.5 9"/><path d="M19.5 4.5V9H15"/></symbol>
</svg>
<div class="cols">
<section><span class="lbl">Audio player</span><article class="dk-card dk-player" aria-label="Podcast player">
<div class="dk-player__art"><svg viewBox="0 0 120 120" aria-hidden="true" focusable="false" style="display:block;width:100%;height:100%"><rect width="120" height="120" style="fill:var(--accent-soft)"/><circle cx="60" cy="60" r="34" style="fill:none;stroke:var(--accent);stroke-width:2;opacity:.55"/><circle cx="60" cy="60" r="22" style="fill:none;stroke:var(--accent);stroke-width:2;opacity:.8"/><path d="M18 60h14l6-16 8 34 7-26 5 14 4-6h40" style="fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round"/></svg></div><div><p class="dk-player__show">The On-Call Hour · Ep. 42</p><h3 class="dk-player__title">Debugging in production without waking anyone up</h3></div>
<div class="dk-player__seek"><input class="dk-range" type="range" min="0" max="2830" value="1104" data-fill aria-label="Seek" aria-valuetext="18 minutes 24 seconds of 47 minutes 10 seconds" style="--val:39%"><div class="dk-player__time" aria-hidden="true"><span>18:24</span><span>−28:46</span></div></div>
<div class="dk-player__controls"><button class="dk-btn dk-btn--ghost dk-btn--icon dk-speed" type="button" aria-label="Playback speed 1.25 times">1.25×</button><span class="dk-spacer"></span><button class="dk-btn dk-btn--ghost dk-btn--icon" type="button" aria-label="Previous episode"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-prev"/></svg></button><button class="dk-btn dk-btn--primary dk-btn--icon dk-btn--lg dk-btn--round" type="button" aria-label="Pause" data-play><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-pause"/></svg></button><button class="dk-btn dk-btn--ghost dk-btn--icon" type="button" aria-label="Next episode"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-next"/></svg></button><span class="dk-spacer"></span><button class="dk-btn dk-btn--ghost dk-btn--icon" type="button" aria-label="Volume"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-volume"/></svg></button></div>
</article></section>
<section><span class="lbl">Chart card · SVG, with the data as a table</span><figure class="dk-card" style="margin:0">
<div class="dk-chart__head"><div><figcaption class="dk-card__sub" style="margin:0">Requests per hour · today</figcaption><p class="dk-chart__value">19,800</p></div><ul class="dk-legend"><li><i></i>Today</li><li><i class="dk-legend--dash"></i>Last week</li></ul></div>
<div class="dk-chart__plot"><div class="dk-chart__y" aria-hidden="true"><span>4k</span><span>3k</span><span>2k</span><span>1k</span><span>0</span></div><svg viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true" focusable="false" style="display:block;width:100%;height:180px;overflow:visible"><path d="M0 0.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 45H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 90H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 135H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 179.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0 L560 180 L0 180 Z" style="fill:color-mix(in srgb,var(--accent) 18%,transparent)"/><path d="M0.0 135.0 L80.0 144.0 L160.0 139.5 L240.0 117.0 L320.0 67.5 L400.0 45.0 L480.0 49.5 L560.0 81.0" style="fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0" style="fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke"/></svg></div>
<div class="dk-chart__x" aria-hidden="true"><span>00</span><span>03</span><span>06</span><span>09</span><span>12</span><span>15</span><span>18</span><span>21</span></div><div class="dk-sr"><table><caption>Requests per hour, today and the same day last week</caption><tr><th scope="col">Hour</th><th scope="col">Today</th><th scope="col">Last week</th></tr><tr><th scope="row">00:00</th><td>1,200</td><td>1,000</td></tr><tr><th scope="row">03:00</th><td>900</td><td>800</td></tr><tr><th scope="row">06:00</th><td>800</td><td>900</td></tr><tr><th scope="row">09:00</th><td>1,600</td><td>1,400</td></tr><tr><th scope="row">12:00</th><td>3,100</td><td>2,500</td></tr><tr><th scope="row">15:00</th><td>3,800</td><td>3,000</td></tr><tr><th scope="row">18:00</th><td>3,400</td><td>2,900</td></tr><tr><th scope="row">21:00</th><td>2,600</td><td>2,200</td></tr></table></div></figure></section></div>
<div class="cols"><section><span class="lbl">Mini calendar</span><div class="dk-card dk-cal">
<div class="dk-cal__head"><h3 aria-hidden="true">October 2026</h3><div class="dk-cal__nav"><button class="dk-btn dk-btn--ghost dk-btn--icon dk-btn--sm" type="button" aria-label="Previous month"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-chevl"/></svg></button><button class="dk-btn dk-btn--ghost dk-btn--icon dk-btn--sm" type="button" aria-label="Next month"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-chevr"/></svg></button></div></div>
<table class=""><caption class="dk-sr">October 2026</caption><thead><tr><th class="" scope="col"><abbr title="Monday" style="text-decoration:none">Mo</abbr></th><th class="" scope="col"><abbr title="Tuesday" style="text-decoration:none">Tu</abbr></th><th class="" scope="col"><abbr title="Wednesday" style="text-decoration:none">We</abbr></th><th class="" scope="col"><abbr title="Thursday" style="text-decoration:none">Th</abbr></th><th class="" scope="col"><abbr title="Friday" style="text-decoration:none">Fr</abbr></th><th class="" scope="col"><abbr title="Saturday" style="text-decoration:none">Sa</abbr></th><th class="" scope="col"><abbr title="Sunday" style="text-decoration:none">Su</abbr></th></tr></thead><tbody><tr><td class=""><span class="dk-cal__out" aria-hidden="true">28</span></td><td class=""><span class="dk-cal__out" aria-hidden="true">29</span></td><td class=""><span class="dk-cal__out" aria-hidden="true">30</span></td><td class=""><button class="dk-day" type="button" aria-label="1 October" aria-pressed="false">1</button></td><td class=""><button class="dk-day" type="button" aria-label="2 October" aria-pressed="false">2</button></td><td class=""><button class="dk-day" type="button" aria-label="3 October" aria-pressed="false">3</button></td><td class=""><button class="dk-day" type="button" aria-label="4 October" aria-pressed="false">4</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="5 October" aria-pressed="false">5</button></td><td class=""><button class="dk-day" type="button" aria-label="6 October, 1 event" aria-pressed="false" data-events>6</button></td><td class=""><button class="dk-day" type="button" aria-label="7 October" aria-pressed="false">7</button></td><td class=""><button class="dk-day" type="button" aria-label="8 October" aria-pressed="false">8</button></td><td class=""><button class="dk-day" type="button" aria-label="9 October" aria-pressed="false">9</button></td><td class=""><button class="dk-day" type="button" aria-label="10 October" aria-pressed="false">10</button></td><td class=""><button class="dk-day" type="button" aria-label="11 October" aria-pressed="false">11</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="12 October" aria-pressed="false">12</button></td><td class=""><button class="dk-day" type="button" aria-label="13 October" aria-pressed="false">13</button></td><td class=""><button class="dk-day" type="button" aria-label="14 October, 2 events" aria-pressed="false" data-events>14</button></td><td class=""><button class="dk-day" type="button" aria-label="15 October" aria-pressed="false">15</button></td><td class=""><button class="dk-day" type="button" aria-label="16 October, today" aria-current="date" aria-pressed="false">16</button></td><td class=""><button class="dk-day" type="button" aria-label="17 October" aria-pressed="false">17</button></td><td class=""><button class="dk-day" type="button" aria-label="18 October" aria-pressed="false">18</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="19 October" aria-pressed="false">19</button></td><td class=""><button class="dk-day" type="button" aria-label="20 October" aria-pressed="false">20</button></td><td class=""><button class="dk-day" type="button" aria-label="21 October, 2 events" aria-pressed="true" data-events>21</button></td><td class=""><button class="dk-day" type="button" aria-label="22 October" aria-pressed="false">22</button></td><td class=""><button class="dk-day" type="button" aria-label="23 October" aria-pressed="false">23</button></td><td class=""><button class="dk-day" type="button" aria-label="24 October" aria-pressed="false">24</button></td><td class=""><button class="dk-day" type="button" aria-label="25 October" aria-pressed="false">25</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="26 October" aria-pressed="false">26</button></td><td class=""><button class="dk-day" type="button" aria-label="27 October, 1 event" aria-pressed="false" data-events>27</button></td><td class=""><button class="dk-day" type="button" aria-label="28 October" aria-pressed="false">28</button></td><td class=""><button class="dk-day" type="button" aria-label="29 October" aria-pressed="false">29</button></td><td class=""><button class="dk-day" type="button" aria-label="30 October" aria-pressed="false">30</button></td><td class=""><button class="dk-day" type="button" aria-label="31 October" aria-pressed="false">31</button></td><td class=""><span class="dk-cal__out" aria-hidden="true">1</span></td></tr></tbody></table>
<ul class="dk-agenda"><li><time datetime="2026-10-21T09:30">09:30</time><span><b>Incident review</b>INC-2291 · 45 min</span></li><li><time datetime="2026-10-21T14:00">14:00</time><span><b>Release 4.12 go / no-go</b>Platform team · 30 min</span></li></ul></div></section>
<section><span class="lbl">Progress · bars, stacked bar, ring, steps</span><div class="dk-card"><div class="dk-meters">
<div class="dk-meter"><p><span id="m-57">Build minutes</span><b>3,420 / 6,000</b></p><div class="dk-bar" role="progressbar" aria-labelledby="m-57" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"><span style="width:57%;--c:var(--accent)"></span></div></div>
<div class="dk-meter"><p><span id="m-82">Bandwidth</span><b>820 / 1,000 GB</b></p><div class="dk-bar" role="progressbar" aria-labelledby="m-82" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"><span style="width:82%;--c:var(--warning)"></span></div></div>
<div class="dk-meter"><p><span id="m-34">Edge requests</span><b>3.4M / 10M</b></p><div class="dk-bar" role="progressbar" aria-labelledby="m-34" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"><span style="width:34%;--c:var(--success)"></span></div></div>
<div class="dk-meter"><p><span>Storage · 88 of 100 GB</span><b>88%</b></p><div class="dk-stackbar" role="img" aria-label="Storage: logs 46 GB, build cache 28 GB, images 14 GB, 12 GB free"><span style="width:46%;--c:var(--accent)"></span><span style="width:28%;--c:var(--success)"></span><span style="width:14%;--c:var(--warning)"></span></div><ul class="dk-stacklegend" aria-hidden="true"><li><i style="--c:var(--accent)"></i>Logs 46 GB</li><li><i style="--c:var(--success)"></i>Build cache 28 GB</li><li><i style="--c:var(--warning)"></i>Images 14 GB</li></ul></div></div>
<div class="dk-progress-row"><div class="dk-ring" role="progressbar" aria-label="Sprint completed" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><svg viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle cx="50" cy="50" r="42" style="fill:none;stroke:var(--surface-3);stroke-width:9"/><circle cx="50" cy="50" r="42" pathLength="100" style="fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:72 100"/></svg><span class="dk-ring__label" aria-hidden="true">72%<small class="">sprint</small></span></div><ol class="dk-steps" aria-label="Deployment dpl_7Kq2xT">
<li data-state="done"><span class="dk-steps__mark" aria-hidden="true"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-tick"/></svg></span><span><b>Build<span class="dk-sr">, done</span></b>1 m 12 s</span></li>
<li data-state="done"><span class="dk-steps__mark" aria-hidden="true"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-tick"/></svg></span><span><b>Test<span class="dk-sr">, done</span></b>2 m 40 s</span></li>
<li data-state="current" aria-current="step"><span class="dk-steps__mark" aria-hidden="true"></span><span><b>Deploy<span class="dk-sr"></span></b>Uploading 18 functions</span></li>
<li data-state="todo"><span class="dk-steps__mark" aria-hidden="true"></span><span><b>Verify<span class="dk-sr"></span></b>Waiting</span></li>
</ol></div></div></section></div>
CSS 
/* ── Dark UI kit tokens (uiCookies) — identical in every set ──────────────────────────────
   Dark first. Elevation is a lighter surface, not a shadow: surface-0 is the page, 1 cards and
   panels, 2 controls, menus and dialogs, 3 hover, selected rows and tooltips.
   Every colour is a light-dark() pair, so flipping color-scheme turns the whole kit light:
   data-theme="dark" | "light" | "system" on any wrapper (system follows prefers-color-scheme),
   or a checked .theme-pick radio inside a [data-theme] element (:has()).
   Contrast, dark | light, on the worst surface (surface-3): text-1 12.2 | 15.0, text-2 6.6 | 7.3,
   text-3 4.8 | 5.4, accent 5.4 | 5.1, success 7.7 | 5.0, warning 8.4 | 5.2, danger 6.8 | 5.0;
   edge (control boundaries) 3.3 | 3.1 and focus 7.9 | 5.9 against every surface. */
:root{color-scheme:dark}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="system"]{color-scheme:light dark}
[data-theme]:has(.theme-pick[value="dark"]:checked){color-scheme:dark}
[data-theme]:has(.theme-pick[value="light"]:checked){color-scheme:light}
[data-theme]:has(.theme-pick[value="system"]:checked){color-scheme:light dark}
:root{
  --surface-0:light-dark(#eef1f5,#0b0d12);   /* page */
  --surface-1:light-dark(#ffffff,#151821);   /* cards, panels, navbar, sidebar */
  --surface-2:light-dark(#f6f7f9,#1d212c);   /* controls, menus, dialogs, toasts */
  --surface-3:light-dark(#e6e9ef,#262b38);   /* hover, selected rows, tooltips */
  --text-1:light-dark(#12151c,#eceef3);      /* primary text */
  --text-2:light-dark(#434a5a,#aab1bf);      /* secondary text */
  --text-3:light-dark(#555d6e,#8f96a8);      /* captions, placeholders, axis labels */
  --border:light-dark(#dde1e8,#2a2f3c);      /* decorative 1px dividers and card edges */
  --edge:light-dark(#7c8496,#737b90);        /* control boundaries: fields, boxes, tracks */
  --accent:light-dark(#4452d0,#8b97ff);      /* the one vivid colour: links, selected, primary */
  --accent-soft:light-dark(#e6e8ff,#232a4d); /* selected backgrounds; accent text keeps 5.2 | 5.3 on it */
  --on-accent:light-dark(#ffffff,#0b0d12);   /* text on accent fills, 6.2 | 7.4 */
  --success:light-dark(#11713f,#5fd4a0);     /* desaturated for dark, so they do not vibrate */
  --warning:light-dark(#875500,#f0c060);
  --danger:light-dark(#bb2532,#ff9790);
  --focus:light-dark(#3b48c4,#b5bdff);       /* 2px focus ring */
  --highlight:light-dark(rgb(255 255 255 / 0),rgb(255 255 255 / .045)); /* 1px top light on dark surfaces */
  --shadow-color:light-dark(rgb(16 24 40 / .16),rgb(0 0 0 / .55));     /* overlays only */
  --radius:12px;--radius-sm:8px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
/* No light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120): the same values, chosen by attribute */
@supports not (color:light-dark(#fff,#000)){
  :root,[data-theme="dark"]{--surface-0:#0b0d12;--surface-1:#151821;--surface-2:#1d212c;--surface-3:#262b38;--text-1:#eceef3;--text-2:#aab1bf;--text-3:#8f96a8;--border:#2a2f3c;--edge:#737b90;--accent:#8b97ff;--accent-soft:#232a4d;--on-accent:#0b0d12;--success:#5fd4a0;--warning:#f0c060;--danger:#ff9790;--focus:#b5bdff;--highlight:rgb(255 255 255 / .045);--shadow-color:rgb(0 0 0 / .55)}
  [data-theme="light"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}
  @media (prefers-color-scheme:light){[data-theme="system"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}}
}
@media (prefers-contrast:more){:root{--border:var(--edge);--text-3:var(--text-2)}}
[data-theme]{background:var(--surface-0);color:var(--text-1)}
/* Components */
:where([class^="dk-"],[class*=" dk-"]),:where([class^="dk-"],[class*=" dk-"])::before,:where([class^="dk-"],[class*=" dk-"])::after{box-sizing:border-box}
.dk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dk-ico{width:18px;height:18px;flex:none}
.dk-kbd{display:inline-grid;place-items:center;min-width:1.45rem;height:1.35rem;padding:0 .35rem;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;background:var(--surface-2);color:var(--text-2);font:500 .72rem/1 var(--mono)}
.dk-link{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
.dk-link:hover{text-decoration-color:currentColor}
.dk-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
/* Card: surface-1 with a 1px border and a 1px top highlight (dark only); no shadow */
.dk-card{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-1);color:var(--text-1);box-shadow:inset 0 1px 0 var(--highlight)}
.dk-card h2,.dk-card h3,.dk-card p{margin:0}
.dk-card__title{font-size:1rem;font-weight:650;letter-spacing:-.01em}
.dk-card__sub{margin-top:2px;font-size:.85rem;color:var(--text-2)}
/* Buttons: one recipe, variants only swap four custom properties */
.dk-btn{--b-bg:var(--surface-2);--b-fg:var(--text-1);--b-bd:var(--border);--b-hover:var(--surface-3);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:38px;padding:.5rem 1rem;
  border:1px solid var(--b-bd);border-radius:var(--radius-sm);background:var(--b-bg);color:var(--b-fg);
  font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--highlight);transition:background-color .15s,border-color .15s,color .15s}
.dk-btn:hover{background:var(--b-hover)}
.dk-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-btn--primary{--b-bg:var(--accent);--b-fg:var(--on-accent);--b-bd:var(--accent);--b-hover:color-mix(in srgb,var(--accent) 86%,var(--text-1))}
.dk-btn--ghost{--b-bg:transparent;--b-bd:transparent;--b-fg:var(--text-2);box-shadow:none}
.dk-btn--ghost:hover{color:var(--text-1)}
.dk-btn--danger{--b-fg:var(--danger);--b-bd:color-mix(in srgb,var(--danger) 40%,var(--border))}
.dk-btn--sm{min-height:32px;padding:.35rem .75rem;font-size:.8rem}
.dk-btn--lg{min-height:46px;padding:.7rem 1.35rem;font-size:.95rem}
.dk-btn--block{width:100%}
.dk-btn:disabled{opacity:.5;cursor:not-allowed}
.dk-btn[aria-busy="true"]{cursor:progress}
.dk-btn:disabled:hover{background:var(--b-bg)}
.dk-btn--icon{width:38px;padding:0}
.dk-btn--icon.dk-btn--sm{width:32px}
.dk-btn--icon.dk-btn--lg{width:46px}
.dk-btn--round{border-radius:999px}
.dk-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dk-spin .75s linear infinite}
@keyframes dk-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.dk-btn{transition:none}.dk-spin{animation-duration:2.4s}}
/* Range: native input, accent fill drawn with a gradient set from --val */
.dk-range{width:100%;height:22px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}
.dk-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;border:1px solid var(--edge);
  background:linear-gradient(90deg,var(--accent) 0 var(--val,50%),var(--surface-3) var(--val,50%))}
.dk-range::-moz-range-track{height:6px;border-radius:999px;border:1px solid var(--edge);background:var(--surface-3)}
.dk-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
.dk-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border:2px solid var(--accent);border-radius:50%;background:var(--text-1)}
.dk-range::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--accent);border-radius:50%;background:var(--text-1)}
.dk-range:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
/* Media player */
.dk-player{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}
.dk-player__art{width:96px;height:96px;overflow:hidden;border:1px solid var(--border);border-radius:10px}
.dk-player__show{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.dk-player__title{margin-top:4px!important;font-size:1rem;font-weight:650;line-height:1.35}
.dk-player__seek{grid-column:1/-1;display:grid;gap:4px}
.dk-player__time{display:flex;justify-content:space-between;font:500 .75rem var(--mono);color:var(--text-3)}
.dk-player__controls{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px}
.dk-player__controls .dk-btn--icon.dk-btn--lg{width:52px;min-height:52px}
.dk-player__controls .dk-spacer{flex:1}
.dk-speed{font:600 .78rem var(--mono)}
/* Chart card */
.dk-chart__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.dk-chart__value{margin-top:4px!important;font-size:1.6rem;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.dk-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;font-size:.78rem;color:var(--text-2)}
.dk-legend li{display:inline-flex;align-items:center;gap:6px}
.dk-legend i{width:14px;height:3px;border-radius:2px;background:var(--accent)}
.dk-legend i.dk-legend--dash{background:repeating-linear-gradient(90deg,var(--text-3) 0 4px,transparent 4px 7px)}
.dk-chart__plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.dk-chart__y{display:flex;flex-direction:column;justify-content:space-between;height:180px;margin:-7px 0;font:500 .7rem var(--mono);color:var(--text-3);text-align:right}
.dk-chart__x{display:flex;justify-content:space-between;margin:8px 0 0 34px;font:500 .7rem var(--mono);color:var(--text-3)}
/* Mini calendar */
.dk-cal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dk-cal__head h3{font-size:.95rem;font-weight:650}
.dk-cal__nav{display:flex;gap:4px}
.dk-cal table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center}
.dk-cal th{padding:4px 0 8px;font-size:.7rem;font-weight:600;color:var(--text-3)}
.dk-cal td{padding:2px}
.dk-cal__out{display:inline-grid;place-items:center;width:34px;height:34px;font-size:.8rem;color:var(--text-3)}
.dk-day{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-1);
  font-family:inherit;font-size:.82rem;font-variant-numeric:tabular-nums;cursor:pointer}
.dk-day:hover{background:var(--surface-3)}
.dk-day:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.dk-day[aria-current="date"]{border-color:var(--accent);color:var(--accent);font-weight:700}
.dk-day[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700}
.dk-day[data-events]::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.dk-agenda{display:grid;gap:8px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--border);list-style:none;font-size:.82rem}
.dk-agenda li{display:grid;grid-template-columns:52px 1fr;gap:10px;color:var(--text-2)}
.dk-agenda time{font:600 .75rem/1.6 var(--mono);color:var(--text-3)}
.dk-agenda b{display:block;font-weight:600;color:var(--text-1)}
/* Progress */
.dk-meters{display:grid;gap:16px}
.dk-meter p{display:flex;justify-content:space-between;gap:8px;margin:0 0 7px!important;font-size:.82rem;color:var(--text-2)}
.dk-meter b{font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums}
.dk-bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.dk-bar>span{display:block;height:100%;border-radius:inherit;background:var(--c,var(--accent))}
.dk-stackbar{display:flex;gap:2px;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.dk-stackbar>span{background:var(--c)}
.dk-stacklegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:9px 0 0;padding:0;list-style:none;font-size:.75rem;color:var(--text-2)}
.dk-stacklegend li{display:inline-flex;align-items:center;gap:6px}
.dk-stacklegend i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.dk-progress-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.dk-ring{position:relative;width:96px;height:96px}
.dk-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.dk-ring__label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:1.15rem;font-weight:700;line-height:1.1}
.dk-ring__label small{font-size:.65rem;font-weight:500;color:var(--text-3)}
.dk-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.dk-steps li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.82rem;color:var(--text-2)}
.dk-steps b{display:block;font-weight:600;color:var(--text-1)}
.dk-steps__mark{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--edge);border-radius:50%;color:var(--on-accent)}
.dk-steps__mark .dk-ico{width:13px;height:13px}
.dk-steps [data-state="done"] .dk-steps__mark{border-color:var(--success);background:var(--success)}
.dk-steps [aria-current="step"] .dk-steps__mark{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dk-steps [aria-current="step"] .dk-steps__mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dk-pulse 1.4s ease-in-out infinite}
@keyframes dk-pulse{50%{transform:scale(.55);opacity:.6}}
@media (prefers-reduced-motion:reduce){.dk-steps [aria-current="step"] .dk-steps__mark::after{animation:none}}
JavaScript 
// Seek bar fill follows the slider; the play button swaps between Play and Pause.
document.querySelectorAll('input[type=range][data-fill]').forEach(r => {
  const sync = () => r.style.setProperty('--val', (r.value - r.min) / (r.max - r.min) * 100 + '%');
  r.addEventListener('input', sync); sync();
});
document.querySelectorAll('[data-play]').forEach(btn => btn.addEventListener('click', () => {
  const playing = btn.getAttribute('aria-label') === 'Pause';
  btn.setAttribute('aria-label', playing ? 'Play' : 'Pause');
  btn.querySelector('use').setAttribute('href', playing ? '#dk-i-play' : '#dk-i-pause');
}));

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="dk-i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></symbol>
  <symbol id="dk-i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13M16 5.5v13" stroke-width="3"/></symbol>
  <symbol id="dk-i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6v12l-8.5-6zM6 6v12"/></symbol>
  <symbol id="dk-i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6v12l8.5-6zM18 6v12"/></symbol>
  <symbol id="dk-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
  <symbol id="dk-i-volume" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z"/><path d="M15.5 9a4.5 4.5 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11"/></symbol>
  <symbol id="dk-i-chevl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m15 6-6 6 6 6"/></symbol>
  <symbol id="dk-i-chevr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></symbol>
  <symbol id="dk-i-tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5" stroke-width="3"/></symbol>
  <symbol id="dk-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
  <symbol id="dk-i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3L19.5 9"/><path d="M19.5 4.5V9H15"/></symbol>
</svg>
<div class="cols">
<section><span class="lbl">Audio player</span><article class="card dk-card card-body dk-player" aria-label="Podcast player">
<div class="dk-player__art"><svg viewBox="0 0 120 120" aria-hidden="true" focusable="false" style="display:block;width:100%;height:100%"><rect width="120" height="120" style="fill:var(--accent-soft)"/><circle cx="60" cy="60" r="34" style="fill:none;stroke:var(--accent);stroke-width:2;opacity:.55"/><circle cx="60" cy="60" r="22" style="fill:none;stroke:var(--accent);stroke-width:2;opacity:.8"/><path d="M18 60h14l6-16 8 34 7-26 5 14 4-6h40" style="fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round"/></svg></div><div><p class="dk-player__show mb-0">The On-Call Hour · Ep. 42</p><h3 class="dk-player__title">Debugging in production without waking anyone up</h3></div>
<div class="dk-player__seek"><input class="form-range dk-range" type="range" min="0" max="2830" value="1104" data-fill aria-label="Seek" aria-valuetext="18 minutes 24 seconds of 47 minutes 10 seconds" style="--val:39%"><div class="dk-player__time" aria-hidden="true"><span>18:24</span><span>−28:46</span></div></div>
<div class="dk-player__controls"><button class="btn btn-dk btn-dk-ghost btn-dk-icon dk-speed" type="button" aria-label="Playback speed 1.25 times">1.25×</button><span class="dk-spacer"></span><button class="btn btn-dk btn-dk-ghost btn-dk-icon" type="button" aria-label="Previous episode"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-prev"/></svg></button><button class="btn btn-dk btn-dk-primary btn-dk-icon btn-lg btn-dk-round" type="button" aria-label="Pause" data-play><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-pause"/></svg></button><button class="btn btn-dk btn-dk-ghost btn-dk-icon" type="button" aria-label="Next episode"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-next"/></svg></button><span class="dk-spacer"></span><button class="btn btn-dk btn-dk-ghost btn-dk-icon" type="button" aria-label="Volume"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-volume"/></svg></button></div>
</article></section>
<section><span class="lbl">Chart card · SVG, with the data as a table</span><figure class="card dk-card card-body m-0">
<div class="dk-chart__head"><div><figcaption class="card-subtitle text-body-secondary">Requests per hour · today</figcaption><p class="dk-chart__value">19,800</p></div><ul class="dk-legend"><li><i></i>Today</li><li><i class="dk-legend--dash"></i>Last week</li></ul></div>
<div class="dk-chart__plot"><div class="dk-chart__y" aria-hidden="true"><span>4k</span><span>3k</span><span>2k</span><span>1k</span><span>0</span></div><svg viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true" focusable="false" style="display:block;width:100%;height:180px;overflow:visible"><path d="M0 0.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 45H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 90H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 135H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 179.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0 L560 180 L0 180 Z" style="fill:color-mix(in srgb,var(--accent) 18%,transparent)"/><path d="M0.0 135.0 L80.0 144.0 L160.0 139.5 L240.0 117.0 L320.0 67.5 L400.0 45.0 L480.0 49.5 L560.0 81.0" style="fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0" style="fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke"/></svg></div>
<div class="dk-chart__x" aria-hidden="true"><span>00</span><span>03</span><span>06</span><span>09</span><span>12</span><span>15</span><span>18</span><span>21</span></div><div class="visually-hidden"><table><caption>Requests per hour, today and the same day last week</caption><tr><th scope="col">Hour</th><th scope="col">Today</th><th scope="col">Last week</th></tr><tr><th scope="row">00:00</th><td>1,200</td><td>1,000</td></tr><tr><th scope="row">03:00</th><td>900</td><td>800</td></tr><tr><th scope="row">06:00</th><td>800</td><td>900</td></tr><tr><th scope="row">09:00</th><td>1,600</td><td>1,400</td></tr><tr><th scope="row">12:00</th><td>3,100</td><td>2,500</td></tr><tr><th scope="row">15:00</th><td>3,800</td><td>3,000</td></tr><tr><th scope="row">18:00</th><td>3,400</td><td>2,900</td></tr><tr><th scope="row">21:00</th><td>2,600</td><td>2,200</td></tr></table></div></figure></section></div>
<div class="cols"><section><span class="lbl">Mini calendar</span><div class="card dk-card card-body dk-cal">
<div class="dk-cal__head"><h3 class="m-0" aria-hidden="true">October 2026</h3><div class="dk-cal__nav"><button class="btn btn-dk btn-dk-ghost btn-dk-icon btn-sm" type="button" aria-label="Previous month"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-chevl"/></svg></button><button class="btn btn-dk btn-dk-ghost btn-dk-icon btn-sm" type="button" aria-label="Next month"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-chevr"/></svg></button></div></div>
<table class="table text-center"><caption class="visually-hidden">October 2026</caption><thead><tr><th class="" scope="col"><abbr title="Monday" style="text-decoration:none">Mo</abbr></th><th class="" scope="col"><abbr title="Tuesday" style="text-decoration:none">Tu</abbr></th><th class="" scope="col"><abbr title="Wednesday" style="text-decoration:none">We</abbr></th><th class="" scope="col"><abbr title="Thursday" style="text-decoration:none">Th</abbr></th><th class="" scope="col"><abbr title="Friday" style="text-decoration:none">Fr</abbr></th><th class="" scope="col"><abbr title="Saturday" style="text-decoration:none">Sa</abbr></th><th class="" scope="col"><abbr title="Sunday" style="text-decoration:none">Su</abbr></th></tr></thead><tbody><tr><td class=""><span class="dk-cal__out" aria-hidden="true">28</span></td><td class=""><span class="dk-cal__out" aria-hidden="true">29</span></td><td class=""><span class="dk-cal__out" aria-hidden="true">30</span></td><td class=""><button class="dk-day" type="button" aria-label="1 October" aria-pressed="false">1</button></td><td class=""><button class="dk-day" type="button" aria-label="2 October" aria-pressed="false">2</button></td><td class=""><button class="dk-day" type="button" aria-label="3 October" aria-pressed="false">3</button></td><td class=""><button class="dk-day" type="button" aria-label="4 October" aria-pressed="false">4</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="5 October" aria-pressed="false">5</button></td><td class=""><button class="dk-day" type="button" aria-label="6 October, 1 event" aria-pressed="false" data-events>6</button></td><td class=""><button class="dk-day" type="button" aria-label="7 October" aria-pressed="false">7</button></td><td class=""><button class="dk-day" type="button" aria-label="8 October" aria-pressed="false">8</button></td><td class=""><button class="dk-day" type="button" aria-label="9 October" aria-pressed="false">9</button></td><td class=""><button class="dk-day" type="button" aria-label="10 October" aria-pressed="false">10</button></td><td class=""><button class="dk-day" type="button" aria-label="11 October" aria-pressed="false">11</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="12 October" aria-pressed="false">12</button></td><td class=""><button class="dk-day" type="button" aria-label="13 October" aria-pressed="false">13</button></td><td class=""><button class="dk-day" type="button" aria-label="14 October, 2 events" aria-pressed="false" data-events>14</button></td><td class=""><button class="dk-day" type="button" aria-label="15 October" aria-pressed="false">15</button></td><td class=""><button class="dk-day" type="button" aria-label="16 October, today" aria-current="date" aria-pressed="false">16</button></td><td class=""><button class="dk-day" type="button" aria-label="17 October" aria-pressed="false">17</button></td><td class=""><button class="dk-day" type="button" aria-label="18 October" aria-pressed="false">18</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="19 October" aria-pressed="false">19</button></td><td class=""><button class="dk-day" type="button" aria-label="20 October" aria-pressed="false">20</button></td><td class=""><button class="dk-day" type="button" aria-label="21 October, 2 events" aria-pressed="true" data-events>21</button></td><td class=""><button class="dk-day" type="button" aria-label="22 October" aria-pressed="false">22</button></td><td class=""><button class="dk-day" type="button" aria-label="23 October" aria-pressed="false">23</button></td><td class=""><button class="dk-day" type="button" aria-label="24 October" aria-pressed="false">24</button></td><td class=""><button class="dk-day" type="button" aria-label="25 October" aria-pressed="false">25</button></td></tr><tr><td class=""><button class="dk-day" type="button" aria-label="26 October" aria-pressed="false">26</button></td><td class=""><button class="dk-day" type="button" aria-label="27 October, 1 event" aria-pressed="false" data-events>27</button></td><td class=""><button class="dk-day" type="button" aria-label="28 October" aria-pressed="false">28</button></td><td class=""><button class="dk-day" type="button" aria-label="29 October" aria-pressed="false">29</button></td><td class=""><button class="dk-day" type="button" aria-label="30 October" aria-pressed="false">30</button></td><td class=""><button class="dk-day" type="button" aria-label="31 October" aria-pressed="false">31</button></td><td class=""><span class="dk-cal__out" aria-hidden="true">1</span></td></tr></tbody></table>
<ul class="dk-agenda"><li><time datetime="2026-10-21T09:30">09:30</time><span><b>Incident review</b>INC-2291 · 45 min</span></li><li><time datetime="2026-10-21T14:00">14:00</time><span><b>Release 4.12 go / no-go</b>Platform team · 30 min</span></li></ul></div></section>
<section><span class="lbl">Progress · bars, stacked bar, ring, steps</span><div class="card dk-card card-body"><div class="dk-meters">
<div class="dk-meter"><p><span id="m-57">Build minutes</span><b>3,420 / 6,000</b></p><div class="progress dk-bar" role="progressbar" aria-labelledby="m-57" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="--c:var(--accent)"><div class="progress-bar" style="width:57%"></div></div></div>
<div class="dk-meter"><p><span id="m-82">Bandwidth</span><b>820 / 1,000 GB</b></p><div class="progress dk-bar" role="progressbar" aria-labelledby="m-82" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="--c:var(--warning)"><div class="progress-bar" style="width:82%"></div></div></div>
<div class="dk-meter"><p><span id="m-34">Edge requests</span><b>3.4M / 10M</b></p><div class="progress dk-bar" role="progressbar" aria-labelledby="m-34" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="--c:var(--success)"><div class="progress-bar" style="width:34%"></div></div></div>
<div class="dk-meter"><p><span>Storage · 88 of 100 GB</span><b>88%</b></p><div class="progress-stacked dk-stackbar" role="img" aria-label="Storage: logs 46 GB, build cache 28 GB, images 14 GB, 12 GB free"><div class="progress" style="width:46%;--c:var(--accent)"><div class="progress-bar"></div></div><div class="progress" style="width:28%;--c:var(--success)"><div class="progress-bar"></div></div><div class="progress" style="width:14%;--c:var(--warning)"><div class="progress-bar"></div></div></div><ul class="dk-stacklegend" aria-hidden="true"><li><i style="--c:var(--accent)"></i>Logs 46 GB</li><li><i style="--c:var(--success)"></i>Build cache 28 GB</li><li><i style="--c:var(--warning)"></i>Images 14 GB</li></ul></div></div>
<div class="dk-progress-row"><div class="dk-ring" role="progressbar" aria-label="Sprint completed" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><svg viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle cx="50" cy="50" r="42" style="fill:none;stroke:var(--surface-3);stroke-width:9"/><circle cx="50" cy="50" r="42" pathLength="100" style="fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:72 100"/></svg><span class="dk-ring__label" aria-hidden="true">72%<small class="">sprint</small></span></div><ol class="dk-steps" aria-label="Deployment dpl_7Kq2xT">
<li data-state="done"><span class="dk-steps__mark" aria-hidden="true"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-tick"/></svg></span><span><b>Build<span class="visually-hidden">, done</span></b>1 m 12 s</span></li>
<li data-state="done"><span class="dk-steps__mark" aria-hidden="true"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-tick"/></svg></span><span><b>Test<span class="visually-hidden">, done</span></b>2 m 40 s</span></li>
<li data-state="current" aria-current="step"><span class="dk-steps__mark" aria-hidden="true"></span><span><b>Deploy<span class="visually-hidden"></span></b>Uploading 18 functions</span></li>
<li data-state="todo"><span class="dk-steps__mark" aria-hidden="true"></span><span><b>Verify<span class="visually-hidden"></span></b>Waiting</span></li>
</ol></div></div></section></div>
CSS 
/* ── Dark UI kit tokens (uiCookies) — identical in every set ──────────────────────────────
   Dark first. Elevation is a lighter surface, not a shadow: surface-0 is the page, 1 cards and
   panels, 2 controls, menus and dialogs, 3 hover, selected rows and tooltips.
   Every colour is a light-dark() pair, so flipping color-scheme turns the whole kit light:
   data-theme="dark" | "light" | "system" on any wrapper (system follows prefers-color-scheme),
   or a checked .theme-pick radio inside a [data-theme] element (:has()).
   Contrast, dark | light, on the worst surface (surface-3): text-1 12.2 | 15.0, text-2 6.6 | 7.3,
   text-3 4.8 | 5.4, accent 5.4 | 5.1, success 7.7 | 5.0, warning 8.4 | 5.2, danger 6.8 | 5.0;
   edge (control boundaries) 3.3 | 3.1 and focus 7.9 | 5.9 against every surface. */
:root{color-scheme:dark}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="system"]{color-scheme:light dark}
[data-theme]:has(.theme-pick[value="dark"]:checked){color-scheme:dark}
[data-theme]:has(.theme-pick[value="light"]:checked){color-scheme:light}
[data-theme]:has(.theme-pick[value="system"]:checked){color-scheme:light dark}
:root{
  --surface-0:light-dark(#eef1f5,#0b0d12);   /* page */
  --surface-1:light-dark(#ffffff,#151821);   /* cards, panels, navbar, sidebar */
  --surface-2:light-dark(#f6f7f9,#1d212c);   /* controls, menus, dialogs, toasts */
  --surface-3:light-dark(#e6e9ef,#262b38);   /* hover, selected rows, tooltips */
  --text-1:light-dark(#12151c,#eceef3);      /* primary text */
  --text-2:light-dark(#434a5a,#aab1bf);      /* secondary text */
  --text-3:light-dark(#555d6e,#8f96a8);      /* captions, placeholders, axis labels */
  --border:light-dark(#dde1e8,#2a2f3c);      /* decorative 1px dividers and card edges */
  --edge:light-dark(#7c8496,#737b90);        /* control boundaries: fields, boxes, tracks */
  --accent:light-dark(#4452d0,#8b97ff);      /* the one vivid colour: links, selected, primary */
  --accent-soft:light-dark(#e6e8ff,#232a4d); /* selected backgrounds; accent text keeps 5.2 | 5.3 on it */
  --on-accent:light-dark(#ffffff,#0b0d12);   /* text on accent fills, 6.2 | 7.4 */
  --success:light-dark(#11713f,#5fd4a0);     /* desaturated for dark, so they do not vibrate */
  --warning:light-dark(#875500,#f0c060);
  --danger:light-dark(#bb2532,#ff9790);
  --focus:light-dark(#3b48c4,#b5bdff);       /* 2px focus ring */
  --highlight:light-dark(rgb(255 255 255 / 0),rgb(255 255 255 / .045)); /* 1px top light on dark surfaces */
  --shadow-color:light-dark(rgb(16 24 40 / .16),rgb(0 0 0 / .55));     /* overlays only */
  --radius:12px;--radius-sm:8px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
/* No light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120): the same values, chosen by attribute */
@supports not (color:light-dark(#fff,#000)){
  :root,[data-theme="dark"]{--surface-0:#0b0d12;--surface-1:#151821;--surface-2:#1d212c;--surface-3:#262b38;--text-1:#eceef3;--text-2:#aab1bf;--text-3:#8f96a8;--border:#2a2f3c;--edge:#737b90;--accent:#8b97ff;--accent-soft:#232a4d;--on-accent:#0b0d12;--success:#5fd4a0;--warning:#f0c060;--danger:#ff9790;--focus:#b5bdff;--highlight:rgb(255 255 255 / .045);--shadow-color:rgb(0 0 0 / .55)}
  [data-theme="light"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}
  @media (prefers-color-scheme:light){[data-theme="system"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}}
}
@media (prefers-contrast:more){:root{--border:var(--edge);--text-3:var(--text-2)}}
[data-theme]{background:var(--surface-0);color:var(--text-1)}
/* Bootstrap's own variables mapped onto the kit tokens (identical in every Bootstrap set).
   data-bs-theme="dark" on <html> gives Bootstrap's dark defaults; the tokens then win. */
:root,[data-bs-theme],[data-theme]{
  --bs-body-bg:var(--surface-0);--bs-body-color:var(--text-1);--bs-emphasis-color:var(--text-1);
  --bs-heading-color:var(--text-1);--bs-secondary-color:var(--text-2);--bs-tertiary-color:var(--text-3);
  --bs-secondary-bg:var(--surface-2);--bs-tertiary-bg:var(--surface-3);
  --bs-border-color:var(--border);--bs-border-color-translucent:var(--border);
  --bs-border-radius:var(--radius-sm);--bs-border-radius-lg:var(--radius);--bs-border-radius-sm:6px;
  --bs-link-color:var(--accent);--bs-link-hover-color:var(--accent);
  --bs-focus-ring-color:var(--focus);--bs-code-color:var(--accent);
  --bs-font-monospace:var(--mono);
  --bs-success-text-emphasis:var(--success);--bs-warning-text-emphasis:var(--warning);--bs-danger-text-emphasis:var(--danger)}
/* Bootstrap draws the checkbox tick and select chevron as SVG images, which cannot read CSS
   variables, so each theme gets its own copy */
:root,[data-theme="dark"]{--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab1bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
[data-theme="light"]{--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
@media (prefers-color-scheme:light){[data-theme="system"]{--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}
[data-theme]:has(.theme-pick[value="dark"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab1bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
[data-theme]:has(.theme-pick[value="light"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
@media (prefers-color-scheme:light){[data-theme]:has(.theme-pick[value="system"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}
@media (prefers-color-scheme:dark){[data-theme]:has(.theme-pick[value="system"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab1bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}
a{color:var(--accent)}
a:hover{color:var(--accent)}
/* Components */
.dk-ico{width:18px;height:18px;flex:none}
.dk-kbd{display:inline-grid;place-items:center;min-width:1.45rem;height:1.35rem;padding:0 .35rem;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;background:var(--surface-2);color:var(--text-2);font:500 .72rem/1 var(--mono)}
.dk-link{color:var(--accent);font-weight:600;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
.dk-link:hover{color:var(--accent);text-decoration-color:currentColor}
.dk-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px;box-shadow:none}
/* .card through --bs-card-* */
.card.dk-card{--bs-card-bg:var(--surface-1);--bs-card-color:var(--text-1);--bs-card-border-color:var(--border);--bs-card-border-radius:var(--radius);
  --bs-card-inner-border-radius:calc(var(--radius) - 1px);--bs-card-spacer-x:20px;--bs-card-spacer-y:20px;--bs-card-cap-bg:transparent;--bs-card-title-color:var(--text-1);
  --bs-card-subtitle-color:var(--text-2);box-shadow:inset 0 1px 0 var(--highlight)}
.dk-card h2,.dk-card h3,.dk-card p{margin:0}
.dk-card .card-title{font-size:1rem;font-weight:650;letter-spacing:-.01em;margin:0}
.dk-card .card-subtitle{margin-top:2px;font-size:.85rem}
/* .btn variants through --bs-btn-* */
.btn-dk{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.5rem;--bs-btn-font-size:.875rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.2;--bs-btn-border-radius:var(--radius-sm);
  --bs-btn-bg:var(--surface-2);--bs-btn-color:var(--text-1);--bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--surface-3);--bs-btn-hover-color:var(--text-1);--bs-btn-hover-border-color:var(--border);
  --bs-btn-active-bg:var(--surface-3);--bs-btn-active-color:var(--text-1);--bs-btn-active-border-color:var(--border);
  --bs-btn-disabled-bg:var(--surface-2);--bs-btn-disabled-color:var(--text-1);--bs-btn-disabled-border-color:var(--border);--bs-btn-disabled-opacity:.5;
  --bs-btn-focus-box-shadow:inset 0 1px 0 var(--highlight);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:38px;white-space:nowrap;box-shadow:inset 0 1px 0 var(--highlight)}
.btn-dk:focus-visible,.btn-check:focus-visible+.btn-dk{outline:2px solid var(--focus);outline-offset:2px}
.btn-dk-primary{--bs-btn-bg:var(--accent);--bs-btn-color:var(--on-accent);--bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:color-mix(in srgb,var(--accent) 86%,var(--text-1));--bs-btn-hover-color:var(--on-accent);--bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-bg:color-mix(in srgb,var(--accent) 86%,var(--text-1));--bs-btn-active-color:var(--on-accent);--bs-btn-active-border-color:var(--accent);
  --bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-color:var(--on-accent);--bs-btn-disabled-border-color:var(--accent)}
.btn-dk-ghost{--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-color:var(--text-2);--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;box-shadow:none}
.btn-dk-danger{--bs-btn-color:var(--danger);--bs-btn-border-color:color-mix(in srgb,var(--danger) 40%,var(--border));--bs-btn-hover-color:var(--danger);
  --bs-btn-hover-border-color:color-mix(in srgb,var(--danger) 40%,var(--border));--bs-btn-active-color:var(--danger)}
.btn-dk.btn-sm{--bs-btn-padding-x:.75rem;--bs-btn-padding-y:.35rem;--bs-btn-font-size:.8rem;min-height:32px}
.btn-dk.btn-lg{--bs-btn-padding-x:1.35rem;--bs-btn-padding-y:.7rem;--bs-btn-font-size:.95rem;--bs-btn-border-radius:var(--radius-sm);min-height:46px}
.btn-dk-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:38px}
.btn-dk-icon.btn-sm{width:32px}.btn-dk-icon.btn-lg{width:46px}
.btn-dk.btn-dk-round{--bs-btn-border-radius:999px}
@media (prefers-reduced-motion:reduce){.btn-dk{transition:none}}
/* .form-range recoloured */
.dk-range.form-range{height:22px}
.dk-range.form-range::-webkit-slider-runnable-track{height:6px;border:1px solid var(--edge);border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 var(--val,50%),var(--surface-3) var(--val,50%))}
.dk-range.form-range::-moz-range-track{height:6px;border:1px solid var(--edge);border-radius:999px;background:var(--surface-3)}
.dk-range.form-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
.dk-range.form-range::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px;border:2px solid var(--accent);border-radius:50%;background:var(--text-1);box-shadow:none}
.dk-range.form-range::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--accent);border-radius:50%;background:var(--text-1)}
.dk-range.form-range:focus{box-shadow:none}
.dk-range.form-range:focus::-webkit-slider-thumb{box-shadow:none}
.dk-range.form-range:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.dk-range.form-range::-webkit-slider-thumb{transition:none}}
/* Media player */
.dk-player{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}
.dk-player__art{width:96px;height:96px;overflow:hidden;border:1px solid var(--border);border-radius:10px}
.dk-player__show{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.dk-player__title{margin-top:4px!important;font-size:1rem;font-weight:650;line-height:1.35}
.dk-player__seek{grid-column:1/-1;display:grid;gap:4px}
.dk-player__time{display:flex;justify-content:space-between;font:500 .75rem var(--mono);color:var(--text-3)}
.dk-player__controls{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px}
.dk-player__controls .dk-btn--icon.dk-btn--lg{width:52px;min-height:52px}
.dk-player__controls .dk-spacer{flex:1}
.dk-speed{font:600 .78rem var(--mono)}
/* Chart card */
.dk-chart__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.dk-chart__value{margin-top:4px!important;font-size:1.6rem;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.dk-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;font-size:.78rem;color:var(--text-2)}
.dk-legend li{display:inline-flex;align-items:center;gap:6px}
.dk-legend i{width:14px;height:3px;border-radius:2px;background:var(--accent)}
.dk-legend i.dk-legend--dash{background:repeating-linear-gradient(90deg,var(--text-3) 0 4px,transparent 4px 7px)}
.dk-chart__plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.dk-chart__y{display:flex;flex-direction:column;justify-content:space-between;height:180px;margin:-7px 0;font:500 .7rem var(--mono);color:var(--text-3);text-align:right}
.dk-chart__x{display:flex;justify-content:space-between;margin:8px 0 0 34px;font:500 .7rem var(--mono);color:var(--text-3)}
/* Mini calendar */
.dk-cal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dk-cal__head h3{font-size:.95rem;font-weight:650}
.dk-cal__nav{display:flex;gap:4px}
.dk-cal table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center}
.dk-cal th{padding:4px 0 8px;font-size:.7rem;font-weight:600;color:var(--text-3)}
.dk-cal td{padding:2px}
.dk-cal__out{display:inline-grid;place-items:center;width:34px;height:34px;font-size:.8rem;color:var(--text-3)}
.dk-day{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-1);
  font-family:inherit;font-size:.82rem;font-variant-numeric:tabular-nums;cursor:pointer}
.dk-day:hover{background:var(--surface-3)}
.dk-day:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.dk-day[aria-current="date"]{border-color:var(--accent);color:var(--accent);font-weight:700}
.dk-day[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700}
.dk-day[data-events]::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.dk-agenda{display:grid;gap:8px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--border);list-style:none;font-size:.82rem}
.dk-agenda li{display:grid;grid-template-columns:52px 1fr;gap:10px;color:var(--text-2)}
.dk-agenda time{font:600 .75rem/1.6 var(--mono);color:var(--text-3)}
.dk-agenda b{display:block;font-weight:600;color:var(--text-1)}
/* Progress */
.dk-meters{display:grid;gap:16px}
.dk-meter p{display:flex;justify-content:space-between;gap:8px;margin:0 0 7px!important;font-size:.82rem;color:var(--text-2)}
.dk-meter b{font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums}
.dk-bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.dk-bar>span{display:block;height:100%;border-radius:inherit;background:var(--c,var(--accent))}
.dk-stackbar{display:flex;gap:2px;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.dk-stackbar>span{background:var(--c)}
.dk-stacklegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:9px 0 0;padding:0;list-style:none;font-size:.75rem;color:var(--text-2)}
.dk-stacklegend li{display:inline-flex;align-items:center;gap:6px}
.dk-stacklegend i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.dk-progress-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.dk-ring{position:relative;width:96px;height:96px}
.dk-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.dk-ring__label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:1.15rem;font-weight:700;line-height:1.1}
.dk-ring__label small{font-size:.65rem;font-weight:500;color:var(--text-3)}
.dk-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.dk-steps li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.82rem;color:var(--text-2)}
.dk-steps b{display:block;font-weight:600;color:var(--text-1)}
.dk-steps__mark{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--edge);border-radius:50%;color:var(--on-accent)}
.dk-steps__mark .dk-ico{width:13px;height:13px}
.dk-steps [data-state="done"] .dk-steps__mark{border-color:var(--success);background:var(--success)}
.dk-steps [aria-current="step"] .dk-steps__mark{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dk-steps [aria-current="step"] .dk-steps__mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dk-pulse 1.4s ease-in-out infinite}
@keyframes dk-pulse{50%{transform:scale(.55);opacity:.6}}
@media (prefers-reduced-motion:reduce){.dk-steps [aria-current="step"] .dk-steps__mark::after{animation:none}}
/* Bootstrap .progress recoloured; .table kept for the calendar grid */
.dk-bar.progress{--bs-progress-height:8px;--bs-progress-bg:var(--surface-3);--bs-progress-border-radius:999px;--bs-progress-bar-bg:var(--c,var(--accent))}
.dk-bar .progress-bar{border-radius:999px}
.dk-stackbar.progress-stacked{--bs-progress-height:8px;--bs-progress-bg:var(--surface-3);--bs-progress-border-radius:999px;gap:2px}
.dk-stackbar .progress{--bs-progress-bar-bg:var(--c);--bs-progress-border-radius:0}
.dk-cal .table{--bs-table-bg:transparent;--bs-table-color:var(--text-1);--bs-table-border-color:transparent;margin:0}
.dk-cal .table>:not(caption)>*>*{padding:2px;border:0}
.dk-player__controls .btn-dk-icon.btn-lg{width:52px;min-height:52px}
JavaScript 
// Seek bar fill follows the slider; the play button swaps between Play and Pause.
document.querySelectorAll('input[type=range][data-fill]').forEach(r => {
  const sync = () => r.style.setProperty('--val', (r.value - r.min) / (r.max - r.min) * 100 + '%');
  r.addEventListener('input', sync); sync();
});
document.querySelectorAll('[data-play]').forEach(btn => btn.addEventListener('click', () => {
  const playing = btn.getAttribute('aria-label') === 'Pause';
  btn.setAttribute('aria-label', playing ? 'Play' : 'Pause');
  btn.querySelector('use').setAttribute('href', playing ? '#dk-i-play' : '#dk-i-pause');
}));

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="dk-i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></symbol>
  <symbol id="dk-i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13M16 5.5v13" stroke-width="3"/></symbol>
  <symbol id="dk-i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6v12l-8.5-6zM6 6v12"/></symbol>
  <symbol id="dk-i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6v12l8.5-6zM18 6v12"/></symbol>
  <symbol id="dk-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
  <symbol id="dk-i-volume" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z"/><path d="M15.5 9a4.5 4.5 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11"/></symbol>
  <symbol id="dk-i-chevl" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m15 6-6 6 6 6"/></symbol>
  <symbol id="dk-i-chevr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></symbol>
  <symbol id="dk-i-tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5" stroke-width="3"/></symbol>
  <symbol id="dk-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
  <symbol id="dk-i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3L19.5 9"/><path d="M19.5 4.5V9H15"/></symbol>
</svg>
<div class="grid items-start gap-7 md:grid-cols-2">
<section><span class="mb-3.5 block text-[.72rem] font-semibold tracking-[.12em] text-ink-3 uppercase">Audio player</span><article class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5 grid grid-cols-[96px_minmax(0,1fr)] items-center gap-[18px]" aria-label="Podcast player">
<div class="size-24 overflow-hidden rounded-[10px] border border-line"><svg viewBox="0 0 120 120" aria-hidden="true" focusable="false" style="display:block;width:100%;height:100%"><rect width="120" height="120" style="fill:var(--accent-soft)"/><circle cx="60" cy="60" r="34" style="fill:none;stroke:var(--accent);stroke-width:2;opacity:.55"/><circle cx="60" cy="60" r="22" style="fill:none;stroke:var(--accent);stroke-width:2;opacity:.8"/><path d="M18 60h14l6-16 8 34 7-26 5 14 4-6h40" style="fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round"/></svg></div><div><p class="text-[.75rem] font-semibold tracking-[.06em] text-accent uppercase">The On-Call Hour · Ep. 42</p><h3 class="mt-1 text-base leading-[1.35] font-[650]">Debugging in production without waking anyone up</h3></div>
<div class="col-span-full grid gap-1"><input class="range-dk w-full focus-visible:rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus focus-visible:outline-offset-3" type="range" min="0" max="2830" value="1104" data-fill aria-label="Seek" aria-valuetext="18 minutes 24 seconds of 47 minutes 10 seconds" style="--val:39%"><div class="flex justify-between font-mono text-[.75rem] font-medium text-ink-3" aria-hidden="true"><span>18:24</span><span>−28:46</span></div></div>
<div class="col-span-full flex items-center justify-center gap-2.5"><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-transparent bg-transparent text-ink-2 hover:bg-surface-3 hover:text-ink-1 size-[38px] p-0 font-mono text-[.78rem]" type="button" aria-label="Playback speed 1.25 times">1.25×</button><span class="flex-1"></span><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-transparent bg-transparent text-ink-2 hover:bg-surface-3 hover:text-ink-1 size-[38px] p-0" type="button" aria-label="Previous episode"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-prev"/></svg></button><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-accent bg-accent text-on-accent inset-shadow-hl hover:bg-[color-mix(in_srgb,var(--accent)_86%,var(--text-1))] size-[38px] p-0 size-[52px]!" type="button" aria-label="Pause" data-play><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-pause"/></svg></button><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-transparent bg-transparent text-ink-2 hover:bg-surface-3 hover:text-ink-1 size-[38px] p-0" type="button" aria-label="Next episode"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-next"/></svg></button><span class="flex-1"></span><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-transparent bg-transparent text-ink-2 hover:bg-surface-3 hover:text-ink-1 size-[38px] p-0" type="button" aria-label="Volume"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-volume"/></svg></button></div>
</article></section>
<section><span class="mb-3.5 block text-[.72rem] font-semibold tracking-[.12em] text-ink-3 uppercase">Chart card · SVG, with the data as a table</span><figure class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5">
<div class="mb-[18px] flex flex-wrap items-end justify-between gap-3"><div><figcaption class="text-[.85rem] text-ink-2">Requests per hour · today</figcaption><p class="mt-1 text-[1.6rem] leading-[1.1] font-[650] tracking-[-.02em]">19,800</p></div><ul class="flex flex-wrap gap-3.5 text-[.78rem] text-ink-2"><li class="inline-flex items-center gap-1.5"><i class="h-[3px] w-3.5 rounded-sm bg-accent"></i>Today</li><li class="inline-flex items-center gap-1.5"><i class="h-[3px] w-3.5 rounded-sm bg-[repeating-linear-gradient(90deg,var(--text-3)_0_4px,transparent_4px_7px)]"></i>Last week</li></ul></div>
<div class="grid grid-cols-[auto_minmax(0,1fr)] gap-2.5"><div class="-my-[7px] flex h-[180px] flex-col justify-between text-right font-mono text-[.7rem] font-medium text-ink-3" aria-hidden="true"><span>4k</span><span>3k</span><span>2k</span><span>1k</span><span>0</span></div><svg viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true" focusable="false" style="display:block;width:100%;height:180px;overflow:visible"><path d="M0 0.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 45H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 90H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 135H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 179.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0 L560 180 L0 180 Z" style="fill:color-mix(in srgb,var(--accent) 18%,transparent)"/><path d="M0.0 135.0 L80.0 144.0 L160.0 139.5 L240.0 117.0 L320.0 67.5 L400.0 45.0 L480.0 49.5 L560.0 81.0" style="fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0" style="fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke"/></svg></div>
<div class="mt-2 ml-[34px] flex justify-between font-mono text-[.7rem] font-medium text-ink-3" aria-hidden="true"><span>00</span><span>03</span><span>06</span><span>09</span><span>12</span><span>15</span><span>18</span><span>21</span></div><div class="sr-only"><table><caption>Requests per hour, today and the same day last week</caption><tr><th scope="col">Hour</th><th scope="col">Today</th><th scope="col">Last week</th></tr><tr><th scope="row">00:00</th><td>1,200</td><td>1,000</td></tr><tr><th scope="row">03:00</th><td>900</td><td>800</td></tr><tr><th scope="row">06:00</th><td>800</td><td>900</td></tr><tr><th scope="row">09:00</th><td>1,600</td><td>1,400</td></tr><tr><th scope="row">12:00</th><td>3,100</td><td>2,500</td></tr><tr><th scope="row">15:00</th><td>3,800</td><td>3,000</td></tr><tr><th scope="row">18:00</th><td>3,400</td><td>2,900</td></tr><tr><th scope="row">21:00</th><td>2,600</td><td>2,200</td></tr></table></div></figure></section></div>
<div class="grid items-start gap-7 md:grid-cols-2"><section><span class="mb-3.5 block text-[.72rem] font-semibold tracking-[.12em] text-ink-3 uppercase">Mini calendar</span><div class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5">
<div class="mb-2.5 flex items-center justify-between gap-2"><h3 class="text-[.95rem] font-[650]" aria-hidden="true">October 2026</h3><div class="flex gap-1"><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-transparent bg-transparent text-ink-2 hover:bg-surface-3 hover:text-ink-1 size-8 p-0" type="button" aria-label="Previous month"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-chevl"/></svg></button><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-transparent bg-transparent text-ink-2 hover:bg-surface-3 hover:text-ink-1 size-8 p-0" type="button" aria-label="Next month"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-chevr"/></svg></button></div></div>
<table class="w-full table-fixed border-collapse text-center"><caption class="sr-only">October 2026</caption><thead><tr><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Monday" style="text-decoration:none">Mo</abbr></th><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Tuesday" style="text-decoration:none">Tu</abbr></th><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Wednesday" style="text-decoration:none">We</abbr></th><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Thursday" style="text-decoration:none">Th</abbr></th><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Friday" style="text-decoration:none">Fr</abbr></th><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Saturday" style="text-decoration:none">Sa</abbr></th><th class="pt-1 pb-2 text-[.7rem] font-semibold text-ink-3" scope="col"><abbr title="Sunday" style="text-decoration:none">Su</abbr></th></tr></thead><tbody><tr><td class="p-0.5"><span class="inline-grid size-[34px] place-items-center text-[.8rem] text-ink-3" aria-hidden="true">28</span></td><td class="p-0.5"><span class="inline-grid size-[34px] place-items-center text-[.8rem] text-ink-3" aria-hidden="true">29</span></td><td class="p-0.5"><span class="inline-grid size-[34px] place-items-center text-[.8rem] text-ink-3" aria-hidden="true">30</span></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="1 October" aria-pressed="false">1</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="2 October" aria-pressed="false">2</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="3 October" aria-pressed="false">3</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="4 October" aria-pressed="false">4</button></td></tr><tr><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="5 October" aria-pressed="false">5</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="6 October, 1 event" aria-pressed="false" data-events>6</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="7 October" aria-pressed="false">7</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="8 October" aria-pressed="false">8</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="9 October" aria-pressed="false">9</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="10 October" aria-pressed="false">10</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="11 October" aria-pressed="false">11</button></td></tr><tr><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="12 October" aria-pressed="false">12</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="13 October" aria-pressed="false">13</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="14 October, 2 events" aria-pressed="false" data-events>14</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="15 October" aria-pressed="false">15</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="16 October, today" aria-current="date" aria-pressed="false">16</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="17 October" aria-pressed="false">17</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="18 October" aria-pressed="false">18</button></td></tr><tr><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="19 October" aria-pressed="false">19</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="20 October" aria-pressed="false">20</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="21 October, 2 events" aria-pressed="true" data-events>21</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="22 October" aria-pressed="false">22</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="23 October" aria-pressed="false">23</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="24 October" aria-pressed="false">24</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="25 October" aria-pressed="false">25</button></td></tr><tr><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="26 October" aria-pressed="false">26</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="27 October, 1 event" aria-pressed="false" data-events>27</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="28 October" aria-pressed="false">28</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="29 October" aria-pressed="false">29</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="30 October" aria-pressed="false">30</button></td><td class="p-0.5"><button class="relative inline-grid size-[34px] cursor-pointer place-items-center rounded-ui-sm border border-transparent text-[.82rem] text-ink-1 tabular-nums hover:bg-surface-3 aria-[current=date]:border-accent aria-[current=date]:font-bold aria-[current=date]:text-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:font-bold aria-pressed:text-on-accent aria-pressed:hover:bg-accent data-events:after:absolute data-events:after:bottom-1 data-events:after:left-1/2 data-events:after:-ml-0.5 data-events:after:size-1 data-events:after:rounded-full data-events:after:bg-current data-events:after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus" type="button" aria-label="31 October" aria-pressed="false">31</button></td><td class="p-0.5"><span class="inline-grid size-[34px] place-items-center text-[.8rem] text-ink-3" aria-hidden="true">1</span></td></tr></tbody></table>
<ul class="mt-3.5 grid gap-2 border-t border-line pt-3.5 text-[.82rem]"><li class="grid grid-cols-[52px_1fr] gap-2.5 text-ink-2"><time class="font-mono text-[.75rem] leading-[1.6] font-semibold text-ink-3" datetime="2026-10-21T09:30">09:30</time><span><b class="block font-semibold text-ink-1">Incident review</b>INC-2291 · 45 min</span></li><li class="grid grid-cols-[52px_1fr] gap-2.5 text-ink-2"><time class="font-mono text-[.75rem] leading-[1.6] font-semibold text-ink-3" datetime="2026-10-21T14:00">14:00</time><span><b class="block font-semibold text-ink-1">Release 4.12 go / no-go</b>Platform team · 30 min</span></li></ul></div></section>
<section><span class="mb-3.5 block text-[.72rem] font-semibold tracking-[.12em] text-ink-3 uppercase">Progress · bars, stacked bar, ring, steps</span><div class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5"><div class="grid gap-4">
<div><p class="mb-[7px] flex justify-between gap-2 text-[.82rem] text-ink-2"><span id="m-57">Build minutes</span><b class="font-semibold text-ink-1 tabular-nums">3,420 / 6,000</b></p><div class="h-2 overflow-hidden rounded-full bg-surface-3 shadow-[inset_0_0_0_1px_var(--border)]" role="progressbar" aria-labelledby="m-57" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"><span class="block h-full rounded-full bg-accent" style="width:57%"></span></div></div>
<div><p class="mb-[7px] flex justify-between gap-2 text-[.82rem] text-ink-2"><span id="m-82">Bandwidth</span><b class="font-semibold text-ink-1 tabular-nums">820 / 1,000 GB</b></p><div class="h-2 overflow-hidden rounded-full bg-surface-3 shadow-[inset_0_0_0_1px_var(--border)]" role="progressbar" aria-labelledby="m-82" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"><span class="block h-full rounded-full bg-warning" style="width:82%"></span></div></div>
<div><p class="mb-[7px] flex justify-between gap-2 text-[.82rem] text-ink-2"><span id="m-34">Edge requests</span><b class="font-semibold text-ink-1 tabular-nums">3.4M / 10M</b></p><div class="h-2 overflow-hidden rounded-full bg-surface-3 shadow-[inset_0_0_0_1px_var(--border)]" role="progressbar" aria-labelledby="m-34" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"><span class="block h-full rounded-full bg-success" style="width:34%"></span></div></div>
<div><p class="mb-[7px] flex justify-between gap-2 text-[.82rem] text-ink-2"><span>Storage · 88 of 100 GB</span><b class="font-semibold text-ink-1 tabular-nums">88%</b></p><div class="flex h-2 gap-0.5 overflow-hidden rounded-full bg-surface-3" role="img" aria-label="Storage: logs 46 GB, build cache 28 GB, images 14 GB, 12 GB free"><span class="bg-(--c)" style="width:46%;--c:var(--accent)"></span><span class="bg-(--c)" style="width:28%;--c:var(--success)"></span><span class="bg-(--c)" style="width:14%;--c:var(--warning)"></span></div><ul class="mt-[9px] flex flex-wrap gap-x-3.5 gap-y-1.5 text-[.75rem] text-ink-2" aria-hidden="true"><li class="inline-flex items-center gap-1.5"><i class="size-2 rounded-[2px] bg-(--c)" style="--c:var(--accent)"></i>Logs 46 GB</li><li class="inline-flex items-center gap-1.5"><i class="size-2 rounded-[2px] bg-(--c)" style="--c:var(--success)"></i>Build cache 28 GB</li><li class="inline-flex items-center gap-1.5"><i class="size-2 rounded-[2px] bg-(--c)" style="--c:var(--warning)"></i>Images 14 GB</li></ul></div></div>
<div class="mt-5 grid grid-cols-[auto_minmax(0,1fr)] items-center gap-[22px] border-t border-line pt-5"><div class="relative size-24" role="progressbar" aria-label="Sprint completed" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><svg class="block size-full -rotate-90" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle cx="50" cy="50" r="42" style="fill:none;stroke:var(--surface-3);stroke-width:9"/><circle cx="50" cy="50" r="42" pathLength="100" style="fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:72 100"/></svg><span class="absolute inset-0 grid place-content-center text-center text-[1.15rem] leading-[1.1] font-bold" aria-hidden="true">72%<small class="block text-[.65rem] font-medium text-ink-3">sprint</small></span></div><ol class="grid gap-3" aria-label="Deployment dpl_7Kq2xT">
<li class="grid grid-cols-[22px_1fr] items-start gap-2.5 text-[.82rem] text-ink-2" data-state="done"><span class="grid size-[22px] place-items-center rounded-full border-[1.5px] border-success bg-success text-on-accent" aria-hidden="true"><svg class="size-[13px]" aria-hidden="true" focusable="false"><use href="#dk-i-tick"/></svg></span><span><b class="block font-semibold text-ink-1">Build<span class="sr-only">, done</span></b>1 m 12 s</span></li>
<li class="grid grid-cols-[22px_1fr] items-start gap-2.5 text-[.82rem] text-ink-2" data-state="done"><span class="grid size-[22px] place-items-center rounded-full border-[1.5px] border-success bg-success text-on-accent" aria-hidden="true"><svg class="size-[13px]" aria-hidden="true" focusable="false"><use href="#dk-i-tick"/></svg></span><span><b class="block font-semibold text-ink-1">Test<span class="sr-only">, done</span></b>2 m 40 s</span></li>
<li class="grid grid-cols-[22px_1fr] items-start gap-2.5 text-[.82rem] text-ink-2" data-state="current" aria-current="step"><span class="grid size-[22px] place-items-center rounded-full border-[1.5px] border-accent shadow-[0_0_0_3px_var(--accent-soft)]" aria-hidden="true"><span class="size-2 rounded-full bg-accent animate-pulse-dot motion-reduce:animate-none"></span></span><span><b class="block font-semibold text-ink-1">Deploy<span class="sr-only"></span></b>Uploading 18 functions</span></li>
<li class="grid grid-cols-[22px_1fr] items-start gap-2.5 text-[.82rem] text-ink-2" data-state="todo"><span class="grid size-[22px] place-items-center rounded-full border-[1.5px] border-edge" aria-hidden="true"></span><span><b class="block font-semibold text-ink-1">Verify<span class="sr-only"></span></b>Waiting</span></li>
</ol></div></div></section></div>
CSS 
/* ── Dark UI kit tokens (uiCookies) — identical in every set ──────────────────────────────
   Dark first. Elevation is a lighter surface, not a shadow: surface-0 is the page, 1 cards and
   panels, 2 controls, menus and dialogs, 3 hover, selected rows and tooltips.
   Every colour is a light-dark() pair, so flipping color-scheme turns the whole kit light:
   data-theme="dark" | "light" | "system" on any wrapper (system follows prefers-color-scheme),
   or a checked .theme-pick radio inside a [data-theme] element (:has()).
   Contrast, dark | light, on the worst surface (surface-3): text-1 12.2 | 15.0, text-2 6.6 | 7.3,
   text-3 4.8 | 5.4, accent 5.4 | 5.1, success 7.7 | 5.0, warning 8.4 | 5.2, danger 6.8 | 5.0;
   edge (control boundaries) 3.3 | 3.1 and focus 7.9 | 5.9 against every surface. */
:root{color-scheme:dark}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="system"]{color-scheme:light dark}
[data-theme]:has(.theme-pick[value="dark"]:checked){color-scheme:dark}
[data-theme]:has(.theme-pick[value="light"]:checked){color-scheme:light}
[data-theme]:has(.theme-pick[value="system"]:checked){color-scheme:light dark}
:root{
  --surface-0:light-dark(#eef1f5,#0b0d12);   /* page */
  --surface-1:light-dark(#ffffff,#151821);   /* cards, panels, navbar, sidebar */
  --surface-2:light-dark(#f6f7f9,#1d212c);   /* controls, menus, dialogs, toasts */
  --surface-3:light-dark(#e6e9ef,#262b38);   /* hover, selected rows, tooltips */
  --text-1:light-dark(#12151c,#eceef3);      /* primary text */
  --text-2:light-dark(#434a5a,#aab1bf);      /* secondary text */
  --text-3:light-dark(#555d6e,#8f96a8);      /* captions, placeholders, axis labels */
  --border:light-dark(#dde1e8,#2a2f3c);      /* decorative 1px dividers and card edges */
  --edge:light-dark(#7c8496,#737b90);        /* control boundaries: fields, boxes, tracks */
  --accent:light-dark(#4452d0,#8b97ff);      /* the one vivid colour: links, selected, primary */
  --accent-soft:light-dark(#e6e8ff,#232a4d); /* selected backgrounds; accent text keeps 5.2 | 5.3 on it */
  --on-accent:light-dark(#ffffff,#0b0d12);   /* text on accent fills, 6.2 | 7.4 */
  --success:light-dark(#11713f,#5fd4a0);     /* desaturated for dark, so they do not vibrate */
  --warning:light-dark(#875500,#f0c060);
  --danger:light-dark(#bb2532,#ff9790);
  --focus:light-dark(#3b48c4,#b5bdff);       /* 2px focus ring */
  --highlight:light-dark(rgb(255 255 255 / 0),rgb(255 255 255 / .045)); /* 1px top light on dark surfaces */
  --shadow-color:light-dark(rgb(16 24 40 / .16),rgb(0 0 0 / .55));     /* overlays only */
  --radius:12px;--radius-sm:8px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
/* No light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120): the same values, chosen by attribute */
@supports not (color:light-dark(#fff,#000)){
  :root,[data-theme="dark"]{--surface-0:#0b0d12;--surface-1:#151821;--surface-2:#1d212c;--surface-3:#262b38;--text-1:#eceef3;--text-2:#aab1bf;--text-3:#8f96a8;--border:#2a2f3c;--edge:#737b90;--accent:#8b97ff;--accent-soft:#232a4d;--on-accent:#0b0d12;--success:#5fd4a0;--warning:#f0c060;--danger:#ff9790;--focus:#b5bdff;--highlight:rgb(255 255 255 / .045);--shadow-color:rgb(0 0 0 / .55)}
  [data-theme="light"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}
  @media (prefers-color-scheme:light){[data-theme="system"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}}
}
@media (prefers-contrast:more){:root{--border:var(--edge);--text-3:var(--text-2)}}
[data-theme]{background:var(--surface-0);color:var(--text-1)}
/* The tokens above as Tailwind utilities: bg-surface-0…3, text-ink-1…3, border-line, border-edge,
   bg-accent, bg-accent-soft, text-on-accent, text-success|warning|danger, outline-focus, rounded-ui… */
@theme inline {
  --color-surface-0: var(--surface-0); --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3);
  --color-ink-1: var(--text-1); --color-ink-2: var(--text-2); --color-ink-3: var(--text-3);
  --color-line: var(--border); --color-edge: var(--edge);
  --color-accent: var(--accent); --color-accent-soft: var(--accent-soft); --color-on-accent: var(--on-accent);
  --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger);
  --color-focus: var(--focus); --color-highlight: var(--highlight);
  --radius-ui: var(--radius); --radius-ui-sm: var(--radius-sm);
  --font-mono: var(--mono);
  --shadow-overlay: 0 18px 48px -12px var(--shadow-color);
  --inset-shadow-hl: inset 0 1px 0 var(--highlight);
}
/* Seek bar track and thumb, and the pulsing current step */
@utility range-dk {
  height: 22px; margin: 0; background: transparent; appearance: none; cursor: pointer;
  &::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; border: 1px solid var(--edge); background: linear-gradient(90deg, var(--accent) 0 var(--val, 50%), var(--surface-3) var(--val, 50%)); }
  &::-moz-range-track { height: 6px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface-3); }
  &::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
  &::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid var(--accent); border-radius: 50%; background: var(--text-1); }
  &::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 50%; background: var(--text-1); }
}
@theme { --animate-pulse-dot: dk-pulse 1.4s ease-in-out infinite; }
@keyframes dk-pulse { 50% { transform: scale(.55); opacity: .6; } }
JavaScript 
// Seek bar fill follows the slider; the play button swaps between Play and Pause.
document.querySelectorAll('input[type=range][data-fill]').forEach(r => {
  const sync = () => r.style.setProperty('--val', (r.value - r.min) / (r.max - r.min) * 100 + '%');
  r.addEventListener('input', sync); sync();
});
document.querySelectorAll('[data-play]').forEach(btn => btn.addEventListener('click', () => {
  const playing = btn.getAttribute('aria-label') === 'Pause';
  btn.setAttribute('aria-label', playing ? 'Play' : 'Pause');
  btn.querySelector('use').setAttribute('href', playing ? '#dk-i-play' : '#dk-i-pause');
}));

About this set

Media and data widgets for the uiCookies dark UI kit. The audio player has token-coloured cover art, a show line and episode title, a seek slider whose accent fill follows the thumb and whose value is spoken as minutes and seconds, a playback speed button and previous, play or pause and next controls. The chart card draws requests per hour as an SVG area chart with a dashed line for last week, HTML axis labels that stay readable at any width, a legend and the same numbers as a visually hidden data table. The mini calendar is a real table for October 2026 with the current day marked by aria-current, a selected day, event dots that are also in each button’s label, and a short agenda. The progress card has three labelled meters, a stacked storage bar with a legend, a progress ring and a four-step deployment tracker with the current step marked. The chart, ring and sparkline colours all come from the tokens, so the widgets switch to the light theme without new markup. A few lines of JavaScript keep the seek fill in step and swap the play and pause label.

What’s included

  • Audio player with an accessible seek slider
  • SVG area chart with a data table alternative
  • Mini calendar built on a table
  • Linear, stacked and ring progress indicators
  • Step tracker with aria-current="step"

Accessibility

The seek slider has aria-valuetext in minutes and seconds, the chart repeats its data in a visually hidden table, the calendar is a table with a caption and full weekday names, and each day button says its date, event count and whether it is today. Meters use role="progressbar" with labels, the step list marks the current step with aria-current="step" and says which steps are done, and the pulsing step marker stops under prefers-reduced-motion.

Customise it

Change --accent for the chart, seek bar and ring, and --success and --warning for the meters. In Bootstrap the bars are .progress and .progress-stacked recoloured through --bs-progress-*; in Tailwind edit bg-accent, bg-surface-3 and the range-dk utility.