Datos
Tablas sin caja, ondas que emergen del canvas y números que no mienten.
Cifras separadas por línea, barras de un solo color
Rendimiento no tiene una sola tarjeta. Son dos definiciones: cómo se separa una cifra de la siguiente, y de qué está hecha una fila de comparación.
Hasta 2026-09-20 las cifras ya vivían sin caja sobre el canvas; lo que cambia es el separador, que pasa a ser el hairline del sistema, y la barra, que pasa al navy.
Una cifra no necesita una caja para ser una cifra
El número va grande, con tabular-nums y tracking cerrado; encima, su etiqueta en mono; debajo, la variación en el verde de éxito. Lo que separa una cifra de la siguiente es una línea vertical al hairline, no un contorno ni un fondo.
Cinco cifras en cajas serían cinco cajas dentro de la isla. La línea hace el mismo trabajo con una décima parte de la tinta, y las cifras quedan alineadas en una sola grilla en vez de flotar cada una en su rectángulo.
La cifra
- Tamaño
- 26–28px · peso 600
- Tracking
- -0.035em
- Cifras
- font-variant-numeric: tabular-nums
- Etiqueta
- mono 10px · texto apagado · versalitas
- Variación
- el verde de éxito · nunca azul
- Separador
- línea vertical al hairline · 1px
- Caja
- ninguna
La comparación es una fila con una barra de un solo color
Nombre a la izquierda, barra al medio, cifra a la derecha en tabular-nums. La barra es del color de acción y nada más: no hay escala de color, no hay segunda serie encima, no hay leyenda que aprender.
La pista de la barra es el hairline fuerte, así que la fila vacía sigue teniendo forma. Las filas se separan con la misma línea mínima que la tabla: una sola manera de separar en toda la isla.
La fila de comparación
- Alto
- 38–40px
- Barra
- 6px · radio pastilla
- Relleno de la barra
- el color de acción, uno solo
- Pista
- el hairline fuerte (12 %)
- Cifra
- a la derecha · tabular-nums
- Leyenda
- ninguna — una serie no necesita leyenda
- Entre filas
- la misma línea mínima de la tabla
Canon vivo · el principio
El dashboard es un canvas. Los datos emergen del fondo — no viven en cajas.
Nada de lo que sigue tiene contenedor: la onda se desvanece hacia el papel, la tabla es contenido puro con líneas internas, y las cifras se sostienen solas. Y todo gráfico se dibuja al entrar a la vista — una sola vez: la línea se traza, las barras crecen, el anillo barre. Si un dato necesita una caja para leerse, el problema es la composición.
Conversaciones por semana
Respuesta media
4m 12s
−18% esta semana
Reuniones agendadas
36
+9 esta semana
Traspasos a persona
11
estable
Win rate del trimestre
24%
+3 pts vs trimestre anterior
Mezcla de canales
- 58%
- 27%
- Voz
- 15%
Actividad por hora
Reuniones vs meta del mes
Cadencia del lead
Pipeline vs trimestre anterior
La tabla es contenido puro
Sin caja exterior, sin fondo propio: encabezado mono, líneas horizontales entre filas y verticales tenues entre columnas. Las líneas sobresalen, la caja no existe. Texto a la izquierda, números mono tabulares a la derecha, y la fila respira con su segunda línea.
| Empresa | Etapa | Valor | Último | Acciones |
|---|---|---|---|---|
| Constructora AndesWhatsApp · Camila R. | Propuesta | $4.200.000 | 14:32 | |
| Clínica AlamedaEmail · agente | Reunión | $2.850.000 | ayer | |
| Vinos del MauleWhatsApp · agente | Conversación | $1.190.000 | 12:05 | |
| Transportes Bío-BíoVoz · Matías P. | Persona | $860.000 | lun |
La fila viaja; sus verbos no
En un ancho reducido el contenido se desplaza dentro de la tabla, nunca dentro de la página. La última columna queda fija sobre el borde derecho: la fila puede viajar, pero Abrir, Retomar o Borrar permanecen disponibles.
Las columnas salen por prioridad. Primero desaparecen datos secundarios; identidad y acciones sobreviven. Si todavía falta ancho, el wrapper toma el scroll y anuncia que es desplazable al teclado.
El comportamiento también es parte de la tabla
El markup es una tabla real, con encabezados de columna y un caption accesible. Hover usa superficie sutil; selección usa el par selected; las acciones detienen el click de la fila y se escriben como micro-etiquetas mono, no como una hilera de cajas.
Búsqueda y filtros viven arriba sobre la misma receta de línea que los formularios. Un resultado vacío se explica debajo de esa fila, sin cambiar filtros por una ilustración ni encerrar el mensaje.
Cada forma de dato tiene su gráfico
La onda cuenta tendencia. El spark da el pulso junto a una cifra, y su forma sigue al número: área que se desvanece para una tasa, columnas para un conteo, línea con punto abierto para un flujo en observación. El radial es un valor contra su meta; la distribución, las partes de un todo; el ritmo horario, intensidad por opacidad. Las barras grandes quedan para categorías — y nunca son la primera opción.
Cinco series en orden fijo: ultramarino, terracota, jade, honey, navy — siempre en su grado gráfico, más vivo que el grado texto: un área saca su contraste de su propia etiqueta, así que el relleno puede brillar. El terracota aparece a lo más una vez por gráfico. Ejes decorativos, degradados de adorno y 3D no existen.
Números que no mienten
Todo monto es entero en unidades menores ISO 4217 con su código de moneda — el formato es presentación, nunca almacenamiento. Un KPI sin fuente no se muestra: mejor una celda vacía que un número inventado.
Los porcentajes llevan un decimal máximo; las fechas relativas («ayer», «lun») solo dentro de las últimas 72 horas, después fecha corta.
- Contenedores
- ninguno; el canvas es el fondo
- Markup de tabla
- table · thead · tbody · caption
- Scroll angosto
- interno · overscroll contenido
- Acciones
- última columna fija · derecha
- Prioridad
- identidad + verbos sobreviven
- Fila
- hover sutil · selected-surface
- Al entrar
- se dibuja una vez · 800ms
- Tendencia
- onda con relleno que se desvanece
- Pulso
- sparkline junto a la cifra
- Un valor vs meta
- radial o lineal con tick
- Partes de un todo
- distribución apilada
- Números
- mono · tabular · derecha
- Series
- azul · terracota · jade · honey · navy