Product interface · self-initiated

Halyard

A release gate for teams that deploy several times a day. Nothing ships until four checks agree. The interface exists to answer one question fast: what is stopping this release, and can I clear it myself?

Client
Fictional, self-initiated
Sector
Developer tooling
Scope
Working interface, not a spec
Method
Neubrutalist shell, technical furniture
Built
Plain HTML, CSS and JS
Build 4.812 R. Okonjo

Releases

01

Colour carries state

The accent and the status colours are different jobs. Violet is the brand and marks the one action worth taking. The other four say only what a thing is doing.

Violet#6B4BFFBrand, and the primary action on a screen. Never a status.
Lime#C8FF2EPassed. A gate that agreed, or a release that is live.
Amber#FFB300Working or waiting. Something is happening without you.
Red#FF3B30Blocked. Someone has to do something before this moves.
Ink#131311Every border and every shadow. Three pixels, never blurred.
02

Rules that keep it honest

Neubrutalism gets loud fast, and loud interfaces stop being usable at about the third accent. These four are what hold it back.

State is never colour alone Every status has a word beside the swatch. Around one in twelve men has a colour vision deficiency, and the word is what they read instead of the hue.
Two depths, never three Six pixels for a surface, four for a control, zero blur. A third depth turns the hierarchy into a guess.
No decorative borders A border means this thing is a separate surface. Boxing a paragraph for emphasis spends the loudest device in the system on nothing.
No second accent Violet marks the one action worth taking on a screen. Two accents means the screen has no opinion about what to do next.