Estructura de slides, tipografía, layouts y reglas visuales para que cada deck de Flow comunique con claridad y consistencia.
Un deck de Flow no es un documento — es una herramienta de narrativa. Cada slide tiene un solo propósito: mover a la audiencia un paso adelante.
| Principio | Descripción |
|---|---|
| Un mensaje por slide | Si la slide necesita dos títulos, necesita dos slides. Sin excepciones. |
| El título ES el takeaway | El título de cada slide debe ser la conclusión, no la descripción del contenido. |
| Espacio blanco es aliado | Mínimo 40% de la slide debe quedar vacía. El aire comunica autoridad. |
| 3 niveles máximo | Título → Subtítulo → Body. Nunca más de 3 niveles tipográficos por slide. |
| Narrativa > Decoración | Todo elemento visual debe apoyar el argumento. Si no lo hace, sobra. |
Dimensiones base, safe zones y exportación para cada contexto de presentación.
| Contexto | Ancho | Alto | Ratio |
|---|---|---|---|
| Estándar (keynote/sala) | 1920px | 1080px | 16:9 |
| Virtual (Zoom/Teams) | 1920px | 1080px | 16:9 |
| Social (carrusel LI) | 1080px | 1350px | 4:5 |
| Documento (envío PDF) | 1920px | 1080px | 16:9 |
| Zona | Margen | Uso |
|---|---|---|
| Safe zone (contenido) | 80px todos los lados | Todo el texto y elementos clave deben vivir dentro de esta zona. |
| Bleed zone (imágenes) | 0px | Solo para imágenes full-bleed y fondos. Nunca texto. |
| Logo zone | 40px del borde inferior derecho | Isotipo Flow cuando aplique. Nunca logotipo completo repetido en cada slide. |
| Formato | Resolución | Uso |
|---|---|---|
.pptx | Nativa | Entrega editable al cliente |
.pdf | Alta calidad | Envío por email, versión de referencia |
.png | 2x (3840×2160) | Slides individuales para social o web |
Una escala diseñada para legibilidad a distancia. Las presentaciones no se leen — se escanean.
| Rol | Tamaño | Peso | Line-height |
|---|---|---|---|
| Título de sección | 54px | 700 (Bold) | 1.1 |
| Título de slide | 40px | 700 (Bold) | 1.15 |
| Subtítulo | 24px | 400 (Regular) | 1.3 |
| Body | 20px | 400 (Regular) | 1.5 |
| Caption / Label | 14px | 700 (Bold) | 1.4 |
| Dato destacado | 72–96px | 300 (Light) | 1.0 |
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif.
Título en 40px Bold que comunica el takeaway. Subtítulo en 24px Regular que da contexto. Máximo 2 líneas de body en 20px.
Slide con 4 tamaños de texto distintos, párrafos largos en 16px, y bullets que compiten con el título por atención.
La regla 70/20/10 adaptada al contexto de slides. Tres modos de fondo, un acento.
| Proporción | Color | Uso en slides |
|---|---|---|
| 70% | cream (#f7f5f3) | Fondo de slides de contenido, body text background |
| 20% | charcoal (#0f2c24) | Portada, cierre, separadores de sección, fondos de impacto |
| 10% | green-500 (#3beb64) | Acentos, líneas, highlights, datos clave, CTAs |
6 layouts base que cubren el 90% de las necesidades. Cada uno con propósito claro y zonas definidas.
Para portadas, separadores de sección, y slides con un solo mensaje potente. El texto ocupa máximo el 50% del espacio.
El workhorse del deck. Columna izquierda texto, derecha visual. Proporción 50/50 o 40/60.
Para comparaciones, pilares, fases de proceso. 2, 3 o 4 columnas máximo. Cada card con icono + título + 1 línea.
Para métricas de impacto, estadísticas clave, resultados. El número en 72–96px Light, centrado. Color green-500 para el dato.
Fotografía de borde a borde con gradient overlay (charcoal 70% opacidad). Texto en cream sobre el overlay.
Para metodologías, fases, roadmaps. Línea horizontal conectando los pasos. Números en green-500, títulos en bold.
Cada tipo de slide tiene una estructura específica. Esto garantiza consistencia entre decks y presentadores.
| Elemento | Spec |
|---|---|
| Fondo | Charcoal o imagen full-bleed con overlay |
| Badge | 11px, Bold, uppercase, letter-spacing 2px, green-500 |
| Título | 54px Bold, cream, centrado |
| Subtítulo | 20px Regular, cream 70% opacity |
| Acento inferior | Línea green-500, 4px alto, full-width |
Reglas para integrar fotografía, iconos e ilustraciones en slides manteniendo el estándar visual de Flow.
| Contexto | Tratamiento | Spec |
|---|---|---|
| Full-bleed background | Gradient overlay | linear-gradient(rgba(15,44,36,0.7), rgba(15,44,36,0.85)) |
| Contenida en layout | Border radius | 12px (radius-lg), sin bordes adicionales |
| Foto de equipo | Círculo + borde | Clip circle, 2px border green-500 |
| Elemento | Tamaño | Color |
|---|---|---|
| Icono en card de contenido | 32px | green-500 |
| Icono decorativo grande | 48–64px | green-500 o charcoal |
| Icono inline con texto | 20px | Mismo color que el texto |
Fotografía profesional con overlay coherente, bien recortada, con suficiente contraste para leer texto superpuesto.
Stock genérico con marca de agua, imágenes pixeladas o estiradas, fotos con fondos que compiten con el texto.
Reglas específicas para presentar datos dentro de presentaciones. Para la guía completa de visualización, ver Guía de Visualización de Datos.
| Elemento | En web/app | En presentación |
|---|---|---|
| Labels de ejes | 12px | 14px mínimo |
| Título de gráfico | 16px | 24px |
| Leyenda | Integrada | Leyenda separada, 16px, debajo del gráfico |
| Cantidad de datos | Detalle completo | Máximo 5–7 data points visibles |
| Animación | Hover states | Build-in secuencial (un dato a la vez) |
Líneas rojas que no se cruzan, sin importar el contexto o la urgencia.
Mantener márgenes de safe zone de 80px. Usar solo Lato como familia tipográfica. Incluir slide de portada y cierre con identidad Flow.
Usar WordArt, sombras en texto, gradientes en tipografía. Insertar el logo completo de Flow en cada slide. Usar más de 3 colores además de la paleta base.
Numerar las secciones. Mantener consistencia de layout dentro de una sección. Dejar mínimo 40% de espacio vacío por slide.
Poner más de 6 bullets por slide. Usar transiciones animadas entre slides (excepto fade suave). Incluir texto menor a 14px.
| # | Verificación |
|---|---|
| 1 | Cada slide tiene un solo mensaje claro |
| 2 | Títulos son takeaways, no descripciones |
| 3 | Tipografía solo usa la escala definida (14–96px) |
| 4 | Colores dentro de la paleta Flow (cream, charcoal, green-500) |
| 5 | Safe zones respetadas — nada fuera de los 80px |
| 6 | Portada y cierre con identidad Flow completa |
| 7 | Imágenes en alta resolución, bien recortadas |
| 8 | Gráficos simplificados para contexto de slide |
| 9 | Exportación en .pptx (editable) + .pdf (referencia) |
| 10 | Deck probado en proyector/pantalla real si es para keynote |