Home
DESIGN.mdStar on GitHub

Dashboard anything.
Observe everything.

The open observability platform. Unify metrics, logs, traces, and profiles — query, visualize, alert.

Colors
Brand
Surfaces
Visualization palette (fixed categorical order)
Thresholds
Typography
Poppins / 700
Display · 54px
Dashboard anything
Poppins--font-heading
Inter / 600
Panel title · 13px
CPU usage / Node Exporter
Inter--font-sans
Roboto Mono / 500
Stat value
63.4 %
Roboto Mono
Inter / 400
Body · 14px
Unify metrics, logs, traces, and profiles into a single pane of glass — then query and alert on any of it.
Inter
Roboto Mono / 400
Query · 13px
rate(http_requests_total[5m]) by (status)
PromQL
Signature · Dashboard
Node Exporter / Overview
10s
CPU Busy
63.4 %
▲ 4.1%
Memory
71.2 %
▲ 1.8%
Requests / sec
12.4 K
▲ 6.2%
p99 Latency
248 ms
▼ 12ms
CPU usage by mode
system user iowait
Disk I/O saturation
72%
Components
Buttons
Badges · states
● OK ● Pending ● Alerting No Data
Prometheus Loki Tempo
Query (input)
PromQL · code editor style
Radius · square by design
btn · 2
panel · 4
card · 8
Guardrails
Do
Keep panel chrome quiet — the visualization is the hero.
Use the fixed categorical palette so a series is the same color in every panel.
Color by threshold for state: green ok → yellow warning → red critical.
Use Roboto Mono for numbers, timestamps & queries; panel titles stay in Inter.
Don't
Recolor series arbitrarily or reuse one color for two series in a view.
Flood a dashboard with brand orange — it's the accent, not a data color (use #FF9830).
Add heavy shadows or big radii — Grafana is dense, square, and flat.
Let decoration compete with metrics; every pixel should carry signal.