Sistema de diseño

Las seis reglas que hacen que esto se sostenga: qué forma tiene una ficha, qué dice cada pastilla, de dónde sale cada demo, hacia dónde mandan los tokens y qué se comprueba solo.

Los dos azules salen del logotipo. El resto de la escala se deriva de ellos, y los tonos semánticos —verde, ámbar, rosa— sólo se usan para decir cómo va algo, nunca para decorar. Las gráficas con varias series tienen su propio juego de ocho tonos, porque una rampa de azules no distingue ocho marcas.

La jerarquía de esta propuesta se construye con sombra, no con líneas. Casi no hay bordes en todo el sistema: lo que separa una superficie de otra es a qué altura flota.

Plus Jakarta Sans en 800. Toda cifra lleva tabular-nums para que no baile al actualizarse, y tracking-[-0.02em] a partir de 26px.

Los cincuenta y seis glifos del sistema, dibujados a mano sobre una retícula de 24×24 con trazo redondeado. No hay librería de iconos ni una sola petición externa.

La escala de Tailwind sin tocar, y —esto sí es decisión nuestra— dónde cae cada paso, las medidas que se repiten entre pantallas y qué decide cada punto de quiebre.

Tres duraciones y una sola curva. Todo lo que se mueve en la propuesta elige una de las tres, y todo respeta la preferencia de movimiento reducido del sistema.

Doce peldaños con nombre para el orden de apilado, del contenido al enlace de salto, que se ve por encima de todo.

Las reglas de redacción de la interfaz. Un sistema de diseño que no dice cómo se escribe deja la mitad de lo que el usuario ve fuera del sistema.

Tres jerarquías, y sólo una primaria por pantalla. El botón de envío se bloquea mientras dura la operación: sin eso, dos clics mandan el formulario dos veces.

Tres vocabularios distintos —cumplimiento, operación y trámite— con la misma forma. El color va siempre con la palabra, para que se entienda sin distinguir tonos.

Etiqueta flotante: se ve siempre, ocupa una línea y no desaparece al escribir, que es lo que pasa con el marcador de posición. Con estados de error, inactivo y sólo lectura.

Escritos a mano, sin librerías. Buscan por trozo y sin acentos: «cordoba» y «doba» encuentran «Córdoba». Sirven datos locales o remotos, y con datos remotos descartan las respuestas que llegan tarde.

Dónde estoy y cómo vuelvo. El último tramo no es enlace: ya estás ahí.

Título, dato de contexto y las acciones de la pantalla. La acción principal va a la derecha, sola; las secundarias a su izquierda.

Título, subtítulo opcional y un enlace de salida a la derecha. Es lo que separa bloques dentro de una pantalla.

Para procesos de dos o tres tramos. El paso hecho se marca en verde con palomita, el actual con el azul de marca, el pendiente en gris. La barra lleva role="progressbar".

Un solo componente con tres usos en el producto: sucursal, cuenta y avisos. Cierra al hacer clic fuera y con Esc, y el disparador declara aria-expanded.

Un solo sitio para llegar a cualquier cosa: unidades, personal, documentos normativos, módulos y acciones. Se abre con ⌘K o Ctrl K, y siempre hay un disparador visible: donde existe el campo de búsqueda del encabezado es ese campo; donde no —este catálogo y el listado— es la lupa de arriba a la derecha.

Sin fotos: iniciales sobre color. Tres tintes según el fondo y el significado. En unidades, el color transmite el estado de cumplimiento.

El componente más usado del producto. Cabeceras ordenables, selección múltiple, franja de hover redondeada, seis tipos de celda, estado vacío, paginación y barra de acciones masivas. Debajo de md se sustituye por una lista de tarjetas.

Etiqueta, cifra grande, pastilla de variación y una minigráfica de área al pie. El valor se pinta en rojo cuando la métrica en sí es mala, no cuando baja: bajar puede ser bueno.

La cifra que encabeza una pantalla. Lleva la barra apilada que reparte el total, con su leyenda: cada segmento suma exactamente el total anunciado.

Atajo a una acción frecuente: icono en pastilla, etiqueta y galón que se colorea al pasar el cursor.

Lista priorizada: avatar con el tono del estado, dos líneas de texto, pastilla de plazo con su conteo y galón de entrada.

Comparación rápida entre pocas categorías: etiqueta fija a la izquierda, barra proporcional y cifra alineada a la derecha.

Fichas que se encienden al aplicarse. «Limpiar» sólo aparece cuando hay algo que limpiar, para no ofrecer una acción que no hace nada.

Dos meses a la vista, atajos hacia atrás y hacia adelante —en cumplimiento importa más lo que vence que lo que pasó—, y navegación completa con teclado. En el teléfono sube como hoja.

Cifras sueltas, sin histórico ni tendencia. Compactas a propósito: cuando hay cinco juntas, lo que importa es compararlas de un vistazo.

Un mismo constructor en dos tamaños: minigráfica de 44 px sin ejes dentro de una tarjeta, y gráfica de 196 px con rejilla, puntos y etiquetas de día debajo.

La dona reparte un total entre pocas categorías y deja el hueco central para la cifra global. El arco muestra un solo porcentaje.

Toda cifra pasa por u.num() y todo importe por u.mxn(), ambos en configuración regional es-MX. Escribir separadores a mano acaba en incoherencias.

Barras agrupadas, líneas múltiples y barras apiladas, dibujadas como SVG a mano. Cada una lleva su leyenda: sin ella, las series son colores sin nombre. Los colores salen de window.SERIES, no de la rampa azul.

Dos botones en la cabecera de la tarjeta: ampliar, que abre la gráfica en un diálogo al ancho del diálogo, y exportar, que descarga la misma tabla que se ve. Debajo, la tabla cierra con su renglón de totales: suma cuando la columna son unidades y razón de sumas cuando es un km/l o un $/km.

Un resumen en prosa de lo que hay que hacer, en dos párrafos: primero lo vencido, después lo que vence pronto. El encabezado cambia cuando hay algo vencido —icono, color y un título con sentido de urgencia— en vez de repetir siempre el mismo rótulo.

Los doce documentos que exige la norma, con su estado y su vencimiento. Es el vocabulario del sistema anterior, traído tal cual porque es el que usa el cliente.

Arrastrar y soltar con un estado explícito de «listo para recibir»: borde sólido, fondo tintado y la etiqueta cambia a Suelta aquí. También se abre con el teclado.

Se queda en la página, a diferencia del aviso temporal. Rojo para el error que impide continuar, ámbar para lo que hay que decidir, verde para lo que ya pasó. Los dos primeros llevan role="alert"; el de éxito, role="status".

Entra desde la derecha sobre un velo. Cabecera fija, cuerpo con desplazamiento y pie con las acciones. Conserva la lista de fondo, que es justo lo que se pierde con un diálogo.

Ancladas abajo y siempre visibles. La oscura aparece al seleccionar filas y actúa sobre la selección; la clara acompaña un formulario largo. Ambas se desplazan con el riel para no quedar debajo de él.

Hoja desde abajo en el teléfono y ventana centrada en escritorio. Atrapan el tabulador, devuelven el foco y validan por campo. El destructivo se anuncia como alertdialog.

Lo que se ve cuando no hay nada que ver: sin resultados, cargando, y la página que no cargó. Los tres dicen qué pasó y qué hacer ahora.

Secciones del mismo objeto sin cambiar de pantalla. Marcadas con role="tablist" y navegables con flechas.

Bloques plegables. Varios pueden estar abiertos a la vez; el galón gira para indicar el estado.

Aparece al pasar el cursor o al enfocar con teclado. Los botones de sólo icono la necesitan: sin ella, su significado se adivina.

Historial en orden cronológico inverso, con hora, autor y tipo de evento. El sistema anterior ya guardaba «Actividad reciente»: esto le da pantalla propia.

Texto libre que se convierte en etiqueta al pulsar Enter. Cada una se quita con su propia ✕ o con Retroceso cuando el campo está vacío.

El punto medio entre el campo libre y la multiselección: al escribir propone las que ya existen en el catálogo y, si nada encaja, ofrece crearla. Es lo que hace falta cuando hay una tabla de etiquetas pero el usuario también puede inventar.

Al arrastrar, la fila entera viaja con el cursor y su sitio queda marcado como hueco: la lista se reordena en vivo, así que el elemento ocupa su posición definitiva en cuanto cruzas la mitad de la fila vecina y lo que ves es ya el resultado. Con el teclado sigue el modelo de Base Web: espacio levanta, ↑ ↓ (o k y j) mueven, espacio suelta y escape cancela devolviendo la lista a como estaba. Cada paso se anuncia en voz alta. Se arrastra por el asa, no por toda la fila, para no impedir seleccionar texto; y en el teléfono, donde el arrastre nativo no existe, están los botones de subir y bajar.

Una acción principal a un clic y sus variantes en el menú contiguo. Evita repartir tres botones casi iguales por la cabecera.

Campo de varias líneas con la misma etiqueta flotante que el resto. Crece con el contenido hasta un máximo y avisa cuando quedan pocos caracteres.

Vive dentro de la tabla, pero es un componente por su cuenta. Dice cuántos registros hay, no sólo en qué página estás, y marca la actual con aria-current="page".

La silueta de lo que va a llegar. Se prefiere al girador cuando se conoce la forma del contenido, porque no da el salto de vacío a lleno.

Mientras un archivo sube: cuánto lleva, cuánto pesa y cómo cancelar. Con role="progressbar", así que la cifra también se oye.

La casilla de «seleccionar todo» cuando sólo hay algunas marcadas. Se pone con la propiedad indeterminate, no con un atributo: el navegador ya la anuncia como mixta.

El aviso en línea, con tono neutro y con botón de cerrar. Lo que se cierra no vuelve solo, así que sólo se cierra lo que el usuario ya puede ignorar.

Un valor dentro de un rango, cuando importa más la proporción que la cifra exacta. Va sobre input type="range": el teclado y el lector de pantalla ya vienen resueltos.

Nativo, con la misma piel que el resto de campos. No se hace a mano: el selector del sistema ya conoce el formato de 12 o 24 horas de cada quien y el teclado del teléfono.

Pocas opciones excluyentes, siempre a la vista. Se comporta como un grupo de radios: una sola parada de tabulador y las flechas mueven dentro, como en Base Web.

Un panel anclado a lo que lo abre, con contenido con el que se puede interactuar —a diferencia de la ayuda contextual, que sólo se lee. Se posiciona fixed, que es lo que hace falta cuando vive dentro de algo que se desplaza.

Un enlace dentro de un texto o de una celda. Se distingue por color y peso; el subrayado sale al pasar por encima y al enfocar.

El tono de riesgo, para lo que borra, da de baja o cancela algo que no se puede recuperar.

Enseña u oculta columnas de una tabla. Una queda fija, porque una tabla sin su identificador no se puede leer.

Una combinación de filtros, orden y columnas con nombre, para volver a ella de un clic.

Una jerarquía que se abre y se cierra, con el modelo de teclado de la guía ARIA: un solo alto del tabulador y flechas por dentro.

El paso intermedio antes de algo que no se puede deshacer. Dice qué se va a perder y qué se conserva, y nombra lo que va a pasar en el propio botón.