Launch Mobility Design System
App de conductor para movilidad multimarca — arquitectura de tokens de 3 marcas y gobernanza formal
Producto
App de conductor para movilidad, con tres marcas de primer nivel activas (marca principal + dos marcas asociadas) y seis líneas internas de producto
Fuente de verdad
Biblioteca publicada en Figma ("Launch Mobility Design System") — 5 niveles atómicos con variables por marca
Generaciones
Una — diagnóstico, reconstrucción y expansión a una arquitectura de 3 marcas
Estado
Vigente en gobernanza y tokens — v4.2, 27 pantallas de producción verificadas
Cómo se construyó
A diferencia de Kinetik y Serenia, este sistema no nació de cero: llevaba años creciendo de forma orgánica y, en la superficie, se veía completo. En la práctica fallaba en silencio — colores sin tokens, dos de cinco sets de componentes corruptos, badges con el mismo color de fondo y texto.
Antes de tocar nada se corrió una auditoría estructurada en 4 ejes, con cada hallazgo respaldado por un node ID real, un ratio de contraste medido o un hex exacto.
A partir de ahí reestructuré la librería en Figma como una biblioteca publicada organizada en 5 niveles (Fundamentos → Átomos → Moléculas → Organismos → Patrones), cada uno construido sobre el anterior. Cada component set de Fundamentos y Átomos se publicó con exactamente dos variantes por marca por defecto, de modo que cambiar de marca en una instancia es un solo swap de propiedad, no una reconstrucción manual. Una tercera marca se incorporó después directamente desde pantallas de producción, porque el archivo de biblioteca aún no tenía un slot de variante para ella — una deuda que documenté explícitamente en vez de ocultarla.
La biblioteca incluye además un componente de anotación de UX ("Ux Notes") usado para dejar notas de diseño directamente sobre las pantallas — el sistema no solo define visuales, también documenta intención de uso in situ.
Cómo se construyó — generaciones
Diagnóstico
Lo que la auditoría encontró
Colores sin tokens; dos sets corruptos (spinner, fila deshabilitada, rating); badges invisibles; botones sin coincidir con producción; sin gobernanza.
Reconstrucción
Lo que quedó en pie
Arquitectura de 5 niveles atómicos con cambio de marca automático; sets recuperados; badges corregidos; 27 pantallas verificadas; gobernanza formal documentada.
Tercera marca
Una marca más, sin slot propio
Incorporé la tercera marca extrayendo sus tokens directamente de pantallas de producción reales, porque el archivo de biblioteca aún no tenía un slot de variante para ella. Detecté y documenté que conviven dos épocas visuales dentro de esa marca, y definí cuál usar por defecto.
Gobernanza de color
Un rojo, en las tres marcas
Corregí el token semántico de error compartido por decisión directa del stakeholder (fecha documentada: 2026-08-12), y propagué el cambio a todas las marcas y todos los estados relacionados — bordes de error, asteriscos requeridos, badges de "cancelado", alertas — en vez de dejarlo aislado en una sola pantalla.
Tokens
Tipografía
Vocabulario visual
- → Arquitectura de tokens de 3 niveles: Primitivas alimentando Semánticas, resueltas por marca vía el sistema de Modos de Figma.
- → 5 niveles atómicos publicados como component sets independientes: Fundamentos, Átomos, Moléculas, Organismos y Patrones.
- → Trabajo reversible por defecto: la página de producción se duplicó antes de cualquier edición.
- → No rehacer lo que ya funciona: se verificó una librería madura ya existente y se migró en vez de reemplazar.
- → Verificar contra la lógica real, no contra la apariencia: expuso contenido completamente inventado en un patrón que parecía solo un desajuste visual.
- → Regla de gobernanza — aislamiento de marca: los tres colores primarios nunca se mezclan en una misma pieza.
- → Regla de gobernanza — botones siempre pill (100px), salvo una única excepción documentada por decisión de producto.
- → Regla de gobernanza — espaciado siempre múltiplo de 4 (4·8·12·16·24·32·48px); nunca 5, 7, 11, 15 ni 18px.
- → Regla de gobernanza — un único rojo de error para todo estado de error o asterisco requerido, en las tres marcas.
- → Regla de gobernanza — cada valor inferido por analogía (sin pantalla real que lo confirme) se marca explícitamente como tal, con menor nivel de confianza.
- → El sistema se transcribió a una guía de producción tokenizada (marca → plataforma/modo/nivel → tokens exactos → reglas absolutas) lo bastante estricta como para que un asistente de IA genere HTML/CSS, React, specs de Figma o piezas de marketing "on-brand" sin adivinar un solo hex.
Brechas conocidas
- → Solo un puñado de componentes tenían maestros propios de la marca aliada — brecha de paridad señalada para el roadmap.
- → La corrupción de los sets no era visible desde el panel de capas — puede repetirse sin auditoría periódica.
- → En la tercera marca, algunos valores siguen marcados como "inferidos por patrón" en vez de verificados desde una pantalla real.
- → Conviven dos épocas visuales dentro de la tercera marca (tipografía legada y una versión más nueva) — documentado, pero aún sin unificar.
Estado actual
El sistema ya no depende de la memoria de quien lo tocó por última vez: 3 marcas de primer nivel y 6 líneas internas completamente tokenizadas, 5 niveles de jerarquía atómica publicados como component sets independientes, un flujo real de reserva (4 sub-flujos) documentado pantalla por pantalla, reglas de gobernanza explícitas y un changelog versionado con decisiones fechadas — la diferencia entre un moodboard bonito y un sistema que efectivamente se puede ejecutar.