01
El problema
Todo caso de design system empieza con botones que no coinciden. Este no.
B2POS corre en varias marcas de retail, y cada despliegue venía acumulando sus propios overrides de color durante años. El costo no era que las pantallas se vieran distintas, sino que fueran distintas en el código. Cada feature se construía una vez y después se parchaba por marca, web y mobile se separaban, y nadie podía decir cómo se veía el texto secundario en el modo oscuro de una marca sin abrir un archivo.
Así que el sistema tenía una sola tarea: que la marca fuera un valor, no un fork.
02
La estructura
Primitivos
Las escalas crudas. Nada en el producto las referencia directamente.
Tokens semánticos
Lo que el producto realmente habla: superficie, texto primario, texto secundario, separador. Cada pantalla, componente y estado se construye solo sobre esta capa.
La regla
Un componente no sabe en qué marca está. Pide texto secundario y el tema responde. Ocho exports, una librería de componentes.
03
Dos plataformas, una fuente
Web
Un archivo de tokens con variables CSS y tres mecanismos de cambio: un data attribute, una clase de tema y la preferencia del sistema como respaldo. Cada variable lleva su ruta de Figma, así cualquiera puede rastrear un valor hasta el archivo de diseño.
Mobile
Una theme extension de Flutter junto al color scheme estándar, que entrega la capa semántica y solo los primitivos que usa. No es una traducción del archivo web: es la misma fuente, expresada como ya piensan los ingenieros de Flutter.
04
Generado con IA, revisado a mano
Las librerías de tokens se generan, no se tipean. Lo que importa es el paso siguiente: cada export se lee línea por línea con los ingenieros que lo usan, antes de salir.
En la última pasada, esa revisión detectó tres temas oscuros con el texto secundario y terciario un paso más claro de lo debido: invisible en un buen monitor, molesto en un dispositivo de tienda al final de un turno.
05
El naming como handoff
Las pantallas se nombran como las rutas de la app, las capas en camelCase, y las instancias conservan el nombre de su componente. Un diseñador y un desarrollador de Flutter señalan lo mismo cuando dicen home/new-loan-application. Es la diferencia entre una reunión de handoff y un link de handoff.
06
Dónde está hoy
El sistema sostiene la plataforma B2POS, la app en Flutter en test cerrado con 12.000 usuarios partners y el widget para partners. Una marca nueva es un export de tokens, no un proyecto. Funciona porque la capa semántica llegó antes que los temas, no después.
