Fundamentos

Cada escala va de -50 a -950. El borde oscuro marca el paso -500, el color base de cada familia. Los nombres son las variables de Figma (--primary-500 = primary/500). Además: --common-white #FFFFFF, --common-black #18181A y --brand-vivid #FF6600 (el naranja del logotipo, solo para marca; no se usa en acciones ni en texto).

Los componentes leen estas variables y no los colores crudos: si cambia la acción primaria, cambia en todo el producto. Las que apuntan a una escala (primary-500, secondary-600…) muestran a cuál.

Familia: Nunito (autoalojada, variable) para todo el producto y Roboto Mono para identificadores y código. Las interlíneas son porcentajes del tamaño; el tracking, porcentaje del tamaño de la letra (en CSS, em).

Escala de 4 px. Las barras están dibujadas al cuádruple para poder compararlas.

Uso habitual: 4 en badges, 8 en botones y alertas, 12 en tarjetas y campos, 16 en tarjetas de servicio.

Los botones, campos y selects usan un anillo de foco propio del color de cada uno (primario, secundario, marca, error), con 40% de opacidad. --focus-ring es el anillo neutro.

Material Icons Rounded (Apache 2.0), a 24 px por defecto y 20 / 16 px en componentes. En Figma se usan como Icon/Material Icon · Category · Name; los nombres de abajo son los mismos. Se inyectan como sprite SVG y heredan el color del texto (fill: currentColor).

Valores de las frames de Figma, en px. Desktop es una grilla de 12 columnas con gutter de 24; mobile y tablet, de 6 columnas con gutter de 24 y padding de 16. Ancho de columna = (ancho − gutters) / columnas. En Full el ancho útil es el flex-fill: el contenido menos el menú contextual (240) y el gap hasta él (24), por ejemplo 936 = 240 + 24 + 672. Full lleva un menú contextual de 240 px junto al contenido, Simple no, y Sin sidebar (en Figma se llama Bare) es un layout sin sidebar, solo con padding a los lados (20, 24 o 28) y las 12 columnas dentro. Los nombres son los de Figma y su significado lo leí de la geometría de cada frame; Figma no dice para qué pantallas es cada uno.

El sidebar (56 colapsado, 248 expandido) queda fijo contra el borde izquierdo y el contenido se centra en el espacio restante. A partir de XXL el container de 1280 es sidebar + contenido y el margen automático crece con el ancho (80 a 1440, 320 a 1920); el contenido no pasa de 1224 colapsado ni de 1032 expandido. Figma define mobile y tablet con un ancho de referencia (360 y 768) y no indica el rango de cada una; debajo de 1024 px el layout es mobile (header de 50 px, menú en drawer).

En el prototipo: el área de contenido (la que queda sin el sidebar ni el menú contextual) tiene el ancho exacto de estas tablas, medido a 1024, 1200, 1440 y 1920 en Servicio (Full expandido), Lista de servicios (Simple expandido) y Dashboard (Simple colapsado), y los bloques principales ocupan las 12 columnas. Las columnas no están dibujadas en CSS como una grilla de 12: los mosaicos de productos del Dashboard (6 por fila a 1440, de 2 columnas cada uno) caen exactos sobre ella, y el resto de los elementos (buscador, selects, tabs) conserva el ancho propio que tiene en Figma, sin ajustarse a columnas. Las tres pantallas de este prototipo (Servicio, Lista de servicios y Dashboard) no usan el layout sin sidebar, pero el sistema no se limita a ellas: lo usan, por ejemplo, el hub de selección de cuentas y «Acceso restringido · Página completa» del proyecto Usuarios y permisos, con el padding de la tabla (20, 24 y 28 a 1024, 1200 y 1440 o más) y una tarjeta de 8 de las 12 columnas (648, 760 y 808), centrada en las columnas 3 a 10. Figma dibuja esas dos pantallas solo a 1440 (808); los valores de LG y XL los deduje de esta grilla.