Creamos un design system completo para una fintech en etapa temprana: identidad visual, paleta de colores, componentes UI y prototipos interactivos listos para desarrollo.
Una fintech nueva necesitaba transmitir seguridad y modernidad desde el primer contacto con el usuario. No contaban con identidad visual definida ni con un sistema de componentes que su equipo de desarrollo pudiera implementar de forma consistente.
El equipo técnico necesitaba especificaciones claras: tokens de diseño, variantes de componentes documentadas y prototipos que funcionaran como fuente de verdad. Sin eso, cada desarrollador tomaba decisiones visuales por su cuenta, generando inconsistencias en la interfaz.
Nuestro objetivo fue construir un design system completo que resolviera ambos problemas: una identidad visual que inspire confianza y un kit de componentes que acelere el desarrollo.
Una fintech tiene un desafío de diseño único: necesita transmitir seguridad (como un banco) pero también accesibilidad y modernidad (como una app). Encontrar ese balance fue nuestra prioridad desde el día uno.
Decidimos construir un design system antes de prototipar cualquier pantalla. Esto nos permitió definir la paleta, tipografía, componentes y patrones de interacción como un lenguaje coherente que el equipo de desarrollo podría implementar sin ambigüedades. Cada componente fue diseñado con 3 breakpoints y documentado con tokens de diseño.
Una paleta que transmite confianza financiera. Los azules profundos comunican seguridad institucional, mientras que los tonos claros aportan modernidad y accesibilidad.
Sidebar, headers, textos principales
Botones primarios, enlaces, acentos
Fondos, superficies, estados hover
Cada componente fue diseñado con variantes claras, estados interactivos documentados y tokens de espaciado consistentes.
Botones
Campo de texto
Badges de estado
Card con métrica
El panel principal del usuario muestra el resumen financiero, accesos rápidos y las últimas transacciones en una vista unificada.
El flujo de verificación de identidad fue diseñado para minimizar la fricción: pasos claros, progreso visible y acciones directas.
El design system se entregó como una librería Figma versionada, con documentación de uso para cada componente.
Creamos sistemas de diseño que unifican la experiencia visual y aceleran el desarrollo de tu equipo.
Hablemos