# Grayscale with alerts > If everything is colored, nothing is; normal should be gray. - Canonical: https://patterns.konigi.com/dashboards/grayscale-with-alerts - Group: Color - Level: context - Status: published - Updated: September 10, 2026 - Also called: ISA-101, muted-until-abnormal, high-performance HMI --- ## Problem The dashboard has eleven colours on it and all of them mean something. By the third week nobody sees any of them, and the one that indicates a genuine fault has the same visual weight as the brand-blue line that has been flat since launch. ## Solution Draw the normal state in greys. Reserve colour for abnormal, and make saturation carry severity. This is the core of ISA-101 and the high-performance HMI school it comes from, developed for control rooms where an operator watches a screen for eight hours and has to notice the one thing that changed. Base graphics in greys and neutrals; roughly nine-tenths of the screen neutral; bright colour reserved for abnormal conditions and active alarms; muted or low-intensity colour for early-stage states and full saturation held back for the severe ones. The consequence is what makes it worth adopting outside process control: anything coloured on the screen is by definition something wrong, so it gets found without being searched for. The operator is not scanning. They are waiting for colour to appear, which is a far cheaper cognitive task and one that survives fatigue. The discipline is harder than the rule. Every team wants their series to be their colour, every chart library ships a categorical palette on by default, and brand guidelines arrive wanting the accent on everything. Each of those is individually reasonable and collectively fatal, because the budget being spent is attention, and it is fixed. WCAG's use-of-colour requirement pushes the same direction from a different angle: colour must not be the only means of conveying information. A page that is grey until something is wrong still needs the wrong thing to be labelled, positioned or shaped differently, not merely tinted. ## Use when The screen is monitored continuously rather than read occasionally, the normal state is the common state, and noticing change matters more than reading values. Control rooms, NOC walls, on-call dashboards. ## Don't use when The page is analytical and every series is equally interesting. Exploration needs categorical distinction, and a grey exploratory chart is just hard to read. Comparison work wants a palette; monitoring wants a resting state. ## Trade-offs Grey pages look unfinished to stakeholders, and defending one takes political capital that gets spent repeatedly rather than once. Categorical distinction genuinely suffers: greyscale supports perhaps four distinguishable series before viewers give up on the legend. The scheme rests entirely on thresholds being right, because the alerting colour only appears when a rule fires, so a badly-set rule produces a page that is calm and wrong. And in a genuinely bad incident everything colours at once, which is exactly when the scheme provides the least discrimination. ## Checklist - What fraction of a healthy screen carries colour, and is it close to none? - Does saturation encode severity, or is every abnormal state equally loud? - Is anything coloured for a reason other than abnormality—branding, series identity, decoration? - Does the abnormal state have a non-colour signal too, per WCAG? - Which thresholds turn colour on, and when were they last reviewed? - What does the page look like when six things are wrong at once? - Do greys carry enough separation to still show structure and hierarchy? - Does the scheme survive a projector, a cheap wall TV, and a colourblind viewer? - Is there a categorical palette hiding in a chart library default somewhere on this page? - Who has authority to say no to the next request for a coloured element? ## Compare **Industrial HMI software** built to ISA-101 is where the discipline is enforced rather than encouraged, because a control room has a regulator and a fatigued operator and neither tolerates decoration. **Netdata** goes the opposite way by default, colouring densely across hundreds of charts, which suits a tool used for investigation rather than for standing watch. **Grafana** ships categorical palettes on by default and puts the whole burden on the dashboard author, so the muted approach is achievable and almost never the path of least resistance. **Datadog** sits in between with monitor status driving colour on status-oriented views while general dashboards stay fully coloured, which is coherent per-view and inconsistent across a product someone uses all day. ## Related Semantic status color defines what the alerting colours mean once they appear. Dense small-multiple layout is the layout that most needs this discipline to work at all. Categorical series palette is the opposing requirement and the entry that covers when distinction wins. Process mimic is the display type this convention was written for. Wallboard mode is the other context where a calm resting state matters most. ## Examples ### Ignition (Inductive Automation) A public SCADA demo running live simulated plant data, with a runtime toggle between simple and photorealistic pump and pipe rendering—the ISA-101 argument as a setting. **Water Treatment / Overview** — captured September 11, 2026, Ignition Perspective public demo, Water Treatment (signed out). operational, dense density, dark theme, desktop-web. A real process mimic with live simulated plant data, and it settles two arguments from the entry. The first: the layout is topologically faithful and geometrically loose. Raw water pumps at the left, flash mixers, seven basins, nine filters, tanks, high service pumps, clearwell—the flow reads left to right because that is the process order, not because that is where the equipment stands. The second is where it departs from ISA-101, and the departure is deliberate. Green here means running. Every basin, every flocculator, every filter that is working is green, so most of the screen is coloured and the two stopped filters are the grey ones. That inverts the high-performance HMI rule—colour reserved for abnormal—and spends the budget on the ninety percent case. It is still readable, because the abnormal state is the absence of a colour everything else has, but it only works while "stopped" is rare. The pipe colours are a third channel again, encoding which fluid is in them rather than any state at all. Hotspots in this capture: - [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — Flat two-dimensional shapes, values placed where the instrument is, and the flow ordered by process rather than by geography. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) *(this pattern)* — Green for running, on every unit. The opposite of grey-at-rest, and it works only while stopped is the rare case. - [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout) — Nine filters, identical four-value panels. Reading one teaches you all nine, and the two stopped ones are found by shape. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Stopped is grey and says Stopped. Colour and word together, so the state survives a monochrome screen. - [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) — Tank level as a filled vertical scale—a bounded range where the endpoints are the physical tank, which is the case the gauge survives. - [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — Pump and pipe appearance switchable between simple and photorealistic. The whole ISA-101 argument, shipped as a setting. ### Grafana (Grafana Labs) The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. **Examples / Stats, light theme** — captured September 10, 2026, Grafana Play (signed out; ?theme=light). analytical, dense density, light theme, desktop-web. The same dashboard as the dark Stats capture, same data, same palette, one URL parameter apart. Put them side by side and the palette turns out to have been designed on charcoal. On the dark version the value colours carry because they are brighter than the ground—reds, oranges and greens against near-black. Here they have to carry by being darker than the ground instead, and the same hues arrive as pale pink and pale salmon. Look at the Color value panel: six numbers at 30-odd pixels, and 93.5, 88.7, 93.4, 81.6, 77.6 and 87.9 are all light pink on white. The column on the right is worse, because 63.8 GB lands on pale orange. Nothing about the theme switch is broken, and nothing was chosen for this ground. That's the whole argument for designing the dark case first and deriving the other one: the constrained case should set the lightness range, and here the unconstrained one did. Hotspots in this capture: - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — The same six values as the dark capture. Bright-on-charcoal became pale-on-white, and the contrast went with it. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — 63.8 GB in pale orange on white. On the dark version the identical colour was the readable one. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Whole-tile fills survive the switch, because the text sits on the colour rather than being the colour. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) *(this pattern)* — Ninety green rectangles, identical in both themes. Nothing here can read as abnormal on either ground. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — The area fills under each value drop to near-white here, so the shape that was legible on charcoal is a smudge. **Examples / Stats** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, dense density, dark theme, desktop-web. A showcase rather than a working dashboard, which is what makes it useful: it is Grafana demonstrating every visual option the stat panel has, in one place, with nothing else competing. Two things are worth reading it for. The first is that across roughly sixty tiles here, not one carries a comparison. Every option on display is about how the number looks—background colour, value colour, orientation, text mode, grid packing—and none is about what the number should be measured against. The panel type that most needs a delta and a base is being shown off without either. The second is the colour. Every single tile on this page is coloured, and the "No text" panel is ninety-odd green rectangles carrying no label and no value at all, which is colour as the sole carrier of meaning at its purest. Both of those are reasonable for a catalogue of options and neither survives being copied onto a real page. Hotspots in this capture: - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Label, value, unit and a sparkline behind it. No delta, no base, no window. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — The dark half of the pair. The same six values in the light capture arrive as pale pink on white. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — A column of them, each scaled to its own series, which is the comparison Tufte warns the arrangement invites. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Whole-tile background colour: the loudest channel available, spent on all six. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) *(this pattern)* — Seven rows, seven different colours, no resting state. Nothing here can read as abnormal. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Thirty numbers with no labels—the value with nothing attached to it. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — No text at all. Colour is the only carrier, which is the WCAG failure stated as a feature. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Six tiles sharing one anatomy, which is the arrangement that reads as a row rather than as six things. ## Related patterns - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — State has to be readable before the number is. - [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout) — An expert wants everything on one screen and will trade legibility for it. - [Categorical series palette](https://patterns.konigi.com/dashboards/categorical-series-palette) — Twelve services on one chart need twelve colors a person can tell apart. - [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — An operator needs live values drawn on the physical layout of the plant. - [Wallboard mode](https://patterns.konigi.com/dashboards/wallboard-mode) — The dashboard is on a wall, ten feet away, with no mouse. ## Sources - [ISA, ISA-101 Human-Machine Interfaces standard committee](https://www.isa.org/standards-and-publications/isa-standards/isa-standards-committees/isa101) - [HMI Library, ISA-101 HMI Design Standard](https://hmilibrary.com/standards/isa-101) - [W3C, WCAG 2.2—Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.