6 CSS Minimalist UI Designs01 / 06

CSS + JSMIT licensed

Axiom Dashboard

A dark minimalist SaaS dashboard UI with a chartreuse #c8ff00 accent — a complete cockpit composition that proves how strategic whitespace and crisp typography reduce cognitive load on data-heavy applications. Left sidebar with logo + grouped nav (Overview / Manage / Account) and a live status indicator, a 4-column KPI strip with staggered count-up reveals and per-card sparkline charts, a wide bar chart built dynamically in JavaScript with staggered bar-grow animations on initial mount, a real-time event feed panel with iconified rows, a campaign performance table with status pills (Active / Paused / Error) and inline progress bars, and a traffic-sources breakdown panel with mini-bar visualisation. Typography pairs Syne (display) with DM Mono (numbers and labels). Best for SaaS product dashboards, admin panels, analytics products, internal tools, monochrome data UIs.

Published

Live Demo
Try it

The code

<section class="mu-sd" aria-label="Axiom SaaS dashboard demo">
  <div class="sidebar">
    <div class="logo">
      <div class="logo-mark" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="1" y="8" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="8" width="5" height="5" fill="#0a0a0a" opacity="0.4"/></svg>
      </div>
      Axiom
    </div>
    <div class="nav-section">
      <div class="nav-label">Overview</div>
      <div class="nav-item active"><div class="nav-dot"></div>Dashboard<span class="badge live">Live</span></div>
      <div class="nav-item"><div class="nav-dot"></div>Analytics</div>
      <div class="nav-item"><div class="nav-dot"></div>Reports<span class="badge">4</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Manage</div>
      <div class="nav-item"><div class="nav-dot"></div>Campaigns</div>
      <div class="nav-item"><div class="nav-dot"></div>Audiences</div>
      <div class="nav-item"><div class="nav-dot"></div>Integrations<span class="badge">New</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Account</div>
      <div class="nav-item"><div class="nav-dot"></div>Settings</div>
      <div class="nav-item"><div class="nav-dot"></div>Billing</div>
    </div>
    <div class="sidebar-footer">
      <div class="user-row">
        <div class="avatar">MK</div>
        <div>
          <div class="user-name">M. Kovalev</div>
          <div class="user-role">Admin · Pro</div>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="topbar">
      <div><span class="topbar-title">Overview</span><span class="topbar-sub">/ Q2 2025</span></div>
      <div class="live-dot live-dot-inline" aria-hidden="true"></div>
      <div class="topbar-right">
        <div class="tab-group" role="tablist"><div class="tab">Day</div><div class="tab active">Week</div><div class="tab">Month</div><div class="tab">YTD</div></div>
        <button class="btn-outline" type="button">Export</button>
        <button class="btn-accent" type="button">+ New Report</button>
      </div>
    </div>
    <div class="content">
      <div class="kpi-row">
        <div class="kpi-card highlight">
          <div class="kpi-label">Revenue</div>
          <div class="kpi-value accent">$284.9K</div>
          <div class="kpi-delta delta-up">↑ 18.4% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,25 10,18 20,22 30,10 40,14 50,4 60,8" fill="none" stroke="#c8ff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Active Users</div>
          <div class="kpi-value">12,430</div>
          <div class="kpi-delta delta-up">↑ 6.1% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,22 10,19 20,16 30,20 40,12 50,9 60,13" fill="none" stroke="#4499ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Conversion</div>
          <div class="kpi-value">3.87%</div>
          <div class="kpi-delta delta-down">↓ 0.3% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,10 10,14 20,11 30,17 40,20 50,18 60,22" fill="none" stroke="#ff4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Avg. Session</div>
          <div class="kpi-value">4m 12s</div>
          <div class="kpi-delta delta-up">↑ 22s vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,20 10,16 20,18 30,12 40,10 50,13 60,8" fill="none" stroke="#888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
      </div>
      <div class="chart-section">
        <div class="panel">
          <div class="panel-header">
            <div><span class="panel-title">Revenue Breakdown</span><span class="panel-sub"> — weekly</span></div>
            <div class="panel-actions"><button class="btn-outline btn-outline-mini" type="button">MRR</button><button class="btn-outline btn-outline-mini" type="button">ARR</button></div>
          </div>
          <div class="chart-body">
            <div class="chart-y-labels"><span class="y-label">$80K</span><span class="y-label">$60K</span><span class="y-label">$40K</span><span class="y-label">$20K</span><span class="y-label">$0</span></div>
            <div class="chart-canvas">
              <div class="chart-grid-lines"><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div></div>
              <div class="bar-group" data-mu-sd-bars></div>
              <div class="x-labels" data-mu-sd-xlabels></div>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Recent Events</span></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">Stripe payment</div><div class="activity-time">2 min ago · prod</div></div><div class="activity-amount pos">+$2,400</div></div>
          <div class="activity-item"><div class="activity-icon blue">↔</div><div class="activity-text"><div class="activity-name">User upgrade</div><div class="activity-time">14 min ago · api</div></div><div class="activity-amount activity-amount-blue">Pro</div></div>
          <div class="activity-item"><div class="activity-icon red">↓</div><div class="activity-text"><div class="activity-name">Churn event</div><div class="activity-time">41 min ago · prod</div></div><div class="activity-amount neg">−$799</div></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">New subscriber</div><div class="activity-time">1h ago · web</div></div><div class="activity-amount pos">+$149</div></div>
          <div class="activity-item"><div class="activity-icon blue">★</div><div class="activity-text"><div class="activity-name">Feature flag live</div><div class="activity-time">2h ago · deploy</div></div><div class="activity-amount activity-amount-dim">v4.2</div></div>
        </div>
      </div>
      <div class="table-section">
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Campaigns</span><div class="panel-actions"><span class="badge">6 active</span></div></div>
          <table><thead><tr><th>Campaign</th><th>Status</th><th>Reach</th><th>CVR</th><th>Progress</th></tr></thead>
          <tbody>
            <tr><td class="td-strong">Spring Drop</td><td><span class="status-pill active">Active</span></td><td>48.2K</td><td class="td-accent">5.4%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="82"></div></div></td></tr>
            <tr><td class="td-strong">Retarget B</td><td><span class="status-pill active">Active</span></td><td>21.7K</td><td>3.1%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="58"></div></div></td></tr>
            <tr><td class="td-strong">Email Drip</td><td><span class="status-pill paused">Paused</span></td><td>9.4K</td><td>1.8%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="31"></div></div></td></tr>
            <tr><td class="td-strong">Paid Search</td><td><span class="status-pill error">Error</span></td><td>—</td><td>—</td><td><div class="progress-bar"><div class="progress-fill" data-progress="0"></div></div></td></tr>
          </tbody></table>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Traffic Sources</span></div>
          <div class="donut-group">
            <div class="donut-row"><div class="donut-label">Organic Search</div><div class="mini-bar"><div class="mini-fill mini-fill-accent" data-w="68"></div></div><div class="donut-val">68%</div></div>
            <div class="donut-row"><div class="donut-label">Paid Social</div><div class="mini-bar"><div class="mini-fill mini-fill-blue" data-w="42"></div></div><div class="donut-val">42%</div></div>
            <div class="donut-row"><div class="donut-label">Direct</div><div class="mini-bar"><div class="mini-fill mini-fill-grey" data-w="24"></div></div><div class="donut-val">24%</div></div>
            <div class="donut-row"><div class="donut-label">Referral</div><div class="mini-bar"><div class="mini-fill mini-fill-mid" data-w="15"></div></div><div class="donut-val">15%</div></div>
            <div class="donut-row"><div class="donut-label">Email</div><div class="mini-bar"><div class="mini-fill mini-fill-dim" data-w="9"></div></div><div class="donut-val">9%</div></div>
            <div class="donut-footer"><span class="donut-foot-label">Total sessions</span><span class="donut-foot-val">198,340</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
/* ─── 01 Axiom SaaS Dashboard — minimalist dark cockpit UI ─────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap');

.mu-sd {
  --mu-sd-bg: #0a0a0a;
  --mu-sd-surface: #111111;
  --mu-sd-border: #1e1e1e;
  --mu-sd-border-mid: #2a2a2a;
  --mu-sd-text-primary: #f0f0f0;
  --mu-sd-text-secondary: #888;
  --mu-sd-text-dim: #444;
  --mu-sd-accent: #c8ff00;
  --mu-sd-accent-dim: rgba(200,255,0,0.08);
  --mu-sd-red: #ff4444;
  --mu-sd-blue: #4499ff;
  --mu-sd-mono: 'DM Mono', monospace;
  --mu-sd-sans: 'Syne', sans-serif;
  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--mu-sd-bg);
  color: var(--mu-sd-text-primary);
  font-family: var(--mu-sd-sans);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

.mu-sd *,
.mu-sd *::before,
.mu-sd *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mu-sd .sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--mu-sd-surface);
  border-right: 1px solid var(--mu-sd-border);
  display: flex;
  flex-direction: column;
  padding: 28px 0;
}

.mu-sd .logo {
  padding: 0 24px 32px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mu-sd .logo-mark {
  width: 28px;
  height: 28px;
  background: var(--mu-sd-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mu-sd .nav-section {
  padding: 0 12px;
  margin-bottom: 8px;
}

.mu-sd .nav-section-spaced {
  margin-top: 16px;
}

.mu-sd .nav-label {
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mu-sd-text-dim);
  text-transform: uppercase;
  padding: 0 12px;
  margin-bottom: 4px;
}

.mu-sd .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mu-sd-text-secondary);
  transition: all 0.15s;
  position: relative;
}

.mu-sd .nav-item:hover {
  color: var(--mu-sd-text-primary);
  background: var(--mu-sd-border);
}

.mu-sd .nav-item.active {
  color: var(--mu-sd-accent);
  background: var(--mu-sd-accent-dim);
}

.mu-sd .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--mu-sd-accent);
  border-radius: 0 3px 3px 0;
}

.mu-sd .nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

.mu-sd .nav-item.active .nav-dot {
  opacity: 1;
}

.mu-sd .badge {
  margin-left: auto;
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  background: var(--mu-sd-border-mid);
  padding: 2px 7px;
  border-radius: 20px;
  color: var(--mu-sd-text-secondary);
}

.mu-sd .badge.live {
  background: rgba(200,255,0,0.12);
  color: var(--mu-sd-accent);
}

.mu-sd .sidebar-footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--mu-sd-border);
}

.mu-sd .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mu-sd .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,#c8ff00,#88bb00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
}

.mu-sd .user-name {
  font-size: 12.5px;
  font-weight: 600;
}

.mu-sd .user-role {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mu-sd .topbar {
  display: flex;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--mu-sd-border);
  gap: 16px;
}

.mu-sd .topbar-title {
  font-size: 14px;
  font-weight: 600;
}

.mu-sd .topbar-sub {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  color: var(--mu-sd-text-dim);
  margin-left: 4px;
}

.mu-sd .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mu-sd .tab-group {
  display: flex;
  background: var(--mu-sd-surface);
  border: 1px solid var(--mu-sd-border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.mu-sd .tab {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--mu-sd-text-dim);
  transition: all 0.15s;
}

.mu-sd .tab.active {
  background: var(--mu-sd-border-mid);
  color: var(--mu-sd-text-primary);
}

.mu-sd .btn-outline {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  padding: 7px 16px;
  border: 1px solid var(--mu-sd-border-mid);
  background: transparent;
  color: var(--mu-sd-text-secondary);
  border-radius: 8px;
  cursor: pointer;
}

.mu-sd .btn-outline-mini {
  padding: 4px 10px;
  font-size: 10px;
}

.mu-sd .btn-accent {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  padding: 7px 16px;
  border: none;
  background: var(--mu-sd-accent);
  color: #0a0a0a;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.mu-sd .content {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mu-sd .kpi-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}

.mu-sd .kpi-card {
  background: var(--mu-sd-surface);
  border: 1px solid var(--mu-sd-border);
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}

.mu-sd .kpi-card.highlight {
  border-color: rgba(200,255,0,0.2);
}

.mu-sd .kpi-card.highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mu-sd-accent);
}

.mu-sd .kpi-label {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mu-sd-text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mu-sd .kpi-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  animation: mu-sd-count 0.5s ease both;
}

.mu-sd .kpi-value.accent {
  color: var(--mu-sd-accent);
}

.mu-sd .kpi-delta {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
}

.mu-sd .delta-up {
  color: var(--mu-sd-accent);
}

.mu-sd .delta-down {
  color: var(--mu-sd-red);
}

.mu-sd .kpi-sparkline {
  position: absolute;
  right: 16px;
  bottom: 16px;
  opacity: 0.3;
}

.mu-sd .kpi-card:nth-child(1) .kpi-value {
  animation-delay: 0.1s;
}

.mu-sd .kpi-card:nth-child(2) .kpi-value {
  animation-delay: 0.2s;
}

.mu-sd .kpi-card:nth-child(3) .kpi-value {
  animation-delay: 0.3s;
}

.mu-sd .kpi-card:nth-child(4) .kpi-value {
  animation-delay: 0.4s;
}

@keyframes mu-sd-count {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mu-sd .chart-section {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
}

.mu-sd .panel {
  background: var(--mu-sd-surface);
  border: 1px solid var(--mu-sd-border);
  border-radius: 12px;
  overflow: hidden;
}

.mu-sd .panel-header {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--mu-sd-border);
  gap: 10px;
}

.mu-sd .panel-title {
  font-size: 13px;
  font-weight: 600;
}

.mu-sd .panel-sub {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .panel-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.mu-sd .chart-body {
  padding: 20px 22px 16px;
  position: relative;
  height: 200px;
}

.mu-sd .chart-y-labels {
  position: absolute;
  left: 22px;
  top: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mu-sd .y-label {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .chart-canvas {
  margin-left: 36px;
  height: 100%;
  position: relative;
}

.mu-sd .chart-grid-lines {
  position: absolute;
  top: 0;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mu-sd .grid-line {
  width: 100%;
  height: 1px;
  background: var(--mu-sd-border);
}

.mu-sd .bar-group {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  height: calc(100% - 24px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 4px;
}

.mu-sd .bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
}

.mu-sd .bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  animation: mu-sd-bar 0.6s cubic-bezier(0.23,1,0.32,1) both;
}

.mu-sd .bar.primary {
  background: var(--mu-sd-accent);
  opacity: 0.9;
}

.mu-sd .bar.secondary {
  background: var(--mu-sd-border-mid);
}

@keyframes mu-sd-bar {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }

  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

.mu-sd .x-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 0 4px;
}

.mu-sd .x-label {
  flex: 1;
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  color: var(--mu-sd-text-dim);
  text-align: center;
}

.mu-sd .activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--mu-sd-border);
  cursor: pointer;
}

.mu-sd .activity-item:last-child {
  border-bottom: none;
}

.mu-sd .activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.mu-sd .activity-icon.green {
  background: rgba(200,255,0,0.1);
}

.mu-sd .activity-icon.blue {
  background: rgba(68,153,255,0.1);
}

.mu-sd .activity-icon.red {
  background: rgba(255,68,68,0.1);
}

.mu-sd .activity-text {
  flex: 1;
  min-width: 0;
}

.mu-sd .activity-name {
  font-size: 12.5px;
  font-weight: 500;
}

.mu-sd .activity-time {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
  margin-top: 1px;
}

.mu-sd .activity-amount {
  font-family: var(--mu-sd-mono);
  font-size: 12px;
  font-weight: 500;
}

.mu-sd .activity-amount.pos {
  color: var(--mu-sd-accent);
}

.mu-sd .activity-amount.neg {
  color: var(--mu-sd-red);
}

.mu-sd .activity-amount-blue {
  color: var(--mu-sd-blue);
}

.mu-sd .activity-amount-dim {
  color: var(--mu-sd-text-dim);
}

.mu-sd .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mu-sd-accent);
  animation: mu-sd-pulse 2s infinite;
}

.mu-sd .live-dot-inline {
  margin-left: 10px;
}

@keyframes mu-sd-pulse {
  0%,
    100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.mu-sd .table-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mu-sd table {
  width: 100%;
  border-collapse: collapse;
}

.mu-sd th {
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--mu-sd-text-dim);
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--mu-sd-border);
}

.mu-sd td {
  padding: 11px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--mu-sd-border);
  color: var(--mu-sd-text-secondary);
}

.mu-sd tr:last-child td {
  border-bottom: none;
}

.mu-sd .td-strong {
  color: var(--mu-sd-text-primary);
  font-weight: 500;
}

.mu-sd .td-accent {
  color: var(--mu-sd-accent);
}

.mu-sd .status-pill {
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 20px;
}

.mu-sd .status-pill.active {
  background: rgba(200,255,0,0.12);
  color: var(--mu-sd-accent);
}

.mu-sd .status-pill.paused {
  background: rgba(255,255,255,0.06);
  color: var(--mu-sd-text-dim);
}

.mu-sd .status-pill.error {
  background: rgba(255,68,68,0.1);
  color: var(--mu-sd-red);
}

.mu-sd .progress-bar {
  width: 80px;
  height: 4px;
  background: var(--mu-sd-border-mid);
  border-radius: 2px;
  overflow: hidden;
}

.mu-sd .progress-fill {
  height: 100%;
  background: var(--mu-sd-accent);
  border-radius: 2px;
}

.mu-sd .progress-fill[data-progress="0"] {
  width: 0%;
}

.mu-sd .progress-fill[data-progress="31"] {
  width: 31%;
}

.mu-sd .progress-fill[data-progress="58"] {
  width: 58%;
}

.mu-sd .progress-fill[data-progress="82"] {
  width: 82%;
}

.mu-sd .donut-group {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mu-sd .donut-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mu-sd .donut-label {
  flex: 1;
  font-size: 12.5px;
  color: var(--mu-sd-text-secondary);
}

.mu-sd .donut-val {
  font-family: var(--mu-sd-mono);
  font-size: 12px;
  color: var(--mu-sd-text-primary);
  font-weight: 500;
}

.mu-sd .mini-bar {
  flex: 1;
  height: 3px;
  background: var(--mu-sd-border-mid);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 8px;
}

.mu-sd .mini-fill {
  height: 100%;
  border-radius: 2px;
}

.mu-sd .mini-fill-accent {
  background: var(--mu-sd-accent);
}

.mu-sd .mini-fill-blue {
  background: var(--mu-sd-blue);
}

.mu-sd .mini-fill-grey {
  background: #888;
}

.mu-sd .mini-fill-mid {
  background: #555;
}

.mu-sd .mini-fill-dim {
  background: #333;
}

.mu-sd .mini-fill[data-w="9"] {
  width: 9%;
}

.mu-sd .mini-fill[data-w="15"] {
  width: 15%;
}

.mu-sd .mini-fill[data-w="24"] {
  width: 24%;
}

.mu-sd .mini-fill[data-w="42"] {
  width: 42%;
}

.mu-sd .mini-fill[data-w="68"] {
  width: 68%;
}

.mu-sd .donut-footer {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mu-sd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mu-sd .donut-foot-label {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .donut-foot-val {
  font-family: var(--mu-sd-mono);
  font-size: 14px;
  color: var(--mu-sd-text-primary);
  font-weight: 500;
}

.mu-sd .main::-webkit-scrollbar {
  width: 4px;
}

.mu-sd .main::-webkit-scrollbar-thumb {
  background: var(--mu-sd-border-mid);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .mu-sd {
    flex-direction: column;
  }

  .mu-sd .sidebar {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    padding: 16px;
    overflow-x: auto;
  }

  .mu-sd .nav-section,
    .mu-sd .sidebar-footer {
    padding: 0;
    margin: 0 12px 0 0;
    border: none;
  }

  .mu-sd .kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  .mu-sd .chart-section,
    .mu-sd .table-section {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-sd .kpi-value,
    .mu-sd .bar,
    .mu-sd .live-dot {
    animation: none !important;
  }
}
(() => {
  // Scoped chart builder — finds the bars container inside .mu-sd only,
  // so multiple instances can render on one page without colliding on
  // an element id.
  const root = document.querySelector('.mu-sd');
  if (!root) return;
  const bars = root.querySelector('[data-mu-sd-bars]');
  const xlabels = root.querySelector('[data-mu-sd-xlabels]');
  if (!bars || !xlabels || bars.childElementCount > 0) return;
  const data = [
    { label: 'Mon', a: 55, b: 30 },
    { label: 'Tue', a: 70, b: 25 },
    { label: 'Wed', a: 45, b: 40 },
    { label: 'Thu', a: 80, b: 20 },
    { label: 'Fri', a: 65, b: 35 },
    { label: 'Sat', a: 90, b: 15 },
    { label: 'Sun', a: 60, b: 45 },
  ];
  data.forEach((d, i) => {
    const wrap = document.createElement('div');
    wrap.className = 'bar-wrap';
    const b1 = document.createElement('div');
    b1.className = 'bar primary';
    b1.style.height = d.a + '%';
    b1.style.animationDelay = (i * 0.07 + 0.3) + 's';
    const b2 = document.createElement('div');
    b2.className = 'bar secondary';
    b2.style.height = d.b + '%';
    b2.style.animationDelay = (i * 0.07 + 0.4) + 's';
    wrap.append(b1, b2);
    bars.appendChild(wrap);
    const lbl = document.createElement('div');
    lbl.className = 'x-label';
    lbl.textContent = d.label;
    xlabels.appendChild(lbl);
  });
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Minimalist UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Axiom Dashboard
Source: https://codefronts.com/design-styles/css-minimalist-ui/axiom-dashboard/

A dark minimalist SaaS dashboard UI with a chartreuse #c8ff00 accent — a complete cockpit composition that proves how strategic whitespace and crisp typography reduce cognitive load on data-heavy applications. Left sidebar with logo + grouped nav (Overview / Manage / Account) and a live status indicator, a 4-column KPI strip with staggered count-up reveals and per-card sparkline charts, a wide bar chart built dynamically in JavaScript with staggered bar-grow animations on initial mount, a real-time event feed panel with iconified rows, a campaign performance table with status pills (Active / Paused / Error) and inline progress bars, and a traffic-sources breakdown panel with mini-bar visualisation. Typography pairs Syne (display) with DM Mono (numbers and labels). Best for SaaS product dashboards, admin panels, analytics products, internal tools, monochrome data UIs.
## HTML
```html
<section class="mu-sd" aria-label="Axiom SaaS dashboard demo">
  <div class="sidebar">
    <div class="logo">
      <div class="logo-mark" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="1" y="8" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="8" width="5" height="5" fill="#0a0a0a" opacity="0.4"/></svg>
      </div>
      Axiom
    </div>
    <div class="nav-section">
      <div class="nav-label">Overview</div>
      <div class="nav-item active"><div class="nav-dot"></div>Dashboard<span class="badge live">Live</span></div>
      <div class="nav-item"><div class="nav-dot"></div>Analytics</div>
      <div class="nav-item"><div class="nav-dot"></div>Reports<span class="badge">4</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Manage</div>
      <div class="nav-item"><div class="nav-dot"></div>Campaigns</div>
      <div class="nav-item"><div class="nav-dot"></div>Audiences</div>
      <div class="nav-item"><div class="nav-dot"></div>Integrations<span class="badge">New</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Account</div>
      <div class="nav-item"><div class="nav-dot"></div>Settings</div>
      <div class="nav-item"><div class="nav-dot"></div>Billing</div>
    </div>
    <div class="sidebar-footer">
      <div class="user-row">
        <div class="avatar">MK</div>
        <div>
          <div class="user-name">M. Kovalev</div>
          <div class="user-role">Admin · Pro</div>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="topbar">
      <div><span class="topbar-title">Overview</span><span class="topbar-sub">/ Q2 2025</span></div>
      <div class="live-dot live-dot-inline" aria-hidden="true"></div>
      <div class="topbar-right">
        <div class="tab-group" role="tablist"><div class="tab">Day</div><div class="tab active">Week</div><div class="tab">Month</div><div class="tab">YTD</div></div>
        <button class="btn-outline" type="button">Export</button>
        <button class="btn-accent" type="button">+ New Report</button>
      </div>
    </div>
    <div class="content">
      <div class="kpi-row">
        <div class="kpi-card highlight">
          <div class="kpi-label">Revenue</div>
          <div class="kpi-value accent">$284.9K</div>
          <div class="kpi-delta delta-up">↑ 18.4% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,25 10,18 20,22 30,10 40,14 50,4 60,8" fill="none" stroke="#c8ff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Active Users</div>
          <div class="kpi-value">12,430</div>
          <div class="kpi-delta delta-up">↑ 6.1% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,22 10,19 20,16 30,20 40,12 50,9 60,13" fill="none" stroke="#4499ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Conversion</div>
          <div class="kpi-value">3.87%</div>
          <div class="kpi-delta delta-down">↓ 0.3% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,10 10,14 20,11 30,17 40,20 50,18 60,22" fill="none" stroke="#ff4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Avg. Session</div>
          <div class="kpi-value">4m 12s</div>
          <div class="kpi-delta delta-up">↑ 22s vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,20 10,16 20,18 30,12 40,10 50,13 60,8" fill="none" stroke="#888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
      </div>
      <div class="chart-section">
        <div class="panel">
          <div class="panel-header">
            <div><span class="panel-title">Revenue Breakdown</span><span class="panel-sub"> — weekly</span></div>
            <div class="panel-actions"><button class="btn-outline btn-outline-mini" type="button">MRR</button><button class="btn-outline btn-outline-mini" type="button">ARR</button></div>
          </div>
          <div class="chart-body">
            <div class="chart-y-labels"><span class="y-label">$80K</span><span class="y-label">$60K</span><span class="y-label">$40K</span><span class="y-label">$20K</span><span class="y-label">$0</span></div>
            <div class="chart-canvas">
              <div class="chart-grid-lines"><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div></div>
              <div class="bar-group" data-mu-sd-bars></div>
              <div class="x-labels" data-mu-sd-xlabels></div>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Recent Events</span></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">Stripe payment</div><div class="activity-time">2 min ago · prod</div></div><div class="activity-amount pos">+$2,400</div></div>
          <div class="activity-item"><div class="activity-icon blue">↔</div><div class="activity-text"><div class="activity-name">User upgrade</div><div class="activity-time">14 min ago · api</div></div><div class="activity-amount activity-amount-blue">Pro</div></div>
          <div class="activity-item"><div class="activity-icon red">↓</div><div class="activity-text"><div class="activity-name">Churn event</div><div class="activity-time">41 min ago · prod</div></div><div class="activity-amount neg">−$799</div></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">New subscriber</div><div class="activity-time">1h ago · web</div></div><div class="activity-amount pos">+$149</div></div>
          <div class="activity-item"><div class="activity-icon blue">★</div><div class="activity-text"><div class="activity-name">Feature flag live</div><div class="activity-time">2h ago · deploy</div></div><div class="activity-amount activity-amount-dim">v4.2</div></div>
        </div>
      </div>
      <div class="table-section">
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Campaigns</span><div class="panel-actions"><span class="badge">6 active</span></div></div>
          <table><thead><tr><th>Campaign</th><th>Status</th><th>Reach</th><th>CVR</th><th>Progress</th></tr></thead>
          <tbody>
            <tr><td class="td-strong">Spring Drop</td><td><span class="status-pill active">Active</span></td><td>48.2K</td><td class="td-accent">5.4%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="82"></div></div></td></tr>
            <tr><td class="td-strong">Retarget B</td><td><span class="status-pill active">Active</span></td><td>21.7K</td><td>3.1%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="58"></div></div></td></tr>
            <tr><td class="td-strong">Email Drip</td><td><span class="status-pill paused">Paused</span></td><td>9.4K</td><td>1.8%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="31"></div></div></td></tr>
            <tr><td class="td-strong">Paid Search</td><td><span class="status-pill error">Error</span></td><td>—</td><td>—</td><td><div class="progress-bar"><div class="progress-fill" data-progress="0"></div></div></td></tr>
          </tbody></table>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Traffic Sources</span></div>
          <div class="donut-group">
            <div class="donut-row"><div class="donut-label">Organic Search</div><div class="mini-bar"><div class="mini-fill mini-fill-accent" data-w="68"></div></div><div class="donut-val">68%</div></div>
            <div class="donut-row"><div class="donut-label">Paid Social</div><div class="mini-bar"><div class="mini-fill mini-fill-blue" data-w="42"></div></div><div class="donut-val">42%</div></div>
            <div class="donut-row"><div class="donut-label">Direct</div><div class="mini-bar"><div class="mini-fill mini-fill-grey" data-w="24"></div></div><div class="donut-val">24%</div></div>
            <div class="donut-row"><div class="donut-label">Referral</div><div class="mini-bar"><div class="mini-fill mini-fill-mid" data-w="15"></div></div><div class="donut-val">15%</div></div>
            <div class="donut-row"><div class="donut-label">Email</div><div class="mini-bar"><div class="mini-fill mini-fill-dim" data-w="9"></div></div><div class="donut-val">9%</div></div>
            <div class="donut-footer"><span class="donut-foot-label">Total sessions</span><span class="donut-foot-val">198,340</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
/* ─── 01 Axiom SaaS Dashboard — minimalist dark cockpit UI ─────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap');

.mu-sd {
  --mu-sd-bg: #0a0a0a;
  --mu-sd-surface: #111111;
  --mu-sd-border: #1e1e1e;
  --mu-sd-border-mid: #2a2a2a;
  --mu-sd-text-primary: #f0f0f0;
  --mu-sd-text-secondary: #888;
  --mu-sd-text-dim: #444;
  --mu-sd-accent: #c8ff00;
  --mu-sd-accent-dim: rgba(200,255,0,0.08);
  --mu-sd-red: #ff4444;
  --mu-sd-blue: #4499ff;
  --mu-sd-mono: 'DM Mono', monospace;
  --mu-sd-sans: 'Syne', sans-serif;
  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--mu-sd-bg);
  color: var(--mu-sd-text-primary);
  font-family: var(--mu-sd-sans);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

.mu-sd *,
.mu-sd *::before,
.mu-sd *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mu-sd .sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--mu-sd-surface);
  border-right: 1px solid var(--mu-sd-border);
  display: flex;
  flex-direction: column;
  padding: 28px 0;
}

.mu-sd .logo {
  padding: 0 24px 32px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mu-sd .logo-mark {
  width: 28px;
  height: 28px;
  background: var(--mu-sd-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mu-sd .nav-section {
  padding: 0 12px;
  margin-bottom: 8px;
}

.mu-sd .nav-section-spaced {
  margin-top: 16px;
}

.mu-sd .nav-label {
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mu-sd-text-dim);
  text-transform: uppercase;
  padding: 0 12px;
  margin-bottom: 4px;
}

.mu-sd .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mu-sd-text-secondary);
  transition: all 0.15s;
  position: relative;
}

.mu-sd .nav-item:hover {
  color: var(--mu-sd-text-primary);
  background: var(--mu-sd-border);
}

.mu-sd .nav-item.active {
  color: var(--mu-sd-accent);
  background: var(--mu-sd-accent-dim);
}

.mu-sd .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--mu-sd-accent);
  border-radius: 0 3px 3px 0;
}

.mu-sd .nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

.mu-sd .nav-item.active .nav-dot {
  opacity: 1;
}

.mu-sd .badge {
  margin-left: auto;
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  background: var(--mu-sd-border-mid);
  padding: 2px 7px;
  border-radius: 20px;
  color: var(--mu-sd-text-secondary);
}

.mu-sd .badge.live {
  background: rgba(200,255,0,0.12);
  color: var(--mu-sd-accent);
}

.mu-sd .sidebar-footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--mu-sd-border);
}

.mu-sd .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mu-sd .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,#c8ff00,#88bb00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
}

.mu-sd .user-name {
  font-size: 12.5px;
  font-weight: 600;
}

.mu-sd .user-role {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mu-sd .topbar {
  display: flex;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--mu-sd-border);
  gap: 16px;
}

.mu-sd .topbar-title {
  font-size: 14px;
  font-weight: 600;
}

.mu-sd .topbar-sub {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  color: var(--mu-sd-text-dim);
  margin-left: 4px;
}

.mu-sd .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mu-sd .tab-group {
  display: flex;
  background: var(--mu-sd-surface);
  border: 1px solid var(--mu-sd-border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.mu-sd .tab {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--mu-sd-text-dim);
  transition: all 0.15s;
}

.mu-sd .tab.active {
  background: var(--mu-sd-border-mid);
  color: var(--mu-sd-text-primary);
}

.mu-sd .btn-outline {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  padding: 7px 16px;
  border: 1px solid var(--mu-sd-border-mid);
  background: transparent;
  color: var(--mu-sd-text-secondary);
  border-radius: 8px;
  cursor: pointer;
}

.mu-sd .btn-outline-mini {
  padding: 4px 10px;
  font-size: 10px;
}

.mu-sd .btn-accent {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
  padding: 7px 16px;
  border: none;
  background: var(--mu-sd-accent);
  color: #0a0a0a;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.mu-sd .content {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mu-sd .kpi-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}

.mu-sd .kpi-card {
  background: var(--mu-sd-surface);
  border: 1px solid var(--mu-sd-border);
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}

.mu-sd .kpi-card.highlight {
  border-color: rgba(200,255,0,0.2);
}

.mu-sd .kpi-card.highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mu-sd-accent);
}

.mu-sd .kpi-label {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mu-sd-text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mu-sd .kpi-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  animation: mu-sd-count 0.5s ease both;
}

.mu-sd .kpi-value.accent {
  color: var(--mu-sd-accent);
}

.mu-sd .kpi-delta {
  font-family: var(--mu-sd-mono);
  font-size: 11px;
}

.mu-sd .delta-up {
  color: var(--mu-sd-accent);
}

.mu-sd .delta-down {
  color: var(--mu-sd-red);
}

.mu-sd .kpi-sparkline {
  position: absolute;
  right: 16px;
  bottom: 16px;
  opacity: 0.3;
}

.mu-sd .kpi-card:nth-child(1) .kpi-value {
  animation-delay: 0.1s;
}

.mu-sd .kpi-card:nth-child(2) .kpi-value {
  animation-delay: 0.2s;
}

.mu-sd .kpi-card:nth-child(3) .kpi-value {
  animation-delay: 0.3s;
}

.mu-sd .kpi-card:nth-child(4) .kpi-value {
  animation-delay: 0.4s;
}

@keyframes mu-sd-count {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mu-sd .chart-section {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
}

.mu-sd .panel {
  background: var(--mu-sd-surface);
  border: 1px solid var(--mu-sd-border);
  border-radius: 12px;
  overflow: hidden;
}

.mu-sd .panel-header {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--mu-sd-border);
  gap: 10px;
}

.mu-sd .panel-title {
  font-size: 13px;
  font-weight: 600;
}

.mu-sd .panel-sub {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .panel-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.mu-sd .chart-body {
  padding: 20px 22px 16px;
  position: relative;
  height: 200px;
}

.mu-sd .chart-y-labels {
  position: absolute;
  left: 22px;
  top: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mu-sd .y-label {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .chart-canvas {
  margin-left: 36px;
  height: 100%;
  position: relative;
}

.mu-sd .chart-grid-lines {
  position: absolute;
  top: 0;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mu-sd .grid-line {
  width: 100%;
  height: 1px;
  background: var(--mu-sd-border);
}

.mu-sd .bar-group {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  height: calc(100% - 24px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 4px;
}

.mu-sd .bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
}

.mu-sd .bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  animation: mu-sd-bar 0.6s cubic-bezier(0.23,1,0.32,1) both;
}

.mu-sd .bar.primary {
  background: var(--mu-sd-accent);
  opacity: 0.9;
}

.mu-sd .bar.secondary {
  background: var(--mu-sd-border-mid);
}

@keyframes mu-sd-bar {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }

  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

.mu-sd .x-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 0 4px;
}

.mu-sd .x-label {
  flex: 1;
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  color: var(--mu-sd-text-dim);
  text-align: center;
}

.mu-sd .activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--mu-sd-border);
  cursor: pointer;
}

.mu-sd .activity-item:last-child {
  border-bottom: none;
}

.mu-sd .activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.mu-sd .activity-icon.green {
  background: rgba(200,255,0,0.1);
}

.mu-sd .activity-icon.blue {
  background: rgba(68,153,255,0.1);
}

.mu-sd .activity-icon.red {
  background: rgba(255,68,68,0.1);
}

.mu-sd .activity-text {
  flex: 1;
  min-width: 0;
}

.mu-sd .activity-name {
  font-size: 12.5px;
  font-weight: 500;
}

.mu-sd .activity-time {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
  margin-top: 1px;
}

.mu-sd .activity-amount {
  font-family: var(--mu-sd-mono);
  font-size: 12px;
  font-weight: 500;
}

.mu-sd .activity-amount.pos {
  color: var(--mu-sd-accent);
}

.mu-sd .activity-amount.neg {
  color: var(--mu-sd-red);
}

.mu-sd .activity-amount-blue {
  color: var(--mu-sd-blue);
}

.mu-sd .activity-amount-dim {
  color: var(--mu-sd-text-dim);
}

.mu-sd .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mu-sd-accent);
  animation: mu-sd-pulse 2s infinite;
}

.mu-sd .live-dot-inline {
  margin-left: 10px;
}

@keyframes mu-sd-pulse {
  0%,
    100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.mu-sd .table-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mu-sd table {
  width: 100%;
  border-collapse: collapse;
}

.mu-sd th {
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--mu-sd-text-dim);
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--mu-sd-border);
}

.mu-sd td {
  padding: 11px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--mu-sd-border);
  color: var(--mu-sd-text-secondary);
}

.mu-sd tr:last-child td {
  border-bottom: none;
}

.mu-sd .td-strong {
  color: var(--mu-sd-text-primary);
  font-weight: 500;
}

.mu-sd .td-accent {
  color: var(--mu-sd-accent);
}

.mu-sd .status-pill {
  font-family: var(--mu-sd-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 20px;
}

.mu-sd .status-pill.active {
  background: rgba(200,255,0,0.12);
  color: var(--mu-sd-accent);
}

.mu-sd .status-pill.paused {
  background: rgba(255,255,255,0.06);
  color: var(--mu-sd-text-dim);
}

.mu-sd .status-pill.error {
  background: rgba(255,68,68,0.1);
  color: var(--mu-sd-red);
}

.mu-sd .progress-bar {
  width: 80px;
  height: 4px;
  background: var(--mu-sd-border-mid);
  border-radius: 2px;
  overflow: hidden;
}

.mu-sd .progress-fill {
  height: 100%;
  background: var(--mu-sd-accent);
  border-radius: 2px;
}

.mu-sd .progress-fill[data-progress="0"] {
  width: 0%;
}

.mu-sd .progress-fill[data-progress="31"] {
  width: 31%;
}

.mu-sd .progress-fill[data-progress="58"] {
  width: 58%;
}

.mu-sd .progress-fill[data-progress="82"] {
  width: 82%;
}

.mu-sd .donut-group {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mu-sd .donut-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mu-sd .donut-label {
  flex: 1;
  font-size: 12.5px;
  color: var(--mu-sd-text-secondary);
}

.mu-sd .donut-val {
  font-family: var(--mu-sd-mono);
  font-size: 12px;
  color: var(--mu-sd-text-primary);
  font-weight: 500;
}

.mu-sd .mini-bar {
  flex: 1;
  height: 3px;
  background: var(--mu-sd-border-mid);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 8px;
}

.mu-sd .mini-fill {
  height: 100%;
  border-radius: 2px;
}

.mu-sd .mini-fill-accent {
  background: var(--mu-sd-accent);
}

.mu-sd .mini-fill-blue {
  background: var(--mu-sd-blue);
}

.mu-sd .mini-fill-grey {
  background: #888;
}

.mu-sd .mini-fill-mid {
  background: #555;
}

.mu-sd .mini-fill-dim {
  background: #333;
}

.mu-sd .mini-fill[data-w="9"] {
  width: 9%;
}

.mu-sd .mini-fill[data-w="15"] {
  width: 15%;
}

.mu-sd .mini-fill[data-w="24"] {
  width: 24%;
}

.mu-sd .mini-fill[data-w="42"] {
  width: 42%;
}

.mu-sd .mini-fill[data-w="68"] {
  width: 68%;
}

.mu-sd .donut-footer {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mu-sd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mu-sd .donut-foot-label {
  font-family: var(--mu-sd-mono);
  font-size: 10px;
  color: var(--mu-sd-text-dim);
}

.mu-sd .donut-foot-val {
  font-family: var(--mu-sd-mono);
  font-size: 14px;
  color: var(--mu-sd-text-primary);
  font-weight: 500;
}

.mu-sd .main::-webkit-scrollbar {
  width: 4px;
}

.mu-sd .main::-webkit-scrollbar-thumb {
  background: var(--mu-sd-border-mid);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .mu-sd {
    flex-direction: column;
  }

  .mu-sd .sidebar {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    padding: 16px;
    overflow-x: auto;
  }

  .mu-sd .nav-section,
    .mu-sd .sidebar-footer {
    padding: 0;
    margin: 0 12px 0 0;
    border: none;
  }

  .mu-sd .kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  .mu-sd .chart-section,
    .mu-sd .table-section {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-sd .kpi-value,
    .mu-sd .bar,
    .mu-sd .live-dot {
    animation: none !important;
  }
}
```

## JavaScript
```js
(() => {
  // Scoped chart builder — finds the bars container inside .mu-sd only,
  // so multiple instances can render on one page without colliding on
  // an element id.
  const root = document.querySelector('.mu-sd');
  if (!root) return;
  const bars = root.querySelector('[data-mu-sd-bars]');
  const xlabels = root.querySelector('[data-mu-sd-xlabels]');
  if (!bars || !xlabels || bars.childElementCount > 0) return;
  const data = [
    { label: 'Mon', a: 55, b: 30 },
    { label: 'Tue', a: 70, b: 25 },
    { label: 'Wed', a: 45, b: 40 },
    { label: 'Thu', a: 80, b: 20 },
    { label: 'Fri', a: 65, b: 35 },
    { label: 'Sat', a: 90, b: 15 },
    { label: 'Sun', a: 60, b: 45 },
  ];
  data.forEach((d, i) => {
    const wrap = document.createElement('div');
    wrap.className = 'bar-wrap';
    const b1 = document.createElement('div');
    b1.className = 'bar primary';
    b1.style.height = d.a + '%';
    b1.style.animationDelay = (i * 0.07 + 0.3) + 's';
    const b2 = document.createElement('div');
    b2.className = 'bar secondary';
    b2.style.height = d.b + '%';
    b2.style.animationDelay = (i * 0.07 + 0.4) + 's';
    wrap.append(b1, b2);
    bars.appendChild(wrap);
    const lbl = document.createElement('div');
    lbl.className = 'x-label';
    lbl.textContent = d.label;
    xlabels.appendChild(lbl);
  });
})();
```

Techniques used in this demo

role="" (ARIA)MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →