Flow — Patrones de UI & Layout

01 — Sistema de Grilla

Grilla de 12 Columnas

Base flexible para todos los layouts. 12 columnas con gutters responsivos que se adaptan al viewport.

Estructura base

1

2

3

4

5

6

7

8

9

10

11

12

Propiedad	Token	Valor
Columnas	grid.columns	12
Gutter — Mobile	grid.gutter.mobile	16px
Gutter — Tablet	grid.gutter.tablet	24px
Gutter — Desktop	grid.gutter.desktop	32px

Combinaciones de columnas comunes

Las divisiones más frecuentes dentro del sistema de 12 columnas.

12 / 12 — Full width

6 / 12

4 / 12

3 / 12

8 / 12 — Contenido

4 / 12 — Sidebar

3 / 12 — Nav

9 / 12 — Main

/* Grid base con CSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--flow-grid-gutter-desktop, 32px);
}

/* Span de columnas */
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* Gutter responsivo */
@media (max-width: 768px)  { .grid { gap: 16px; } }
@media (max-width: 1024px) { .grid { gap: 24px; } }
            

02 — Breakpoints

Puntos de Quiebre Responsivos

4 breakpoints semánticos que definen la experiencia en cada dispositivo. Mobile-first siempre.

Mobile
0 – 767px

Tablet
768 – 1023px

Desktop
1024 – 1439px

Wide
1440px+

Breakpoint	Token	Min-width	Gutter	Margin	Columnas típicas
Mobile	breakpoint.mobile	0px	16px	16px	4 (o stack)
Tablet	breakpoint.tablet	768px	24px	32px	8
Desktop	breakpoint.desktop	1024px	32px	48px	12
Wide	breakpoint.wide	1440px	32px	auto (centrado)	12

/* Mobile-first media queries */
@media (min-width: 768px)  { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1440px) { /* Wide */ }

/* CSS custom properties para breakpoints */
:root {
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;
}
        

Regla: Mobile-First

Siempre escribir CSS base para mobile y añadir complejidad con min-width. Nunca usar max-width como patrón principal — rompe la cascada natural del diseño responsivo.

03 — Contenedores

Anchos de Contenedor

5 anchos predefinidos para encapsular contenido. Cada uno tiene un caso de uso semántico.

max → 1440px (máximo absoluto)

xl → 1280px (contenido amplio)

lg → 1024px (contenido estándar)

md → 768px (contenido medio)

sm → 640px (lectura óptima)

Contenedor	Token	Ancho	Uso
Small	grid.container.sm	640px	Blog, artículos, lectura long-form
Medium	grid.container.md	768px	Formularios, contenido centrado
Large	grid.container.lg	1024px	Páginas estándar, dashboards
Extra Large	grid.container.xl	1280px	Landing pages, layouts amplios
Max	grid.container.max	1440px	Máximo absoluto — nunca exceder

/* Contenedor base reutilizable */
.container {
  width: 100%;
  max-width: var(--container-width, 1024px);
  margin-inline: auto;
  padding-inline: var(--flow-grid-margin-mobile, 16px);
}

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 48px; }
}

/* Variantes semánticas */
.container-sm  { --container-width: 640px; }
.container-md  { --container-width: 768px; }
.container-lg  { --container-width: 1024px; }
.container-xl  { --container-width: 1280px; }
.container-max { --container-width: 1440px; }
        

04 — Espaciado

Escala de Espaciado — 8px Base

9 niveles de espaciado basados en una unidad de 8px. Cada nivel tiene un propósito semántico claro.

S-1

4px

S-2

8px

S-3

16px

S-4

24px

S-5

32px

S-6

48px

S-7

64px

S-8

96px

S-9

128px

Escala	Token	Valor	Uso semántico
Scale 1	spacing.scale-1	4px	Micro — separación de iconos inline, padding mínimo
Scale 2	spacing.scale-2	8px	Tight — gap entre elementos agrupados, padding interior
Scale 3	spacing.scale-3	16px	Default — padding de componentes, margin entre párrafos
Scale 4	spacing.scale-4	24px	Comfortable — padding de cards, gap de grilla
Scale 5	spacing.scale-5	32px	Section — separación entre subsecciones
Scale 6	spacing.scale-6	48px	Large — espacio entre secciones menores
Scale 7	spacing.scale-7	64px	Major — separación entre secciones principales
Scale 8	spacing.scale-8	96px	Hero — padding superior/inferior de heros
Scale 9	spacing.scale-9	128px	Maximum — respiración máxima, above the fold

Regla: Solo valores del sistema

Nunca usar valores arbitrarios como 10px, 15px, 22px o 50px. Cada espacio en la interfaz debe corresponder a un nivel de la escala. Esto garantiza ritmo vertical y consistencia visual.

05 — Whitespace

Regla del 40% de Whitespace

Flow prioriza la respiración. Cualquier superficie digital debe mantener al menos un 40% de espacio en blanco.

✓ Correcto — ~50% whitespace

✗ Incorrecto — ~15% whitespace

✓ Hacer

Dejar mínimo 64px (scale-7) entre secciones principales. Usar scale-6 (48px) antes de cada nuevo bloque de contenido. Permitir que el padding interior de cards sea generoso — scale-4 (24px) mínimo.

✗ No hacer

Comprimir contenido para "aprovechar espacio". Reducir padding por debajo de 16px en componentes. Usar márgenes de 0 entre secciones. Llenar cada centímetro de pantalla con contenido.

Auditoría visual

Para verificar la regla del 40%: hacer screenshot → convertir a blanco (contenido) y negro (vacío) → si el negro no llega al 40%, el layout necesita más aire. En Flow, el espacio en blanco es parte del diseño, no espacio desperdiciado.

06 — Composiciones

Layouts de Página

Patrones de composición recurrentes para las superficies digitales de Flow.

Columna única centrada

Artículos, blog, documentación. Contenedor sm (640px) o md (768px) centrado.

Hero (container-sm)

Contenido centrado — 640px

Bloques de texto

Contenido + Sidebar

Dashboard, settings, documentación con navegación lateral. Grid 8+4 o 9+3.

Nav

Header de sección

Contenido principal (col-9)

Secciones full-width alternadas

Landing pages. Secciones edge-to-edge con contenido contenido en container-xl (1280px). Alternar fondos cream/offwhite/dark.

Hero — dark (full width)

Sección — cream

Sección — offwhite

Sección — dark (CTA)

Footer

Grid de cards

Servicios, features, equipo. Grid de 3 o 4 columnas con cards uniformes. Gap = gutter del breakpoint.

Título de sección centrado

Card

07 — Comportamiento Responsivo

Adaptación por Dispositivo

Cómo los layouts se transforman entre breakpoints. Reglas de colapso y reflow.

Mobile

Tablet

Desktop

Reglas de colapso

Patrón	Desktop	Tablet	Mobile
Grid 3-col	3 columnas	2 columnas	1 columna (stack)
Grid 4-col	4 columnas	2 columnas	1 columna (stack)
Sidebar + Main	Sidebar fijo + main fluido	Sidebar colapsado (hamburger)	Sin sidebar, nav overlay
Hero text + imagen	Lado a lado (6+6)	Lado a lado (6+6) comprimido	Stack (imagen arriba, texto abajo)
Tabla de datos	Tabla completa	Tabla con scroll horizontal	Cards apiladas (reflow)
Nav principal	Links visibles	Links reducidos	Hamburger menu

Tipografía responsiva

Los tamaños de fuente se reducen proporcionalmente en mobile para mantener legibilidad sin desbordar.

Elemento	Desktop (web)	Mobile	Reducción
Display	64px / 900	36px / 900	~56%
H1	48px / 700	32px / 700	~67%
H2	36px / 600	24px / 600	~67%
H3	24px / 500	20px / 500	~83%
Body	16px / 400	16px / 400	Sin cambio
Caption	13px / 300	12px / 300	~92%

/* Tipografía responsiva con clamp() */
.display {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
}

.h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
}

.h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.2;
}
        

08 — Patrones Recurrentes

Patrones de Composición

Bloques reutilizables que aparecen en múltiples superficies de Flow.

Section Divider

Separador oscuro entre secciones principales. Fondo charcoal, número en green-500, título en offwhite.

01

Título de sección

Descripción breve de la sección

Pull Quote

Cita destacada con borde verde izquierdo. Borde 3px green-500, texto primary, atribución secondary.

"El espacio entre las notas es lo que hace la música."

— Claude Debussy

Impact Data Block

Dato numérico de impacto. Número display (900 weight) + label descriptivo + borde superior green.

94%

Satisfacción del equipo

3.2x

Retorno de inversión

+47

Puntos NPS ganados

Hero Pattern

Estructura de hero estándar para todas las páginas del design system y landing pages.

/* Hero gradiente estándar */
.hero {
  background: linear-gradient(135deg, #0f2c24 0%, #14382e 60%, #1a4d3a 100%);
  color: #f7f5f3;
  padding: 80px 40px 60px;  /* scale-8 top, scale-7 bottom */
  position: relative;
  overflow: hidden;
}

/* Glow decorativo */
.hero::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,235,100,0.12) 0%, transparent 70%);
  border-radius: 50%;
}

/* Badge + H1 + Description */
.hero h1 {
  font-size: 48px;
  font-weight: 300;  /* Light base + bold keyword */
}
.hero h1 strong {
  font-weight: 700;
  color: #72f18b;  /* green-400 */
}
            

Sticky TOC Navigation

Barra de navegación adhesiva bajo el hero para documentos largos multi-sección.

.toc-nav {
  background: #f8f9f9;  /* almostwhite */
  border-bottom: 1px solid #cfd5d3;
  padding: 16px 40px;
  position: sticky;
  top: 0;
  z-index: 200;  /* zIndex.sticky */
  overflow-x: auto;
}
            

09 — Capas

Sistema de Z-Index

7 niveles predecibles de elevación para evitar guerras de z-index. Nunca usar valores arbitrarios.

Tooltip

Siempre visible sobre todo

600

Toast

Notificaciones flotantes

500

Modal

Diálogos y confirmaciones

400

Overlay

Backdrop detrás de modales

300

Sticky

Headers y navbars fijos

200

Dropdown

Menús desplegables, popovers

100

Raised

Cards elevadas (hover)

1

Base

Contenido por defecto

0

Regla: Sin valores arbitrarios

Nunca usar z-index: 9999 o cualquier valor fuera de esta escala. Si un componente necesita estar encima de otro, usar el nivel semántico correcto. Los 7 niveles cubren el 100% de los casos de UI.

Nivel	Token	Valor	Componentes
Base	zIndex.base	0	Contenido estático, secciones
Raised	zIndex.raised	1	Cards en hover, elementos elevados
Dropdown	zIndex.dropdown	100	Selects, menús, popovers
Sticky	zIndex.sticky	200	Nav, TOC, sticky headers
Overlay	zIndex.overlay	300	Backdrop de modales, dimmer
Modal	zIndex.modal	400	Diálogos, confirmaciones
Toast	zIndex.toast	500	Notificaciones, snackbars
Tooltip	zIndex.tooltip	600	Tooltips, hints