Designed and scaled a Design System from scratch, creating reusable components that
reduced design and development time by 35%
01_Design System context
VT-Platform
Simplifying technical complexity in construction and industrial environments
VT-Platform is a digitization tool focused on replacing traditional manual processes with agile digital workflows.
The design system was built to transform complex manual processes into highly efficient interfaces, ensuring that each component performs reliably under demanding conditions on construction sites.
02_Identified problem
Design and development times are too long
The main challenge was not just aesthetic, but functional:
To create a “Single Source of Truth” that would allow multidisciplinary teams to scale the product without generating technical debt.
Platform System is a Design System developed in Figma and Bootstrap, collaboratively alongside Development, Business, and Design teams.
Hierarchy and System Feedback
Brand and Action Colors: Used exclusively for primary interactive elements, guiding the user’s eye toward the main action.
System States: Implemented a feedback palette (Success, Warning, Error) with optimized contrasts to ensure critical alerts in industrial environments are detected immediately.
Neutral Tokens: A balanced grayscale scale to manage layers, elevations, and text hierarchies without overwhelming the interface.
03_Color System
Strategic palette that communicates
hierarchy, states and personality
The color system moves away from static palettes to implement a Design Tokens logic.
I have defined the colors according to their semantic function (action, surface, feedback), which allows for full scalability and makes code maintenance easier.
Dark theme and accessibility
The dark theme of the system maximize readability and accessibility through balanced contrast.
Dark and pastel colors are replaced with a palette of blues and clear shades, ensuring that text, icons, and interactive components maintain clarity and visual hierarchy.
04_Typograpy System
Standardized typographic system
A single typeface family
I selected a highly legible technical typeface (Sans-Serif), specifically Arial.
Chosen for its cross-platform compatibility, performance, and ease of implementation.
The typographic scale is based on a harmonic progression ratio, ensuring that the hierarchy between headings and body text is clear and consistent across all resolutions.
I have adjusted the line-height and letter-spacing specifically to enhance readability on mobile devices. Users access the platform under variable lighting conditions or while on the move within the construction site.
Icons are used as a cognitive reinforcement.
The system ensures that each action (edit, download, alert) has a unique visual reference, reducing the user’s learning time and facilitating intuitive navigation.
05_Icon System
Specialized UX/UI icon
library for digital products
I designed an icon set based on a 24px grid, aligned with the 4px minimum unit of our system.
Each glyph has been simplified to maintain legibility even at smaller sizes (16px), using consistent strokes that reinforce the brand’s visual identity.
06_Design Tokens
UX/UI design tokens that
unify product and development for a consistent experience
An ecosystem of primitives and semantic variables has been built in Figma.
The success of the system lies in its naming logic: descriptive names for primitives (blue-500) and contextual names for tokens (button-bg-primary).
This naming system enables designers and developers to speak the same language, reducing implementation errors and accelerating the product delivery cycle.
07_Geometry and Grid: Spacing, Radii, and Borders
Spacing system based on a
modular scale of 4 multiples (Soft Grid)
This system acts as the minimum unit of measurement, allowing spacing (auto-layout), component sizing, and iconography to maintain a mathematical and predictable visual rhythm.
Definition of Tokens and Linear Hierarchy
Borders and contrast: defined thicknesses of 1px (for standard structure) and 3px (for active states or section emphasis), optimizing information density.
Radio Tokens: The corner radii are not aesthetic; they are used semantically to differentiate primary containers from interactive elements (buttons, inputs), facilitating visual identification of actionable areas in low-attention environments.
08_Grid System
Adaptive grids optimized for bootstrap
consiste UX/UI across all devices
The system is built on a 12-column grid structured according to Bootstrap’s breakpoint logic.
This ensures a smooth technical transition between design and code, allowing the platform to handle dense dashboards while maintaining functionality on mobile devices with a single column.
Understanding that industrial digitalization requires extensive data-loading processes, I designed a grid sub-system specifically for top-layer components (Modals).
By applying a 12-column grid within the modal containers, we ensured that critical flows maintain the same hierarchical order as the main layout.
09_Components and Atomic ecosytem
Scalable library in Figma
focused on operational efficiency
I built an ecosystem of reusable components following the Atomic Design methodology.
This approach allowed the interface to be broken down into atoms (buttons, inputs, icons) and molecules (search bars, complex selectors) that are assembled into functional organisms, ensuring that any new functionality preserves the system’s DNA.
Advanced Architecture in Figma
Variants and Properties: Each component was developed using Variants and Boolean Properties, allowing other designers to toggle states (hover, active, disabled) or component types.
Dynamic Auto-layout: I implemented Auto-layout across the entire library so that components respond fluidly to content and resolution changes, replicating real-world behavior in development.
10_Documentation and Governance system
Governance system
to establish the product's 'Single Source of Truth'
Style and Usage Guide: I documented not only the components but also the application rules (the “Do’s & Don’ts”), the typographic hierarchy, and the color semantics.
Design Workflow (Design Ops): I defined the process from the conceptualization of a new component in Figma to its validation and production handoff.
Synchronization with Development and Tools
Handoff Protocol: I established a governance system that outlines the tools and communication channels between teams. This includes the technical specification of components in relation to Bootstrap classes.
System Evolution: The documentation includes an update protocol. This ensures that every improvement in a component is simultaneously reflected in both the library and the documentation, maintaining the integrity of the digital ecosystem over the long term.
11_Commitment to Accessibility (WCAG 2.1)
I have audited every color and contrast combination according to WCAG 2.1 Level AA standards, ensuring that information is perceivable for users with different visual abilities or under work-related fatigue.
Text Contrast: Ratios above 4.5:1 on all readable elements.
Clickable Areas: Sizing of touch targets (minimum 44x44px) to facilitate use with gloves or on the move.
Keyboard Navigation: Clear focus states defined for operators using peripherals on the production floor.
11_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 (VT-Platform) where this design system is applied