Skip to system
07 / Data display

Numbers explain the choice

Best and Avoid guidance, match percentages and stat bars stay comparable through empty, maximum, unknown and long-label states.

5 resilience states
productionsrc/lib/pet-display.ts--stat-*--pet-accent--pet-glow

Decision data lab

Change the data condition. Geometry, labels and comparison order remain stable even when values disappear or copy grows.

Pet 09 / Stability mechanic

Otvertka-67

Product data explains why this companion fits the current task; it never relies on color alone.

Task match94%
Best

intermittent bugs / unstable builds

Avoid

blank-canvas ideation

Stability96
Focus88
Debug91

Comparison contract

The same hierarchy is shared by catalog cards, task cards and the Pet Inspector.

Best

One direct recommendation first; wrap naturally instead of truncating the decision.

Avoid

Use a second semantic label and restrained tone; never encode caution with red alone.

Comparable

Stats keep a 0–100 axis, stable order and numeric value next to the label.

Unknown

An em dash plus explicit unknown copy is different from a measured zero.

Boundary states

StateValueVisualRule
Zero0Empty track + 0Measured absence, not missing data
Maximum100Full track + 100No overflow beyond the rail
UnknownnullDashed rail + em dashAlways name the missing state
Long label2–3 linesTrack stays full widthCopy wraps above the rail
Match0–100 / unknownNumber + unitDo not show a percent sign for unknown