Una biblioteca, cuatro productos: doce rampas de color, una matriz de estados por control y componentes para concesionario, operador, inspector y vendedor.
01Contexto
Carsparency tenía cuatro superficies de producto: una web para vendedores, una app de campo para inspectores, un back office para el personal y una plataforma para concesionarios. Cada una tiene su propio archivo de Figma y las cuatro se construyen sobre una misma biblioteca compartida.
El archivo del sistema de diseño documenta esa biblioteca en once tableros (color, tipografía, botones, campos de formulario, interruptores, migas de pan, paginación, toasts, modales, cabecera y pie, y componentes menores) y una página de iconos.
02Problema
Los cuatro productos no se parecen, y es a propósito. La web de vendedores es clara y abierta; la app de inspección, el back office y la plataforma de concesionarios son oscuros y densos. Aun así, un vendedor y un concesionario deben reconocer la misma empresa.
Sin una biblioteca compartida, cada archivo redibujaría sus propios botones y campos, y los cuatro productos se irían separando pantalla a pantalla.
03Estructura
El color se organiza en doce rampas (verde primario, gris, azul, verde, rojo, naranja, morado, coral, azul violáceo, amarillo anaranjado, azul marino y un azul cian). Cada una va de 900 a 50, la gris continúa hasta el blanco y el paso 500 se marca como valor principal. El primario de marca, #00B86B, es el 500 de la rampa verde.
Los componentes se construyen como conjuntos cuyas variantes cubren a la vez tipo, tamaño y estado. Solo el conjunto de botones reúne 90 variantes: sólido y de contorno, primario y gris, tres tamaños y los estados por defecto, hover, pulsado, deshabilitado y cargando.
04Decisiones clave
Leídas en los tableros y en cómo los usan los archivos de producto.
Cada color llega en diez pasos con un valor principal marcado. Las pantallas oscuras y densas necesitan varios tonos cercanos para superficies, bordes y texto, y las rampas los ofrecen sin inventar colores nuevos.
Botones y campos se documentan como matrices de tipo, tamaño y estado. Hover, pulsado, deshabilitado, cargando y error están diseñados, no quedan a criterio de quien los implemente.
Los colores y componentes llegan a los archivos de producto como estilos e instancias de la biblioteca, no como copias pegadas, así que un cambio en la biblioteca puede llegar a los cuatro productos.
La web clara de vendedores y las herramientas profesionales oscuras toman las mismas rampas desde extremos opuestos, lo que mantiene la marca coherente y da a cada público la densidad que necesita.
05Solución
Cada componente interactivo se dibuja en todos los estados posibles, no solo en reposo. El tablero de campos de formulario recorre los estados por defecto, con icono, marcado, error, hover y desplegable, seleccionados y sin seleccionar, en claro y en oscuro, para que ningún desarrollador tenga que adivinar cómo se ve un error en el tema oscuro.
Las mismas rampas sirven a ambos temas. La web usa los extremos claros de la rampa gris como superficies y los productos oscuros usan el extremo oscuro, con el verde primario como color de acción constante en los dos.
Oscuro: app de inspección
Claro: asistente de venta
06Ecosistema
La prueba más sólida de un sistema de diseño está en los archivos que lo consumen. Los frames de los archivos Pro, Back Office, Inspección y Web toman sus colores de los mismos estilos publicados (las rampas del verde primario y del gris), no de copias locales.
Sus componentes también vienen de la misma biblioteca. Los campos de texto, modales, paginación, migas de pan, botones e iconos de sistema de los archivos de producto son instancias de componentes de la biblioteca, hasta el punto de que un conjunto de interruptores lleva el mismo nombre mal escrito en la biblioteca y en la app de inspección.
07Mi rol
Según el archivo del sistema de diseño. Los archivos no registran quién más trabajó en la biblioteca, y sus estilos de color se publican desde un archivo de biblioteca ajeno a este conjunto, así que esto no pretende ser una autoría exclusiva.
Los tableros están marcados como Version 0.0.1: una versión temprana de la biblioteca, no una terminada.
08Resultados
Recuentos de trabajo diseñado, no resultados. No consta si ingeniería llegó a usar la biblioteca en código.
09Lo que aprendí
Una biblioteca se gana el nombre cuando otros archivos la consumen. Aquí la prueba está en las propias capas de los archivos de producto, no en los tableros.
Los componentes en reposo se dibujan rápido. Las 265 variantes son sobre todo estados, y es ahí donde de verdad se decide la coherencia entre cuatro productos.
Un nombre de componente mal escrito sobrevive en cada producto que lo usa; por eso conviene acertar con los nombres antes de publicar.