Boreal & ecosistema de Tenpo
Boreal no opera en aislamiento. Es parte de un universo de tres sistemas que trabajan juntos para construir la experiencia de Tenpo Bank. Entender cómo se relacionan es fundamental para tomar decisiones coherentes.
ORBIX, Sistema de componentes
Boreal hereda su base cromática de ORBIX: el verde Tenpo y el #121212 son los colores estructurales de toda la experiencia. Esta herencia no es casual, ya que garantiza que las ilustraciones sean reconociblemente Tenpo sin necesidad de ajustes adicionales cuando conviven con componentes de UI.
Sobre esa base, Boreal se extiende con dos colores que existen únicamente en el contexto ilustrativo: el plateado metálico, que refuerza los pilares de sofisticación y seguridad, y el naranja, que cumple un rol semántico de alerta. Estos colores no migran al sistema de componentes.
COSMOS, Sistema de contenido
Es el que tiene la relación más estrecha con Boreal. En cada pantalla donde aparece una ilustración, el tono del copy y el peso emocional deben estar calibrados en la misma dirección.
Una ilustración de alerta con un copy de éxito, semánticamente rompe el mensaje. Cualquier decisión que afecte el tono de uno debe considerar al otro. Un cambio en la ilustración sin revisar el copy, o viceversa, puede desalinear el mensaje completo.
Ninguno de los tres sistemas es autosuficiente. ORBIX construye la estructura, COSMOS le da voz, y Boreal le da carácter y accesibilidad gráfica. Cuando los tres hablan en la misma dirección, la experiencia de Tenpo es coherente.
Fundamentos de BOREAL
Propósito
Boreal es el sistema de ilustraciones de Tenpo. Existe para darle al producto una voz visual precisa, que acompañe al usuario en cada momento de su journey con claridad, carácter y coherencia.
Narrativa
En un ecosistema financiero donde la mayoría habla en genérico, Boreal habla en específico. Cada ilustración está diseñada para un momento concreto. No para decorar una pantalla, sino para decirle al usuario exactamente dónde está y qué puede esperar.
¿Por qué Boreal?
El sistema Boreal no es solo un conjunto de ilustraciones. Es una decisión estratégica que impacta directamente en cómo Tenpo se percibe, se diferencia y crece. En un contexto cada vez más sistematizado, Boreal le entrega al usuario un load cognitivo que aminora su fricción durante el journey, por lo que debe mantenerse como un proyecto transversal a todo el negocio.
El negocio gana
Diferenciación en el mercado financiero
La banca tradicional tiene un lenguaje visual predecible. Boreal rompe con ese molde con un estilo propio, tecnológico y elegante, que refleja una evolución real hacia una banca moderna sin perder solidez ni credibilidad.
Consistencia en identidad visual
El sistema se alinea con las campañas de marca y profesionaliza la app. Una identidad coherente en cada punto de contacto genera reconocimiento de marca y refuerza la confianza del usuario en cada pantalla.
Estrategia ágil y escalable
Boreal está diseñado para crecer con el producto. Su estructura escalable hace el traspaso a desarrollo más rápido y predecible, liberando tiempo para lo que realmente importa.
Posicionamiento como el primer Neobanco
Boreal construye una identidad visual coherente con los pilares estratégicos de Tenpo Bank. Cada ilustración comunica sofisticación, seguridad y confianza.
El usuario gana
Conexión emocional con la marca
Las ilustraciones no son decoración. Son el vehículo con el que Tenpo habla con sus usuarios. Generan sentido de pertenencia, comunican los pilares de marca en cada pantalla y robustecen nuestra identidad dentro de la app de forma consistente y reconocible.
El toque humano y cercano
Boreal fue diseñado escuchando a las personas mediante un profundo proceso de research con usuarios, stakeholders y estudios previos. Cada ilustración representa ideas de forma simple, directa y empática, pensada para cada usuario, no para un usuario genérico.
Confianza en lo visual
La coherencia visual proyecta seguridad. Un discurso visual claro y transparente reduce la fricción, permite que el usuario tome decisiones con más certeza y menos dudas, y construye una relación de largo plazo basada en la confiabilidad.
Pilares de marca Tenpo Bank
El sistema Boreal es la traducción visual de los cinco pilares que definen a Tenpo Bank. Cada decisión de diseño como materiales, luz, forma, color, responden a uno o más de estos valores.
Transparencia
Objetos sólidos que revelan su interior con claridad. Las superficies translúcidas y los materiales abiertos refuerzan un mensaje honesto: en Tenpo no hay nada escondido.
Innovación
Superficies cromadas, luces LED y un diseño de punta que posiciona a Tenpo como referente digital. Una visual tecnológica y futurista que va un paso más allá de lo que el mercado financiero muestra hoy.
Sofisticación
Proporciones precisas, materiales pulidos y contrastes suaves que elevan la experiencia sin ostentación. No es lujo por el lujo, es la sofisticación natural de quien sabe quién es: somos sofisticados porque somos Tenpo.
Confianza
Un lenguaje visual sobrio y moderno que construye una zona segura, estable y controlada. Cada detalle está cuidado para que el usuario sienta que su dinero y sus datos están en buenas manos.
Seguridad
Formas robustas e inquebrantables, materiales de alta gama y mensajes visuales que protegen. El sistema transmite solidez en cada píxel, porque la seguridad del dinero y los datos de nuestros usuarios no es un negociable.
GUÍA DE FOUNDATIONS VISUALES
Estilo visual
Las ilustraciones de Tenpo pertenecen al sistema Boreal, un lenguaje visual propio construido sobre objetos tridimensionales con acabados glossy y una paleta cromática anclada en el verde de la marca. El sistema combina elementos del mundo físico -como llaves, escudos, relojes y billeteras- con representaciones de interfaz digital como tarjetas flotantes y elementos iconográficos de UI, creando una estética que conecta lo tangible con lo tecnológico.
Dimensionalidad
Todas las ilustraciones están construidas en perspectiva semi isométrica y profundidad tridimensional. Los objetos tienen volumen real, con caras diferenciadas, luz consistente y sombra propia.
Acabados y materiales
El sistema trabaja con dos tipos de acabado predominantes: superficies metálicas con reflexión de luz (plateado, cromado) y superficies glossy en verde. Los elementos de UI secundarios aparecen como tarjetas de vidrio translúcido con opacidad reducida.
Paletas de color
Verde: es el protagonista absoluto. Su gradación va desde tonos lima brillante hasta verde oscuro profundo. Se complementa con grises metálicos y plateados para generar contraste y sensación de material premium.
Familia metálica verde
Familia metálica plata
Los plateado o metálicos refuerzan los pilares de forma no semántica. No comunica un estado, sino el carácter de valores como sofisticación y seguridad a través de asociaciones materiales universales en el contexto financiero-tecnológico.
Semántica del color en estados de alerta, error y espera
El naranja comunica que hay un problema, sin comunicar catástrofe y mantiene la alerta sin activar el pánico. Decisión pensada en usuarios menos bancarizados, ya que esta elección puede determinar si abandona el flow o lo completa.
Los estados neutros o de espera se resuelven con superficies de las familias verde y plateada, evitando la introducción de un tercer color semántico para mantener la claridad del sistema y la coherencia con la identidad de marca.
Familia metálica naranja
El elemento humano en Boreal
Boreal es un sistema construido predominantemente sobre objetos tecnológicos, financieros y físicos. Sin embargo, en algunas ilustraciones aparece un elemento humano: la mano.
Familia piel
La decisión y su origen:
Los elementos humanos generan empatía, cercanía y sensación de que el producto está hecho para personas reales. Sin embargo, la decisión ligada a los pilares estratégicos de la marca, fue priorizar un lenguaje visual más tecnológico ligado a una institución financiera que busca proyectar sofisticación.
El resultado fue consolidar las manos como único elemento humano del sistema, mostrándose mediante una jerarquía visual secundaria, apareciendo como soporte con un tratamiento más ligero en color y materialidad que el resto de los elementos.
Cómo aplicar este criterio:
Cuando una ilustración incluya una mano, esta debe cumplir ciertas condiciones: estar en un plano visualmente secundario respecto al objeto principal, tener un tratamiento de color más suave que el resto de la composición, y no ser el elemento que comunica el estado, ya que ese rol siempre le pertenece al objeto.
Por qué está documentado así:
La ausencia de más elementos humanos no es una limitación técnica ni estética, es una decisión de negocio con un costo de empatía conocido y aceptado.
Luz y sombra
La fuente de luz es consistente en todas las piezas: proviene desde arriba y ligeramente hacia la derecha. Esto genera reflexiones en las superficies curvas y sombras suaves que anclan los objetos visualmente.
Elementos recurrentes
A lo largo del sistema aparecen motivos que funcionan como hilo conductor: el logo N de Tenpo grabado en objetos metálicos, íconos de seguridad (escudos, candados, Face ID), y tarjetas translúcidas que representan acciones o datos dentro de la app.
Qué no hacer
- No usar el sistema Boreal con paletas de color distintas al verde Tenpo y sus complementarios.
- No mezclar estas ilustraciones con estilos flat o de línea — el contraste visual rompe la coherencia.
- No escalar las ilustraciones de forma no proporcional; el volumen 3D se distorsiona con facilidad.
- No recortar o aislar elementos individuales de una ilustración para usarlos fuera de su contexto.
- No agregar efectos de sombra externos o filtros adicionales — cada pieza ya tiene su tratamiento de luz definido.
REPOSITORIO de Ilustraciones PRINCIPALES
Reúne todas las ilustraciones activas del sistema Boreal. Cada grupo de ilustraciones está documentada con su nombre, descripción visual, contexto de uso y especificaciones de entrega.
Escala de ilustraciones
Boreal opera en, principalmente, tres tamaños según el contexto de la pantalla. El tamaño no es solo una restricción técnica, sino que define el rol comunicacional de la pieza y su complejidad compositiva permitida.
248×184 px - Pantallas principales del journey
La ilustración es el elemento con mayor peso visual en la pantalla. Posee un relato con capas de significado y profundidad visual. Puede incluir de 2 a 4 elementos compositivos, incluyendo las ventanas flotantes que refuerzan el CTA de Cosmos.
Se usa en pantallas de estado, onboarding y presentación de procesos y funcionalidades donde el usuario está en un momento de atención completa.
88×88 px - Modales y bottom sheets
La ilustración comparte protagonismo con el texto de Cosmos. La ilustración se simplifica con un máximo 2 elementos, con máximo una ventana flotante, limitando la profundidad narrativa.
Su objetivo es comunicar en detalle información específica del flow.
32×32 px - Pantallas de valor
No son ilustraciones compositivas sino íconos del sistema en forma de ventanas flotantes translúcidas. Su rol es acompañar listas de beneficios o características del producto, funcionando como marcadores visuales dentro de un listado.
62×64 px - Banners y vitrinas cross
La ilustración comparte protagonismo con el texto de Cosmos. La ilustración se simplifica con un máximo 2 elementos.
Su objetivo es promocionar productos de Tenpo, actualizar sobre estados en curso y sugerir acciones al usuario.
Contenido pendiente — comparte la URL de esta página de Figma para completarlo.