Patrones

Emails
en HTML.

Cómo diseñar, armar y enviar un correo que se vea bien en cualquier bandeja.

Para correos transaccionales, comunicaciones internas, invitaciones y boletines de marketing, enviados desde una plataforma o desde Gmail.

01 · En breve

En breve

Qué es
Un correo en HTML con la marca de la CCS: transaccional, comunicación interna, invitación o marketing.
Qué hereda de Solar
Colores, tipografía, contraste y voz: los de Docs y Componentes. Lo propio del correo es la estructura y el código.
La base
Fondo claro, una columna de hasta 600 px, lo esencial arriba y un botón principal.
Antes de enviarlo
Envíate una copia y revísala en Gmail, en el celular, en Outlook y en modo oscuro.

Para partir: abre el ejemplo del tipo de correo que necesitas y úsalo de base. Ir a Ejemplos

02 · Ejemplos

Ejemplos

Una plantilla por tipo de correo, con datos ficticios. Cada una se abre en una pestaña nueva.

Para verlas al ancho de un celular, usa el modo dispositivo de Chrome: Cmd + Opción + I y después Cmd + Mayús + M.

03 · Estructura del contenido

Estructura del contenido

Asunto y texto de vista previa

  • El asunto dice qué trae el correo, sin juegos de palabras.
  • El texto de vista previa, el que se ve junto al asunto en la bandeja, lo completa en 40 a 50 caracteres.
  • Si el correo se pega en Gmail, el texto de vista previa va visible, como primera línea.
Por qué

La gente decide si abre un correo por lo que ve en la bandeja (NN/g). Entre 40 y 50 caracteres se ven completos en casi todos los dispositivos (Campaign Monitor). Al pegar en Gmail, el texto oculto se pierde.

De arriba hacia abajo

  1. Logo.
  2. Título: qué es, en una línea.
  3. Primera frase: lo esencial. Qué pasa, qué tiene que hacer la persona y hasta cuándo.
  4. Botón principal.
  5. Bloques cortos: una idea por bloque, cada uno con su subtítulo.
  6. Pie: quién envía, por qué le llega y, si corresponde, cómo dejar de recibirlo.
Por qué

Lo más importante va primero (pirámide invertida), porque casi nadie lee más allá del comienzo (NN/g, NSW Email Toolkit). Los bloques con su propio subtítulo sirven a quien solo escanea (Campaign Monitor).

Redacción

  • Oraciones de 25 palabras o menos, con una idea cada una.
  • Párrafos cortos y listas. Negrita solo para lo clave.
  • Enlaces que dicen a dónde llevan: «Lee el estudio», no «Haz clic aquí».
  • Montos como $25.000, fechas como «viernes 27 de noviembre» y horas de Chile.

El resto, según Voz y tono.

Por qué

Oraciones cortas, párrafos breves y listas: NSW Email Toolkit, escribir para correo.

Botones

  • Uno principal. Dos, solo si los dos son esenciales.
  • El texto dice qué va a pasar: «Confirma tu asistencia», «Ve los cursos con descuento».
  • Las acciones secundarias van como enlace de texto.
Por qué

04 · Ancho y dispositivos

Ancho y dispositivos

  • Una columna de hasta 600 px, que se ajusta sola al ancho del celular.
  • Botones de 44 px de alto o más, hechos con HTML y no con imágenes.
  • Imágenes en https, con URL absoluta, en un servidor definitivo de la organización y no en uno de maquetas. Al doble de resolución y con width en el HTML.
  • Sin imágenes de fondo: si el fondo importa, va dentro de una imagen normal.
  • Inter solo como mejora, siempre con Arial, Helvetica y sans-serif de respaldo.
Por qué

Las columnas lado a lado necesitan reglas para apilarse, y Gmail no siempre las aplica (Can I email). Un botón hecho con imagen desaparece si se bloquean las imágenes; 44 px es el mínimo para tocarlo con el dedo (NSW Email Toolkit). Gmail no carga tipografías web (GMass). Si el servidor de las imágenes cambia, se rompen los correos que ya se enviaron.

Modo oscuro

Cada programa de correo invierte los colores a su manera, sin preguntar: el modo oscuro de Solar no sirve acá.

  • Diseña en claro, con lo oscuro dentro de las imágenes.
  • Logo en PNG transparente con un halo claro.
  • Prueba en Gmail en iOS y en Outlook para Windows, que invierten todo.
Por qué

Apple Mail no cambia nada; Outlook.com, Outlook en el celular y Gmail en Android oscurecen lo claro; Gmail en iOS y Outlook para Windows invierten también los fondos oscuros (Litmus). La adaptación con prefers-color-scheme solo funciona en Apple Mail y Outlook.com: es una mejora, no la base.

05 · Código

Código

La excepción a Solar: estilos en línea

Un correo no puede usar Tailwind: cada estilo va en el propio elemento, con style="", y los colores en hexadecimal (los de Componentes › Color).

Por qué

Los programas de correo no cargan hojas de estilo externas, y el <style> del encabezado tiene soporte parcial: Gmail lo elimina en varios casos y Outlook para Windows lo aplica con errores (Can I email). Sirve solo para mejoras: el celular y el modo oscuro.

Estructura

  • Tablas para maquetar, cada una con role="presentation".
  • Ancho fluido: width:100%; max-width:600px.
  • Sin JavaScript, formularios, video incrustado ni SVG.
  • Menos de 80 KB de HTML.
Por qué

Outlook clásico para Windows sigue en uso y muestra el HTML con el motor de Word (Postcraft). Lo demás no tiene soporte parejo (Can I email). Gmail recorta los correos de más de unos 102 KB, y si la baja queda en la parte recortada aumentan las denuncias de spam (Email on Acid).

Para que sobreviva al pegarlo en Gmail

  • El color va en el elemento que tiene el texto (<p>, <span>, <strong>, <a>), no en la celda.
  • Los fondos, con el atributo bgcolor y con background-color.
  • Nada importante depende del <style>.
Por qué

Prueba propia del 12 de noviembre de 2026: Gmail, al pegar, descarta los estilos de las celdas y del encabezado; los fondos se conservan por bgcolor.

Accesibilidad mínima

  • lang="es-CL" y dir="ltr" en <html> y en el contenedor del cuerpo.
  • <title> igual al asunto y un <h1> con el título.
  • alt en cada imagen; vacío solo si es decorativa.
  • Enlaces subrayados.
Por qué

Son los errores más comunes: de 443.585 correos revisados en 2025, solo 21 pasaron todas las pruebas (Email Markup Consortium).

06 · Antes de enviar

Antes de enviar

Antes de cada envío, envíate una copia y revísala

El navegador es solo una aproximación: lo que ves al achicar la ventana puede ser mejor que lo que llega.

La copia que te enviaste

  • En Gmail en el computador, en el celular y en Outlook.
  • En modo oscuro.
  • Con las imágenes bloqueadas: se entiende igual.
  • Cada botón y cada enlace abre su página.

El contenido

  • El asunto y el texto de vista previa se entienden juntos.
  • Lo esencial está en la primera frase.
  • Como máximo un botón principal.
  • El pie dice quién envía y por qué le llega el correo.
  • Si es promocional, cumple las leyes de Chile: el art. 28 B de la Ley del Consumidor (asunto claro, remitente y una dirección para dejar de recibirlo) y la Ley 21.719 de datos personales (derecho a oponerse al marketing directo). Lo confirma el área legal.