Building a scalable Design System
area
Design System
responsibilities
- Delivery of the Design System
- Project Documentation
- Parallel work with developers
year
2023-2024
tools
Figma, Storybook
Challenges
In the complex scenario of digital product development, ensuring consistency and efficiency in delivery is crucial. To face this challenge and start your product on the right foot, ZeroZ chose to create a comprehensive Design System.
🏁
Start from absolute zero
ZeroZ was in its early stages of creation, at the beginning of developing its product for monitoring solutions.
👨🏻💻
Ensure quality and usability
Not only to provide a visually appealing experience but also to have an accessible and easy-to-use Design System.
🎨
Visual identity for the product
Establish a visual identity for the Design System, with a special focus on scalability for a white label model.
📝
Documentation for consistency
Develop comprehensive documentation with the aim of enabling future teams to use the library consistently and error-free.
Results
28
color styles created to bring life and harmony to the system
+40
components developed for the Design System library
152
primitive tokens to ensure scalability and consistency
Tests, drafts, and a lot of exploration
We work through references, research, and sketches, conducting color tests to ensure functionality and accessibility.
We also analyze the components to ensure harmony within the library, all this to apply quality and consistency in the design.
Tokens as the foundation of the entire project
The essential basis of the design system lies in the tokens, which serve as basic building blocks. These tokens start with the primitives, which are essentially the base values.
The primitive tokens are used to feed the semantic tokens. In this way, the semantic tokens play the role of feeding the components of the Design System, giving meaning and consistency.
See alongside how the tokens work, forming the foundation of the system, facilitating the creation and maintenance of components over time.
Component library in Figma
Each component created in Figma has been carefully developed with a focus on scalability and fidelity, including detailed considerations for states, variations, and individual types.
The library has been designed to be simple and practical, reflecting the central idea of being easily accessible and used by anyone.
Accessibility in the components
All components have been designed to be accessible via keyboard, using the focus mode of CSS itself.
The colors have been carefully chosen to ensure they meet the minimum contrast criteria in all usage scenarios. The text, for example, follows a contrast ratio between foreground and background of at least 4.5:1 (AA).
Moreover, the size of interactive areas, whether by click or touch, has been configured to have at least 24x24 pixels of spacing (AA), promoting an enhanced user experience.
Building flexible components with 'slots'
By employing "slot components" in all elements that can and should be replaced, such as tables and columns, we ensure that it is not necessary to resort to the common "detach" in the components.
This approach preserves fidelity in all instances, providing flexibility in the replacement process without compromising the integrity of the elements.
Aiming for scalability
The Design System was built to integrate and adapt to various themes and modes. Initially, the light and dark modes were developed as default settings, but they can easily be customized.
As for the theme, the project was structured to support future expansions, such as the introduction of a new brand.
This flexibility becomes especially valuable for ZeroZ, anticipating possible growth scenarios, including the transition to a whitelabel model. This ensures an efficient adaptation capability and prepares the system for evolutions in brand identity.
Components ready
for prototypes
All components have been prototyped with animations built into their states.
With this initial setup, creating high-fidelity prototypes becomes easier and quicker, as the foundation is ready, contributing to speed and efficiency in development.
Documentação completa para desenvolvedores e designers
It is crucial to recognize that, in order to establish an efficient organization, documentation plays a fundamental role. Without it, all the effort invested in creating the Design System may be compromised.
In this sense, all components and tokens have been added in Figma and also in Storybook, including their variations, types, states, and other specifications. This measure not only preserves the integrity of the Design System but also provides a comprehensive reference for the team, ensuring consistency and full understanding of each element.
Templates as patterns
Specific templates have been created to accelerate the construction of applications and serve as consistent standards.
They encompass examples of pages, layouts, empty states, and more, providing a consistent and efficient foundation.
Retrospective
Building a Design System, the "product" of the product, is not easy at all and requires a lot of collaboration, between design and code and between people.
Without a doubt, this was the project where I dedicated myself the most to learning and understanding about the area of development. This is extremely important for me to continue working at a high level.
As next steps, I will continue to be committed to ensuring the correct implementation of the components. I will also continue to work closely with the development team to further improve the project documentation.
