01
Original Guide
Labels beside the objects
Subject border
Subject
Comparison border
Comparison
The original Guide has no standalone legend; its small labels identify individual specimens directly.
Design system · Component review 09
Demo legend
A legend explains recurring color roles after the specimen. The adopted shared legend keeps the Guide’s plain text character and gives each keyed color a more deliberate mark and readable label.
Approved direction: the shared
DemoLegend uses the refined key. The original Guide uses attached labels instead of a separate legend and remains unchanged.Border color comparison
The subject and comparison objects are the same in each treatment. The key lives outside their layout, so it cannot change the border lesson.
Actual Reference use
The border-color reference compares the same border width and style in blue and violet.
Set border color
Border color changes paint independently of width and style. Transparent edges still occupy their used border width.
The Reference retains its own caption and code comments. A legend is useful when a scene repeats these roles, and its text must carry the meaning without relying on color alone.