Problem: Development and design timelines are too long.
During VT-Lab’s trajectory, there was a point when the speed of design and development did not meet the company’s needs.
After analyzing the causes, I decided to create a custom system that would ensure more efficient design and development times, aligned with the business objectives.
Platform System is a design system based on Figma and Bootstrap, created collaboratively with the Development, Business, and Design teams by listening to their needs and challenges.
The system is user-centered and aims to establish a clear and accessible visual language that facilitates understanding and the use of complex applications across multiple devices.
The color scheme is based on a palette of primary colors (blue tones) and secondary colors (whites and grays), complemented by variations that allow for lightening or darkening these shades.
Primary colors are applied consistently to highlight key actions and guide attention toward the most relevant sections of the interface.
Color system
The color scheme is based on a primary palette consisting of nine colors.
Blue tones dominate as the main colors, as they represent the company’s connection to technology and innovation.
To create contrast and enhance usability, orange is used for warning elements and red for cancellation actions.
Dark theme and accessibility
The design of a dark theme based on contrast ensures better accessibility.
This system is implemented by replacing pastel colors with shades of blue and using dark tones instead of light ones, thereby optimizing readability and the visual experience.
Typograpy system
The typographic system is based exclusively on the use of the Arial font, which streamlines development and facilitates the creation of consistent interfaces across multiple devices.
This approach ensures high adaptability to emerging technologies.
Additionally, font sizes have been defined responsively, adjusting to the dimensions of each screen. Specific spacing has been established for web, mobile, and desktop applications, as well as for certain emerging technologies, ensuring readability and visual consistency in any digital context.
The iconography is developed using outline icons, prioritizing simplicity and visual clarity to ensure quick and intuitive comprehension.
The icons are primarily applied to specific buttons, optimizing space usage and contributing to a clean and minimalist design.
Icon System
In order to ensure that the iconography adapts optimally to different environments, two versions light and dark have been developed, designed on a simple and functional grid.
Design Tokens
In order to optimize work in Figma, tokens, variables, primitive elements, and styles have been defined, ensuring that designers and developers work under the same visual language and build consistent interfaces.
Spacing, rounded and borders
The spacing and borders are based on multiples of 4, creating a versatile system that ensures proportionality and hierarchy.
The line thickness has been set to 1 or 3 pixels, as appropriate, in order to highlight or soften certain components and sections.
Grid system
Para el desarrollo se han definido tres tamaños de grid: una destinada a dispositivos móviles, basada en una sola columna, y dos orientadas a tabletas y escritorios, estructuradas en 12 columnas.
Este enfoque optimiza la implementación y garantiza una integración eficiente con Bootstrap.
The system is based on the use of modals, which facilitate the creation of linear flows, such as the process of generating a new project, which is created and guided within a modal.
For its implementation, a 12-column grid specifically for modals was designed, ensuring consistency and order in the arrangement of elements.
Components
More than 200 components have been developed for the design system, including buttons, icons, forms, dividers, paginators, logos, menus, switches, color pickers, sliders, modals, and many other elements.
The process began with designing each component in Figma and was later implemented in code, using Bootstrap as the development foundation.
Documentation
To ensure that both developers and designers fully understand the use of the system, a comprehensive user guide has been prepared, detailing its governance structure as well as the main tools to be used during development.
Additionally, a general document has been prepared that outlines the system’s fundamentals and describes the workflow from the perspective of the design team.
The Result
A simple, efficient, and easily implementable design system has been developed, created specifically for VT-Platform with the purpose of optimizing the construction and understanding of a highly complex application.
This approach has allowed for the consolidation of a clear, distinctive, and easily recognizable brand identity in comparison to competitors.
Design and development times have been reduced by 35%.
Furthermore, the system stands out for its practicality and for offering a quick learning curve, facilitating adoption by both new users and development teams.
Take a look at this multi-device platform project where this design system is applied