Sistema de diseño para startup fintech
Creamos un design system completo para una fintech en etapa temprana: identidad visual, paleta de colores, componentes UI y prototipos interactivos listos para desarrollo.
El desafío
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.
Nuestro enfoque
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.
Paleta de colores
Una paleta que transmite confianza financiera. Los azules profundos comunican seguridad institucional, mientras que los tonos claros aportan modernidad y accesibilidad.
#0F172A
#1E40AF
#3B82F6
#60A5FA
#F0F9FF
Navy
Sidebar, headers, textos principales.
Blue
Botones primarios, enlaces, acentos.
Ice
Fondos, superficies, estados hover.
Componentes del design system
Cada componente fue diseñado con variantes claras, estados interactivos documentados y tokens de espaciado consistentes.
Botones
Variantes primario, secundario, peligro y deshabilitado, con sus estados interactivos.
Campo de texto
Etiqueta, texto de ayuda y validación de formato documentados para cada estado.
Badges de estado
Aprobado, pendiente, rechazado y en proceso, con un color propio para cada estado.
Card con métrica
Número destacado con su etiqueta, como el balance disponible del usuario.
Dashboard
El panel principal del usuario muestra el resumen financiero, accesos rápidos y las últimas transacciones en una vista unificada.
Onboarding móvil
El flujo de verificación de identidad fue diseñado para minimizar la fricción: pasos claros, progreso visible y acciones directas.
Métricas del entregable
El design system se entregó como una librería Figma versionada, con documentación de uso para cada componente.
40+
Componentes.
3
Breakpoints.
12
Pantallas prototipadas.
100%
Tokens documentados.
¿Tenés un proyecto en mente?
Contanos qué necesitás y te respondemos por correo, sin compromiso.
O escribinos a contacto@teslerlab.com