# Line HMI design system

The visual standard for the plant's operator screens. It applies to every screen of a project: the window,
the navigation, each screen and each control. It changes how screens look, never what they show or do.

## Principles

- Dark frame, light work area: the header, the tab bar and the status bar are dark; screens are light.
- Colour carries meaning only: a zone's series colour, running (green), alarm (red). Everything else is ink,
  paper and greys.
- Square corners, 1 px rules, no gradients, no shadows, no glow. Nothing orange.
- Big numbers for live values, small capitals for labels.

## Colour tokens

| Token | Hex | Use |
|---|---|---|
| Night | `#0F0F0D` | header bar, status bar, primary (selected) buttons |
| Night 2 | `#1A1A17` | tab bar |
| Night rule | `#3A3934` | rules and dividers on night |
| On night | `#F2F0E9` | text on night |
| On night 2 | `#ABA89E` | secondary text on night, inactive tabs |
| Paper | `#F2F0E9` | screen background |
| Sheet | `#FAF9F5` | cards, panels, active tab, screen title row |
| Ink | `#161614` | primary text, card and control borders |
| Muted | `#4F4D46` | secondary text, grid headers |
| Faint | `#65625A` | captions, units |
| Grid | `#E3E0D6` | trend grid lines, table rules, card borders on paper |
| Row | `#F6F4EE` | alternate table rows |
| Running | `#1E7B3C` | running, ON, OK |
| Alarm | `#B42318` | alarm button and alarm states; pressed `#8E1B13` |

Series colours, one per zone, in zone order, used for the zone's stripe, its trend pens and its legend
entries, never for anything else: Z1 `#2A78D6`, Z2 `#13936A`, Z3 `#4A3AA7`, Z4 `#D0598A`, Z5 `#6B7A1F`,
Z6 `#8C4A9E`.

## Type

Three families, all in `fonts/` (SIL Open Font License). Install them in the project and use them by family
name.

| Role | Family | Size |
|---|---|---|
| Plant name, tab labels, screen titles, big values, button labels | Barlow Condensed SemiBold, capitals | titles 26, tabs 18, values 56 to 64, buttons 16 |
| Body text, table cells, values in sentences | Barlow (Regular, Medium) | 14 to 18 |
| Labels, captions, units, column headers, notes | Fragment Mono, capitals | 11 to 13 |

Labels in Fragment Mono may be bracketed: `[LIVE]`, `[LINE 2]`, `[TODAY]`.

## Window

- **Header bar** (night, about 80 px): a square plant mark and the plant name in Barlow Condensed capitals;
  under it the line and machine in Fragment Mono (`[LINE 2]  TUNNEL OVEN`). On the right: the operator, a
  night-rule divider, then the date and a live clock in Fragment Mono.
- **Tab bar** (night 2): one tab per screen, labels in Barlow Condensed capitals. The active tab is sheet with
  ink text; the others are on-night-2 text on night 2.
- **Status bar** (night, bottom): a running dot (running green) and the line state, product and run in
  Barlow Condensed capitals, separated by ` · `. On the right, the alarm button: alarm red fill, on-night
  text `ALARMS n`.

## Screens

- **Title row**: sheet band under the tabs, 1 px grid rule below. The screen title in Barlow Condensed
  capitals on the left; a Fragment Mono note on the right (`[LIVE]  UPDATED EVERY SECOND`).
- **Work area**: paper. Content sits in cards.
- **Card**: sheet fill, 1 px grid border, square corners, 24 px padding. A card's title is a Fragment Mono
  capital label.

## Components

- **Zone tile**: a card per zone, in a row. A 4 px stripe in the zone's series colour on its left edge. The
  label `Z1  ZONE TEMPERATURE` in Fragment Mono; the live value large in Barlow Condensed, its unit in
  Fragment Mono beside it; setpoint and output below in a row (`SP 425`, `OUT % 68`).
- **Value block**: a Fragment Mono label above, the value in Barlow Condensed below, the unit in Barlow.
- **Trend**: inside a card; title in Fragment Mono (`[ZONE TEMPERATURES]  LAST 15 MIN  ·  °F`). Each pen in
  its zone's series colour, 2 px. Grid lines in grid colour; axis text in Fragment Mono, muted.
- **Table** (data grid): header in Fragment Mono capitals, muted, on paper; cells in Barlow 14, ink;
  alternate rows in row colour; 1 px grid rules; no vertical lines inside.
- **Buttons**: secondary buttons are sheet with a 1 px ink border and ink Barlow Condensed capitals; the
  selected or primary choice is night with on-night text. Square corners.
- **Switch** (on/off): running green when on, with `ON` in on-night; sheet with an ink border and `OFF` when
  off.
- **Day card** (one per weekday, in a row): the day in Barlow Condensed capitals, its switch, the start time
  large in Barlow Condensed with a Fragment Mono label above, the step buttons as two square secondary
  buttons, and a muted line of Barlow at the bottom (`Ready by 04:45 AM`).
- **Alarm list**: a card; rows in Barlow, active alarms marked with the alarm red.

## What does not change

Restyling never removes or rebinds anything: every value, trend, table, button and command a screen has
keeps its binding and its action. New nodes (containers, cards, labels, styles, types) are fine. Values
already in the project (for example the plant name, operator, clock or line state) may be shown in the
header and status bar.