Build component library

Create the component library for our product team so designers and engineers use the same primitives. Include buttons, inputs, dropdowns, modals, cards, and spacing tokens. Define states for hover, focus, disabled, error, and loading. Add color and typography tokens, and a short notes page explaining when to use each component. Tag components for developer export. Completion by Wednesday noon.

Before I call this a usable component library, make it easy for designers to find the right control: put a usage example up top for each component, add a short do/don't note where common mistakes happen, surface variant props (size, tone) in a single grid, and flag anything missing accessibility attributes that would block developer implementation.

Engineers pushed back: our buttons show five visual variants across screens. I can’t tell which are intended. Diagnose why our library let this happen and recommend the single immediate fix to stabilize button usage across the product—what change should I make to the library and how to enforce it in the next sprint.

Every month new components show up that are slight copies of existing ones and engineers ignore the library. Where are we leaking the work and what habit should I break? Recommend one governance rule and one lightweight review practice that will stop duplication and make the library the source of truth.