Design System · Strato
A system that says what it refuses
Most design systems document what to build. The interesting half of this one is what it will not allow — because on a shop floor a colour used decoratively is a colour that has stopped meaning anything.
01
The status layer is sacred
Five states, one meaning each, and saturated colour is allowed nowhere else. A plant screen is read at a glance by someone who is not looking for subtlety, so a hue that means “running” in one place and “positive” in another is not a style inconsistency — it is a misread machine.
- --run Running · healthy green ~152° solid, soft glow
- --idle Idle · standby · starved amber ~82° solid
- --warn Alarm severity: warning amber-orange ~65° solid
- --fault Faulted · critical · down red ~27° solid, glow
- --offline Offline · no signal slate ~256° HOLLOW ring
Offline is a hollow ring, not a grey dot. That is the rule “colour-only status has failed” made literal: the one state that means I cannot tell you anything is the one you can identify with the colour removed entirely. Every other state carries a label beside it for the same reason.
02
The primary action is deliberately not a status colour
The interactive accent is a cool azure, chosen because no machine state is that hue. Buttons, links and focus rings sit at ~248°, well clear of the green at 152° and the red at 27°.
This is a safety constraint wearing the costume of a brand decision. If the primary button shared a hue with “running” or “fault”, an operator scanning for state would keep catching on controls — and a control that reads as a status is worse than an ugly one. The AI layer takes a violet at ~292°, equally clear of the status band, for the same reason.
Status band ← | → interaction. Nothing crosses.
03
Two themes, because the floor is not an office
Dark is the default and light is the shop-floor theme — not a preference toggle but a response to where the screen is standing. Both are authored in OKLCH so the ramps stay perceptually even and contrast is predictable rather than eyeballed, and every status hue is re-derived per theme rather than reused: --fault is 0.660 0.205 27 on dark and 0.540 0.215 27 on light, because the same red against white is not the same red.
04
What it refuses
Every system has a component list. This one has a list of things that are not allowed, and it is the more useful half. These are written as match-and-refuse: if you are about to write one, restructure instead.
-
Status colour as decoration
Green, amber and red only ever mean run, caution and fault. No “green because it’s positive”, no red dividers.
-
Colour-only status
Any state that cannot be read in greyscale has failed. Always colour plus shape plus label.
-
The hero-metric template
Giant gradient number, three supporting stats, a sparkle. KPIs here are dense instruments with units, deltas and live context — not a marketing stat block.
-
Faking liveness
Never animate or pulse a value that is stale, or a machine that is offline. Dishonesty about state is the one unforgivable failure.
-
Decorative motion
No animation that does not convey state. No looping ambient effects, no page-load sequences.
-
Cyberpunk cosplay
No neon on pure black, no scanlines, no monospace-everything. Mono is for numbers; the slate is deep but it is not black.
-
Side-stripe borders
No coloured left border thicker than a hairline on cards, alerts or rows. Full borders, weak-tint backgrounds, a leading status dot, or nothing.
-
Gradient text
Never. Emphasis comes from weight, size and colour.
-
Glassmorphism as default
One justified use — the sticky top bar over scrolling content. Never on cards.
-
Modal-first
Exhaust inline and progressive drill-down before reaching for a modal.
05
The test the whole thing has to pass
Would an operator fluent in real machine HMIs and a manager fluent in Linear or Datadog both sit down and trust this in the first second? Status unambiguous, numbers precise, the exception obvious — or do they pause at something subtly off?
If it could be mistaken for a generic admin template, a marketing analytics page, or hacker-aesthetic cosplay, it has failed.
Specimen sheet, rebuilt in static HTML. Strato itself is React; this site ships no client framework, so nothing here is the running component — but every value is transcribed from its tokens rather than approximated. The product is at strato-cnc.netlify.app ↗.