A calm dashboard: stat cards that stay quiet

<div class="dash" role="img" aria-label="A concept dashboard with four stat cards and a weekly bar chart">
  <div class="dash-top"><div><p class="dash-hi">Good morning</p><p class="dash-sub">This week at a glance</p></div><span class="dash-chip">Concept</span></div>
  <div class="dash-grid">
    <div class="dash-card"><p class="dash-k">Visitors</p><p class="dash-v">2,418</p><p class="dash-d is-up">+12%</p>
      <svg class="dash-spark" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,22 14,19 28,21 42,14 56,16 70,9 84,11 100,4"/></svg></div>
    <div class="dash-card"><p class="dash-k">Sign ups</p><p class="dash-v">184</p><p class="dash-d is-up">+4%</p>
      <svg class="dash-spark" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,18 14,20 28,15 42,17 56,12 70,14 84,10 100,9"/></svg></div>
    <div class="dash-card"><p class="dash-k">Orders</p><p class="dash-v">96</p><p class="dash-d is-down">&minus;2%</p>
      <svg class="dash-spark" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,10 14,12 28,9 42,14 56,13 70,16 84,15 100,17"/></svg></div>
    <div class="dash-card"><p class="dash-k">Avg. session</p><p class="dash-v">3m 12s</p><p class="dash-d is-up">+9s</p>
      <svg class="dash-spark" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,20 14,17 28,18 42,13 56,15 70,11 84,12 100,8"/></svg></div>
  </div>
  <div class="dash-card dash-chart"><p class="dash-k">Visits by day</p>
    <div class="dash-bars"><span style="--h:46%"><b>M</b></span><span style="--h:62%"><b>T</b></span><span style="--h:58%"><b>W</b></span><span style="--h:74%"><b>T</b></span><span style="--h:88%"><b>F</b></span><span style="--h:40%"><b>S</b></span><span style="--h:34%"><b>S</b></span></div>
  </div>
</div>

:root {
  --dash-bg: #F6F4EF;
  --dash-card: #FFFFFF;
  --dash-ink: #1F2430;
  --dash-muted: #636B78;
  --dash-line: #E6E2DA;
  --dash-sage: #4E7A5B;
  --dash-blue: #7BA3C9;
  --dash-clay: #B4553A;
}
.dash {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--dash-bg);
  color: var(--dash-ink);
  font-family: 'Geist', system-ui, sans-serif;
}
.dash p { margin: 0; }
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-hi { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.dash-sub { font-size: .8125rem; color: var(--dash-muted); }
.dash-chip { padding: 4px 10px; border: 1px solid var(--dash-line); border-radius: 999px; font-size: .75rem; color: var(--dash-muted); background: var(--dash-card); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card {
  position: relative;
  padding: 14px;
  border: 1px solid var(--dash-line);
  border-radius: 14px;
  background: var(--dash-card);
  box-shadow: 0 1px 2px rgba(31, 36, 48, .04);
}
.dash-k { font-size: .75rem; color: var(--dash-muted); }
.dash-v { margin-top: 4px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dash-d { position: absolute; top: 14px; right: 14px; font-size: .75rem; font-weight: 600; }
.dash-d.is-up { color: var(--dash-sage); }
.dash-d.is-down { color: var(--dash-clay); }
.dash-spark { width: 100%; height: 28px; margin-top: 8px; overflow: visible; }
.dash-spark polyline { fill: none; stroke: var(--dash-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 10px; }
.dash-bars span { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--dash-blue); opacity: .85; }
.dash-bars span:nth-child(5) { background: var(--dash-sage); opacity: 1; }
.dash-bars b { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .6875rem; font-weight: 500; color: var(--dash-muted); }
.dash-chart { padding-bottom: 28px; }