Risk OS, un design system para gestionar el riesgo financiero

La dirección visual se llama Iris & Slate: neutros pizarra fríos y un único acento, un iris (#5241CC). Se distingue de los design systems financieros habituales y, sobre todo, no se confunde con ningún color de riesgo. Geist se usa para la interfaz y Geist Mono para todos los valores financieros: el ancho fijo alinea los decimales de una fila a otra.

Es la decisión más estructural del sistema. Los colores risk/* describen el estado de negocio de un límite, de Normal a Critical. Los colores feedback/* describen el resultado de una acción en la interfaz: guardado, entrada de datos, exportación. Los colores dataviz/* codifican categorías sin juicio, sin verde, ámbar ni rojo. Así, un mismo rojo nunca puede significar a la vez «límite superado» y «campo por corregir». Además, cada nivel de riesgo combina una forma, una etiqueta y un color: círculo para un estado estable, triángulo para el aviso, octógono para el exceso.

Claude Cowork, conectado a Figma mediante el servidor MCP, sentó las bases: 251 variables repartidas en colecciones (primitivas, colores en modo claro y oscuro, dimensiones, tres densidades de visualización, motion con una variante de movimiento reducido), 17 estilos de texto, 3 elevaciones y una retícula de 12 columnas. Después, la biblioteca: 51 iconos, 34 componentes con variantes (225 variantes en total) y la estructura de la aplicación, barra lateral, barra superior, cabecera de página, barra de herramientas, panel lateral. Mi papel: fijar la dirección, revisar cada página, decidir las cuestiones de negocio.

La página más específica del archivo reúne los componentes del riesgo: glifo y badge de nivel, indicador de exceso, frescura del dato, variación, valor de exposición, utilización de un límite, filas de concentración y de contribución, gráficos, lista de alertas, historial y tabla financiera. Cada uno está documentado con sus estados y sus notas de uso. El Breach Indicator, por ejemplo, pone la duración en primer plano: un exceso de dos días no tiene la misma gravedad que uno de diez minutos.

Ocho patrones describen las tareas clave antes de dibujar una sola pantalla: filtrar exposiciones, explorar una jerarquía de carteras, pasar de un agregado a su detalle, consultar un límite, analizar las causas de un exceso, revisar el historial de una alerta, crear o modificar un límite con validación, mostrar el estado de los datos. Cada patrón precisa el contexto, la información disponible, las acciones posibles y sus consecuencias.

Las pantallas combinan estas piezas en densidad compacta: la vista general de riesgos, el seguimiento de límites con el panel de detalle abierto y la ficha de exposición de una contraparte, una página que se desplaza de la síntesis al historial del exceso.

El nivel de riesgo nunca depende solo del color: forma, etiqueta y color van juntos, y los badges mantienen un contraste texto/fondo de al menos 6,6:1. Los componentes tienen su equivalente para lectores de pantalla (una barra de utilización anuncia «104.2% of limit, breach»), y la actualización de un dato en tiempo real solo se anuncia cuando cambia de estado, nunca en cada refresco. La documentación distingue lo verificado, lo diseñado para WCAG 2.2 y lo que queda por verificar.

El prototipo sigue el recorrido de vigilancia: desde la vista general, abrir los excesos activos o la lista de límites, hacer clic en una fila para desplegar el panel de detalle y pasar a la ficha de exposición. Cinco animaciones de Figma Motion lo completan: entrada del panel, resaltado de una fila actualizada, notificación, apertura de sección, evolución de una barra de utilización.