Flow Collective Studio
Design System v1.0
El sistema de diseño que gobierna la identidad visual de Flow en todos los medios: presentaciones, documentos, web y redes sociales. Una arquitectura completa y coherente para mantener la excelencia visual en cada punto de contacto.
Comenzar
¿Qué es este sistema?
Flow Design System es una guía comprehensiva de normas, principios y componentes reutilizables que aseguran consistencia visual y experiencial en todas nuestras aplicaciones y medios. Este sistema es el fundamento de nuestra identidad visual corporativa.
¿Para quién es?
Este sistema está diseñado específicamente para el equipo interno de Flow Collective Studio. Es una herramienta de trabajo diaria para diseñadores, desarrolladores y especialistas en contenido que necesitan mantener la coherencia visual en presentaciones, documentos, sitios web y redes sociales.
La Regla 70/20/10
Nuestro esquema de color sigue una proporción cuidadosa para mantener armonía visual:
Esta proporción asegura que el verde vibrante se destaque como color de acento sin abrumar, mientras que los neutrales proporcionan un fondo limpio y profesional.
El Principio del 40% de Espacio en Blanco
Uno de los pilares de nuestro diseño es la abundancia de espacio. Mínimo 40% del área visible debe estar libre de contenido. Esto crea respiro visual, mejora la legibilidad y proyecta elegancia editorial.
Beneficios del Espacio en Blanco
Reduce el agobio cognitivo, mejora el enfoque en contenido crítico, transmite sofisticación y facilita la navegación y comprensión.
Paleta de Colores
Colores Primarios
Estos son nuestros colores principales. El verde vibrante es nuestro principal color de acento.
Colores Neutrales
Nuestra paleta neutral proporciona la base visual. El 70% de nuestros diseños utilizan estos colores.
Colores Oscuros
El verde oscuro es nuestro segundo color principal, usado en interfaces, textos oscuros y componentes.
Validación de Contraste WCAG
Todos nuestros colores de texto han sido validados para cumplir con WCAG AA para accesibilidad.
Texto oscuro en crema
Texto claro en oscuro
Verde vibrante en crema
Verde vibrante en oscuro
Tipografía
Familia Tipográfica
Flow utiliza exclusivamente Lato en todos los medios. Esta tipografía sin serifs es moderna, clara y muy legible a cualquier tamaño.
Pesos Tipográficos
Disponemos de seis pesos que proporcionar jerarquía visual clara:
Escalas Tipográficas
Selecciona el contexto de uso para ver la escala tipográfica correspondiente:
Reglas Tipográficas
- Alto de línea: Body 1.7, Headings 1.2-1.3
- Tracking: Aumenta con tamaño de fuente (más pequeño = más ajustado)
- Jerarquía: La diferencia de tamaño entre niveles debe saltar 30-50%
- Ancho de línea: Máximo 80 caracteres para body text
Espaciado y Layout
Unidad Base
Nuestro sistema de espaciado se construye sobre una unidad base de 8px. Todos los espacios son múltiplos de 8 para mantener consistencia y alineación visual.
Escala de Espaciado
Nueve niveles de espaciado cubren todas nuestras necesidades de composición:
Márgenes de Presentación
Para presentaciones 16:9:
- Margen superior e inferior: 80px
- Margen izquierdo y derecho: 100px
- Área de contenido: 1720px × 920px
Márgenes de Documento
Para documentos A4 (PDF, Word):
- Margen superior: 25mm
- Margen inferior: 20mm
- Margen interior: 30mm
- Margen exterior: 25mm
Componentes
Tarjetas (Cards)
Las tarjetas son contenedores de información con un borde verde vibrante y fondo crema.
Ejemplo de Tarjeta
Las tarjetas utilizan un borde de 1px verde vibrante, fondo de blanco roto, y esquinas redondeadas de 12px. Perfectas para agrupar información relacionada.
Botones
Dos estilos principales de botones:
Citas Destacadas (Pull Quotes)
Perfectas para resaltar mensajes clave:
El espacio en blanco no es vacío. Es respiro. Es intención. Es la diferencia entre caos y claridad.
Datos de Impacto
Para mostrar números importantes de forma prominente:
Línea de Tiempo
Para mostrar progresión o fases:
Proceso de 3 Pasos
Estructura común para explicar procesos:
Paso 1
Define tus requisitos de diseño
Paso 2
Aplica el sistema de diseño
Paso 3
Verifica y presenta
Bordes y Esquinas Redondeadas
Radios de Esquina
Seis opciones cubren todos nuestros casos de uso:
Estilos de Borde
Cuatro estilos de borde para diferentes contextos:
Borde Sutil - 1px gris, para separaciones suaves
Borde Activo - 2px verde vibrante, para estados interactivos
Borde de Tarjeta - 1px verde, para contenedores principales
Borde de Cita - 3px verde en lado izquierdo, para énfasis
Fotografía e Imágenes
Estilo Fotográfico
Flow utiliza fotografía documental y editorial. Las imágenes deben ser:
- Auténticas: Retratos y momentos genuinos, no posados ni artificiales
- Editorial: Cuidadosamente compuestas pero naturales
- Luminosas: Buen manejo de luz natural, alta calidad
- Diversas: Que reflejen la diversidad de nuestra comunidad
- Contextuales: Que ilustren concepto, no decorativas
- Modernas: Contemporáneas, no con apariencia de archivo
- Generosas: Con espacio blanco alrededor del sujeto principal
Superposiciones y Efectos
Cuando sea necesario, usa superposiciones sutiles:
- Verde oscuro 75%: Para textos claros sobre imágenes
- Negro 50%: Para máximo contraste sin oscurecer mucho
- Duotono: Verde + gris para crear marca visual consistente
Tipos Prohibidos
No uses imágenes con:
- Stock photography genérico o artificial
- Personas posando incómodamente
- Colores sobresaturados o artificiales
- Fondos desordenados o distrayentes
- Watermarks o logos visibles
Iconografía
Estilo de Iconos
Flow utiliza iconos de línea en estilo Lucide/Phosphor. Siempre contorno, nunca rellenos (excepto casos especiales).
Especificaciones
- Trazo: 1.5px de grosor
- Tamaño inline: 24px (en texto corporal)
- Tamaño featured: 48px (como elemento principal)
- Color: Verde vibrante o verde oscuro según contexto
Ejemplos de Iconos
Referencia de Design Tokens
Arquitectura de Tokens
Nuestros tokens siguen una estructura de tres niveles:
- Global Tokens: Valores base atómicos (colores primarios, espacios base)
- Alias Tokens: Referencias a globals con propósito semántico (color-text-primary)
- Component Tokens: Tokens específicos a componentes (button-padding)
Tokens Expandibles
JSON Token Export
Los tokens también están disponibles en formato JSON para importar en herramientas de diseño:
Nota Final
Este sistema de diseño es un documento vivo. Se actualiza continuamente basado en nuestras necesidades de diseño y aprendizajes en el uso. Reporta cambios o mejoras sugeridas al equipo de diseño de Flow.
Flow Design System v1.0 • Marzo 2026 • Made with love for Flow Collective