Capacity Threshold Progress Stats Block for React

Edit RESOURCES at the top of the file. Each row is a label, a used, a limit and a unit (an empty unit prints a bare ratio, 34 / 100). The percent, the weight, the "Near limit" mark and the heading's count are all computed from used and limit.

The length is always the rounded percent. The ink is separate. Under 70 it is the text colour at 50%. From 70 through 90, including 70 and 90 themselves, it is the text colour at 75%. Past 90 it is the text colour at full strength. In the sample, API CPU and worker CPU are light, Postgres disk and Redis memory are the middle weight, and egress and the queue are full.

The weight already says which tier a resource is in, and the words "Near limit" say which ones need a person. A red bar would be a second code, and it fails in a theme that doesn't use red that way. The only status colour is the destructive dot, and only on a resource past 90.

The dot means one thing: this resource is past 90. The key explains the three weights, so it uses the same three swatches as the bars and the words "Over 90, near limit". Putting a third dot in the key would look like a third alert. The heading's count and the two cells are the only places the status appears, and both are derived, so they can't disagree.

One column. Two columns start at md, so a small tablet stays stacked too. Six cells fill both layouts: three rows of two from md, six rows below it. The frame is inset from the rails, the cells share hairlines, and there is one radius around the group.

The header and the grid fade up once. The bars don't grow, and the weights don't fade in separately. With reduced motion the fade is off.