The TigerSystem material-swatch convention, running. Every case of the decision ladder, on every box shape a real interface uses — because the rule has to survive a circle, a square, a banner and a clipped fill bar alike. Pick a colour and watch all five follow. The green line is the exact CSS produced; check your own implementation against it.