Un sistema de diseño escalable es el conjunto de decisiones que permite que un producto crezca sin que cada pantalla nueva parezca de otra empresa. No es una carpeta de archivos: es un contrato entre diseño, desarrollo y negocio.
Tipografía
Una o dos familias, con una escala definida y cerrada. La escala se documenta por rol semántico (display, título, cuerpo, apoyo), no por tamaño suelto. Cada rol lleva su altura de línea y su seguimiento, y ese rol es el mismo en diseño y en código.
Color
Los colores se definen por función, no por nombre: fondo, texto, superficie, borde, acento, estado. Así el modo oscuro y las variantes de marca se resuelven cambiando valores, no rehaciendo componentes. Todo par de color se comprueba contra los mínimos de contraste de WCAG AA.
Retícula y espaciado
Una escala de espaciado consistente hace que el ritmo vertical se mantenga sin que nadie tenga que medirlo. Definimos anchos de contenedor, columnas por punto de ruptura y la relación entre bloques.
Componentes
Cada componente se documenta con: para qué sirve, cuándo no usarlo, sus variantes, sus estados (reposo, foco, activo, cargando, error, vacío) y su comportamiento responsive. Los estados de carga y vacío son parte del componente, no un añadido posterior.
Contenido
Un sistema sin normas de redacción se degrada en semanas. Fijamos tono, longitud de títulos, uso de mayúsculas, formato de cifras y fechas, y cómo se escriben errores y confirmaciones.
Documentación
La documentación vive junto al código y se actualiza en el mismo cambio que el componente. Si vive en una herramienta aparte, caduca.
Qué hace que un sistema escale
- Tokens antes que valores: ningún color ni tamaño se escribe a mano en una pantalla.
- Pocas variantes, bien elegidas: tres botones que se entienden valen más que nueve que nadie recuerda.
- Propiedad clara: alguien decide qué entra en el sistema. Sin ese rol, el sistema se convierte en un archivo de excepciones.
- Coste de cambio bajo: cambiar el acento de marca debería ser una línea, no una tarde.
Señales de que tu sistema no escala
Cada página nueva tarda más que la anterior. Hay tres tonos de gris que nadie sabe distinguir. El equipo copia y pega bloques de una pantalla a otra. Los desarrolladores preguntan por el margen correcto en cada tarjeta.
Cómo lo entregamos
En Aura entregamos el sistema como código en el propio producto, más una guía de uso corta y una sesión de traspaso con el equipo. El objetivo declarado es que puedas montar una página nueva sin llamarnos.