Design System: del caos a la claridad del diseño

El crecimiento del producto había generado inconsistencias

Sin estándares compartidos, el producto acumulaba componentes duplicados e inconsistencias visuales, haciendo más lento su diseño y desarrollo.

El desafío: unificar criterios en un sistema coherente, reutilizable y preparado para escalar.

Entender el problema antes de construir la solución

Comencé analizando las interfaces existentes para identificar patrones recurrentes, inconsistencias visuales y oportunidades de reutilización.

El relevamiento permitió reconocer componentes prioritarios y establecer una base común sobre la cual desarrollar el sistema.

Enfoque: auditoría de UI, inventario de componentes y definición de prioridades según frecuencia de uso e impacto.

Comparación de ejemplos ilustrativos de botones, inputs y tags con distintos textos, iconos, colores, radios y tipografías. Inputs de búsqueda, email y referencia. Tags Completado, Pendiente y Urgente.

Definir las reglas que sostienen la experiencia

Establecí los fundamentos visuales del sistema: colores, tipografía, espaciados, grillas y estilos de interfaz.

Estos principios se organizaron mediante design tokens para facilitar su reutilización, mantener la consistencia y simplificar futuras actualizaciones.

Decisión clave: separar los valores visuales de los componentes y centralizarlos en tokens para facilitar la evolución del sistema.

Un mismo lenguaje visual

Color

Color principalVioletacolor.accent.500 · #6264EF

50#EEF2FF
100#E0E7FF
300#A6B4FB
500#6264EF
700#463AC8
950#1F1C4A

Neutros

00#FFFFFF
100#E6E6EB
300#A8A8AD
600#5F5F64
900#2D2D32

Positivo
Alerta
Error
Info

Tipografía

Aa

InterMedium · Semibold · Bold

ProductoDisplay 3
40 / 40 · Semibold

Diseño compartidoHeading 1
24 / 32 · Bold

Una base para crear y crecer.Base
16 / 24 · Medium

Cada detalle tiene un propósito.Extra Small
12 / 18 · Medium

Espaciado Base de 4 px

4space.1
8space.2
12space.3
16space.4
24space.6
32space.8
48space.12

Radios de borde y sombras

0 px4 px8 px12 px16 px

Elevation CardUna profundidad sutil
para separar superficies.

Elevation MenuMás profundidad
para menús y capas.

Design tokens: del valor al componente

color.accent.500Primitivo

color.action.primarySemántico

button.primary.backgroundComponente

ContinuarResultado

De elementos aislados a componentes reutilizables

Diseñé una librería de componentes basada en estructuras consistentes, variantes y estados de interacción.

Cada componente fue pensado para responder a diferentes escenarios de uso, contemplando accesibilidad, flexibilidad y mantenimiento.

Enfoque: componentes reutilizables, propiedades configurables, estados y patrones de interacción.

Ruta

Buenos Aires

Rosario

Córdoba

Mendoza

Rosario

Santa Fe

Estado

En tránsito

Programado

Entregado

Responsable

M. Ruiz

L. Pérez

A. Sosa

Tarjeta de envío

Envío CP-2048En tránsito

Buenos Aires

Rosario

Un sistema útil es un sistema que todos pueden adoptar

La documentación fue fundamental para transformar la librería en una herramienta compartida.

Definí criterios de uso, comportamientos y ejemplos de implementación, trabajando junto a desarrollo para alinear decisiones y reducir ambigüedades.

Objetivo: facilitar la adopción del sistema y generar una fuente de referencia común para los equipos.

Cargo Produce - Design SystemGuía de componentes

Button

Permite realizar una acción. Su etiqueta anticipa qué sucede al activarlo.

Anatomía

Continuar

Un botón tiene una etiqueta y puede incluir un icono antes o después del texto.

Etiqueta: describe la acción. Usar verbos y textos específicos, como “Continuar”, para anticipar qué sucederá.
Contenedor: define el área de interacción del botón.
Icono (opcional): refuerza la acción cuando su significado es claro. Incluirlo solo si aporta información útil.

Estados

ContinuarDefault

ContinuarHover

ContinuarPressed

ContinuarFocus

ContinuarDisabled

ProcesandoLoading

Durante la carga, mantener el ancho y evitar envíos repetidos.

Criterios de uso

En un formulario o área de la interfaz, destacar una sola acción principal.

Para avanzar en un flujo, el botón primario indica cómo continuar. Cancelar mantiene un énfasis secundario para que ambas acciones no compitan por la atención.

CancelarContinuar

Recomendado

Destacar “Continuar” y dar menor énfasis a “Cancelar” para orientar la decisión.

CancelarContinuar

Evitar

Usar dos botones primarios en el mismo grupo: el mismo énfasis dificulta reconocer la acción principal.

Una base compartida para seguir construyendo

El resultado fue una biblioteca de componentes reutilizables, fundamentos visuales y documentación para trabajar con criterios compartidos.

Entregables: biblioteca de componentes, fundamentos visuales y criterios de uso para diseño y desarrollo.

Lo que quedó construido

01 / Biblioteca

Componentes reutilizables

Variantes y estados definidos para resolver nuevas necesidades con una misma base.

Accent#6264EFNeutral#2D2D32Positive#397F5B

AaInterTipografía compartida

02 / Fundamentos

Criterios consistentes

Colores, tipografía y valores visuales compartidos para mantener la coherencia del producto.

ButtonPropiedades

Type: Primary / Secondary
Size: Medium / Small
State: Default / Disabled

03 / Documentación

Decisiones compartidas

Propiedades y criterios de uso documentados para alinear diseño y desarrollo.

Menos inconsistencias, más capacidad para escalar

El proyecto estableció una base compartida para diseñar experiencias más consistentes y facilitar la evolución del producto.

La estandarización de componentes y patrones permitió abordar el diseño desde una perspectiva más sistemática, mejorando la coordinación entre disciplinas.

Principal aprendizaje: construir un Design System no consiste solamente en crear componentes, sino en definir acuerdos que ayuden a los equipos a tomar mejores decisiones.