Skip to main content

Data visualisation

  • Grey is the main colour. Context series use mm-text-3 or mm-rule. The one series that matters uses mm-primary or mm-info, and that is the only colour on the chart.
  • Label lines and bars directly at their ends in 13px mono. Avoid legends.
  • Range-frame axes span only the data's minimum to maximum, with endpoint values labelled. At most three 1px dotted gridlines, outward 4px ticks, no chart box.
  • Bars have square or 1px tops. Area fills are a flat 8–12% tint, never a gradient. Hatch estimated or stale data.
  • Sparklines are word-sized (64×16) with the last point marked by a 3px dot and its value printed in mono beside it.
  • Annotate like a technical drawing: a 1px leader line with a dot terminal and a mono caption, and dimension brackets for time ranges such as an incident window.
  • Use small multiples for per-source or per-domain health, with a shared scale, laid out like map sheets and labelled with a sentence-case caption.
  • The signature chart is a contour or isoline density view (lineage density, query heat, usage) in mm-contour with 4–6 bands, the heaviest as an index contour in mm-contour-index.
  • Categorical status colours sit at similar lightness so no category shouts.
  • Structured values (metadata, JSON) use one text face and ink for every value; only the keys are mono, because people copy them. No colour by type. True and false read "Yes" and "No", a missing value reads "Not set", lists of plain values read inline, comma separated, and only objects fold open (clicking anywhere on the row). The raw JSON is one click away.
  • Tooltips are square-cornered and ink-filled (mm-tooltip), with mono key/value pairs and tabular numbers, no blur, shown instantly.