Kinetic Kit explores design-system documentation that connects tokens, components and the decisions behind their use.
The problem to solve
A screenshot shows a component at one moment. It does not explain its states, accessibility requirements or limits.
The proposed approach
Document behaviour beside appearance. Link a component to its tokens and record a rationale when the pattern changes.
Working with the example
Button / primary
The sample records “Focus state” as context and “Specified” as its state. In a real design system management process, the source and responsible role should be checked before acting on that state.
Input / text
The sample records “Error state” as context and “Documented” as its state. In a real design system management process, the source and responsible role should be checked before acting on that state.
Dialog / modal
The sample records “Keyboard flow” as context and “Reviewed” as its state. In a real design system management process, the source and responsible role should be checked before acting on that state.
This preview shows the product direction. It has no account system, integrations or live record storage.
Sample workspace ↗