12 CSS Dark Mode UI Patterns

Slate Stack

Three slate tones layered to create depth without color — useful for dashboard chrome where data is the only color.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="dm-slate-bg">
  <div class="dm-slate">
    <div class="dm-slate__head">
      <span class="dm-slate__title">Quarterly revenue</span>
      <span class="dm-slate__pill">Q1 2026</span>
    </div>
    <div class="dm-slate__num">$248,392</div>
    <div class="dm-slate__delta">+18.4% from last quarter</div>
  </div>
</div>
.dm-slate-bg { padding: 24px; border-radius: 16px; background: #0f172a; }
.dm-slate {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 18px 20px;
  color: #f1f5f9;
}
.dm-slate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-slate__title {
  font: 600 12px system-ui, sans-serif;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.dm-slate__pill {
  background: #334155;
  color: #cbd5e1;
  padding: 3px 10px; border-radius: 12px;
  font: 600 10px ui-monospace, monospace;
}
.dm-slate__num {
  font: 800 26px/1 system-ui, sans-serif;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.dm-slate__delta {
  font: 600 11px system-ui, sans-serif;
  color: #4ade80;
}

Search CodeFronts

Loading…