Brutalist Status Matrix
Monospaced status grid — operational, degraded, outage, maintenance, deploying, queued. Inverts on hover. Live pulse on healthy systems, blink on outages, scanline on deploys.
Brutalist Status Matrix the 29th of 30 designs in the 30 CSS Badges collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="brut-grid">
<div class="brut-row">
<span class="brut-badge brut-operational"><span class="brut-dot"></span>Operational</span>
<div class="brut-service">api.gateway.production</div>
<div class="brut-meta">us-east-1 · 99.984% / 30d</div>
<div class="brut-time">↑ 47d 12h 04m · last incident: 2026-03-29</div>
</div>
<div class="brut-row">
<span class="brut-badge brut-degraded"><span class="brut-dot"></span>Degraded</span>
<div class="brut-service">search.indexer.eu</div>
<div class="brut-meta">eu-west-2 · 96.412% / 24h</div>
<div class="brut-time">P95 latency 840ms · ETA recovery 18m</div>
</div>
<div class="brut-row">
<span class="brut-badge brut-outage"><span class="brut-dot"></span>Outage</span>
<div class="brut-service">media.transcoder.bg</div>
<div class="brut-meta">ap-south-1 · 00.000% / 12m</div>
<div class="brut-time">incident #4119 · on-call: m.tanaka</div>
</div>
<div class="brut-row">
<span class="brut-badge brut-deploy"><span class="brut-dot"></span>Deploying</span>
<div class="brut-service">auth.service.canary</div>
<div class="brut-meta">v4.18.2 · 38% traffic</div>
<div class="brut-time">commit a1f9c2e · rollback ready</div>
</div>
</div> .brut-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
border: 2px solid #000;
background: #f4f4f0;
font-family: ui-monospace, "JetBrains Mono", monospace;
}
.brut-row {
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 24px 20px;
background: #fff;
cursor: pointer;
transition: background 0.2s;
}
.brut-row:hover { background: #000; color: #fff; }
.brut-row:hover .brut-time { color: #fff; }
.brut-row:hover .brut-meta { color: rgba(255,255,255,0.6); }
.brut-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 2px solid currentColor;
margin-bottom: 16px;
}
.brut-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.brut-operational { color: #1d8f4a; background: #ddf5e3; }
.brut-operational .brut-dot { animation: brut-pulse 1.6s infinite; }
.brut-degraded { color: #b8761c; background: #fdf2d8; }
.brut-outage { color: #c0241c; background: #fde0dd; }
.brut-outage .brut-dot { animation: brut-blink 0.5s infinite; }
.brut-deploy { color: #1c4a9e; background: #dde6f7; position: relative; overflow: hidden; }
.brut-deploy::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(28,74,158,0.3), transparent);
animation: brut-scan 1.5s linear infinite;
}
@keyframes brut-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes brut-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes brut-scan {
0% { left: -100%; }
100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.brut-operational .brut-dot,
.brut-outage .brut-dot,
.brut-deploy::before { animation: none; }
}
.brut-service {
font-family: Georgia, "Fraunces", serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.brut-meta {
font-size: 10px;
letter-spacing: 0.08em;
color: #888;
text-transform: uppercase;
transition: color 0.2s;
}
.brut-time {
font-size: 10px;
letter-spacing: 0.08em;
color: #000;
transition: color 0.2s;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed currentColor;
opacity: 0.7;
}