Grilla y espacio

El espacio se gasta en pocos elementos de alto valor — y la escala que lo gobierna.

El principio

El espacio se gasta en pocos elementos de alto valor — nunca en caber más elementos.

Un dashboard de Striker se mide por lo que cada elemento comunica, no por cuántos caben. El gráfico reclama el ancho primero; las cifras viven grandes y respiradas. Si una vista pide doce tarjetas, sobran ocho.

Así no — ocho widgets peleando

Leads

128

Activos

86

Nuevos

14

Resp.

92%

Reun.

36

Prop.

12

Win

24%

Ticket

2.1M

Así sí — tres cifras que respiran

Respuesta

92%

+4 pts esta semana

Reuniones

36

+9 esta semana

Win rate

24%

+3 pts esta semana

Mismos datos, mismo ancho. La izquierda cabe todo y no comunica nada; la derecha elige tres cifras y las deja usar el canvas. Esa es la vara para aprobar cualquier vista y cualquier gráfico.

Doce columnas para el documento

El layout llega hasta el borde con paddings mínimos; lo único que se acota es la medida del texto (≤46rem por párrafo). Un contenedor angosto desperdicia la pantalla; un párrafo a doce columnas es ilegible. Las dos cosas son ciertas a la vez.

En documentos, la prosa explica en 5 columnas y la evidencia ocupa 7. Este mismo documento usa ese reparto. El producto diario usa otra regla, porque un panel lateral puede cambiar el ancho disponible sin cambiar el viewport.

1
2
3
4
5
6
7
8
9
10
11
12
regla · 5
demo · 7
las 12 columnas · el reparto editorial es 5 + 7

En producto manda el ancho real

Los KPIs y grupos repetibles responden al ancho del bloque, no al ancho de la ventana. Cuando se abre el Supervisor, una fila de cuatro pasa a dos y después a una sin esperar otro breakpoint del viewport.

Se usa auto-fit cuando la cantidad de elementos varía: dos elementos ocupan dos pistas, nunca dos pistas más un hueco. Las columnas fijas quedan para documentos donde la relación editorial es parte del mensaje.

Panel atracado · 2 columnas

Campañas

4

Activas

2

Reuniones

36

Respuesta

24%

Canvas libre · hasta 4 columnas

Campañas

4

Activas

2

Reuniones

36

Respuesta

24%

el mismo KPI row en dos contenedores

El espacio es una escala, no un gusto

Todo hueco del producto sale de estos nueve valores. Si un diseño pide 18px, la respuesta es 16 o 20 — el paso intermedio no existe y eso es lo que mantiene el ritmo.

El aire alrededor de un elemento es parte de su valor: recortarlo para que quepa otro elemento es pagar dos veces.

  • space-14px
  • space-28px
  • space-312px
  • space-416px
  • space-520px
  • space-624px
  • space-832px
  • space-1040px
  • space-1248px
los nueve pasos, a tamaño real

Alturas de control y objetivo táctil

Tres alturas de control, tokenizadas. En pantallas táctiles el sistema sube solo: con puntero grueso todo control crece al objetivo mínimo de 44px — lo hace el token, no cada componente.

La densidad compacta también es un interruptor de datos, nunca un ajuste manual por vista.

32px

40px

48px

32 · 40 · 48 — y 44px mínimo con dedo
Documento
completo · tope 1840px
Canvas producto
completo · tope 2200px
Gutter producto
20 / 32 / 40 / 48px
Documento
12 columnas · reparto 5+7
Producto
container query · 1 / 2 / 3 / 4
Escala de espacio
4-48px · 9 pasos
Controles
32 / 40 / 48 px
Táctil
≥44px con puntero grueso
Vara de una vista
valor por elemento, no cantidad