Sistema de Diseño C4 Alerta Surco
Un sistema de diseño modular que unifica la experiencia visual de 4+ aplicativos internos de seguridad ciudadana, desde tokens hasta layouts completos.
Se diseñó una librería de componentes con Atomic Design — tokens, átomos, compuestos, patrones y layouts — que eliminó la duplicación visual entre aplicativos y redujo significativamente el tiempo de desarrollo frontend.
Rol
Lead Designer — Arquitectura del sistema, tokens, componentes y documentación
Objetivo
Unificar 4+ apps bajo un mismo lenguaje visual con componentes reutilizables
El Desafío
Cuatro aplicativos internos de seguridad ciudadana — gestión operativa, gestión documental, cámaras y analítica — coexistían sin un lenguaje visual compartido. Cada app tenía paletas, tipografías, componentes y espaciados distintos.
Los desarrolladores frontend reconstruían los mismos botones, tablas y formularios en cada proyecto. Los supervisores reportaban que "una app se siente distinta de otra". No existía un contrato visual que garantizara coherencia.
El problema no era solo estético: cada app reconstruía los mismos componentes desde cero, duplicando esfuerzos de desarrollo y generando inconsistencia en la experiencia del operador.
Proceso UX
Se utilizó una metodología basada en auditoría de producto existente y Atomic Design para construir un sistema escalable.
Revisé los 4 productos existentes para identificar inconsistencias y oportunidades de unificación.
Hallazgos
- 6 paletas de colores distintas entre apps
- 4 fuentes tipográficas diferentes
- 3 sistemas de espaciado incompatibles
- Decenas de componentes duplicados sin estandarizar
Tokens Definidos
Colores
5 brand + 4 estados + 5 neutros = 14 tokens de color
Tipografía
Chivo con escala de 7 pasos (11px→38px)
Espaciado
Base 4px (4→48), border-radius sm→pill, 3 sombras
Construí la librería siguiendo Atomic Design: de átomos a organismos completos.
Capas del Sistema
- Átomos: Botones (4 variantes × 3 tamaños), Badges, Avatares, Inputs, Toggle
- Compuestos: Cards KPI, Tablas, Tabs, Accordion, Modales, Toasts
- Patrones: Tarjeta de Incidente, Timeline, Stepper, Data Filter Bar
- Layouts: Header, Sidebar, Mapa UI, Dashboard completo
Incluí un "Prompt Guide for AI" dentro del propio DS para que cualquier herramienta de código asistido genere interfaces consistentes.
Integración con IA
- Prompt que instruye a Cursor, Copilot y v0 a usar el DS
- Extracción automática de tokens y componentes
- Regla estricta: no usar estilos externos al DS
Componentes Clave
01 · Fundamentos
Tokens de diseño como fuente única de verdad: paleta de colores (5 brand + 4 estados + 5 neutros), tipografía Chivo con escala de 7 pasos, espaciado base 4px (4→48), border-radius de sm a pill, 3 niveles de sombra e íconos Lucide. Todo exportado como CSS custom properties.
02 · Componentes Atómicos
12 componentes base con variantes de color, tamaño y estado: Botones, Badges, Avatares, Inputs, Date Range Picker, Multiselect, Autocomplete, Upload, Signature Pad, Validación, Alertas y Toggle/Switch.
03 · Componentes Compuestos
10 componentes derivados que combinan átomos: Cards + Stats KPI, Tablas con paginación, Tabs, Accordion, Breadcrumb, Paginación, Modales, Tooltip/Popover, Toasts y Feedback UI (progress bars, skeletons).
04 · Patrones de Diseño
4 patrones de interacción reutilizables: Tarjeta de Incidente (con prioridad, agente, ubicación), Timeline de caso (cronológico con estados), Stepper de registro (flujo guiado de 5 pasos) y Data Filter Bar (filtros contextuales + tags activos).
05 · Ejemplos de Maquetaciones
4 layouts operativos listos para implementar: Header principal con alertas, Sidebar con navegación por secciones, Mapa UI (Leaflet/Google Maps) y Dashboard completo con KPIs + tabla + mapa + historial + widgets estadísticos.
Impacto
Métricas de Éxito
Técnicas
- 6 paletas → 1 paleta unificada
- 4 fuentes → 1 familia (Chivo)
- Componentes duplicados eliminados
- CSS custom properties para desarrollo
Operacionales
- Nuevas apps se construyen sobre el DS existente
- Desarrolladores usan componentes predefinidos
- Consistencia visual entre herramientas internas
- IA genera interfaces consistentes vía Prompt Guide
Aprendizajes
Un Design System no es solo una librería de componentes — es un contrato visual entre diseño y desarrollo. La clave está en documentar no solo el "qué" sino el "porqué" de cada decisión, para que el sistema evolucione sin perder coherencia. Incluir un Prompt Guide para IA es una inversión que multiplica el valor del DS al hacerlo utilizable por herramientas de código asistido.