Mocha Workstation
Warm coffee-tone dark mode — espresso brown surfaces with cream highlights for a cozy reading-app aesthetic.
The code
<div class="dm-mocha-bg">
<article class="dm-mocha">
<div class="dm-mocha__meta">FEATURED · 4 MIN READ</div>
<h3 class="dm-mocha__title">The art of restraint</h3>
<p class="dm-mocha__body">
In the long view, less surface area means fewer maintenance burdens. Choose carefully what you
build.
</p>
<div class="dm-mocha__author">
<span class="dm-mocha__avatar">M</span>
<span>Marcus Rivera</span>
</div>
</article>
</div> <div class="dm-mocha-bg">
<article class="dm-mocha">
<div class="dm-mocha__meta">FEATURED · 4 MIN READ</div>
<h3 class="dm-mocha__title">The art of restraint</h3>
<p class="dm-mocha__body">
In the long view, less surface area means fewer maintenance burdens. Choose carefully what you
build.
</p>
<div class="dm-mocha__author">
<span class="dm-mocha__avatar">M</span>
<span>Marcus Rivera</span>
</div>
</article>
</div>.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
background: #2a1f18;
border: 1px solid #3d2c20;
border-radius: 10px;
padding: 18px 22px;
color: #f5e6d3;
}
.dm-mocha__meta {
font: 700 10px ui-monospace, monospace;
color: #c9a961;
letter-spacing: 0.12em;
margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
display: flex; align-items: center; gap: 8px;
font: 600 11px system-ui, sans-serif;
color: #c9a961;
padding-top: 12px;
border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
width: 22px; height: 22px;
background: #c9a961;
color: #1c1410;
border-radius: 50%;
display: grid; place-items: center;
font: 700 11px system-ui, sans-serif;
} .dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
background: #2a1f18;
border: 1px solid #3d2c20;
border-radius: 10px;
padding: 18px 22px;
color: #f5e6d3;
}
.dm-mocha__meta {
font: 700 10px ui-monospace, monospace;
color: #c9a961;
letter-spacing: 0.12em;
margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
display: flex; align-items: center; gap: 8px;
font: 600 11px system-ui, sans-serif;
color: #c9a961;
padding-top: 12px;
border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
width: 22px; height: 22px;
background: #c9a961;
color: #1c1410;
border-radius: 50%;
display: grid; place-items: center;
font: 700 11px system-ui, sans-serif;
}More from 12 CSS Dark Mode UI Patterns
Carbon ShelvesOnyx LadderPhosphor CardAurora DimEmber PulseOLED CardStealth PanelInkwell ModalCyber TerminalForest DimSlate Stack
View the full collection →