Grid and space
Space is spent on few high-value elements — and the scale that governs it.
This section still reads in Spanish — the English body is on its way. The demos speak for themselves.
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, y el ancho se usa completo
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 espacio es una escala, no un gusto
Todo hueco del producto sale de estos ocho 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
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
- Ancho
- completo · tope 1840px
- Padding horizontal
- 16 / 24 / 32 px
- Columnas
- 12 · reparto editorial 5+7
- Escala de espacio
- 4–40px · 8 pasos
- Controles
- 32 / 40 / 48 px
- Táctil
- ≥44px con puntero grueso
- Vara de una vista
- valor por elemento, no cantidad