ind-ds
A design system for industrial HMI / SCADA interfaces
Mainstream design systems overlook the needs of industrial control. ind-ds fills that gap.
The context
Mainstream design systems ship no `state="fault"`, no ISA-18.2 alarm priorities, no tabular figures by default, no dense 2px-stepped spacing, and no runtime high-contrast mode for control rooms. I built ind-ds to cover exactly that ground: components designed for industrial supervision and control, not for a marketing landing page.
What the library ships
- 114 web components organised as atoms, molecules and organisms: indicators, equipment symbols, cards, control panels, dashboards and maintenance interfaces.
- Alarm priorities compliant with the ISA-18.2 standard.
- Design tokens generated with Style Dictionary 4, exported as CSS variables, ES modules, JSON and Dart.
- React and Vue wrappers generated automatically from the Stencil components.
- Real-time data binding through MQTT.js, with DOM binding helpers.
- Runtime high-contrast mode, designed for control-room conditions.
- Three deployment strategies: web components in the browser, a WebView shell inside a native app, or token-only export for a fully native implementation.
- Storybook 9 playground with accessibility tooling and HMI viewports.
My role
A personal project: design, architecture and full implementation. A pnpm + Turborepo monorepo, packages published under the @ind-ds npm scope, and accessibility treated as a design constraint rather than an afterthought.
Technologies
- Stencil 4
- Web Components
- Style Dictionary 4
- Storybook 9
- MQTT.js
- Turborepo
- pnpm