Precisión editorial, aire y datos bellos.
Un solo sistema para las cuatro superficies de RAÍL: los paneles internos (densidad alta), la PWA pyme (espaciosa y conversacional), la consola gestoría y el portal peticionario. Confianza institucional sin gris de compliance; frescura tecnológica sin ruido. Modo claro y oscuro desde el día 1, accesibilidad AA como gate de QA.
Color
Primario verde-azulado profundo (evita el «verde ESG cliché»), neutros cálidos, estados reservados y una paleta dataviz validada por contraste y visión del color en ambos modos.
Marca
Superficies y tinta
Estado — reservado, siempre icono + texto
Dataviz — orden fijo, nunca ciclado
Validada (CVD ΔE ≥ 9,2 · visión normal ≥ 24) en claro y oscuro. Más de 3 series → agrupar en «Otros» o small multiples. El color sigue a la entidad, nunca a su rango.
Tipografía
Sans del sistema para toda la interfaz y los datos; una serif de acento solo para titulares de marca en superficies públicas. Cifras tabulares únicamente donde deben alinear.
Espaciado, radios y elevación
Escala de 4 px. Radios suaves (8 y 12 px), una sola sombra. La densidad cambia por superficie: Ops compacta, PWA pyme espaciosa.
Escala
Radios
Movimiento
Transiciones de 150–250 ms, solo opacity, transform y color. Nada rebota. prefers-reduced-motion desactiva todo lo no esencial.
Componentes núcleo
Los quince del Sprint 0. Todos con foco visible, área táctil ≥ 44 px en superficies móviles y contraste AA.
Botones
Badges y estado
Formulario
Stat tiles
Tabla + tabs
| Pyme | Módulo | Estado | Compleción | Compartido con |
|---|---|---|---|---|
| Talleres Arzak SL | Básico | ● Al día | 100% | Kutxabank · Cliente CSRD |
| Panificadora Lumbre | Básico | ◐ En curso | 54% | — |
| Textil Nervión SA | Integral | ▲ Bloqueada | 23% | — |
Alertas
Tu Eco-Track llegó a Kutxabank. Registro de acceso disponible.
Tu cliente pide datos más allá del VSME. La ley te permite responder solo el estándar — te preparamos la respuesta.
Vacío y carga
Dataviz
Un solo sistema de gráficos para toda la plataforma: marcas finas, un eje, rejilla recesiva, leyenda siempre presente con dos o más series, estados vacíos diseñados. El texto viste tinta, nunca el color de la serie.