Sistema de diseño personal

Contexto

Quería un portafolio que no solo hablara de pensamiento de sistemas, sino que lo demostrara. En lugar de mostrar capturas de productos en los que trabajé (y que están bajo confidencialidad), decidí construir desde cero un sistema de diseño para mi propia marca personal.

La idea: que cada botón, cada color y cada espacio del sitio salieran del mismo sistema. Así, el portafolio mismo se convierte en la prueba —si navegas el sitio, estás usando el design system.

En resumen: construí mi propio sistema para diseñar mi marca, demostrar consistencia y criterio, y unir mis dos lados —diseño y código— en una sola pieza.

Proceso

1. De la marca a los principios

Antes de tocar una sola variable, definí los atributos que debía transmitir mi marca

• [Técnico] → una tipografía monoespaciada para detalles de código y datos.
• [Cálido] → un acento que aporta energía sin sentirse corporativo.
• [Claro] → jerarquía marcada y mucho espacio en blanco.

2. De los principios a los tokens

Traduje esos atributos en decisiones medibles y reutilizables:

• Color. Un acento principal sobre una base de neutros, más colores semánticos (éxito, alerta, error, Info). Todo definido con contraste accesible (AA) en mente.
• Tipografía. Una familia para texto y una monoespaciada para código, con una escala de [ej: 6 tamaños] y dos pesos (regular y medium) para mantener consistencia.
• Espaciado y forma. Una escala de espaciado basada en múltiplos de 4px, radios de borde y reglas de bordes.
• Tema. Todo construido sobre variables CSS, de modo que el modo claro/oscuro funciona desde la base, no como un parche.

3. De los tokens a los componentes

Sobre esa base construí los componentes core, cada uno con sus variantes, estados y notas de accesibilidad:

Button, Input, Badge, Card, Nav, Tags

4. Decisiones clave

¿Por qué este acento?

Buscando una comunicacion calida que sea facil de entender, que va directo al punto sin usar terminos complejos.

¿Por qué esta escala tipográfica?

La mezcla de dos tipográfias, una que resalta títulos y una pensada pera lectura de bloques más grandes de contenido.

¿Cómo resolvi light/dark?

De forma técnica, creando tokens para creación de temas

Solución

El resultado es un playground vivo —no capturas estáticas— donde se ven los tokens, los componentes y sus estados funcionando. Ver Playground

Puntos a destacar al recorrerlo:

• Componentes con todas sus variantes y estados.
• Controles para cambiar propiedades y tema en vivo.
• Cada componente acompañado de su snippet de código y su nota de accesibilidad.

Impacto

• Todo el portafolio está construido sobre este sistema. Cada página que se ve usa estos tokens y componentes.
• Velocidad y consistencia. Crear una página nueva es ensamblar piezas existentes, no empezar de cero.
• Una sola fuente de verdad. Un cambio en un token se propaga a todo el sitio.

Aprendizajes y próximos pasos

Construir el sistema antes que el sitio me obligó a tomar decisiones de fondo temprano, y eso aceleró todo lo demás. El siguiente paso es [ampliar la documentación de patrones, agregar más componentes e independizarlo como paquete de npm].