systems
Component anatomy
A labelled breakdown of a component's parts – container, label, icon slot, content area – documenting what each part is for and how it can vary.
Take any component apart and the same handful of roles repeats at every scale: something that holds it together (container), something that says what it is (label), a small picture reinforcing it (icon), and the content or input it wraps. Good design-system documentation leads with this diagram before the usage rules, because implementation questions get answered by a diagram faster than by prose.
The practical payoff is precision when you’re asking for changes. “Can this button’s icon slot hold a status dot instead of an icon?” is answerable in one look at the anatomy; “can I add a dot to this button?” isn’t, because it doesn’t say where on the component’s structure the dot goes. Knowing the part names is what upgrades a vague request into an executable one – to a designer or to an AI agent.