# Design System

The Dynamic UI design system corresponds to the graphic and user experience definitions used in all the Widgets that are part of the Dynamic initiative.

It is a modular and extensible design system, which allows not only to create a common base for the development of current and future Widgets that Modyo customers and partners want to implement.

This design system is a constantly evolving initiative that clearly intends to allow the community of customers and partners to propose improvements that can be incorporated into a continuous release cycle over time. That's what versioning is for, so that users always know what version they are using and understand the changes involved in changing versions.

Within Modyo, it works so that all areas that work with initiatives that fall within the Dynamic concept are, avoiding the proliferation of parallel standards that do not comply with the definitions and principles already established.

The design system is controlled by the product area, but the other areas of Modyo participate transversely in its definition. There is a committee composed of leaders and experts from different areas who are responsible for approving the modifications and maintaining the conceptual integrity of the initiative.

The design system has two implementations, the first of them in Figma, and the second in code, following the Stencil Web Components model, always having consistency as a priority between both implementations.

The design system is based on recognized industry standards, with a strong focus on generating intuitive, accessible, omnichannel, user experiences compatible with mobile and desktop devices.

In addition, it is a customizable design system, which allows a customer or partner to adapt it to the desired corporate image, being able to alter key elements such as colors, fonts, and iconographies present in it, without jeopardizing the integrity of the components. If a customer or partner wants to make significant changes to the elements, Modyo offers access to repositories and design templates so that they serve as a starting point in development, leaving the partner or client in complete control.

# Considerations

When using the Dynamic UI design system, it's important to consider the following:

  • Understand the limitations and scope of the design system.

  • Adapt the design system to the needs of the project: this may include adding new components or modifying existing ones.

  • Avoid the excessive use of predesigned component, it can lead to a generic and bland appearance for the web application. It is important to use the components strategically and customize them to fit the brand and needs of the project.

  • Maintain visual consistency: use it consistently throughout the web application to ensure a consistent user experience.

  • Perform usability tests evaluating the effectiveness of the design system in the user experience. This will help identify areas for improvement and ensure that the design system is working optimally.

Last Updated: 5/5/2023,