Scope

ANSI/ISA-101 covers the design, implementation, operation and maintenance of HMIs for process automation. Like ISA-18.2 it is largely a lifecycle standard: it asks an organisation to write an HMI philosophy and a style guide, and then to build displays that follow them.

A theme is not an HMI and cannot conform to ISA-101 on its own. The two Industrial themes provide a palette and a set of surfaces that are consistent with a high-performance HMI style guide, so that a display built on them starts from suitable defaults. Screen layout, display hierarchy and navigation are designed by the application, and most of ISA-101 concerns these.

The principle implemented by the themes

Colour carries meaning, so colour is used only where it has one. A traditional HMI draws equipment in saturated colours, which operators learn to ignore, and an abnormal condition then competes with a screen that is already full of red and green. A high-performance HMI is drawn in greys, and colour appears only where it carries information.

In smart.industrial.css and smart.industrial-dark.css this means:

  • The background is a mid grey and panels are near-white (near-black in the dark theme), which gives four distinct surface levels. The screen is grey but not grey-on-grey, because a dense screen has to remain readable under plant lighting.
  • Saturated colour is reserved for meaning. The strong colours in either theme are the alarm priorities (critical, warning, advisory), ok and unknown, the equipment states (running, stopped, manual, maintenance), the accent and focus colours, and the digits of the dark numeric readout; the surfaces and the text are greys.
  • The normal range of an instrument is neutral. Gauge and tank range bands are drawn as a thin arc at the edge of the scale instead of the wide default band, and the normal zone stays grey. An operator scanning a wall of instruments sees colour only where something needs attention.
  • No decorative effects. No bevels, gradients, glass effects or drop shadows are used as decoration. The one shadow in the palette separates a panel from the background.
  • Trend pens do not use alarm colours. The series palette (Smart.Industrial.palette, with a light and a dark ramp) is a separate, desaturated set of colours, so a line on a chart cannot be mistaken for a severity.

Readability and the palette

A colour chosen as a fill is usually not suitable as a text colour. Against the panel, the alarm fills measure 5.6:1 (critical), 3.1:1 (warning) and 1.75:1 (advisory) in the light theme, and 3.9:1, 7.0:1 and 10.1:1 in the dark theme. Several are below the 4.5:1 minimum for text that is read for a whole shift. The light theme's advisory yellow is also below the 3:1 that a graphical object needs against its background, so on a white panel an advisory band is hard to see on its own. It is kept that way on purpose: a yellow dark enough for 3:1 on white reads as olive or brown, close to the warning orange, and advisory and warning have to stay apart. The advisory range band of a gauge or a tank is drawn in that colour; where it matters, give the range a label or use the dark theme.

Both themes therefore have a second set of tokens, --smart-industrial-alarm-critical-text and the corresponding tokens for the other meanings, with the same meanings in colours chosen for legibility. A component that colours a row, a readout or a severity label uses these tokens. The measured worst case across the components is 4.65:1 on the light theme and 5.84:1 on the dark theme.

ISA-101 asks for legibility and for consistent colour coding. Meeting both requires two tokens per meaning.

Known limitations

  • The themes enforce nothing. They are CSS custom properties. An application that paints a pump bright green gets a bright green pump. ISA-101 conformance is a property of a display; the themes make the conforming choice the default.
  • No display hierarchy. The Level 1 to Level 4 display structure of ISA-101 (overview, unit, detail, diagnostic) is a design activity. The page templates in demos/page-templates/ are an example of a Level 2 unit display, not a framework for the hierarchy.
  • No HMI style guide or philosophy document. These are written by the organisation, and ISA-101 expects them to exist before displays are designed.
  • Two themes are included. Sites with an existing style guide need their own palette, and it has to be set in two places. The CSS tokens are the extension point for everything drawn with CSS. The components that draw on a canvas (the trend, strip chart, scope, spectrum, control chart, comparison chart, waveform, intensity and digital waveform graphs, Bode and polar plots and octave bands) take their pen and alarm colours from Smart.Industrial.palette, a set of colours in JavaScript whose alarm colours are the theme tokens' values (the light critical red is #c62828 in both), and some of their other colours from their own CSS variables or from values in their code. The palette does not read the stylesheet, so a site that changes the alarm tokens changes Smart.Industrial.palette.alarm and alarmDark to match.
  • The default (non-industrial) theme is not an HMI theme and makes no ISA-101 claim. It has three controls without a visible focus indicator; see the WCAG report.