Grilla y espaciados

Usar una lógica de grilla y espaciados consistente crea un balance visual que facilita la exploración, y consolida los aspectos visuales de la interfaz para todos los usuarios.

Ancho y márgenes

El email debe tener un ancho total de 650px incluyendo un margen de 20px a cada lado entre el borde y el contenido

Grilla

Fracciones de cuartos, tercios y medios para asignar anchos a contenedores, simulando el sistema de columnas del diseño web.

CLASE / FRACCION	ANCHO A OCUPAR
1/4	25%
2/4	50%
3/4	75%
4/4	100%
1/3	33.333%
2/3	66.666%
3/3	100%
1/2	50%
2/2	100%
1/1	100%

4/4, 3/3, 2/2 o 1/1

2/4 o 1/2

1/4

3/4

1/4

2/4 o 1/2

1/3

2/3

Espaciado entre elementos

Espaciados XS

Espaciados S

Espaciados M

Espaciados L

Usos y ejemplos

Espaciado tipo XS (extra small)

Valores

Uso

Unidad mínima de separación.

Para separación dentro de de elementos más pequeños como: botones, links, contenido dentro de cards, íconos y texto.

Espciado entre título y contenido para h3, h4, h5 y h6.

Ejemplos

Títulos

Botón con ícono

Íconos y texto

Card de texto / Hero

Espaciado tipo S (small)

Valores

Uso

Separación para padding interior entre párrafos de texto body.

Separación entre contedores tipo card (gutter y margin).

Espaciado interno (pading) para contendores tipo card o otros de tamaño mediano.

Ejemplos

Párrafos de texto body

Card Big Vertical

Espaciado tipo M (Medium)

Valores

Uso

Espaciados entre secciones del email. Separación para padding interior de cards grandes (card cita, card especial, card button horizontal).

Ejemplos

Card Cita

Espaciado tipo L (Large)

Valores

Uso

Espaciado entre secciones de contenido con elementos grandes.

Deben usarse en casos en que los espaciados tipo M (48px) no sean suficientes para marcar el cambio de ritmo entre los contenidos.