Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 7.5-4.5 4.5 4.5 4.5M15.5 7.5l4.5 4.5-4.5 4.5"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4.3l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 5.5A1.5 1.5 0 0 1 6 4h13.5v14H6a1.5 1.5 0 0 0-1.5 1.5z"/><path d="M4.5 19.5A1.5 1.5 0 0 0 6 21h13.5v-3"/></symbol>
  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16.5" height="11" rx="2"/><circle cx="16" cy="13.5" r="1.2"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" 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="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
</svg>
<div><span class="lbl">Glow accent with environment status</span>
<div class="app">
  <nav class="dk dk-glow" aria-label="Nightjar">
    <a class="dk-brand" href="#"><span class="dk-logo" aria-hidden="true">N</span>Nightjar</a>
    <ul>
      <li><a class="dk-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-bell"/></svg><span>Incidents</span><span class="dk-count">2<span class="sr-only"> open</span></span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-layers"/></svg><span>Services</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-send"/></svg><span>Deployments</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-code"/></svg><span>Logs</span></a></li>
    </ul>
    <p class="dk-heading">Environments</p>
    <ul>
      <li><a class="dk-link" href="#"><span class="dk-dot" style="background:#22c55e" aria-hidden="true"></span><span>Production</span><span class="dk-state">Healthy</span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-dot" style="background:#f59e0b" aria-hidden="true"></span><span>Staging</span><span class="dk-state">Degraded</span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-dot" style="background:#94a3b8" aria-hidden="true"></span><span>Preview</span><span class="dk-state">Idle</span></a></li>
    </ul>
    <button class="dk-cta" type="button"><svg aria-hidden="true"><use href="#i-plus"/></svg>New deployment</button>
  </nav>
  <div class="pg dark" style="--pg-bar:#0e7490">
    <div class="pg-head"><div><p class="pg-kicker">Nightjar · production</p><h2 class="pg-title">Overview</h2></div><span class="pg-chip">Uptime 99.98%</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Requests / min</span><b>18.4k</b><em>+3.2%</em></div><div class="pg-tile"><span>p95 latency</span><b>212 ms</b></div><div class="pg-tile"><span>Error rate</span><b>0.08%</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:62%"></i><i style="height:58%"></i><i style="height:70%"></i><i style="height:66%"></i><i style="height:74%"></i><i style="height:60%"></i><i style="height:78%"></i><i style="height:72%"></i><i style="height:68%"></i><i style="height:82%"></i><i style="height:76%"></i><i style="height:80%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Dual sidebar: app rail and a project panel</span>
<div class="app app-dual">
  <nav class="dk dk-rail" aria-label="Apps">
    <span class="dk-logo" aria-hidden="true">K</span>
    <ul>
      <li><a class="dk-rail-link" href="#" aria-label="Inbox"><svg aria-hidden="true"><use href="#i-inbox"/></svg></a></li>
      <li><a class="dk-rail-link" href="#" aria-current="page" aria-label="Projects"><svg aria-hidden="true"><use href="#i-folder"/></svg></a></li>
      <li><a class="dk-rail-link" href="#" aria-label="Calendar"><svg aria-hidden="true"><use href="#i-calendar"/></svg></a></li>
      <li><a class="dk-rail-link" href="#" aria-label="Docs"><svg aria-hidden="true"><use href="#i-book"/></svg></a></li>
    </ul>
    <a class="dk-me" href="#" aria-label="Your profile: Sam Reyes">SR</a>
  </nav>
  <nav class="dk dk-panel" aria-label="Projects">
    <div class="dk-panel-head"><h2>Projects</h2><button class="dk-icon-btn" type="button" aria-label="New project"><svg aria-hidden="true"><use href="#i-plus"/></svg></button></div>
    <ul>
      <li><a class="dk-link" href="#" aria-current="page"><span class="dk-square" style="background:#a78bfa" aria-hidden="true"></span><span>Website relaunch</span><span class="dk-num">14<span class="sr-only"> open issues</span></span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-square" style="background:#38bdf8" aria-hidden="true"></span><span>iOS app 4.0</span><span class="dk-num">9<span class="sr-only"> open issues</span></span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-square" style="background:#f472b6" aria-hidden="true"></span><span>Pricing experiment</span><span class="dk-num">3<span class="sr-only"> open issues</span></span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-square" style="background:#34d399" aria-hidden="true"></span><span>Help centre</span><span class="dk-num">21<span class="sr-only"> open issues</span></span></a></li>
    </ul>
    <p class="dk-heading">Teams</p>
    <ul>
      <li><a class="dk-link" href="#"><span class="dk-avatar" style="background:#7c3aed" aria-hidden="true">D</span><span>Design</span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-avatar" style="background:#0369a1" aria-hidden="true">E</span><span>Engineering</span></a></li>
      <li><a class="dk-link" href="#"><span class="dk-avatar" style="background:#b45309" aria-hidden="true">G</span><span>Growth</span></a></li>
    </ul>
  </nav>
  <div class="pg dark" style="--pg-bar:#6d28d9">
    <div class="pg-head"><div><p class="pg-kicker">Projects · Website relaunch</p><h2 class="pg-title">Sprint 14</h2></div><span class="pg-chip">6 days left</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Open issues</span><b>14</b></div><div class="pg-tile"><span>In review</span><b>5</b></div><div class="pg-tile"><span>Shipped</span><b>27</b><em>+9 this sprint</em></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:40%"></i><i style="height:52%"></i><i style="height:46%"></i><i style="height:60%"></i><i style="height:58%"></i><i style="height:70%"></i><i style="height:64%"></i><i style="height:76%"></i><i style="height:68%"></i><i style="height:80%"></i><i style="height:72%"></i><i style="height:86%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Floating dark panel on a light page</span>
<div class="app app-float">
  <nav class="dk dk-float" aria-label="Loop">
    <a class="dk-brand" href="#"><span class="dk-logo" aria-hidden="true">L</span>Loop</a>
    <ul>
      <li><a class="dk-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Dashboard</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-card"/></svg><span>Payments</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span>Customers</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Payouts</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span>Reports</span></a></li>
    </ul>
    <ul class="dk-foot">
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li><a class="dk-link" href="#"><svg aria-hidden="true"><use href="#i-help"/></svg><span>Help</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#bef264">
    <div class="pg-head"><div><p class="pg-kicker">Loop payments · today</p><h2 class="pg-title">Dashboard</h2></div><span class="pg-chip">EUR</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Gross volume</span><b>€84,310</b><em>+11.8%</em></div><div class="pg-tile"><span>Payments</span><b>1,962</b></div><div class="pg-tile"><span>Next payout</span><b>€12,450</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:44%"></i><i style="height:58%"></i><i style="height:52%"></i><i style="height:66%"></i><i style="height:60%"></i><i style="height:74%"></i><i style="height:68%"></i><i style="height:62%"></i><i style="height:80%"></i><i style="height:72%"></i><i style="height:86%"></i><i style="height:78%"></i></div>
  </div>
</div></div>
CSS 
/* App shell for dark UIs */
.app{display:flex;height:540px;background:#0d1117;border:1px solid #232b38;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dk ul{list-style:none;margin:0;padding:0}

/* 1. Glow accent */
.dk-glow{--dk-accent:#38bdf8;--dk-ink:#aab4c5;--dk-strong:#f1f5f9;--dk-muted:#8a94a6;--dk-line:#1c2330;
  flex:0 0 248px;display:flex;flex-direction:column;padding:18px 14px;background:#0b0e14;border-right:1px solid var(--dk-line);overflow-y:auto;font-size:.875rem;
  background-image:radial-gradient(120% 40% at 0% 0%,rgba(56,189,248,.10),transparent 60%)}
.dk-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;border-radius:8px;color:var(--dk-strong);font-weight:700;font-size:1rem;text-decoration:none}
.dk-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#38bdf8,#6366f1);color:#04111d;font-size:.85rem;font-weight:800}
.dk-heading{margin:18px 0 6px;padding:0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dk-muted)}
.dk-glow ul{display:flex;flex-direction:column;gap:2px}
.dk-link{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:var(--dk-ink);font-weight:500;text-decoration:none;
  transition:background-color .15s,color .15s}
.dk-link svg{width:18px;height:18px;flex:none}
.dk-link:hover{background:rgba(255,255,255,.05);color:var(--dk-strong)}
.dk-glow .dk-link[aria-current="page"]{background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03));color:#e0f2fe;font-weight:600}
.dk-glow .dk-link[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;
  background:var(--dk-accent);box-shadow:0 0 12px 2px rgba(56,189,248,.7)}
.dk-glow .dk-link[aria-current="page"] svg{color:var(--dk-accent)}
.dk-count{margin-left:auto;padding:0 7px;border-radius:999px;background:rgba(248,113,113,.16);color:#fca5a5;font-size:.7rem;font-weight:700;line-height:1.6}
.dk-dot{width:8px;height:8px;margin:0 5px;border-radius:50%;flex:none}
.dk-state{margin-left:auto;font-size:.72rem;color:var(--dk-muted)}
.dk-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:9px 12px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);color:#04111d;font:inherit;font-weight:700;cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(56,189,248,.8);transition:filter .15s}
.dk-cta:hover{filter:brightness(1.08)}
.dk-cta svg{width:16px;height:16px}
.dk :is(a,button):focus-visible{outline:2px solid var(--dk-accent,#38bdf8);outline-offset:2px}

/* 2. Dual sidebar */
.dk-rail{--dk-accent:#a78bfa;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;background:#07090d;border-right:1px solid #161b24}
.dk-rail .dk-logo{margin-bottom:10px;background:linear-gradient(135deg,#a78bfa,#6d28d9);color:#fff;border-radius:10px;width:34px;height:34px}
.dk-rail ul{display:flex;flex-direction:column;gap:6px}
.dk-rail-link{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#8a94a6;transition:background-color .15s,color .15s}
.dk-rail-link svg{width:20px;height:20px}
.dk-rail-link:hover{background:rgba(255,255,255,.06);color:#f1f5f9}
.dk-rail-link[aria-current="page"]{background:rgba(167,139,250,.18);color:#c4b5fd}
.dk-rail-link[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--dk-accent)}
.dk-rail .dk-me{margin-top:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f59e0b;color:#1c1204;font-size:.72rem;font-weight:800;text-decoration:none}
.dk-panel{--dk-accent:#a78bfa;--dk-ink:#aab4c5;--dk-strong:#f1f5f9;--dk-muted:#8a94a6;
  flex:0 0 236px;display:flex;flex-direction:column;padding:16px 12px;background:#0f131a;border-right:1px solid #1c2330;overflow-y:auto;font-size:.875rem}
.dk-panel-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
.dk-panel-head h2{margin:0;font-size:1rem;color:var(--dk-strong)}
.dk-icon-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #2a3342;border-radius:8px;background:none;color:var(--dk-ink);cursor:pointer;transition:background-color .15s}
.dk-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--dk-strong)}
.dk-icon-btn svg{width:16px;height:16px}
.dk-panel ul{display:flex;flex-direction:column;gap:2px}
.dk-panel .dk-link{padding:7px 8px}
.dk-panel .dk-link[aria-current="page"]{background:#1b2130;color:var(--dk-strong);font-weight:600}
.dk-square{width:12px;height:12px;margin:0 3px;border-radius:4px;flex:none}
.dk-num{margin-left:auto;font-size:.72rem;color:var(--dk-muted);font-variant-numeric:tabular-nums}
.dk-avatar{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font-size:.65rem;font-weight:800;flex:none}

/* 3. Floating panel: the sidebar is a rounded card inset from the edges */
.app-float{background:#eef1f6;border-color:#d6dce5;padding:12px;gap:12px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.dk-float{--dk-accent:#a3e635;--dk-ink:#a1a1aa;--dk-strong:#fafafa;--dk-muted:#8b8b95;
  flex:0 0 224px;display:flex;flex-direction:column;padding:16px 12px;background:#131316;border-radius:16px;overflow-y:auto;font-size:.875rem;
  box-shadow:0 20px 40px -20px rgba(9,9,11,.7)}
.dk-float .dk-logo{background:#a3e635;color:#1a2e05;border-radius:50%}
.dk-float ul{display:flex;flex-direction:column;gap:3px}
.dk-float .dk-link{padding:9px 12px;border-radius:999px}
.dk-float .dk-link:hover{background:#1f1f24}
.dk-float .dk-link[aria-current="page"]{background:var(--dk-accent);color:#1a2e05;font-weight:700}
.dk-float .dk-foot{margin-top:auto;padding-top:12px;border-top:1px solid #26262b}

@media (max-width:640px){
  .app{flex-direction:column;height:auto}
  .dk-glow,.dk-panel,.dk-float{flex-basis:auto;border-right:0}
  .dk-cta{margin-top:16px}
  .app-dual{flex-direction:row;flex-wrap:wrap}
  .app-dual .dk-panel{flex:1 1 200px;border-right:0}
  .app-dual .pg{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.dk-link,.dk-rail-link,.dk-cta,.dk-icon-btn{transition:none}}

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="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 7.5-4.5 4.5 4.5 4.5M15.5 7.5l4.5 4.5-4.5 4.5"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4.3l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 5.5A1.5 1.5 0 0 1 6 4h13.5v14H6a1.5 1.5 0 0 0-1.5 1.5z"/><path d="M4.5 19.5A1.5 1.5 0 0 0 6 21h13.5v-3"/></symbol>
  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16.5" height="11" rx="2"/><circle cx="16" cy="13.5" r="1.2"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" 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="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
</svg>
<div><span class="lbl">Glow accent with environment status</span>
<div class="app">
  <nav class="dk dk-glow" aria-label="Nightjar">
    <a class="dk-brand" href="#"><span class="dk-logo" aria-hidden="true">N</span>Nightjar</a>
    <ul class="nav flex-column flex-nowrap">
      <li class="nav-item"><a class="nav-link dk-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-bell"/></svg><span>Incidents</span><span class="dk-count">2<span class="visually-hidden"> open</span></span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-layers"/></svg><span>Services</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-send"/></svg><span>Deployments</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-code"/></svg><span>Logs</span></a></li>
    </ul>
    <p class="dk-heading">Environments</p>
    <ul class="nav flex-column flex-nowrap">
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-dot" style="background:#22c55e" aria-hidden="true"></span><span>Production</span><span class="dk-state">Healthy</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-dot" style="background:#f59e0b" aria-hidden="true"></span><span>Staging</span><span class="dk-state">Degraded</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-dot" style="background:#94a3b8" aria-hidden="true"></span><span>Preview</span><span class="dk-state">Idle</span></a></li>
    </ul>
    <button class="btn dk-cta" type="button"><svg aria-hidden="true"><use href="#i-plus"/></svg>New deployment</button>
  </nav>
  <div class="pg dark" style="--pg-bar:#0e7490">
    <div class="pg-head"><div><p class="pg-kicker">Nightjar · production</p><h2 class="pg-title">Overview</h2></div><span class="pg-chip">Uptime 99.98%</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Requests / min</span><b>18.4k</b><em>+3.2%</em></div><div class="pg-tile"><span>p95 latency</span><b>212 ms</b></div><div class="pg-tile"><span>Error rate</span><b>0.08%</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:62%"></i><i style="height:58%"></i><i style="height:70%"></i><i style="height:66%"></i><i style="height:74%"></i><i style="height:60%"></i><i style="height:78%"></i><i style="height:72%"></i><i style="height:68%"></i><i style="height:82%"></i><i style="height:76%"></i><i style="height:80%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Dual sidebar: app rail and a project panel</span>
<div class="app app-dual">
  <nav class="dk dk-rail" aria-label="Apps">
    <span class="dk-logo" aria-hidden="true">K</span>
    <ul class="nav flex-column flex-nowrap">
      <li><a class="dk-rail-link" href="#" aria-label="Inbox"><svg aria-hidden="true"><use href="#i-inbox"/></svg></a></li>
      <li><a class="dk-rail-link" href="#" aria-current="page" aria-label="Projects"><svg aria-hidden="true"><use href="#i-folder"/></svg></a></li>
      <li><a class="dk-rail-link" href="#" aria-label="Calendar"><svg aria-hidden="true"><use href="#i-calendar"/></svg></a></li>
      <li><a class="dk-rail-link" href="#" aria-label="Docs"><svg aria-hidden="true"><use href="#i-book"/></svg></a></li>
    </ul>
    <a class="dk-me" href="#" aria-label="Your profile: Sam Reyes">SR</a>
  </nav>
  <nav class="dk dk-panel" aria-label="Projects">
    <div class="dk-panel-head"><h2>Projects</h2><button class="btn dk-icon-btn" type="button" aria-label="New project"><svg aria-hidden="true"><use href="#i-plus"/></svg></button></div>
    <ul class="nav flex-column flex-nowrap">
      <li class="nav-item"><a class="nav-link dk-link" href="#" aria-current="page"><span class="dk-square" style="background:#a78bfa" aria-hidden="true"></span><span>Website relaunch</span><span class="dk-num">14<span class="visually-hidden"> open issues</span></span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-square" style="background:#38bdf8" aria-hidden="true"></span><span>iOS app 4.0</span><span class="dk-num">9<span class="visually-hidden"> open issues</span></span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-square" style="background:#f472b6" aria-hidden="true"></span><span>Pricing experiment</span><span class="dk-num">3<span class="visually-hidden"> open issues</span></span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-square" style="background:#34d399" aria-hidden="true"></span><span>Help centre</span><span class="dk-num">21<span class="visually-hidden"> open issues</span></span></a></li>
    </ul>
    <p class="dk-heading">Teams</p>
    <ul class="nav flex-column flex-nowrap">
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-avatar" style="background:#7c3aed" aria-hidden="true">D</span><span>Design</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-avatar" style="background:#0369a1" aria-hidden="true">E</span><span>Engineering</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><span class="dk-avatar" style="background:#b45309" aria-hidden="true">G</span><span>Growth</span></a></li>
    </ul>
  </nav>
  <div class="pg dark" style="--pg-bar:#6d28d9">
    <div class="pg-head"><div><p class="pg-kicker">Projects · Website relaunch</p><h2 class="pg-title">Sprint 14</h2></div><span class="pg-chip">6 days left</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Open issues</span><b>14</b></div><div class="pg-tile"><span>In review</span><b>5</b></div><div class="pg-tile"><span>Shipped</span><b>27</b><em>+9 this sprint</em></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:40%"></i><i style="height:52%"></i><i style="height:46%"></i><i style="height:60%"></i><i style="height:58%"></i><i style="height:70%"></i><i style="height:64%"></i><i style="height:76%"></i><i style="height:68%"></i><i style="height:80%"></i><i style="height:72%"></i><i style="height:86%"></i></div>
  </div>
</div></div>
<div><span class="lbl">Floating dark panel on a light page</span>
<div class="app app-float">
  <nav class="dk dk-float" aria-label="Loop">
    <a class="dk-brand" href="#"><span class="dk-logo" aria-hidden="true">L</span>Loop</a>
    <ul class="nav flex-column flex-nowrap">
      <li class="nav-item"><a class="nav-link dk-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Dashboard</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-card"/></svg><span>Payments</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span>Customers</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-wallet"/></svg><span>Payouts</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-chart"/></svg><span>Reports</span></a></li>
    </ul>
    <ul class="nav flex-column flex-nowrap dk-foot">
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li class="nav-item"><a class="nav-link dk-link" href="#"><svg aria-hidden="true"><use href="#i-help"/></svg><span>Help</span></a></li>
    </ul>
  </nav>
  <div class="pg" style="--pg-bar:#bef264">
    <div class="pg-head"><div><p class="pg-kicker">Loop payments · today</p><h2 class="pg-title">Dashboard</h2></div><span class="pg-chip">EUR</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Gross volume</span><b>€84,310</b><em>+11.8%</em></div><div class="pg-tile"><span>Payments</span><b>1,962</b></div><div class="pg-tile"><span>Next payout</span><b>€12,450</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:44%"></i><i style="height:58%"></i><i style="height:52%"></i><i style="height:66%"></i><i style="height:60%"></i><i style="height:74%"></i><i style="height:68%"></i><i style="height:62%"></i><i style="height:80%"></i><i style="height:72%"></i><i style="height:86%"></i><i style="height:78%"></i></div>
  </div>
</div></div>
CSS 
/* App shell for dark UIs. Link lists are Bootstrap .nav/.nav-link; buttons are .btn. */
.app{display:flex;height:540px;background:#0d1117;border:1px solid #232b38;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.dk ul{list-style:none;margin:0;padding:0}

/* 1. Glow accent */
.dk-glow{--dk-accent:#38bdf8;--dk-ink:#aab4c5;--dk-strong:#f1f5f9;--dk-muted:#8a94a6;--dk-line:#1c2330;
  flex:0 0 248px;display:flex;flex-direction:column;padding:18px 14px;background:#0b0e14;border-right:1px solid var(--dk-line);overflow-y:auto;font-size:.875rem;
  background-image:radial-gradient(120% 40% at 0% 0%,rgba(56,189,248,.10),transparent 60%)}
.dk-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;border-radius:8px;color:var(--dk-strong);font-weight:700;font-size:1rem;text-decoration:none}
.dk-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#38bdf8,#6366f1);color:#04111d;font-size:.85rem;font-weight:800}
.dk-heading{margin:18px 0 6px;line-height:1.5;padding:0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dk-muted)}
.dk-glow ul{display:flex;flex-direction:column;gap:2px}
.dk .nav-link{position:relative;display:flex;font-size:.875rem;line-height:1.5;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:var(--dk-ink);font-weight:500;text-decoration:none;
  transition:background-color .15s,color .15s}
.dk .nav-link svg{width:18px;height:18px;flex:none}
.dk .nav-link:hover{background:rgba(255,255,255,.05);color:var(--dk-strong)}
.dk-glow .nav-link[aria-current="page"]{background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03));color:#e0f2fe;font-weight:600}
.dk-glow .nav-link[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;
  background:var(--dk-accent);box-shadow:0 0 12px 2px rgba(56,189,248,.7)}
.dk-glow .nav-link[aria-current="page"] svg{color:var(--dk-accent)}
.dk-count{margin-left:auto;padding:0 7px;border-radius:999px;background:rgba(248,113,113,.16);color:#fca5a5;font-size:.7rem;font-weight:700;line-height:1.6}
.dk-dot{width:8px;height:8px;margin:0 5px;border-radius:50%;flex:none}
.dk-state{margin-left:auto;font-size:.72rem;color:var(--dk-muted)}
.dk-cta{--bs-btn-active-color:#04111d;display:flex;line-height:1.5;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:9px 12px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);color:#04111d;font:inherit;font-weight:700;cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(56,189,248,.8);transition:filter .15s}
.dk-cta:hover{filter:brightness(1.08)}
.dk-cta svg{width:16px;height:16px}
.dk :is(a,button):focus-visible{box-shadow:none;outline:2px solid var(--dk-accent,#38bdf8);outline-offset:2px}

/* 2. Dual sidebar */
.dk-rail{--dk-accent:#a78bfa;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;background:#07090d;border-right:1px solid #161b24}
.dk-rail .dk-logo{margin-bottom:10px;background:linear-gradient(135deg,#a78bfa,#6d28d9);color:#fff;border-radius:10px;width:34px;height:34px}
.dk-rail ul{gap:6px}
.dk-rail-link{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#8a94a6;transition:background-color .15s,color .15s}
.dk-rail-link svg{width:20px;height:20px}
.dk-rail-link:hover{background:rgba(255,255,255,.06);color:#f1f5f9}
.dk-rail-link[aria-current="page"]{background:rgba(167,139,250,.18);color:#c4b5fd}
.dk-rail-link[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--dk-accent)}
.dk-rail .dk-me{margin-top:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f59e0b;color:#1c1204;font-size:.72rem;font-weight:800;text-decoration:none}
.dk-panel{--dk-accent:#a78bfa;--dk-ink:#aab4c5;--dk-strong:#f1f5f9;--dk-muted:#8a94a6;
  flex:0 0 236px;display:flex;flex-direction:column;padding:16px 12px;background:#0f131a;border-right:1px solid #1c2330;overflow-y:auto;font-size:.875rem}
.dk-panel-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
.dk-panel-head h2{margin:0;font-size:1rem;font-weight:700;line-height:1.5;color:var(--dk-strong)}
.dk-icon-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #2a3342;border-radius:8px;background:none;color:var(--dk-ink);cursor:pointer;transition:background-color .15s}
.dk-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--dk-strong)}
.dk-icon-btn svg{width:16px;height:16px}
.dk-panel ul{display:flex;flex-direction:column;gap:2px}
.dk-panel .nav-link{padding:7px 8px}
.dk-panel .nav-link[aria-current="page"]{background:#1b2130;color:var(--dk-strong);font-weight:600}
.dk-square{width:12px;height:12px;margin:0 3px;border-radius:4px;flex:none}
.dk-num{margin-left:auto;font-size:.72rem;color:var(--dk-muted);font-variant-numeric:tabular-nums}
.dk-avatar{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font-size:.65rem;font-weight:800;flex:none}

/* 3. Floating panel: the sidebar is a rounded card inset from the edges */
.app-float{background:#eef1f6;border-color:#d6dce5;padding:12px;gap:12px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.dk-float{--dk-accent:#a3e635;--dk-ink:#a1a1aa;--dk-strong:#fafafa;--dk-muted:#8b8b95;
  flex:0 0 224px;display:flex;flex-direction:column;padding:16px 12px;background:#131316;border-radius:16px;overflow-y:auto;font-size:.875rem;
  box-shadow:0 20px 40px -20px rgba(9,9,11,.7)}
.dk-float .dk-logo{background:#a3e635;color:#1a2e05;border-radius:50%}
.dk-float ul{display:flex;flex-direction:column;gap:3px}
.dk-float .nav-link{padding:9px 12px;border-radius:999px}
.dk-float .nav-link:hover{background:#1f1f24}
.dk-float .nav-link[aria-current="page"]{background:var(--dk-accent);color:#1a2e05;font-weight:700}
.dk-float .dk-foot{margin-top:auto;padding-top:12px;border-top:1px solid #26262b}

@media (max-width:640px){
  .app{flex-direction:column;height:auto}
  .dk-glow,.dk-panel,.dk-float{flex-basis:auto;border-right:0}
  .dk-cta{margin-top:16px}
  .app-dual{flex-direction:row;flex-wrap:wrap}
  .app-dual .dk-panel{flex:1 1 200px;border-right:0}
  .app-dual .pg{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.dk .nav-link,.dk-rail-link,.dk-cta,.dk-icon-btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14M20.5 3.5l-6.5 17-4-6.5-6.5-4z"/></symbol>
  <symbol id="i-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 7.5-4.5 4.5 4.5 4.5M15.5 7.5l4.5 4.5-4.5 4.5"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5h5l1.5 2.5h4l1.5-2.5h5"/><path d="M5.8 5.5h12.4l2.3 8v5.5a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-5.5z"/></symbol>
  <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4.3l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 5.5A1.5 1.5 0 0 1 6 4h13.5v14H6a1.5 1.5 0 0 0-1.5 1.5z"/><path d="M4.5 19.5A1.5 1.5 0 0 0 6 21h13.5v-3"/></symbol>
  <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-wallet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="8" width="16.5" height="11" rx="2"/><circle cx="16" cy="13.5" r="1.2"/></symbol>
  <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8.5 16v-4M12.5 16V8M16.5 16v-6"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-help" 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="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7"/><path d="M12 17.3h.01"/></symbol>
</svg>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#9aa4b5] uppercase">Glow accent with environment status</span>
<div class="flex h-[540px] overflow-hidden rounded-2xl border border-[#232b38] bg-[#0d1117] shadow-[0_24px_60px_-30px_rgba(0,0,0,.8)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none basis-[248px] flex-col overflow-y-auto border-r border-[#1c2330] bg-[#0b0e14] bg-[radial-gradient(120%_40%_at_0%_0%,rgba(56,189,248,.10),transparent_60%)] px-3.5 py-[18px] text-[.875rem] max-[640px]:basis-auto max-[640px]:border-r-0" aria-label="Nightjar">
    <a class="flex items-center gap-2.5 rounded-lg px-2 pt-0.5 pb-4 text-[1rem] font-bold text-[#f1f5f9] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8]" href="#"><span class="grid size-[30px] place-items-center rounded-[9px] bg-[linear-gradient(135deg,#38bdf8,#6366f1)] text-[.85rem] font-extrabold text-[#04111d]" aria-hidden="true">N</span>Nightjar</a>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="group relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8] aria-[current=page]:bg-[linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03))] aria-[current=page]:font-semibold aria-[current=page]:text-[#e0f2fe] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-[7px] aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#38bdf8] aria-[current=page]:before:shadow-[0_0_12px_2px_rgba(56,189,248,.7)]" href="#" aria-current="page"><svg class="size-[18px] flex-none group-aria-[current=page]:text-[#38bdf8]" aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li><a class="group relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8] aria-[current=page]:bg-[linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03))] aria-[current=page]:font-semibold aria-[current=page]:text-[#e0f2fe] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-[7px] aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#38bdf8] aria-[current=page]:before:shadow-[0_0_12px_2px_rgba(56,189,248,.7)]" href="#"><svg class="size-[18px] flex-none group-aria-[current=page]:text-[#38bdf8]" aria-hidden="true"><use href="#i-bell"/></svg><span>Incidents</span><span class="ml-auto rounded-full bg-[rgba(248,113,113,.16)] px-[7px] text-[.7rem] leading-[1.6] font-bold text-[#fca5a5]">2<span class="sr-only"> open</span></span></a></li>
      <li><a class="group relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8] aria-[current=page]:bg-[linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03))] aria-[current=page]:font-semibold aria-[current=page]:text-[#e0f2fe] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-[7px] aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#38bdf8] aria-[current=page]:before:shadow-[0_0_12px_2px_rgba(56,189,248,.7)]" href="#"><svg class="size-[18px] flex-none group-aria-[current=page]:text-[#38bdf8]" aria-hidden="true"><use href="#i-layers"/></svg><span>Services</span></a></li>
      <li><a class="group relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8] aria-[current=page]:bg-[linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03))] aria-[current=page]:font-semibold aria-[current=page]:text-[#e0f2fe] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-[7px] aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#38bdf8] aria-[current=page]:before:shadow-[0_0_12px_2px_rgba(56,189,248,.7)]" href="#"><svg class="size-[18px] flex-none group-aria-[current=page]:text-[#38bdf8]" aria-hidden="true"><use href="#i-send"/></svg><span>Deployments</span></a></li>
      <li><a class="group relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8] aria-[current=page]:bg-[linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.03))] aria-[current=page]:font-semibold aria-[current=page]:text-[#e0f2fe] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-[7px] aria-[current=page]:before:-left-3.5 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#38bdf8] aria-[current=page]:before:shadow-[0_0_12px_2px_rgba(56,189,248,.7)]" href="#"><svg class="size-[18px] flex-none group-aria-[current=page]:text-[#38bdf8]" aria-hidden="true"><use href="#i-code"/></svg><span>Logs</span></a></li>
    </ul>
    <p class="mt-[18px] mb-1.5 px-2.5 text-[.6875rem] font-bold tracking-[.08em] text-[#8a94a6] uppercase">Environments</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8]" href="#"><span class="mx-[5px] size-2 flex-none rounded-full" style="background:#22c55e" aria-hidden="true"></span><span>Production</span><span class="ml-auto text-[.72rem] text-[#8a94a6]">Healthy</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8]" href="#"><span class="mx-[5px] size-2 flex-none rounded-full" style="background:#f59e0b" aria-hidden="true"></span><span>Staging</span><span class="ml-auto text-[.72rem] text-[#8a94a6]">Degraded</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2.5 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8]" href="#"><span class="mx-[5px] size-2 flex-none rounded-full" style="background:#94a3b8" aria-hidden="true"></span><span>Preview</span><span class="ml-auto text-[.72rem] text-[#8a94a6]">Idle</span></a></li>
    </ul>
    <button class="mt-auto flex cursor-pointer items-center justify-center gap-2 rounded-[10px] border-0 bg-[linear-gradient(135deg,#38bdf8,#6366f1)] px-3 py-[9px] font-bold text-[#04111d] shadow-[0_8px_24px_-10px_rgba(56,189,248,.8)] transition-[filter] duration-150 hover:brightness-[1.08] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#38bdf8] motion-reduce:transition-none max-[640px]:mt-4" type="button"><svg class="size-4" aria-hidden="true"><use href="#i-plus"/></svg>New deployment</button>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#0d1117] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#9aa4b5]">Nightjar · production</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#f1f5f9]">Overview</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#2a3342] bg-[#161b24] text-[#cbd5e1]">Uptime 99.98%</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#232b38] bg-[#141922] px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#9aa4b5]">Requests / min</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#f1f5f9]">18.4k</b><em class="text-[.72rem] font-semibold not-italic text-[#4ade80]">+3.2%</em></div><div class="rounded-xl border border-[#232b38] bg-[#141922] px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#9aa4b5]">p95 latency</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#f1f5f9]">212 ms</b></div><div class="rounded-xl border border-[#232b38] bg-[#141922] px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#9aa4b5]">Error rate</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#f1f5f9]">0.08%</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#232b38] bg-[#141922] px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#0e7490] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490]" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490] opacity-70" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490]" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490] opacity-70" style="height:74%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490]" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490] opacity-70" style="height:78%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490]" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490] opacity-70" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490]" style="height:82%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490] opacity-70" style="height:76%"></i><i class="flex-1 rounded-t-[5px] bg-[#0e7490]" style="height:80%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#9aa4b5] uppercase">Dual sidebar: app rail and a project panel</span>
<div class="flex h-[540px] overflow-hidden rounded-2xl border border-[#232b38] bg-[#0d1117] shadow-[0_24px_60px_-30px_rgba(0,0,0,.8)] max-[640px]:h-auto max-[640px]:flex-wrap">
  <nav class="flex flex-none basis-16 flex-col items-center gap-1.5 border-r border-[#161b24] bg-[#07090d] py-3.5" aria-label="Apps">
    <span class="mb-2.5 grid size-[34px] place-items-center rounded-[10px] bg-[linear-gradient(135deg,#a78bfa,#6d28d9)] text-[.85rem] font-extrabold text-white" aria-hidden="true">K</span>
    <ul class="m-0 flex list-none flex-col gap-1.5 p-0">
      <li><a class="relative grid size-10 place-items-center rounded-[11px] text-[#8a94a6] transition-colors duration-150 hover:bg-white/6 hover:text-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] motion-reduce:transition-none aria-[current=page]:bg-[rgba(167,139,250,.18)] aria-[current=page]:text-[#c4b5fd] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2.5 aria-[current=page]:before:-left-3 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#a78bfa]" href="#" aria-label="Inbox"><svg class="size-5" aria-hidden="true"><use href="#i-inbox"/></svg></a></li>
      <li><a class="relative grid size-10 place-items-center rounded-[11px] text-[#8a94a6] transition-colors duration-150 hover:bg-white/6 hover:text-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] motion-reduce:transition-none aria-[current=page]:bg-[rgba(167,139,250,.18)] aria-[current=page]:text-[#c4b5fd] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2.5 aria-[current=page]:before:-left-3 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#a78bfa]" href="#" aria-current="page" aria-label="Projects"><svg class="size-5" aria-hidden="true"><use href="#i-folder"/></svg></a></li>
      <li><a class="relative grid size-10 place-items-center rounded-[11px] text-[#8a94a6] transition-colors duration-150 hover:bg-white/6 hover:text-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] motion-reduce:transition-none aria-[current=page]:bg-[rgba(167,139,250,.18)] aria-[current=page]:text-[#c4b5fd] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2.5 aria-[current=page]:before:-left-3 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#a78bfa]" href="#" aria-label="Calendar"><svg class="size-5" aria-hidden="true"><use href="#i-calendar"/></svg></a></li>
      <li><a class="relative grid size-10 place-items-center rounded-[11px] text-[#8a94a6] transition-colors duration-150 hover:bg-white/6 hover:text-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] motion-reduce:transition-none aria-[current=page]:bg-[rgba(167,139,250,.18)] aria-[current=page]:text-[#c4b5fd] aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2.5 aria-[current=page]:before:-left-3 aria-[current=page]:before:w-[3px] aria-[current=page]:before:rounded-r-[3px] aria-[current=page]:before:bg-[#a78bfa]" href="#" aria-label="Docs"><svg class="size-5" aria-hidden="true"><use href="#i-book"/></svg></a></li>
    </ul>
    <a class="mt-auto grid size-[34px] place-items-center rounded-full bg-[#f59e0b] text-[.72rem] font-extrabold text-[#1c1204] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa]" href="#" aria-label="Your profile: Sam Reyes">SR</a>
  </nav>
  <nav class="flex flex-none basis-[236px] flex-col overflow-y-auto border-r border-[#1c2330] bg-[#0f131a] px-3 py-4 text-[.875rem] max-[640px]:flex-[1_1_200px] max-[640px]:border-r-0" aria-label="Projects">
    <div class="flex items-center justify-between px-1.5 pt-1 pb-3"><h2 class="m-0 text-[1rem] font-bold text-[#f1f5f9]">Projects</h2><button class="grid size-[30px] cursor-pointer place-items-center rounded-lg border border-[#2a3342] bg-transparent p-0 text-[#aab4c5] transition-colors duration-150 hover:bg-white/6 hover:text-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] motion-reduce:transition-none" type="button" aria-label="New project"><svg class="size-4" aria-hidden="true"><use href="#i-plus"/></svg></button></div>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] aria-[current=page]:bg-[#1b2130] aria-[current=page]:font-semibold aria-[current=page]:text-[#f1f5f9]" href="#" aria-current="page"><span class="mx-[3px] size-3 flex-none rounded" style="background:#a78bfa" aria-hidden="true"></span><span>Website relaunch</span><span class="ml-auto text-[.72rem] text-[#8a94a6] tabular-nums">14<span class="sr-only"> open issues</span></span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] aria-[current=page]:bg-[#1b2130] aria-[current=page]:font-semibold aria-[current=page]:text-[#f1f5f9]" href="#"><span class="mx-[3px] size-3 flex-none rounded" style="background:#38bdf8" aria-hidden="true"></span><span>iOS app 4.0</span><span class="ml-auto text-[.72rem] text-[#8a94a6] tabular-nums">9<span class="sr-only"> open issues</span></span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] aria-[current=page]:bg-[#1b2130] aria-[current=page]:font-semibold aria-[current=page]:text-[#f1f5f9]" href="#"><span class="mx-[3px] size-3 flex-none rounded" style="background:#f472b6" aria-hidden="true"></span><span>Pricing experiment</span><span class="ml-auto text-[.72rem] text-[#8a94a6] tabular-nums">3<span class="sr-only"> open issues</span></span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa] aria-[current=page]:bg-[#1b2130] aria-[current=page]:font-semibold aria-[current=page]:text-[#f1f5f9]" href="#"><span class="mx-[3px] size-3 flex-none rounded" style="background:#34d399" aria-hidden="true"></span><span>Help centre</span><span class="ml-auto text-[.72rem] text-[#8a94a6] tabular-nums">21<span class="sr-only"> open issues</span></span></a></li>
    </ul>
    <p class="mt-[18px] mb-1.5 px-2.5 text-[.6875rem] font-bold tracking-[.08em] text-[#8a94a6] uppercase">Teams</p>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa]" href="#"><span class="grid size-[22px] flex-none place-items-center rounded-md text-[.65rem] font-extrabold text-white" style="background:#7c3aed" aria-hidden="true">D</span><span>Design</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa]" href="#"><span class="grid size-[22px] flex-none place-items-center rounded-md text-[.65rem] font-extrabold text-white" style="background:#0369a1" aria-hidden="true">E</span><span>Engineering</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none text-[#aab4c5] hover:bg-white/5 hover:text-[#f1f5f9] rounded-lg px-2 py-[7px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a78bfa]" href="#"><span class="grid size-[22px] flex-none place-items-center rounded-md text-[.65rem] font-extrabold text-white" style="background:#b45309" aria-hidden="true">G</span><span>Growth</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 max-[640px]:basis-full flex-col gap-[18px] overflow-hidden bg-[#0d1117] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#9aa4b5]">Projects · Website relaunch</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#f1f5f9]">Sprint 14</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#2a3342] bg-[#161b24] text-[#cbd5e1]">6 days left</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#232b38] bg-[#141922] px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#9aa4b5]">Open issues</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#f1f5f9]">14</b></div><div class="rounded-xl border border-[#232b38] bg-[#141922] px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#9aa4b5]">In review</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#f1f5f9]">5</b></div><div class="rounded-xl border border-[#232b38] bg-[#141922] px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#9aa4b5]">Shipped</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#f1f5f9]">27</b><em class="text-[.72rem] font-semibold not-italic text-[#4ade80]">+9 this sprint</em></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#232b38] bg-[#141922] px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#6d28d9] opacity-70" style="height:40%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9]" style="height:52%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9] opacity-70" style="height:46%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9]" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9] opacity-70" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9]" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9] opacity-70" style="height:64%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9]" style="height:76%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9] opacity-70" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9]" style="height:80%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9] opacity-70" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#6d28d9]" style="height:86%"></i></div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#9aa4b5] uppercase">Floating dark panel on a light page</span>
<div class="flex h-[540px] gap-3 overflow-hidden rounded-2xl border border-[#d6dce5] bg-[#eef1f6] p-3 shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)] max-[640px]:h-auto max-[640px]:flex-col">
  <nav class="flex flex-none basis-[224px] flex-col overflow-y-auto rounded-2xl bg-[#131316] px-3 py-4 text-[.875rem] shadow-[0_20px_40px_-20px_rgba(9,9,11,.7)] max-[640px]:basis-auto" aria-label="Loop">
    <a class="flex items-center gap-2.5 rounded-lg px-2 pt-0.5 pb-4 text-[1rem] font-bold text-[#fafafa] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635]" href="#"><span class="grid size-[30px] place-items-center rounded-full bg-[#a3e635] text-[.85rem] font-extrabold text-[#1a2e05]" aria-hidden="true">L</span>Loop</a>
    <ul class="m-0 flex list-none flex-col gap-[3px] p-0">
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-grid"/></svg><span>Dashboard</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-card"/></svg><span>Payments</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-users"/></svg><span>Customers</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-wallet"/></svg><span>Payouts</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-chart"/></svg><span>Reports</span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-[3px] border-t border-[#26262b] p-0 pt-3">
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li><a class="relative flex items-center gap-[11px] font-medium no-underline transition-colors duration-150 motion-reduce:transition-none rounded-full px-3 py-[9px] text-[#a1a1aa] hover:bg-[#1f1f24] hover:text-[#fafafa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a3e635] aria-[current=page]:bg-[#a3e635] aria-[current=page]:font-bold aria-[current=page]:text-[#1a2e05]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-help"/></svg><span>Help</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 rounded-[14px] flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Loop payments · today</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Dashboard</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">EUR</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Gross volume</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">€84,310</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+11.8%</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Payments</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">1,962</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Next payout</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">€12,450</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#bef264] opacity-70" style="height:44%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264]" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264] opacity-70" style="height:52%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264]" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264] opacity-70" style="height:60%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264]" style="height:74%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264] opacity-70" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264]" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264] opacity-70" style="height:80%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264]" style="height:72%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264] opacity-70" style="height:86%"></i><i class="flex-1 rounded-t-[5px] bg-[#bef264]" style="height:78%"></i></div>
  </div>
</div></div>

About this set

Three sidebars for dark interfaces, where light-theme greys turn into mud and focus rings vanish. Glow accent is a monitoring tool: a soft cyan light in the corner, the current page on a fading gradient with a glowing 3px bar, a red-tinted incident count, environments listed with coloured dots and their state written out as Healthy, Degraded or Idle, and a gradient New deployment button at the bottom. Dual sidebar pairs a 64px app rail of icon links with a 236px project panel, the layout used by chat and issue-tracking tools; projects show a colour square and their open issue count, and teams show initials. Floating panel is a dark rounded card inset from the edges of a light page, with a lime pill for the current page, a combination that works for finance and product dashboards. The muted text colours were picked to reach 4.5:1 on their backgrounds, status is never shown by colour alone, and every focus outline uses a bright accent that stays visible on near-black. Each panel is a nav element with a plain list of links, the same structure as the light sets.

What’s included

  • Glowing current-page bar and a gradient call to action
  • Environment status as coloured dot plus written state
  • Dual layout: icon rail beside a project panel
  • Floating dark card inside a light page
  • Muted text tuned to 4.5:1 on near-black backgrounds

Accessibility

Each nav has its own label and the current links use aria-current="page". Icon-only rail links carry aria-labels, the counts include visually hidden words, and environment health is written as text, not only coloured. Focus shows a cyan, violet or lime outline that contrasts with the dark background, and transitions stop under prefers-reduced-motion.

Customise it

Each variant sets its palette in custom properties on its own class: --dk-accent, --dk-ink, --dk-strong and --dk-muted on .dk-glow, .dk-panel and .dk-float. Bootstrap uses the same properties with .nav and .btn; in Tailwind change the hex values in the text-, bg- and aria-[current=page]: utilities.