Flow — Especificaciones de Email

Anatomía de un Email

Cada correo de Flow sigue una estructura predecible. La consistencia en la anatomía genera reconocimiento — el lector sabe que es Flow antes de leer una palabra.

De: Flow Collective <hello@flowcollective.studio>

Preheader

Texto de preview (85-100 caracteres). Se ve en la bandeja antes de abrir.

Logo

Flow Collective

Hero

Hero image / Gradient block — 600 × 250px

Headline

La pregunta que nadie le hace a su equipo directivo.

Body

Párrafos de contenido. Máximo 3-4 párrafos cortos. Cada uno con una idea. Sin muros de texto — el email respira.

CTA

Conversemos →

Regla de ritmo Un email de Flow nunca tiene más de 4 bloques de contenido entre el logo y el CTA. Si necesitas decir más, es una landing page, no un email.

Dimensiones & Estructura

El email vive en un contenedor fijo. Estos números no son sugerencias.

Propiedad	Valor	Nota
Ancho del contenedor	`600px`	Estándar de la industria. No exceder.
Padding lateral (desktop)	`24px`	Aire entre contenido y borde del contenedor
Padding lateral (mobile)	`16px`	Reduce en pantallas < 480px
Hero image	`600 × 250px`	Retina: exportar a 1200 × 500px
Logo	`36px` altura	Versión horizontal preferida
Espaciado entre secciones	`32px`	Consistente en todo el email
Ancho de texto legible	`552px`	600 − (24×2) padding
Breakpoint responsive	`480px`	Single-column a partir de aquí

Layouts de columnas

Layout	Desktop	Mobile	Uso
Single column	1 columna a 600px	Sin cambio	Newsletters, anuncios, welcome
2 columnas	2 × 276px (24px gap)	Stack a 1 columna	Comparaciones, features side-by-side
Sidebar	180px + 396px (24px gap)	Sidebar arriba, contenido abajo	Eventos, info + contexto
3 columnas	3 × 176px (24px gap)	Stack a 1 columna	Servicios, equipo, features

Compatibilidad Outlook Los layouts de 2+ columnas requieren tablas HTML anidadas para Outlook (Windows). No confíes solo en flexbox o CSS grid para email.

Tipografía para Email

Lato no está disponible en todos los clientes de correo. La estrategia es declararla con fallbacks seguros.

/* Font stack para email */
font-family: 'Lato', Helvetica, Arial, sans-serif;

/* Importar en <head> del HTML del email */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* Si el cliente bloquea la importación, cae a Helvetica */
    

Headline

Lo que mides cambia.

24px / 700-900 / line-height: 1.25

Subheadline

Y lo que no mides, también.

18px / 700 / line-height: 1.35

Body

Tres de cada cuatro directivos reportan que su cultura es "buena". Solo uno de cuatro puede describir qué significa eso en comportamientos observables.

15-16px / 400 / line-height: 1.6-1.7

Caption / Footer

Flow Collective Studio · CDMX · Política de Privacidad

12px / 400 / color: #768782

Tamaño mínimo mobile Nunca bajar de 14px en body text para mobile. Los dedos leen peor que los ojos — el texto necesita espacio.

Paleta de Color para Email

Los mismos tokens de marca, adaptados al canal. El email es conservador — los clientes de correo interpretan colores de formas impredecibles.

Fondos principales

White

#ffffff — Fondo body

Cream

#f7f5f3 — Fondo exterior

Charcoal

#0f2c24 — Headers, hero

Texto y acentos

Text Primary

#0f2c24

Text Secondary

#768782

Green 500

#3beb64 — CTA, links

Green 600

#2fd954 — Hover CTA

Sin gradientes en CTAs Los gradientes CSS se rompen en Outlook y varios clientes web. Usar colores sólidos en botones. Los gradientes solo aplican en hero images (como imagen, no como CSS).

Botones & CTAs

Un email de Flow tiene un solo CTA principal. Si tiene dos, algo está mal en la estrategia.

Propiedad	CTA Primario	CTA Secundario	Text Link
Background	`#3beb64`	`transparent`	N/A
Color de texto	`#0f2c24`	`#0f2c24`	`#2fd954`
Border	None	`2px solid #0f2c24`	N/A
Padding	`14px 32px`	`12px 28px`	N/A
Border-radius	`8px`	`8px`	N/A
Font	`15px / 700`	`14px / 700`	`15px / 700`
Min-width	`180px`	`160px`	N/A
Mobile	`100% width`	`100% width`	N/A

Código bulletproof (Outlook-safe)

<!-- CTA Primario — compatible con todos los clientes -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#3beb64"
        style="border-radius:8px; padding:14px 32px;">
      <a href="https://flowcollective.studio"
         style="color:#0f2c24; font-family:'Lato',Helvetica,Arial,sans-serif;
                font-size:15px; font-weight:700; text-decoration:none;
                display:inline-block;">
        Conversemos &rarr;
      </a>
    </td>
  </tr>
</table>
    

Copy de CTA Los CTAs de Flow son acciones concretas en primera persona o invitaciones directas: "Conversemos →", "Ver el caso completo", "Agendar diagnóstico". Nunca "Click aquí" ni "Más información".

Imágenes en Email

Las imágenes en email son un acto de fe. Algunos clientes las bloquean por default. Cada imagen debe funcionar sin verse.

Tipo	Dimensión	Formato	Peso máx.
Hero image	1200 × 500px (retina)	JPG (fotos) / PNG (gráficos)	150 KB
Logo	72px altura (retina)	PNG con transparencia	15 KB
Inline image	552px ancho (retina: 1104px)	JPG / PNG	120 KB
Icon / Badge	48 × 48px (retina: 96px)	PNG	10 KB
Social icons	32 × 32px (retina: 64px)	PNG	5 KB

Reglas de alt text

<!-- ✓ Alt text descriptivo + styled -->
<img src="hero.jpg" alt="Equipo directivo en sesión de alineación"
     width="600" height="250"
     style="display:block; max-width:100%; height:auto;
            font-family:'Lato',Helvetica,sans-serif;
            font-size:16px; color:#0f2c24;">

<!-- ✗ Nunca esto -->
<img src="hero.jpg" alt="" width="600">
<img src="hero.jpg" alt="imagen" width="600">
    

Peso total del email El peso total del HTML + imágenes inline no debe exceder 102 KB de HTML (Gmail clipping). Las imágenes deben estar hosteadas, no embedidas en base64.

Templates

Cuatro estructuras cubren el 90% de lo que Flow envía. Cada una tiene un propósito claro.

Hero Image

CTA

Newsletter / Insight

Para compartir una idea, artículo, o punto de vista. Hero + headline + 2-3 párrafos + CTA.

CTA

Invitación / Evento

Para workshops, webinars, sesiones. Headline + contexto + card con detalles + CTA de registro.

CTA

Texto Puro

Para comunicación directa: seguimiento, propuesta, conversación 1-a-1. Sin hero image. Solo texto con intención.

Caso / Resultado

42%

Métrica A

3.8×

Métrica B

91%

Métrica C

Ver caso →

Caso de Éxito / Datos

Para resultados y métricas. Hero compacto + headline + 3 stat cards + CTA hacia el caso completo.

Dark Mode en Email

Apple Mail, Gmail (iOS), y Outlook.com invierten colores automáticamente. Si no lo planeas, lo destrozan por ti.

Light Mode

Body: #ffffff

Text: #0f2c24

CTA: #3beb64

Card BG: #f7f5f3

Dark Mode

Body: #0f2c24

Text: #f0eee9

CTA: #3beb64 (sin cambio)

Card BG: #14382e

Meta tags para dark mode

<!-- Habilitar soporte dark mode -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

<!-- CSS para dark mode -->
@media (prefers-color-scheme: dark) {
  .email-body {
    background-color: #0f2c24 !important;
    color: #f0eee9 !important;
  }
  .card-bg {
    background-color: #14382e !important;
  }
  .text-secondary {
    color: #9faba7 !important;
  }
  /* El green-500 mantiene suficiente contraste en ambos modos */
  .cta-btn {
    background-color: #3beb64 !important;
    color: #0f2c24 !important;
  }
}
    

Logo adaptativo Incluir versión del logo con fondo transparente que funcione en oscuro. Si el logo tiene elementos oscuros, agregar un [data-ogsc] override o usar la versión cream del wordmark.

Estrategia por cliente

Cliente	Comportamiento Dark Mode	Acción
Apple Mail	Respeta `@media prefers-color-scheme`	CSS dark mode completo
Gmail (iOS)	Invierte colores automáticamente	Usar fondos transparentes donde sea posible
Outlook.com	Usa selectores `[data-ogsc]`	Agregar overrides con data-ogsc
Outlook (Windows)	Inversión parcial e impredecible	Testear caso por caso
Gmail (Web)	No soporta dark mode en email	Solo light mode funciona

Compatibilidad de Clientes

El email HTML vive en 2005 y 2025 al mismo tiempo. Estas son las reglas para sobrevivir en ambos.

📧

Gmail

Web + Mobile

🍎

Apple Mail

macOS + iOS

📎

Outlook

365 + Windows

🟡

Yahoo Mail

Web

⚡

Thunderbird

Desktop

📱

Samsung Mail

Android

Lo que funciona en todos lados

Feature	Soporte	Alternativa si no soporta
Tablas HTML	Universal	—
Inline CSS	Universal	—
Web fonts (@import)	Apple Mail, iOS, Android	Font stack con Helvetica/Arial
CSS Grid / Flexbox	Apple Mail, Gmail app	Tablas anidadas para layout
Border-radius	Todos excepto Outlook (Win)	VML shapes para Outlook
Background images	Todos excepto Outlook (Win)	VML fallback o color sólido
Media queries	Apple Mail, Gmail app, Yahoo	Diseño fluido con max-width
SVG	Apple Mail	PNG fallback siempre
Animated GIF	Todos excepto Outlook (Win)*	Outlook muestra primer frame

Estructura HTML base

<!DOCTYPE html>
<html lang="es" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Flow Collective</title>

  <style>
    /* Reset para email */
    body { margin:0; padding:0; width:100%; }
    table { border-collapse:collapse; }
    img { display:block; border:0; }
    a { color:#2fd954; }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#f7f5f3;">

  <!-- Wrapper -->
  <table role="presentation" width="100%" cellpadding="0"
         cellspacing="0" border="0"
         style="background-color:#f7f5f3;">
    <tr>
      <td align="center" style="padding:24px 16px;">

        <!-- Container 600px -->
        <table role="presentation" width="600" cellpadding="0"
               cellspacing="0" border="0"
               style="background-color:#ffffff;
                      border-radius:8px;
                      overflow:hidden;">

          <!-- Contenido aquí -->

        </table>
      </td>
    </tr>
  </table>

</body>
</html>
    