01 — Principios
Filosofía de diseño web
Las páginas web de Flow son herramientas de conversión, no folletos. Cada sección debe ganar la atención del visitante y guiarlo hacia una acción clara.
Cinco principios rectores
1
Claridad sobre creatividad
El visitante debe entender qué ofrece Flow en 5 segundos. El copy manda, el diseño sirve al copy.
2
Un CTA por viewport
Cada pantalla visible debe tener una sola acción dominante. Nunca competir botones entre sí.
3
Espacios generosos
La densidad baja transmite premium. Mínimo 80px entre secciones, 40px entre elementos internos.
4
Prueba social temprana
Logos de clientes o un testimonial deben aparecer en el primer scroll. Reducen fricción inmediata.
5
Performance es diseño
Imágenes WebP ≤ 200KB. Carga < 3s en 4G. No carruseles pesados, no videos autoplay sin lazy load.
02 — Estructura
Anatomía de página
Toda página de Flow sigue un flujo narrativo: capturar atención, construir confianza, presentar solución, eliminar objeciones, cerrar con acción.
Flujo estándar — Landing de servicio
HERO
SOCIAL PROOF
PROBLEMA
SERVICIOS
TESTIMONIAL
CTA FINAL
Orden narrativo: Hero → Social proof → Problema → Solución/Servicios → Testimonial → CTA. Las secciones de FAQ y footer van al final pero no rompen este flujo principal.
Variantes de estructura
| Tipo | Secciones | Uso |
|---|---|---|
| Landing de servicio | Hero + Social proof + Problema + Servicios + Testimonial + CTA + FAQ + Footer | Employee XP, Leader XP, Sales XP, Service XP |
| Homepage | Hero + Clientes + Servicios + Metodología + Resultados + Blog + CTA + Footer | flowcollective.studio raíz |
| Micrositio de evento | Hero + Agenda + Speakers + Registro + Sponsors + Footer | Workshops, conferencias, webinars |
| Blog / Recurso | Header + Artículo + Sidebar + Related + Newsletter + Footer | Content marketing, recursos descargables |
04 — Tipografía
Escala tipográfica web
Escala optimizada para lectura en pantalla y jerarquía visual clara. Tamaños más grandes que apps porque las páginas web necesitan impacto visual a primer golpe de vista.
Tabla de escala
| Rol | Familia | Peso | Tamaño | Line-height | Uso |
|---|---|---|---|---|---|
| Display | Lato | 300 | 56px | 1.1 | Hero principal de homepage |
| H1 | Lato | 700 | 48px | 1.15 | Hero de landing pages |
| H2 | Lato | 700 | 36px | 1.2 | Títulos de sección |
| H3 | Lato | 600 | 24px | 1.3 | Subtítulos de sección |
| H4 | Lato | 600 | 20px | 1.35 | Títulos de cards |
| Body Large | Lato | 400 | 18px | 1.7 | Hero subheadline, intro |
| Body | Lato | 400 | 16px | 1.65 | Párrafos, descripciones |
| Body Small | Lato | 400 | 14px | 1.6 | Cards, captions, meta |
| Label | Lato | 700 | 11px | 1.4 | Badges, tags, overlines (uppercase + tracking 2px) |
Display — 56 / 300
H1 — 48 / Bold
H2 — 36 / Bold
H3 — 24 / Semi
H4 — 20 / Semi
Body Large — 18 / Regular — Para subheadlines y párrafos de introducción.
Body — 16 / Regular — Para el cuerpo de texto principal de cada sección.
Reglas tipográficas
✓ SÍ
Usar Display (300) solo para el hero principal de la homepage. H1 (700) para el hero de landing pages internas.
✗ NO
Usar Display en más de un lugar por página. No repetir tamaños hero en secciones internas.
✓ SÍ
Máximo 65-75 caracteres por línea en body text. Usar max-width: 640px en párrafos de contenido.
✗ NO
Dejar párrafos a ancho completo del viewport. Texto que cruza toda la pantalla no se lee bien.
05 — Color
Paleta & aplicación web
La regla 70/20/10 guía todo: 70% cream (fondo), 20% charcoal/darkgreen (texto y secciones oscuras), 10% green-500 (acentos y CTAs).
Paleta base
Cream
#f7f5f3
Fondo principal — 70%
Charcoal
#0f2c24
Texto, hero, footer — 20%
Green 500
#3beb64
CTAs, acentos — 10%
Dark Green
#14382e
Gradientes, secciones oscuras
Offwhite
#f0eee9
Fondos alternos entre secciones
Secondary
#768782
Texto secundario, descripciones
Fondos de sección
| Fondo | Valor | Uso |
|---|---|---|
| Cream | #f7f5f3 | Secciones estándar de contenido |
| Offwhite | #f0eee9 | Secciones alternas para crear ritmo visual |
| White | #ffffff | Cards, formularios, elementos elevados |
| Dark gradient | linear-gradient(135deg, charcoal, darkgreen) | Hero, CTA final, testimonial destacado |
| Green subtle | rgba(59,235,100,0.04) | Sección de resultados/beneficios (uso sutil) |
Ritmo visual: Alternar fondos cream → offwhite → cream → dark crea un flujo que mantiene al visitante scrolleando. Nunca usar el mismo fondo en dos secciones consecutivas.
06 — Secciones
Tipos de sección
Cada sección tiene una función específica en el flujo narrativo. Aquí están las specs para las más comunes.
Hero — 3 variantes
VARIANTE A — Full dark
Overline del servicio
Headline principal de
la landing page
la landing page
Subheadline que explica el beneficio principal en una o dos líneas claras.
CTA Principal
CTA Secundario
VARIANTE B — Light con imagen
Overline
Headline en versión clara
Subheadline descriptivo con beneficio claro para el visitante.
CTA Principal
Imagen / Ilustración
VARIANTE C — Centrado minimal
Flow Collective
El headline centrado para máximo impacto
Una línea de subheadline que complementa sin repetir lo que ya dijo el headline.
Comenzar ahora
| Spec | Valor |
|---|---|
| Padding vertical | 80px top, 60px bottom |
| Max-width headline | 720px |
| Max-width subheadline | 560px |
| CTA primario | bg green-500, color charcoal, 700, 14px, radius 6px, padding 10px 24px |
| CTA secundario | border 1px solid (cream 30% en dark, border en light), 600, 14px |
Social Proof (logos de clientes)
| Spec | Valor |
|---|---|
| Logos | Grayscale, opacity 0.5, hover: opacity 1 |
| Altura máx logo | 32px |
| Gap entre logos | 32px–48px |
| Texto opcional | "Confían en nosotros" — Label 11px, uppercase |
Cards de servicio
⚡
Título del servicio
Descripción breve del servicio y su impacto en la organización.
🎯
Título del servicio
Descripción breve del servicio y su impacto en la organización.
📊
Título del servicio
Descripción breve del servicio y su impacto en la organización.
| Spec | Valor |
|---|---|
| Background | white |
| Border | 1px solid var(--border) |
| Border-radius | 12px |
| Padding | 24px |
| Icono | 40×40px, bg rgba(green-500, 0.1), radius 8px |
| Hover | shadow-md + translateY(-2px) |
| Grid | 3 columnas desktop, 2 tablet, 1 mobile |
Testimonial
"El impacto que Flow tuvo en nuestro equipo fue inmediato. En 3 meses, la satisfacción subió 28 puntos."
Nombre del Cliente
VP People, Empresa XYZ
Formato de testimonial: Siempre incluir métrica cuantificable en la cita. Siempre incluir foto, nombre, cargo y empresa. Opcional: logo de la empresa al lado.
CTA final
¿Listo para transformar tu equipo?
Agenda una llamada de 30 min y descubre cómo podemos ayudarte.
Agendar llamada gratuita
Siempre incluir una sección CTA antes del footer. Es el último empujón antes de que el visitante se vaya. Usar fondo oscuro para que contraste con el contenido anterior.
07 — Imágenes
Fotografía & assets
Las imágenes en web deben reforzar la narrativa sin ralentizar la carga. Calidad visual + performance = la combinación correcta.
Specs técnicos
| Tipo | Formato | Peso máx | Dimensiones |
|---|---|---|---|
| Hero background | WebP | 200KB | 1920×1080px, lazy-load NO (above fold) |
| Cards / secciones | WebP | 120KB | 800×600px, lazy-load SÍ |
| Foto testimonial | WebP o JPG | 30KB | 200×200px, circular crop |
| Logo clientes | SVG | 10KB | Altura max 32px, monocromático |
| Iconos | SVG (Lucide) | 2KB | 24×24px por defecto |
| OG Image | PNG o JPG | 300KB | 1200×630px |
Estilo fotográfico
✓ SÍ
Fotografías de equipos reales trabajando juntos. Expresiones naturales, iluminación cálida. Espacios modernos de oficina o salas de taller.
✗ NO
Stock genérico de gente sonriendo a la cámara con fondos blancos. Nada que parezca "corporativo tradicional".
✓ SÍ
Usar overlay sutil rgba(15,44,36,0.4) en imágenes de hero para asegurar legibilidad del texto encima.
✗ NO
Poner texto blanco directamente sobre imágenes claras sin overlay. Siempre asegurar contraste WCAG AA.
08 — Responsive
Breakpoints & adaptación
Mobile-first en código, pero el diseño se piensa primero en desktop. Tres breakpoints cubren el 98% de dispositivos.
Breakpoints
| Nombre | Rango | Columnas | Padding | Max-width |
|---|---|---|---|---|
| Desktop | ≥ 1024px | 12 columnas | 40px | 1200px |
| Tablet | 768px – 1023px | 8 columnas | 32px | 100% |
| Mobile | ≤ 767px | 4 columnas | 20px | 100% |
Adaptaciones por breakpoint
CSS
/* Desktop — default */
.hero h1 { font-size: 48px; }
.section-title { font-size: 36px; }
.service-grid { grid-template-columns: repeat(3, 1fr); }
.content-split { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
/* Tablet */
@media (max-width: 1023px) {
.hero h1 { font-size: 36px; }
.section-title { font-size: 28px; }
.service-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Mobile */
@media (max-width: 767px) {
.hero { padding: 48px 20px 40px; }
.hero h1 { font-size: 28px; }
.section-title { font-size: 24px; }
.service-grid { grid-template-columns: 1fr; }
.content-split { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.nav-links { display: none; } /* → hamburger menu */
}
Reglas mobile
✓ SÍ
CTAs deben ser full-width en mobile (width: 100%). Thumbs fáciles de tocar: mínimo 48×48px touch target.
✗ NO
Menú de navegación expandido en mobile. Usar hamburger con overlay full-screen. Nunca links horizontales en < 768px.
Imágenes responsive: Usar
<picture> con srcset para servir imágenes en resolución apropiada. WebP con fallback a JPG para navegadores legacy.
09 — Reglas
Reglas estrictas
Antes de publicar cualquier página, verificar que cumple con estas reglas no negociables.
Do / Don't finales
✓ SÍ
Cada página tiene un solo objetivo claro: agendar llamada, descargar recurso, registrar a webinar. Un objetivo = un CTA repetido.
✗ NO
Páginas con múltiples CTAs compitiendo: "agendar", "descargar", "leer blog" todos al mismo nivel visual.
✓ SÍ
Alt text en cada imagen. Heading hierarchy correcta (H1 → H2 → H3, sin saltos). Contraste WCAG AA en todo el texto.
✗ NO
Saltar de H1 a H4. Texto gris claro sobre fondo claro. Imágenes decorativas sin alt="" vacío.
✓ SÍ
Fonts cargadas con display: swap. Imágenes optimizadas en WebP. Lazy-load en todo lo que esté below the fold.
✗ NO
Cargar 15 variantes de font. Imágenes PNG de 2MB. Scripts bloqueantes en el head sin async/defer.
Checklist pre-publicación
Meta title ≤ 60 chars, meta description ≤ 155 chars
OG image configurada (1200×630px)
Favicon y apple-touch-icon presentes
Google Analytics / tracking configurado
Todas las imágenes en WebP con fallback
Lighthouse Performance ≥ 90
CTA principal visible sin scroll
Responsive verificado en 375px, 768px, 1440px
Links internos y externos funcionan (no 404s)
Heading hierarchy sin saltos (H1 → H2 → H3)
Formularios tienen validación y feedback de error
SSL activo, redirecciones HTTP → HTTPS configuradas