Kommit V5 Design System — Alan Buenhombre

Contexto

Kommit no tenía un design system cuando inicié. Eso significaba inconsistencia visual, componentes duplicados, procesos ad-hoc entre diseño y desarrollo.

El reto fue doble: crear un design system desde cero que fuera la base para Portal Kommit, en paralelo con la construcción de la marca corporativa de Kommit. Sistema y brand tenían que nacer juntos.

Un design system no es documentación bonita. Es el lenguaje compartido entre diseño, producto y desarrollo.

Decisión

Como Lead Designer, construí Kommit Design System desde cero:

01 — Fundamentos visuales

Definí paleta cromática (K-Blue, K-Cyan, neutrals), tipografía (Manrope + monospace), grid system (8px base), elevación, sombras, spacing. Todo parametrizado para escalar.

02 — Componentes base reutilizables

Construí biblioteca de componentes: Button (variantes: primary, secondary, danger), Input, Select, Datepicker, Table, Modal, Card, Navigation. Cada uno con estados: default, hover, active, disabled, error, loading.

03 — Versionado (v1-v5)

A medida que Portal Kommit evolucionaba, el sistema evolucionaba. v1 fue MVP básico. v5 (actual) incluye: componentes avanzados, accesibilidad mejorada, dark/light mode, documentación completa, handoff dev automatizado.

04 — Integración con Claude Design

Documenté el sistema en formato que Claude Design pudiera interpretar. Esto permitió que el equipo usara IA para acelerar generación de componentes nuevos sin perder coherencia visual.

05 — Procesos de handoff dev

Establecí workflow claro: Figma → Design tokens exportados → Frontend implementa componentes → QA valida. Cada componente tenía documentación de props, estados y casos de uso.

Resultado

Kommit Design System es hoy el estándar visual de la compañía. 12+ módulos de Portal Kommit se construyeron sobre esta base sin inconsistencias visuales.

Impacto:

Team velocity mejoró: diseñadores usan componentes pre-hechos, no reinventan.
Consistencia visual precedente: cualquier pantalla nueva sigue el sistema automáticamente.
Procesos establecidos: handoff dev es reproducible, no ad-hoc.
Escalabilidad: v1→v5 sin que necesite redesign completo — solo evolución.

Status hoy: Activo y mantenido. Es la guía para todo lo relacionado con UI y diseño de material en Kommit. El equipo lo consulta diariamente.

Aprendizajes transferibles

Sistemas de diseño para crecimiento: Un sistema debe escalar de 1 módulo a 12+ sin romperse. Eso requiere pensamiento estructural, no estético.
Versionado de sistemas: v1-v5 no significa "versiones rotas". Significa evolución controlada. Cada versión agrega features (dark mode, accesibilidad) sin perder compatibilidad.
Documentación = governance: Sin docs claras, el sistema es caótico. Cada componente debe tener: qué es, cuándo usarlo, cuándo no, props disponibles, ejemplos.
Handoff dev es diseño: Cómo se comunica el diseño al dev determina calidad de ejecución. Figma + design tokens + specs claras = implementación fiel.
IA tools aceleran pero no reemplazan: Integración con Claude Design acelera generación de componentes, pero el sistema mismo (principios, governance) debe estar claro de inicio.
Sistemas como producto interno: Un design system no es "hecho una vez". Requiere mantenimiento, evolución, y adopción activa del equipo.