Un auténtico sistema de diseño
Un sistema de diseño que actúa como la columna vertebral de un producto
Un sistema basado en shadcn UI y tokens de Tailwind que mantiene el diseño y el código hablando el mismo idioma. Un solo lugar para pensar, diseñar y lanzar, sin adivinar dónde está cada cosa.
Este proyecto surge de una investigación de tesis sobre el uso de la gamificación como una metodología lúdica para mejorar la experiencia de lectura digital en el nicho de lectores de manga. El objetivo era diseñar una aplicación de lectura de manga gamificada que fomente la interacción social, aumente la motivación para leer y promueva la construcción de comunidad.
Rol
Diseño Visual, Diseño de UI
Duración
3 semanas
Herramientas
Figma
El problema que resuelve
El problema que resuelve
Seguía chocando con la misma pared en los equipos de producto. Los tokens vivían en un lugar, los componentes en otro, la documentación en un tercero, y todos esperaban que la entrega se alinee por arte de magia. Así que construí un sistema en shadcn ui que actúa como una columna vertebral única. Ofrece un solo lugar para pensar, diseñar y lanzar sin tener que adivinar qué vive dónde.
Seguía chocando con la misma pared en los equipos de producto. Los tokens vivían en un lugar, los componentes en otro, la documentación en un tercero, y todos esperaban que la entrega se alinee por arte de magia. Así que construí un sistema en shadcn ui que actúa como una columna vertebral única. Ofrece un solo lugar para pensar, diseñar y lanzar sin tener que adivinar qué vive dónde.
Fundamentos que marcan el ritmo
Fundamentos que marcan el ritmo
Color se define como roles semánticos que se mantienen en la luz y la oscuridad. El espaciado sigue un ritmo constante, de modo que la densidad se siente predecible desde pantallas móviles diminutas hasta diseños llenos de datos. La tipografía tiene presencia en los encabezados y se mantiene clara en las etiquetas y los campos de entrada. La elevación y el radio apoyan la estructura en lugar de la decoración. Estas son las bases de las cuales depende el resto del producto.
Color se define como roles semánticos que se mantienen en la luz y la oscuridad. El espaciado sigue un ritmo constante, de modo que la densidad se siente predecible desde pantallas móviles diminutas hasta diseños llenos de datos. La tipografía tiene presencia en los encabezados y se mantiene clara en las etiquetas y los campos de entrada. La elevación y el radio apoyan la estructura en lugar de la decoración. Estas son las bases de las cuales depende el resto del producto.
Componentes que crecen para un uso verdadero
Componentes que crecen para un uso verdadero
Comenzá con primitivas de shadcn, luego fortalecelas para un uso real. Las variantes y tamaños existen desde el primer día. Los estados—hover, focus, cargando, presionado, deshabilitado—están diseñados y documentados con el mismo cuidado que el default. Los casos de solo íconos reciben etiquetas adecuadas y comportamiento de foco. Los botones muestran la receta completa desde las props y la guía de copiado hasta cómo agregás una variante sin romper el conjunto. La misma estructura se extiende a inputs, selects, diálogos, hojas, toasts, pestañas y paginación, para que los equipos dejen de reinventar los mismos detalles cada sprint.
Comenzá con primitivas de shadcn, luego fortalecelas para un uso real. Las variantes y tamaños existen desde el primer día. Los estados—hover, focus, cargando, presionado, deshabilitado—están diseñados y documentados con el mismo cuidado que el default. Los casos de solo íconos reciben etiquetas adecuadas y comportamiento de foco. Los botones muestran la receta completa desde las props y la guía de copiado hasta cómo agregás una variante sin romper el conjunto. La misma estructura se extiende a inputs, selects, diálogos, hojas, toasts, pestañas y paginación, para que los equipos dejen de reinventar los mismos detalles cada sprint.
Íconos y tipografía que definen la voz
Íconos y tipografía que definen la voz
El conjunto de íconos mantiene un trazo estable y un equilibrio óptico con nombres que los desarrolladores pueden predecir. La elección tipográfica favorece la claridad en la interfaz primero y el carácter en segundo lugar. La escala se combina con alturas de línea sensatas para que los textos largos respiren mientras las etiquetas permanecen compactas.
Las guías de microtexto mantienen las acciones directas, los errores humanos y los estados vacíos útiles para reducir la carga mental en cada clic y línea de texto.
El conjunto de íconos mantiene un trazo estable y un equilibrio óptico con nombres que los desarrolladores pueden predecir. La elección tipográfica favorece la claridad en la interfaz primero y el carácter en segundo lugar. La escala se combina con alturas de línea sensatas para que los textos largos respiren mientras las etiquetas permanecen compactas.
Las guías de microtexto mantienen las acciones directas, los errores humanos y los estados vacíos útiles para reducir la carga mental en cada clic y línea de texto.
Accesibilidad incorporada desde la primera página
Accesibilidad incorporada desde la primera página
El contraste se mantiene en cada estado y tema. Los estilos de enfoque permanecen visibles tanto en lo claro como en lo oscuro. Los objetivos táctiles coinciden con dedos reales. Los lectores de pantalla reciben roles y etiquetas adecuadas por defecto. La accesibilidad no es una lista de verificación tardía. Es el estándar.
El contraste se mantiene en cada estado y tema. Los estilos de enfoque permanecen visibles tanto en lo claro como en lo oscuro. Los objetivos táctiles coinciden con dedos reales. Los lectores de pantalla reciben roles y etiquetas adecuadas por defecto. La accesibilidad no es una lista de verificación tardía. Es el estándar.
Tematización rápida porque es primero por tokens
Tematización rápida porque es primero por tokens
La luz y la oscuridad se alternan con fluidez. Una nueva marca implica definir un conjunto pequeño de variables en lugar de modificar cada componente. Si un equipo necesita un tema de alto contraste, el sistema mantiene el sentido y la legibilidad intactos. El trabajo con múltiples marcas se convierte en planificación en lugar de una reescritura.
La luz y la oscuridad se alternan con fluidez. Una nueva marca implica definir un conjunto pequeño de variables en lugar de modificar cada componente. Si un equipo necesita un tema de alto contraste, el sistema mantiene el sentido y la legibilidad intactos. El trabajo con múltiples marcas se convierte en planificación en lugar de una reescritura.
Biblioteca y entrega que se mantienen cerca del trabajo
Biblioteca y entrega que se mantienen cerca del trabajo
Todo se envía como una biblioteca de Figma con documentación integrada. Diseñadores y desarrolladores pueden ver la estructura, los props, los estados y el uso justo donde están trabajando. Los tokens se mapean uno a uno con Tailwind, lo que hace que la transición sea predecible. Los cambios son fáciles de validar con pruebas visuales rápidas. Podés publicarlo, reutilizarlo en distintos archivos y extenderlo sin romper la esencia.
Todo se envía como una biblioteca de Figma con documentación integrada. Diseñadores y desarrolladores pueden ver la estructura, los props, los estados y el uso justo donde están trabajando. Los tokens se mapean uno a uno con Tailwind, lo que hace que la transición sea predecible. Los cambios son fáciles de validar con pruebas visuales rápidas. Podés publicarlo, reutilizarlo en distintos archivos y extenderlo sin romper la esencia.
Cómo se comporta en la práctica
Cómo se comporta en la práctica
Los equipos lo tematizan en minutos, se mantienen consistentes sin necesidad de supervisión estricta, y entregan patrones que se leen igual en el repositorio que en el archivo. Se ve prolijo porque está construido correctamente. Si querés ver el enfoque en acción, estoy feliz de compartir la biblioteca y mostrar cómo lo ajustaríamos a tu stack.
Construido sobre shadcn ui. Impulsado por tokens. Diseñado para trabajo de producto real.
Los equipos lo tematizan en minutos, se mantienen consistentes sin necesidad de supervisión estricta, y entregan patrones que se leen igual en el repositorio que en el archivo. Se ve prolijo porque está construido correctamente. Si querés ver el enfoque en acción, estoy feliz de compartir la biblioteca y mostrar cómo lo ajustaríamos a tu stack.
Construido sobre shadcn ui. Impulsado por tokens. Diseñado para trabajo de producto real.
