8 CSS Brutalist Designs

Data Dashboard

A dark-mode ops/infrastructure dashboard in Soviet constructivism meets broken-terminal aesthetic.

Best forDevOps dashboards, status pages, monitoring tools, NOC interfaces.

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

The code

<section class="br-dsh" aria-label="Brutalist data dashboard demo">
  <div class="card">
    <div class="dashboard">

      <!-- LEFT COLUMN -->
      <div class="left-col">
        <div class="system-block">
          <div class="sys-label">System Uptime</div>
          <div class="big-metric">99.7</div>
          <div class="big-metric-label">% availability — 30d</div>
          <div class="mini-stats">
            <div class="mini-stat">
              <div class="ms-val up">2.4ms</div>
              <div class="ms-label">Avg Latency</div>
            </div>
            <div class="mini-stat">
              <div class="ms-val">1.2k</div>
              <div class="ms-label">Req/sec</div>
            </div>
            <div class="mini-stat">
              <div class="ms-val down">14</div>
              <div class="ms-label">Errors</div>
            </div>
            <div class="mini-stat">
              <div class="ms-val">38</div>
              <div class="ms-label">Nodes</div>
            </div>
          </div>
        </div>

        <div class="meters-block">
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">CPU Load</span>
              <span class="meter-pct">72%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill green" style="width:72%"></div></div>
          </div>
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">Memory</span>
              <span class="meter-pct">88%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill orange" style="width:88%"></div></div>
          </div>
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">Storage</span>
              <span class="meter-pct">44%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill blue" style="width:44%"></div></div>
          </div>
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">Network I/O</span>
              <span class="meter-pct">91%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill red" style="width:91%"></div></div>
          </div>
        </div>

        <div class="log-block">
          <div class="log-header">// Event Log</div>
          <div class="log-entry">
            <span class="log-time">09:41</span>
            <span class="log-msg ok">✓ deploy: node-07 healthy</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:38</span>
            <span class="log-msg warn">▲ warn: queue depth 840</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:31</span>
            <span class="log-msg err">✕ err: timeout zone-c</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:28</span>
            <span class="log-msg ok">✓ scale: +2 replicas</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:14</span>
            <span class="log-msg">→ cert renewed: *.api</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:02</span>
            <span class="log-msg ok">✓ backup: completed</span>
          </div>
          <div class="log-entry">
            <span class="log-time">08:55</span>
            <span class="log-msg warn">▲ warn: mem spike node-03</span>
          </div>
        </div>
      </div>

      <!-- TOP CENTER -->
      <div class="top-center">
        <div class="chart-label">// Throughput — Last 12 Periods</div>
        <div class="bar-chart" aria-hidden="true">
          <div class="bar-col"><div class="bar-fill lo" style="height:30px"></div><span class="bar-label">W1</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:55px"></div><span class="bar-label">W2</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:48px"></div><span class="bar-label">W3</span></div>
          <div class="bar-col"><div class="bar-fill warn" style="height:72px"></div><span class="bar-label">W4</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:60px"></div><span class="bar-label">W5</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:85px"></div><span class="bar-label">W6</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:70px"></div><span class="bar-label">W7</span></div>
          <div class="bar-col"><div class="bar-fill hi" style="height:110px"></div><span class="bar-label">W8</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:92px"></div><span class="bar-label">W9</span></div>
          <div class="bar-col"><div class="bar-fill warn" style="height:78px"></div><span class="bar-label">W10</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:100px"></div><span class="bar-label">W11</span></div>
          <div class="bar-col"><div class="bar-fill hi" style="height:115px"></div><span class="bar-label">NOW</span></div>
        </div>
        <div class="number-row">
          <div class="num-cell accent-green">
            <div class="nc-val">4.8M</div>
            <div class="nc-label">Requests</div>
            <div class="nc-delta pos">↑ 12.4%</div>
          </div>
          <div class="num-cell accent-orange">
            <div class="nc-val">$92K</div>
            <div class="nc-label">Revenue</div>
            <div class="nc-delta pos">↑ 8.1%</div>
          </div>
          <div class="num-cell accent-red">
            <div class="nc-val">0.03%</div>
            <div class="nc-label">Error Rate</div>
            <div class="nc-delta neg">↓ 0.01%</div>
          </div>
          <div class="num-cell accent-blue">
            <div class="nc-val">38.4K</div>
            <div class="nc-label">Active Users</div>
            <div class="nc-delta pos">↑ 22%</div>
          </div>
        </div>
      </div>

      <!-- TOP RIGHT -->
      <div class="top-right">
        <div class="chart-label">// Resource Distribution</div>
        <div class="radial-container">
          <svg class="radial-svg" width="110" height="110" viewBox="0 0 110 110" aria-hidden="true">
            <circle cx="55" cy="55" r="48" fill="none" stroke="#1e1e22" stroke-width="14"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#ff5c00" stroke-width="14"
              stroke-dasharray="138 164" stroke-dashoffset="12" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#c8f000" stroke-width="14"
              stroke-dasharray="88 214" stroke-dashoffset="-150" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#1a4fff" stroke-width="14"
              stroke-dasharray="50 252" stroke-dashoffset="-238" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#2a2c30" stroke-width="14"
              stroke-dasharray="26 276" stroke-dashoffset="-288" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
          </svg>
          <div class="radial-info">
            <div class="radial-big"><span>74</span>%</div>
            <div class="radial-sublabel">Total Allocated</div>
          </div>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-compute" aria-hidden="true"></div>
              <span class="legend-name">Compute</span>
            </div>
            <span class="legend-pct pct-compute">46%</span>
          </div>
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-storage" aria-hidden="true"></div>
              <span class="legend-name">Storage</span>
            </div>
            <span class="legend-pct pct-storage">29%</span>
          </div>
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-network" aria-hidden="true"></div>
              <span class="legend-name">Network</span>
            </div>
            <span class="legend-pct pct-network">16%</span>
          </div>
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-reserved" aria-hidden="true"></div>
              <span class="legend-name">Reserved</span>
            </div>
            <span class="legend-pct pct-reserved">9%</span>
          </div>
        </div>
      </div>

      <!-- BOTTOM CENTER — events table -->
      <div class="bottom-center">
        <div class="table-header">
          <span class="tbl-title">// Recent Events</span>
          <span class="tbl-badge">3 ACTIVE</span>
        </div>
        <table class="events-table">
          <thead>
            <tr>
              <th>Status</th>
              <th>Event</th>
              <th>Node</th>
              <th>Impact</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="status-dot red"></span>CRIT</td>
              <td>Mem overload</td>
              <td>node-03</td>
              <td class="imp-high">HIGH</td>
              <td class="imp-time">09:31</td>
            </tr>
            <tr>
              <td><span class="status-dot orange"></span>WARN</td>
              <td>Queue spike</td>
              <td>zone-b</td>
              <td class="imp-med">MED</td>
              <td class="imp-time">09:38</td>
            </tr>
            <tr>
              <td><span class="status-dot orange"></span>WARN</td>
              <td>I/O throttle</td>
              <td>disk-07</td>
              <td class="imp-med">MED</td>
              <td class="imp-time">09:52</td>
            </tr>
            <tr>
              <td><span class="status-dot green"></span>OK</td>
              <td>Auto-scale</td>
              <td>cluster-a</td>
              <td class="imp-low">LOW</td>
              <td class="imp-time">10:01</td>
            </tr>
            <tr>
              <td><span class="status-dot green"></span>OK</td>
              <td>Cert renewal</td>
              <td>*.api</td>
              <td class="imp-none">—</td>
              <td class="imp-time">09:14</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- BOTTOM RIGHT — active targets -->
      <div class="bottom-right">
        <div class="table-header">
          <span class="tbl-title">// Active Targets</span>
        </div>
        <div class="targets">
          <div class="target active-border">
            <div class="target-top">
              <span class="target-name">Q3 Throughput Goal</span>
              <span class="target-id">TGT-001</span>
            </div>
            <div class="target-progress"><div class="target-fill" style="width:78%"></div></div>
            <div class="target-bottom">
              <span class="target-stat"><strong>78%</strong> complete</span>
              <span class="target-stat">ETA <strong>Aug 14</strong></span>
            </div>
          </div>
          <div class="target">
            <div class="target-top">
              <span class="target-name">Infra Migration</span>
              <span class="target-id">TGT-002</span>
            </div>
            <div class="target-progress"><div class="target-fill fill-orange" style="width:42%"></div></div>
            <div class="target-bottom">
              <span class="target-stat"><strong>42%</strong> complete</span>
              <span class="target-stat">ETA <strong>Sep 03</strong></span>
            </div>
          </div>
          <div class="target">
            <div class="target-top">
              <span class="target-name">Cost Reduction — 15%</span>
              <span class="target-id">TGT-003</span>
            </div>
            <div class="target-progress"><div class="target-fill" style="width:61%"></div></div>
            <div class="target-bottom">
              <span class="target-stat"><strong>61%</strong> complete</span>
              <span class="target-stat">ETA <strong>Jul 30</strong></span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
/* ─── 03 Brutalist Data Dashboard — dark constructivist NOC ─── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Azeret+Mono:wght@300;400;700&family=Unbounded:wght@400;700;900&display=swap');

.br-dsh {
  --br-dsh-bg: #111214;
  --br-dsh-surface: #18191d;
  --br-dsh-white: #e8e4dc;
  --br-dsh-cream: #c8c0b0;
  --br-dsh-acid: #c8f000;
  --br-dsh-orange: #ff5c00;
  --br-dsh-red: #e80030;
  --br-dsh-blue: #1a4fff;
  --br-dsh-border: 2px solid #2a2c30;

  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--br-dsh-bg);
  font-family: 'Azeret Mono', ui-monospace, monospace;
  color: var(--br-dsh-white);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.br-dsh *,
.br-dsh *::before,
.br-dsh *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Grid background — was body::before; scoped to wrapper */
.br-dsh::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.br-dsh .card {
  position: relative;
  z-index: 1;
  width: 100%;
}

.br-dsh .dashboard {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
}

/* LEFT COLUMN */
.br-dsh .left-col {
  grid-row: 1 / 3;
  border-right: 3px solid #2a2c30;
  display: flex;
  flex-direction: column;
}

.br-dsh .system-block {
  padding: 24px 20px;
  border-bottom: 3px solid #2a2c30;
}
.br-dsh .sys-label {
  font-size: 8px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.br-dsh .sys-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--br-dsh-acid);
  border-radius: 50%;
  animation: br-dsh-pulse 2s infinite;
}
@keyframes br-dsh-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.br-dsh .big-metric {
  font-family: 'Unbounded', sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--br-dsh-acid);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 6px;
}
.br-dsh .big-metric-label {
  font-size: 10px;
  color: #555;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.br-dsh .mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--br-dsh-border);
  margin-top: 20px;
}
.br-dsh .mini-stat {
  padding: 10px 12px;
  border-right: var(--br-dsh-border);
  border-bottom: var(--br-dsh-border);
}
.br-dsh .mini-stat:nth-child(2n) { border-right: none; }
.br-dsh .mini-stat:nth-last-child(-n+2) { border-bottom: none; }
.br-dsh .ms-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  color: var(--br-dsh-white);
  margin-bottom: 2px;
}
.br-dsh .ms-val.up { color: var(--br-dsh-acid); }
.br-dsh .ms-val.down { color: var(--br-dsh-red); }
.br-dsh .ms-label { font-size: 8px; color: #555; letter-spacing: 2px; text-transform: uppercase; }

/* Progress meters */
.br-dsh .meters-block {
  padding: 20px;
  border-bottom: 3px solid #2a2c30;
}
.br-dsh .meter-item { margin-bottom: 16px; }
.br-dsh .meter-item:last-child { margin-bottom: 0; }
.br-dsh .meter-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.br-dsh .meter-name { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--br-dsh-cream); }
.br-dsh .meter-pct {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  color: var(--br-dsh-acid);
}
.br-dsh .meter-bar {
  height: 6px;
  background: #222;
  position: relative;
}
.br-dsh .meter-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.br-dsh .meter-fill.green { background: var(--br-dsh-acid); }
.br-dsh .meter-fill.orange { background: var(--br-dsh-orange); }
.br-dsh .meter-fill.red { background: var(--br-dsh-red); }
.br-dsh .meter-fill.blue { background: var(--br-dsh-blue); }

/* Log feed */
.br-dsh .log-block {
  padding: 16px 20px;
  flex: 1;
  overflow: hidden;
}
.br-dsh .log-header {
  font-size: 8px;
  letter-spacing: 4px;
  color: #444;
  text-transform: uppercase;
  margin-bottom: 12px;
  border-bottom: 1px solid #222;
  padding-bottom: 8px;
}
.br-dsh .log-entry {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 10px;
  line-height: 1.4;
}
.br-dsh .log-time { color: #444; flex-shrink: 0; letter-spacing: 1px; }
.br-dsh .log-msg { color: #666; }
.br-dsh .log-msg.ok { color: #5a8a00; }
.br-dsh .log-msg.warn { color: #aa7700; }
.br-dsh .log-msg.err { color: #aa0020; }

/* TOP CENTER */
.br-dsh .top-center {
  border-bottom: 3px solid #2a2c30;
  border-right: 3px solid #2a2c30;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.br-dsh .top-center::before {
  content: 'PERF';
  font-family: 'Unbounded', sans-serif;
  font-size: 100px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.025);
  position: absolute;
  bottom: -10px;
  right: -10px;
  line-height: 1;
  letter-spacing: -4px;
}
.br-dsh .chart-label {
  font-size: 8px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 20px;
}
.br-dsh .bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  margin-bottom: 8px;
}
.br-dsh .bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.br-dsh .bar-fill {
  width: 100%;
  background: var(--br-dsh-acid);
  opacity: 0.7;
  position: relative;
  transition: opacity 0.2s;
}
.br-dsh .bar-fill:hover { opacity: 1; }
.br-dsh .bar-fill.hi { opacity: 1; background: var(--br-dsh-acid); }
.br-dsh .bar-fill.lo { background: #333; opacity: 1; }
.br-dsh .bar-fill.warn { background: var(--br-dsh-orange); opacity: 0.8; }
.br-dsh .bar-label { font-size: 8px; color: #444; letter-spacing: 1px; }

/* Number row */
.br-dsh .number-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--br-dsh-border);
  margin-top: 20px;
}
.br-dsh .num-cell {
  padding: 12px 16px;
  border-right: var(--br-dsh-border);
  position: relative;
}
.br-dsh .num-cell:last-child { border-right: none; }
.br-dsh .num-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.br-dsh .num-cell.accent-green::after { background: var(--br-dsh-acid); }
.br-dsh .num-cell.accent-orange::after { background: var(--br-dsh-orange); }
.br-dsh .num-cell.accent-red::after { background: var(--br-dsh-red); }
.br-dsh .num-cell.accent-blue::after { background: var(--br-dsh-blue); }
.br-dsh .nc-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  color: var(--br-dsh-white);
  line-height: 1;
  margin-bottom: 4px;
}
.br-dsh .nc-label { font-size: 8px; color: #555; letter-spacing: 2px; text-transform: uppercase; }
.br-dsh .nc-delta {
  font-size: 9px;
  margin-top: 3px;
  letter-spacing: 1px;
}
.br-dsh .nc-delta.pos { color: var(--br-dsh-acid); }
.br-dsh .nc-delta.neg { color: var(--br-dsh-red); }

/* TOP RIGHT */
.br-dsh .top-right {
  border-bottom: 3px solid #2a2c30;
  padding: 28px;
  position: relative;
}
.br-dsh .radial-container {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 20px;
}
.br-dsh .radial-svg { flex-shrink: 0; }
.br-dsh .radial-info { flex: 1; }
.br-dsh .radial-big {
  font-family: 'Unbounded', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--br-dsh-white);
  line-height: 1;
  margin-bottom: 4px;
}
.br-dsh .radial-big span { color: var(--br-dsh-orange); }
.br-dsh .radial-sublabel { font-size: 9px; color: #555; letter-spacing: 3px; text-transform: uppercase; }

.br-dsh .legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-dsh .legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #222;
}
.br-dsh .legend-item:last-child { border-bottom: none; }
.br-dsh .legend-left { display: flex; align-items: center; gap: 10px; }
.br-dsh .legend-dot { width: 8px; height: 8px; flex-shrink: 0; }
.br-dsh .legend-dot.dot-compute  { background: var(--br-dsh-orange); }
.br-dsh .legend-dot.dot-storage  { background: var(--br-dsh-acid); }
.br-dsh .legend-dot.dot-network  { background: var(--br-dsh-blue); }
.br-dsh .legend-dot.dot-reserved { background: #2a2c30; }
.br-dsh .legend-name { font-size: 10px; color: var(--br-dsh-cream); letter-spacing: 1px; }
.br-dsh .legend-pct {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
}
.br-dsh .legend-pct.pct-compute  { color: var(--br-dsh-orange); }
.br-dsh .legend-pct.pct-storage  { color: var(--br-dsh-acid); }
.br-dsh .legend-pct.pct-network  { color: var(--br-dsh-blue); }
.br-dsh .legend-pct.pct-reserved { color: #555; }

/* BOTTOM PANELS */
.br-dsh .bottom-center {
  border-right: 3px solid #2a2c30;
  padding: 24px;
}
.br-dsh .bottom-right {
  padding: 24px;
}

.br-dsh .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.br-dsh .tbl-title {
  font-size: 8px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #555;
}
.br-dsh .tbl-badge {
  background: var(--br-dsh-orange);
  color: var(--br-dsh-bg);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: 2px;
}
.br-dsh .events-table { width: 100%; border-collapse: collapse; }
.br-dsh .events-table th {
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #444;
  text-align: left;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid #222;
}
.br-dsh .events-table td {
  font-size: 10px;
  color: var(--br-dsh-cream);
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid #1a1a1e;
  vertical-align: middle;
}
.br-dsh .events-table td.imp-high { color: var(--br-dsh-red); }
.br-dsh .events-table td.imp-med  { color: var(--br-dsh-orange); }
.br-dsh .events-table td.imp-low  { color: var(--br-dsh-acid); }
.br-dsh .events-table td.imp-none { color: #555; }
.br-dsh .events-table td.imp-time { color: #444; }

.br-dsh .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.br-dsh .status-dot.green { background: var(--br-dsh-acid); }
.br-dsh .status-dot.orange { background: var(--br-dsh-orange); }
.br-dsh .status-dot.red { background: var(--br-dsh-red); }

/* Active targets */
.br-dsh .targets { display: flex; flex-direction: column; gap: 12px; }
.br-dsh .target {
  border: 1px solid #2a2c30;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.br-dsh .target.active-border { border-color: var(--br-dsh-acid); }
.br-dsh .target-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.br-dsh .target-name { font-size: 11px; color: var(--br-dsh-white); letter-spacing: 1px; }
.br-dsh .target-id { font-size: 9px; color: #444; letter-spacing: 2px; }
.br-dsh .target-progress {
  height: 3px;
  background: #222;
  position: relative;
  margin-bottom: 8px;
}
.br-dsh .target-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--br-dsh-acid);
}
.br-dsh .target-fill.fill-orange { background: var(--br-dsh-orange); }
.br-dsh .target-bottom {
  display: flex;
  justify-content: space-between;
}
.br-dsh .target-stat { font-size: 9px; color: #555; letter-spacing: 1px; }
.br-dsh .target-stat strong { color: var(--br-dsh-cream); }

@media (max-width: 880px) {
  .br-dsh .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .br-dsh .left-col {
    grid-row: auto;
    border-right: none;
    border-bottom: 3px solid #2a2c30;
  }
  .br-dsh .top-center,
  .br-dsh .bottom-center {
    border-right: none;
  }
  .br-dsh .number-row { grid-template-columns: 1fr 1fr; }
  .br-dsh .num-cell:nth-child(2n) { border-right: none; }
  .br-dsh .num-cell:nth-child(-n+2) { border-bottom: var(--br-dsh-border); }
}

@media (prefers-reduced-motion: reduce) {
  .br-dsh .sys-label::before { animation: none; }
  .br-dsh .bar-fill { transition: none; }
}

More from 8 CSS Brutalist Designs

Product CardsIndie SaaS PricingLong Read EditorialStreetwear CatalogForm ElementsSelected Work GridWindows 95 Desktop
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →