La tinta granito es siempre estructura y el ámbar es siempre acento. Radio de 7 px, tipografía Hanken Grotesk, cifras tabulares y tablas densas. Todo el color viene de tokens semánticos o de las familias tint de negocio: ningún componente escribe una variante de color.
Capa 1 · Primitivos
Rampas físicas en OKLCH. No se consumen nunca desde los componentes de producto.
granite — estructura
50
100
200
300
400
500
600
700
800
900
950
amber — acento
50
100
200
300
400
500
600
700
800
900
950
parchment — fondos cálidos (claro)
50
100
200
Capa 2 · Semánticos
Lo que consumen Tailwind y shadcn. Cambian de valor con el tema, nunca de nombre.
Capa 3 · Familias de negocio
Cuatro slots por estado: surface · fg · border · strong. Se resuelven en ambos temas sin dark: manual.
sync
4 estadoSalud de la sincronización con el ERP del cliente.
device
4 estadoCiclo de vida de cada terminal enrolado.
subscription
4 estadoEstado de facturación de la cuenta.
severity
3 estadoNivel de los avisos del registro de incidencias.
KPI
Cifra grande con variación. Siempre tabular-nums para que las columnas no bailen.
MRR facturado
18.450,00 €
+4,2 % vs. mes anterior
Terminales activos
127
+6 vs. mes anterior
Colas de sync pendientes
38
+12 vs. mes anterior
Errores de sync (24 h)
3
−5 vs. mes anterior
Tabla densa · Terminales
Diez filas, alto de fila comprimido, estado por tint e importe alineado a la derecha.
Terminales enrolados
3 en cola| Terminal | Establecimiento | Estado | Última conexión | Versión | Facturado (mes) |
|---|---|---|---|---|---|
| TPV-BCN-01 | Gràcia · Verdi 12 | En línea | 16 feb 2026, 09:59 | 4.8.2 | 4821,40 € |
| TPV-BCN-02 | Gràcia · Verdi 12 | En línea | 16 feb 2026, 09:59 | 4.8.2 | 3190,05 € |
| TPV-BCN-07 | Eixample · Aragó 480 | Desconectado | 16 feb 2026, 06:48 | 4.7.9 | 0,00 € |
| TPV-GIR-01 | Girona · Rambla 4 | En línea | 16 feb 2026, 09:59 | 4.8.2 | 12.744,90 € |
| TPV-GIR-02 | Girona · Rambla 4 | Vinculando | — | 4.8.2 | 0,00 € |
| TPV-TAR-03 | Tarragona · Port | Bloqueado | 14 feb 2026, 10:00 | 4.6.1 | 851,75 € |
| TPV-LLE-01 | Lleida · Blondel 22 | En línea | 16 feb 2026, 09:58 | 4.8.1 | 2065,30 € |
| TPV-MAD-04 | Madrid · Chamberí | En línea | 16 feb 2026, 09:59 | 4.8.2 | 18.320,60 € |
| TPV-MAD-05 | Madrid · Chamberí | Desconectado | 16 feb 2026, 09:09 | 4.8.0 | 7412,15 € |
| TPV-VLC-02 | València · Russafa | En línea | 16 feb 2026, 09:59 | 4.8.2 | 9634,00 € |
| Total | 59.040,15 € | ||||
Series de gráficos
Paleta categórica de seis series, dibujada con SVG a mano. Sin librerías de gráficos.
Volumen por mes
Sincronizaciones por hora
1.284
1
2
3
4
5
6
Controles de formulario
Input, select nativo, checkbox y las cuatro variantes de botón con sus estados.
Reposo
Desactivados
Tamaños
El foco usa el anillo ámbar (--ring); navega con el tabulador para comprobarlo.