Carbon Shelves
List rows shelving against a darker rail — alternating row depth without alternating colors keeps long lists scannable.
The code
<div class="dm-carbon-bg">
<div class="dm-carbon">
<div class="dm-carbon__row">
<span class="dm-carbon__name">api/auth.ts</span>
<span class="dm-carbon__meta">2.4 KB · 3 min ago</span>
</div>
<div class="dm-carbon__row">
<span class="dm-carbon__name">api/session.ts</span>
<span class="dm-carbon__meta">1.8 KB · 7 min ago</span>
</div>
<div class="dm-carbon__row">
<span class="dm-carbon__name">api/users.ts</span>
<span class="dm-carbon__meta">4.1 KB · 14 min ago</span>
</div>
<div class="dm-carbon__row">
<span class="dm-carbon__name">db/schema.sql</span>
<span class="dm-carbon__meta">12.3 KB · 1 hour ago</span>
</div>
</div>
</div> <div class="dm-carbon-bg">
<div class="dm-carbon">
<div class="dm-carbon__row">
<span class="dm-carbon__name">api/auth.ts</span>
<span class="dm-carbon__meta">2.4 KB · 3 min ago</span>
</div>
<div class="dm-carbon__row">
<span class="dm-carbon__name">api/session.ts</span>
<span class="dm-carbon__meta">1.8 KB · 7 min ago</span>
</div>
<div class="dm-carbon__row">
<span class="dm-carbon__name">api/users.ts</span>
<span class="dm-carbon__meta">4.1 KB · 14 min ago</span>
</div>
<div class="dm-carbon__row">
<span class="dm-carbon__name">db/schema.sql</span>
<span class="dm-carbon__meta">12.3 KB · 1 hour ago</span>
</div>
</div>
</div>.dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; }
.dm-carbon {
background: #14141c;
border: 1px solid #1f1f2e;
border-radius: 8px;
overflow: hidden;
}
.dm-carbon__row {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 16px;
background: #14141c;
transition: background 0.15s;
}
.dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; }
.dm-carbon__row:nth-child(even) { background: #181822; }
.dm-carbon__row:hover { background: #1f1f2e; }
.dm-carbon__name {
font: 600 12px ui-monospace, monospace;
color: #e2e8f0;
}
.dm-carbon__meta {
font: 500 10.5px ui-monospace, monospace;
color: #6b7080;
letter-spacing: 0.02em;
} .dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; }
.dm-carbon {
background: #14141c;
border: 1px solid #1f1f2e;
border-radius: 8px;
overflow: hidden;
}
.dm-carbon__row {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 16px;
background: #14141c;
transition: background 0.15s;
}
.dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; }
.dm-carbon__row:nth-child(even) { background: #181822; }
.dm-carbon__row:hover { background: #1f1f2e; }
.dm-carbon__name {
font: 600 12px ui-monospace, monospace;
color: #e2e8f0;
}
.dm-carbon__meta {
font: 500 10.5px ui-monospace, monospace;
color: #6b7080;
letter-spacing: 0.02em;
}More from 12 CSS Dark Mode UI Patterns
Forest DimSlate StackOnyx LadderPhosphor CardAurora DimEmber PulseOLED CardStealth PanelInkwell ModalCyber TerminalMocha Workstation
View the full collection →