What is a design system? In any case, it is not only a set of UI elements, but also includes, for example, the tone and voice of your design. In addition, the wording could also be part of the design system. For example, is it documented whether it means remove, delete or discard on a button in order to get rid something?
What does a Design System include?
Style guide — It’s the basis of a design system and contains the smallest parts that are needed in almost all further elements of the design system.
- Tone and voice
- Writing style
- Trademarks and logos
Component Library — This is the heart of the design system and probably requires the most attention over time. All individual elements of the user interfaces are documented here, including all their states and variants.
- Input field variants as text input or date picker
- Tool tips
- Filter components like radio buttons, check boxes or sliders
Pattern Library — In contrast to the component library, in which individual UI elements are documented, the pattern library contains larger “components”, in which several components are combined and shows how they can work together in the interface.
- Bigger groups like login or sign up pages