Before adding a new component to the design system consider the definition of the component.

  • Components are widely used. When adding a new component make sure it's used across designs or it will be in the future.

  • A component should solve as few problems as possible. The simplicity of a component makes it reusable and easy to maintain. Each component owns a specific problem and because of that we can easily test and find issues.

  • Components should be constructed with the system variables. The system variables (or styles) contain rules about variables like typography and color that result in a specific visual language. System variables tie components together visually and make them feel like part of the same family.

  • Components are layout agnostic. A component can't predict where it will be used so it should be flexible to adapt to different layouts.

  • Components are content agnostic. Some components contain text and it can be different depending on the context. These components also can be translated into other languages.