SaaS · Dashboards
Deep-ink analytics overview: precise mono numerals, sparse SVG charts, a lime pulse for “live”, and an activity table that stays readable.
| Color | Hex | Use |
|---|---|---|
| bg | #0b0f14 | app background |
| panel | #11161d | cards · inputs |
| border | #1e2630 | card borders · gridlines |
| text | #e8edf2 | primary text |
| accent | #b8f15e | lime · series · up-deltas |
| teal | #4fd1c5 | improving metrics |
| Type | Face | Spec |
| numerals | mono | every number, tabular |
| KPI value | 23 / 700 | mono · −0.03em |
| labels | 10 / 600 | +0.1em · uppercase |
| Shape | Value | Use |
| radii | 10 / 8 / 6 | cards / inputs / logo |
| borders | 1px #1e2630 | no shadows anywhere |
| sidebar | 228px | panel-2 bg |
| kpis | 4-col · 14px gap | 2-col ≤1080px |
MISSION Precision analytics instrument. Dark ink, exact mono
numerals, sparse charts, lime pulse. No decoration.
TYPE Grotesk UI + mono numerals (tabular). KPI 23/700 −0.03em.
COLOR bg #0b0f14 · panel #11161d · border #1e2630
accent #b8f15e · teal #4fd1c5 · text #e8edf2
SHAPE 1px borders, radius 10, zero shadows. Sidebar 228px.
CHART SVG 720×220: dashed gridlines, lime 2026 series + grey 2025,
highlighted last point (r4 · 2px bg stroke)
DATA MRR $128,420 +12.4% · Users 84,210 +8.1% · Churn 1.9% −0.4pt
ARPU $52.00 +3.2% · 5-row activity table w/ status chips
FULL tokens, chart spec, do/don'ts & checklist →
ai-guide.md (copy button fetches the whole file)
<!-- excerpt — full file: reference.html (self-contained) -->
<div class="kpis">
<div class="kpi">
<div class="lbl">Monthly recurring revenue</div>
<div class="val">$128,420</div>
<div class="delta up">
<svg class="spark" viewBox="0 0 34 12">…</svg>
+12.4% <span>vs last month</span>
</div>
</div>
<!-- Active users · Churn · ARPU -->
</div>
<div class="panel">
<div class="panel-head">Revenue · net, all plans</div>
<div class="chart">
<svg viewBox="0 0 720 220">
<!-- dashed gridlines · grey 2025 + lime 2026 area -->
</svg>
</div>
</div>