Flow — Guía de Estilo de Ilustración

01 — Filosofía

Menos tinta, más claridad

La ilustración en Flow sigue un principio fundamental: cada trazo debe tener un propósito funcional. No decoramos — comunicamos. Nuestra aproximación es iconográfica, nunca pictórica.

Solo trazo

Outline-only. Sin rellenos sólidos, sin degradados dentro de íconos. El trazo de 1.5px es el protagonista absoluto.

Funcional

Cada ilustración responde a una necesidad de UI o comunicación. Si no ayuda al usuario a entender, no se usa.

Consistente

Todos los íconos comparten el mismo peso visual, corner radius y proporciones. Un solo set, un solo lenguaje.

Principio rector: Flow usa exclusivamente íconos de línea (stroke-based) con estilo outline. Nunca íconos rellenos (filled), duotone, o con efectos 3D. La ilustración pictórica (escenas, personajes, narrativas) no forma parte del sistema visual de Flow.

02 — Estilo de Íconos

Anatomía del ícono Flow

Cada ícono sigue especificaciones precisas de trazo, tamaño y curvatura que garantizan legibilidad y coherencia en cualquier contexto.

Propiedad	Valor	Token
Stroke Width	1.5px	`iconography.stroke-width`
Fill	none (siempre vacío)	—
Stroke Linecap	round	—
Stroke Linejoin	round	—
Corner Radius	Slight (bordes suavizados, no agudos)	`iconography.corner-radius`
Estilo	Outline	`iconography.style`
Tamaño inline	24 × 24 px	`iconography.size-inline`
Tamaño feature	48 × 48 px	`iconography.size-feature`
Color sobre claro	#0f2c24 (Charcoal)	`iconography.color-on-light`
Color sobre oscuro	#f0eee9 (Off-White)	`iconography.color-on-dark`

Tamaño Inline — 24px (sobre fondo claro)

User

Phone

Mail

Message

Clock

Activity

Shield

BarChart

Tamaño Inline — 24px (sobre fondo oscuro)

User

Phone

Mail

Message

Clock

Activity

Shield

BarChart

Tamaño Feature — 48px (íconos de sección y hero)

Team

CheckCircle

BookOpen

TrendingUp

03 — Color en Ilustración

Paleta de trazo

Los íconos de Flow usan una paleta restringida. El color del trazo cambia según el contexto de fondo, nunca según la función del ícono.

Charcoal

Dark Green

Secondary

Off-White

Green 500

Contexto	Color de Trazo	Hex	Uso
Fondo claro (cream/offwhite)	Charcoal	`#0f2c24`	Uso primario — 90% de casos
Fondo oscuro (charcoal/black)	Off-White	`#f0eee9`	Inversión automática
Acento / interactivo	Green 500	`#3beb64`	Hover states, selected, active
Secundario / deshabilitado	Secondary	`#768782`	Íconos de menor jerarquía
Acento sobre oscuro	Green 400	`#72f18b`	Highlights en dark mode

Regla clave: Los íconos de Flow son siempre monocromáticos. Un solo color de trazo por ícono. Nunca se mezclan dos colores en el mismo ícono (por ejemplo, trazo charcoal con un detalle en verde). La excepción única es el estado interactivo, donde el ícono completo cambia a Green 500.

04 — Spot Illustrations

Composiciones de contexto

Las "spot illustrations" combinan 2-3 íconos del set estándar en composiciones ligeramente más grandes (80-120px). Se usan en empty states, onboarding y secciones hero de landing pages.

Equipo

Onboarding, secciones de team

Éxito

Confirmaciones, completions

Búsqueda

Empty states de búsqueda

Dashboard

Secciones de datos, analytics

Documento

Reports, propuestas, contenido

Conversación

Feedback, encuestas, chat

Regla de composición: Las spot illustrations se construyen sobre un fondo circular sutil (rgba(59,235,100,0.08)) y nunca exceden 120px de diámetro. Mantienen el mismo stroke-width de 1.5px independientemente de su escala visual.

05 — Sí / No

Qué hacer y evitar

Reglas claras para mantener la coherencia visual en toda ilustración de Flow.

✓ Hacer

Usar íconos outline con stroke 1.5px, bordes redondeados, y un solo color de trazo uniforme.

✗ Evitar

Íconos rellenos (filled), strokes gruesos, esquinas afiladas (miter), o estilos que rompan la consistencia.

✓ Hacer

Usar íconos del mismo set (Lucide/Phosphor) para mantener peso visual consistente entre todos los íconos.

✗ Evitar

Mezclar sets de íconos, tamaños inconsistentes, o combinar estilos filled + outline en la misma vista.

✓ Hacer

Cambiar todo el ícono a Green 500 para estados interactivos (hover, active, selected).

✗ Evitar

Usar dos colores dentro del mismo ícono. Los íconos son siempre monocromáticos.

✓ Hacer

Invertir a Off-White sobre fondos oscuros. Mantener el mismo stroke de 1.5px.

✗ Evitar

Agregar glow, drop-shadows, o efectos luminosos a los íconos. Flow es flat y limpio.

06 — Contextos de Uso

Dónde viven las ilustraciones

Cada contexto tiene reglas específicas de tamaño, color y comportamiento.

🖥 Interfaz Web

Íconos inline (24px) en navegación, botones, inputs, y cards. Color primario Charcoal. Estados hover en Green 500 con transición de 150ms.

24px Charcoal → Green hover 150ms transition

📱 Mobile

Mismos íconos a 24px con touch target mínimo de 44px. En tab bars, usar versión simplificada del ícono si existe.

24px ícono 44px touch target Simplificado en tabs

📊 Presentaciones

Íconos feature (48px) para bullets de contenido y secciones. Sobre slides oscuros, usar Off-White. En slides claros, Charcoal.

48px feature Contraste por fondo

📄 Documentos

Íconos inline a 16-20px para listas y call-outs. En impresión, exportar como vector (SVG/PDF). Nunca rasterizar a menos de 300dpi.

16–20px inline Vector preferred 300dpi mínimo

✉️ Email

Exportar íconos como PNG @2x sobre fondo transparente. Mantener tamaño inline de 24px visual (48px @2x). Alt text descriptivo obligatorio.

PNG @2x Transparent BG Alt text required

📲 Social Media

Para posts, usar íconos feature (48px) centrados en contenedores de 80-120px con fondo circular sutil. Nunca solos sin contexto gráfico.

48px en 80-120px container Fondo circular sutil

07 — Especificaciones SVG

Producción técnica

Reglas de exportación y atributos SVG para mantener consistencia en todos los entornos.

Atributo SVG	Valor Requerido	Notas
`viewBox`	`"0 0 24 24"`	Todos los íconos en canvas de 24×24
`width` / `height`	`24` o `48`	Según contexto (inline o feature)
`fill`	`"none"`	Siempre. Sin excepciones.
`stroke`	`"currentColor"`	Para heredar color del CSS parent
`stroke-width`	`"1.5"`	Grosor estándar de Flow
`stroke-linecap`	`"round"`	Terminaciones redondeadas
`stroke-linejoin`	`"round"`	Uniones redondeadas

SVG optimizado: Antes de integrar cualquier SVG en producción, ejecutar por SVGO con la configuración de Flow:


                    <svg xmlns="http://www.w3.org/2000/svg"

                      width="24" height="24"

                      viewBox="0 0 24 24"

                      fill="none"

                      stroke="currentColor"

                      stroke-width="1.5"

                      stroke-linecap="round"

                      stroke-linejoin="round">

                      <!-- paths here -->

                    </svg>

Exportación por formato

Formato	Uso	Configuración
SVG	Web, presentaciones, código	SVGO optimizado, `currentColor`, sin transforms innecesarios
PNG @1x	Fallback web, docs legacy	24×24px o 48×48px, fondo transparente
PNG @2x	Email, retina assets	48×48px o 96×96px, fondo transparente
PDF	Documentos impresos	Vector, sin rasterizar, CMYK si es necesario

08 — Librerías Aprobadas

Sets de íconos permitidos

Flow usa exclusivamente íconos de dos librerías open-source que cumplen con nuestras especificaciones de trazo.

● Lucide Icons

Librería principal. Fork mantenido de Feather Icons con set expandido. Stroke 2px por defecto — ajustar a 1.5px para Flow.

lucide.dev MIT License 1000+ íconos React / Vue / SVG

● Phosphor Icons

Librería secundaria para íconos especializados no disponibles en Lucide. Usar solo variante "Light" (1.5px).

phosphoricons.com MIT License 7000+ íconos Solo variante Light

Librería	Prioridad	Variante	Stroke Override
Lucide	Principal — usar primero	Default (outline)	`stroke-width="1.5"`
Phosphor	Secundaria — si Lucide no tiene	Light	Ya viene en 1.5px
Otros	Prohibido	—	—
Custom	Solo con aprobación de diseño	Debe cumplir specs de esta guía	`stroke-width="1.5"`

Regla de prioridad: Siempre buscar primero en Lucide. Solo si el concepto no existe en Lucide, usar Phosphor Light. Nunca mezclar visualmente íconos de ambos sets en la misma sección o componente — elegir un set y mantenerlo consistente dentro de cada vista.