Slate Stack
Three slate tones layered to create depth without color — useful for dashboard chrome where data is the only color.
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> <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;
} .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;
}