Grid North — carbon-design — the record

Distribution substation load operations. Thirty-two feeders on three transformer banks at Northgate 138/12.47 kV, live, with a replay of the 03:41 RTU outage.

Direction

• Archetype — Index. The table takes the page width with nothing drawn around it; a card would take width from the only thing that needs it.
• Stance — Table-first. Sparklines sit in the rows; no hero chart competes with them.
• Density — Condensed. 32px rows and 32px controls, everything on Carbon's 8px mini-unit (--cds-spacing-*).
• The one bold thing — The numbers. IBM Plex Mono, tabular-nums, right-aligned with fixed decimal places so the decimals align down the column, and three visually distinct marks for a measured zero (0.00, text-secondary), a value that does not apply (an em dash, text-helper) and no reading at all (a dashed rule, text-helper). Load is carried by bar length; colour only confirms, and the surplus at a wide viewport goes to that bar rather than being spread across the gaps between columns. The three marks are three sort outcomes as well as three glyphs: a measured zero sorts as zero, while no reading and does-not-apply hold the bottom whichever way a column is pointed.

What each surface answers

Every column that carries a comparable value sorts, in both feeds; the caret is drawn only for the column that is actually sorted, and a third click on one returns the table to feeder order. The Polled column is the last second each RTU answered on, which is why it is the only column with a figure in it during the outage: the eleven feeders on T3 read 03:41, and the twenty-one that answer read 03:51. The notification that names those eleven carries the control that shows them.

Generator

The token file was produced by, verbatim:

carbon_tokens.py --all-themes

--all-themes emits colour only. The type sets, the 8px spacing scale and the motion tokens in the page's own <style> were taken verbatim from the same generator:

carbon_tokens.py --type
carbon_tokens.py --layout
carbon_tokens.py --motion

The theme audit quoted in the report is:

carbon_tokens.py --contrast --theme g100

Shipped theme: g100. The header control offers g10, and a reader whose system asks for light and who has not chosen gets g10; with no script at all the page renders the generated :root theme, which is Carbon white.

Measured contrast

Measured with contrast.py.

APCA reads the first pair at Lc −97.6 and still asks for 16px at weight 400. Carbon sets dense UI text at 14px ($body-compact-01); the system wins, and the disagreement is recorded on the page.

Deviations from CONTRACT.md

1. §1, tokens the generator did not emit. --all-themes carries colour alone, so the spacing, size, motion and type-set values are held in the page's own :root. They are the verbatim output of --layout, --motion and --type of the same generator, not hand-typed, and tokens.css is untouched.
2. §5, the theme attribute. The generated file switches on data-carbon-theme and its dark media query is guarded as :root:not([data-carbon-theme]), not data-theme. The page uses Carbon's own attribute so the generated file stays authoritative; the in-page control wins in both directions and the OS preference is honoured on first paint by a blocking <head> script.
3. §4, no raw colour anywhere — including the favicon. The favicon is an inline data: SVG drawn in currentColor under color-scheme: light dark, so it carries no hex. No apple-touch-icon and no manifest ship, because both need a second file and §2 asks for one.

Kept findings

• slop_scan side-tab (warn) — the 3px stripe on the inline notification is Carbon's own inline-notification anatomy; the icon and the first sentence carry the same fact, so colour never travels alone.
• craft_lint no-primary-action ×2 (warn) — the two header icon buttons and the two pagination arrows are genuine peers, which craft.md names as the exception to the rule.
• copy_lint long-paragraph ×21 (info) — table rows read as prose blocks by the scanner.