Rules

Four rules carry this redesign. Each is drawn as a pair — the way Relay does it, and the way v2 did — with real components on both sides. Every one is enforced by a test, not by good intentions.

Rule 1

Loudness follows rank

The louder an object is, the higher the tier it belongs to. Only Act now carries a row tint, and no element in a lower tier may be more saturated than one in a higher tier.

Enforced by craft checks 6 and 8 · G5 the wire test

Do. Rank descends in lightness, chroma and weight together.

Act nowLabel printer offlineLate by 2 h
Up nextOrder 4821 mismatchLate by 2 h
When you canRush order 4796Late by 2 h
For your infoDock 3 camera moved

Don’t. Every tier tinted, and a solid red pill on the second tier.

Act nowLabel printer offlineLate by 2 h
Up nextOrder 4821 mismatchLate by 2 h
When you canRush order 4796Late by 2 h
For your infoDock 3 camera moved

Do. The grayscale test: take the hue away and the order is still there.

Act nowLabel printer offlineLate by 2 h
Up nextOrder 4821 mismatchLate by 2 h
When you canRush order 4796Late by 2 h
For your infoDock 3 camera moved

Wire is not a filter. It is light with every chroma channel multiplied by zero, so what is left is the lightness ladder, the weight, and the shape of the icon. If the ranking survives that, the ranking is real.

Rule 2

One height per row

Every row in a list is the same height, and anything that shares a row shares a height token and a vertical centre. Separators are inset shadows, never borders, so a separator cannot change a height.

Enforced by G2 size contract · craft checks 3 and 4

Do. Every row is --h-row. The action sits in a reserved track.

Label printer offline
Order 4821 payment mismatch
Reply to vendor
Rush order 4796

…

Don’t. Height follows content. A border, a wrapped line, two button sizes.

Label printer offline
Order 4821 payment mismatchHeld at pack, one order waiting on this
Reply to vendor
Rush order 4796Due tomorrow, nothing blocked

…

Rule 3

Colour only for priority and success

A saturated hue is allowed in exactly five places: tier foregrounds, the Act-now tint, the focus ring, the done check and its counter, and links in prose. Everything else is neutral — avatars, presence, load, progress, navigation.

Enforced by craft check 8 · unit gate on the chroma whitelist

Do. One tier signal, one success signal. Load is a number and a neutral bar.

Danielle ReyesShift lead7 of 8
Marcus OkaforPicker4 of 8
Done today: 6

Don’t. Hue on avatars, presence and load, and an accent on navigation.

Danielle ReyesShift lead7 of 8
Marcus OkaforPicker4 of 8
TeamActive nav item, filled with the accent

Rule 4

No truncation on the brief’s two questions

The worker’s question (what do I do first, and why) and the manager’s (who needs help, and who is who) are answered by text. An ellipsis in either is a failed answer. Roles wrap; the why line wraps.

Enforced by G9 copy · G3 no clipped text at six widths

Do. Both answers wrap onto as many lines as they need.

Worker · why is this first?

Ranks above Order 4821 and Order 4809 because it blocks 140 orders across two carriers and the printer has no manual fallback at Pack 7.

Manager · who is this?

Senior outbound exceptions coordinator, cross-dock and returns

Don’t. Both answers cut off with an ellipsis, one line each.

Worker · why is this first?

Ranks above Order 4821 and Order 4809 because it blocks 140 orders across two carriers and the printer has no manual fallback at Pack 7.

Manager · who is this?

Senior outbound exceptions coordinator, cross-dock and returns