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, aunque no contaba 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, con tokens de diseño, variantes de componentes documentadas y prototipos que funcionaran como fuente de verdad, porque sin eso cada desarrollador tomaba decisiones visuales por su cuenta y la interfaz acumulaba inconsistencias.
Nuestro objetivo fue construir un design system completo que resolviera los dos problemas a la vez, con 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 particular, porque necesita transmitir la seguridad de un banco y al mismo tiempo la accesibilidad y la modernidad de una app, así que encontrar ese balance fue nuestra prioridad desde el día uno.
Decidimos construir el design system antes de prototipar cualquier pantalla, algo que nos permitió definir la paleta, la tipografía, los componentes y los patrones de interacción como un lenguaje coherente que el equipo de desarrollo podía implementar sin ambigüedades, con cada componente diseñado en 3 breakpoints y documentado con tokens.
Cómo quedó el sistema
La librería de componentes y las pantallas que la usan, entregadas en Figma y listas para que desarrollo las implemente.
Paleta de colores
Una paleta que transmite confianza financiera, donde 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.
Métricas del entregable
Botones, campos, insignias y tarjetas quedaron definidos una sola vez, así que cada pantalla nueva se arma combinando piezas en lugar de dibujarlas de cero.
El prototipo cubre los flujos centrales del producto, desde el registro hasta la operación diaria, navegable como si ya estuviera construido.
Color, tipografía y espaciado viven como tokens con nombre, de manera que un cambio de marca se propaga sin tocar pantalla por pantalla.
Cada componente tiene su comportamiento resuelto en celular, tablet y escritorio, así el equipo técnico no improvisa la adaptación.
¿Tenés un proyecto en mente?
Contanos qué necesitás y te respondemos por correo, sin compromiso.
O escribinos a contacto@teslerlab.com