¿Por dónde empezar?
1
Tokens & CSS
Integra flow-tokens.css para heredar colores, tipografía, espaciado y sombras en cualquier proyecto.
2
Core Visual
Revisa el sistema base — paleta, tipografía, grid — para entender las reglas del juego.
3
Componentes
Explora la librería de componentes y patrones para construir interfaces consistentes.
4
Canal específico
Abre la guía del canal donde vas a trabajar — social, email, web, presentación.
01 — Fundamentos
Los cimientos del sistema
Tokens, variables CSS y las reglas base que alimentan todo lo demás. Cualquier cambio aquí se propaga a todo el ecosistema.
tokens.json →
El source of truth. 200+ tokens de color, tipografía, espaciado, sombras, bordes, breakpoints y motion. Todo el sistema nace de este archivo.
flow-tokens.css →
Custom properties CSS generadas desde tokens.json. Importa este archivo para tener acceso inmediato a toda la paleta, tipografía y métricas de Flow.
Sistema Base →
La guía madre. Paleta de colores con regla 70/20/10, escala tipográfica, grid de 12 columnas, spacing tokens, sombras y radios. Todo con specimens interactivos.
Specs & Handoff Figma →
Estructura del archivo Figma, naming conventions, auto-layout specs, variantes de componentes, y workflow de handoff diseño→desarrollo.
02 — Identidad Visual
Logo, fotografía e ilustración
Las reglas que protegen la identidad de Flow en cualquier contexto visual — desde un favicon hasta un billboard.
Guía de Uso de Logo →
Versiones del logo (full, isotipo, wordmark), clear space, tamaños mínimos, variantes de color, fondos permitidos, y usos incorrectos.
Guía de Fotografía →
Estilo fotográfico, paleta tonal, composición, tratamiento de imagen, ratios de aspecto, y dirección de arte para diferentes contextos.
Guía de Ilustración →
Sistema de ilustración: estilo de línea, paleta, iconografía, diagramas, infográficos, y principios de uso en contextos de marca.
Iconografía & Banco de Iconos →
Banco completo de 150+ iconos Lucide aprobados, organizados por categoría, con specs de tamaño, color, stroke y uso por servicio Flow.
03 — Componentes & Patrones
Piezas que construyen interfaces
Desde botones hasta layouts completos. Cada componente documentado con anatomía, variantes, estados y código.
Librería de Componentes →
Botones, inputs, cards, modales, tooltips, badges, tablas, navegación — cada uno con anatomía, estados, variantes y specs de implementación.
Patrones & Layout →
Grid system, patrones de navegación, layouts de página, formularios, tablas de datos, estados vacíos, y responsive breakpoints.
Motion & Animación →
Curvas de easing, duraciones, transiciones de entrada/salida, micro-interacciones, loading states, y principios de movimiento con propósito.
Visualización de Datos →
Paleta de datos, tipos de gráficos aprobados, metric cards, reglas por contexto (diagnósticos, assessments, reportes, papers) y patrones de implementación.
04 — Lineamientos
Las reglas que cruzan todo
Accesibilidad, dark mode y voz de marca — tres capas que definen cómo se experimenta Flow más allá de lo visual.
Accesibilidad →
WCAG 2.1 AA como piso mínimo. Ratios de contraste, focus states, semántica HTML, navegación por teclado, lectores de pantalla, y testing checklist.
Dark Mode →
Superficies oscuras, ajustes de color, elevación por luminosidad, imágenes y gráficos adaptados, y la lógica de activación con body.dark-mode.
Voz & Copy →
Personalidad de marca, tono por contexto, vocabulario permitido vs. prohibido, estructura de copy, y ejemplos por tipo de pieza.
05 — Canales
Donde el sistema toca al mundo
Specs técnicos por plataforma. Cada canal tiene sus restricciones — estas guías aseguran que Flow se vea bien en todas.
Social Media Specs →
Dimensiones por plataforma (LinkedIn, Instagram, X, YouTube, TikTok), safe zones, tipografía en imágenes, templates de publicación, y grid de formatos.
Email Template Specs →
Anatomía del email, container 600px, tipografía email-safe, bulletproof CTAs para Outlook, dark mode, compatibilidad por cliente, y 4 templates wireframe.
Presentation Specs →
Formatos 16:9 y 4:3, tipografía para slides, paleta de color, 8 layouts base, tipos de slide, tratamiento de imágenes, datos y gráficos, y reglas estrictas.
Web App Specs →
Arquitectura de diagnósticos, tipografía UI, sistema de color para apps, componentes interactivos, formularios, visualización de resultados y responsive.
Website Specs →
Estructura de páginas, navegación, escala tipográfica web, secciones tipo (hero, social proof, servicios, testimonial, CTA), responsive y checklist de lanzamiento.
06 — Recursos
Archivos descargables
Assets listos para usar — logos exportados en todos los formatos y el documento maestro del sistema completo.
Logo Exports →
54 archivos: 9 SVGs vectoriales + PNGs en 5 tamaños (64–512px). Todas las variantes — full color, blanco, negro, monocromo, dark mode.
Documento Maestro →
El design system completo en formato DOCX — ideal para compartir offline, imprimir, o usar como referencia rápida sin navegador.
Changelog & Versiones →
Historial completo de cambios, adiciones y mejoras al design system con versionado semántico e inventario de archivos.
Referencia rápida
Índice completo de archivos
Todos los entregables del design system en orden alfabético, con tipo y categoría.
Archivo
Categoría
Tipo