Sidebar App Shell

<section class="ws-sidebar-app-shell" style="--ws-shell-bg: #f8fafc; --ws-shell-panel: #ffffff; --ws-shell-text: #0f172a; --ws-shell-text-soft: #64748b; --ws-shell-border: #e2e8f0; --ws-shell-accent: #0f766e;"> <!-- ws-ok: token definitions -->
  <div class="grid min-h-[720px] overflow-hidden rounded-3xl border border-[var(--ws-shell-border)] bg-[var(--ws-shell-bg)] lg:grid-cols-[280px_1fr]">
    <aside class="border-b border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] lg:border-b-0 lg:border-r">
      <div class="border-b border-[var(--ws-shell-border)] px-6 py-5">
        <p class="text-lg font-semibold text-[var(--ws-shell-text)]">Orbit</p>
        <p class="mt-1 text-sm text-[var(--ws-shell-text-soft)]">Operations workspace</p>
      </div>
      <nav class="space-y-1 px-4 py-4" aria-label="Application navigation">
        <a href="#" class="flex items-center gap-3 rounded-xl bg-[var(--ws-shell-accent)]/10 px-4 py-3 text-sm font-semibold text-[var(--ws-shell-accent)]" aria-current="page">Overview</a>
        <a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Projects</a>
        <a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Team</a>
        <a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Billing</a>
        <a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Integrations</a>
      </nav>
      <div class="border-t border-[var(--ws-shell-border)] px-4 py-4">
        <div class="rounded-2xl bg-black/[0.02] p-4">
          <p class="text-sm font-semibold text-[var(--ws-shell-text)]">Usage</p>
          <p class="mt-1 text-sm text-[var(--ws-shell-text-soft)]">21 of 30 seats active</p>
          <div class="mt-3 h-2 rounded-full bg-[var(--ws-shell-border)]">
            <div class="h-2 w-[70%] rounded-full bg-[var(--ws-shell-accent)]"></div>
          </div>
        </div>
      </div>
    </aside>
    <div class="bg-[var(--ws-shell-bg)]">
      <header class="flex flex-col gap-4 border-b border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 class="text-xl font-semibold text-[var(--ws-shell-text)]">Workspace overview</h2>
          <p class="mt-1 text-sm text-[var(--ws-shell-text-soft)]">A main stage with supporting cards is enough for most app shells.</p>
        </div>
        <button type="button" class="rounded-lg bg-[var(--ws-shell-accent)] px-4 py-2.5 text-sm font-semibold text-white">New project</button>
      </header>
      <div class="grid gap-6 p-6 xl:grid-cols-[1.1fr_0.9fr]">
        <div class="rounded-2xl border border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] p-6">
          <p class="text-sm font-semibold text-[var(--ws-shell-text)]">Primary panel</p>
          <div class="mt-4 grid gap-4 sm:grid-cols-3">
            <div class="rounded-2xl bg-black/[0.02] p-4">
              <p class="text-xs uppercase tracking-[0.16em] text-[var(--ws-shell-text-soft)]">Projects</p>
              <p class="mt-2 text-2xl font-semibold text-[var(--ws-shell-text)]">18</p>
            </div>
            <div class="rounded-2xl bg-black/[0.02] p-4">
              <p class="text-xs uppercase tracking-[0.16em] text-[var(--ws-shell-text-soft)]">Tasks</p>
              <p class="mt-2 text-2xl font-semibold text-[var(--ws-shell-text)]">142</p>
            </div>
            <div class="rounded-2xl bg-black/[0.02] p-4">
              <p class="text-xs uppercase tracking-[0.16em] text-[var(--ws-shell-text-soft)]">Blockers</p>
              <p class="mt-2 text-2xl font-semibold text-[var(--ws-shell-text)]">6</p>
            </div>
          </div>
        </div>
        <div class="rounded-2xl border border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] p-6">
          <p class="text-sm font-semibold text-[var(--ws-shell-text)]">Secondary rail</p>
          <ul class="mt-4 space-y-3 text-sm text-[var(--ws-shell-text-soft)]">
            <li class="rounded-xl bg-black/[0.02] px-4 py-3">Quarterly review on Friday</li>
            <li class="rounded-xl bg-black/[0.02] px-4 py-3">3 approvals waiting for finance</li>
            <li class="rounded-xl bg-black/[0.02] px-4 py-3">New onboarding flow published</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>