23 · Orden antes que adorno

Retícula y espaciado

Todo el espaciado es múltiplo de 4 px y todo el contenido se alinea a una retícula de 12 columnas. Sin esta base, la sobriedad se vuelve descuido.

Ancho 1200 px Mostrar columnas

Rango	Columnas	Márgenes	Medianil	Contenido máx.
Hasta 639 px	4	16 px	16 px	Ancho completo
640 a 1023 px	8	24 px	24 px	Ancho completo
1024 px y más	12	32 px	24 px	1200 px, centrado

s-1 · 4 px

s-2 · 8 px

s-3 · 12 px

s-4 · 16 px

s-6 · 24 px

s-8 · 32 px

s-12 · 48 px

s-16 · 64 px

s-24 · 96 px

s-32 · 128 px

Unidad base: 4 px. Todos los espacios, tamaños y radios son múltiplos de 4 (salvo bordes de 1 px).
Dentro de un componente: s-2 a s-4 (8 a 16 px).
Entre componentes: s-6 a s-8 (24 a 32 px).
Entre secciones: s-16 a s-24 (64 a 96 px). El espacio grande es parte de la marca.
Proximidad: Lo que va junto se acerca; lo que no, se aleja. La distancia de grupo es al menos el doble de la interna.

Portada

Titular a 8 columnas, entradilla a 6, disco de luz a 4.

Texto

Columna de lectura de 8 columnas, centrada: 60 a 75 caracteres.

Tarjetas

Tres tarjetas de 4 columnas con medianil de 24 px.