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 nowOrder #4821 mismatchLate by 2 h
Up nextEscalation thread replyLate 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 nowOrder #4821 mismatchLate by 2 h
Up nextEscalation thread replyLate 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 nowOrder #4821 mismatchLate by 2 h
Up nextEscalation thread replyLate 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.

Order #4821 payment mismatch
Label printer offline
Escalation thread reply
Rush order #4796

…

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

Order #4821 mismatch
Label printer offline at Pack 7Blocks 140 orders for the UPS 11:30 truck
Escalation thread reply
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 the Pack 7 printer because it is already 2 hours late and a failed payment is holding 24 orders at pack (64 to 62).

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 the Pack 7 printer because it is already 2 hours late and a failed payment is holding 24 orders at pack (64 to 62).

Manager · who is this?

Senior outbound exceptions coordinator, cross-dock and returns