Sistema de Diseño BDA — Una sola fuente de verdad para la marca de un banco
10 de septiembre de 2026
Visión general
La marca de un banco no vive en un solo lugar. Vive en el sitio público, en la app de banca móvil, en las pantallas de los cajeros, en la señalética de las agencias, en las landings de tarjetas de crédito, en los banners de campaña que marketing publica cada semana y en el portal de vacantes que recursos humanos maneja por su cuenta. En el Banco del Austro todos esos canales se estaban separando, cada uno reinterpretando a su manera un manual de marca en PDF.El Sistema de Diseño BDA es la solución: una única aplicación en ejecución que es al mismo tiempo la documentación de marca, la biblioteca de componentes y la fábrica de plantillas de página. Es la fuente interactiva de la verdad para la marca digital y física del banco, y está construida para que quienes más la necesitan —marketing, los desarrolladores internos, las agencias externas— puedan usarla sin instalar nada.
El problema de un PDF
El banco ya tenía un manual de marca: el Manual de Imagen 2024, que cubre con detalle el proceso de brandeo de agencias, la señalética, los materiales y el tratamiento de cajeros. Es un documento genuinamente bueno. También es un PDF, y eso implica tres cosas.No se puede verificar. Nada impide que un banner de campaña use un azul ligeramente equivocado, porque nada compara el banner con el manual.No se puede reutilizar. Un desarrollador que lee «azul primario» tiene que volver a escribir el valor hexadecimal, y ahí es donde empieza la deriva.Queda obsoleto en el momento en que un producto nuevo necesita un tratamiento que el manual no anticipó.Por eso el sistema absorbió el manual en lugar de reemplazarlo. Las reglas de marca, el proceso de brandeo, los cronogramas de señalética y las especificaciones de cajeros viven dentro de la app como contenido estructurado, junto al código que los implementa. La regla y su implementación están en el mismo lugar, que es la única disposición en la que se mantienen de acuerdo.
Qué contiene
Tokens de diseño. Alrededor de 135 propiedades personalizadas de CSS que cubren toda la paleta con sus referencias Pantone, la escala tipográfica, los espaciados, los radios y las sombras. Cada componente lee de ahí, así que un cambio de token se propaga de una vez en lugar de convertirse en un ejercicio de buscar y reemplazar.Una biblioteca de componentes bancarios. Poco más de 50 componentes de React, organizados como piensa un diseñador y no como queda un árbol de archivos por defecto: acciones (inputs, selects, switches, sliders, campos de clave temporal), visualización de datos (tarjetas, tablas, filas de transacción, estadísticas, líneas de tiempo, avatares, badges), navegación (navbars, pestañas, migas de pan, paginación, barras móviles), retroalimentación (alertas, toasts, modales, steppers, progreso, skeletons), marca (logo, logo animado) y marketing (banners web, publicaciones sociales). Son las piezas con las que un banco realmente arma páginas: una fila de transacción y un campo de clave temporal no son UI genérica, son UI bancaria.Plantillas de páginas de producto. Dieciséis vistas completas: la familia de tarjetas Visa, tarjetas de crédito, BDA Rewards, el sitio institucional, la página de vacantes, formatos de campaña, formularios de solicitud de crédito en dos versiones y presentaciones. No son capturas de un diseño; son las páginas reales, funcionando.Mockups de interfaz. Maquetas de banca web y móvil que permiten a un stakeholder ver un cambio propuesto en contexto, dentro de un marco realista de producto, en lugar de sobre un lienzo vacío.
Dos marcas, un sistema
El Banco del Austro también opera SIPY, una billetera digital gratuita para pagar servicios municipales, parqueo y el tranvía en Cuenca. SIPY tiene identidad propia —un verde lima brillante donde BDA es azul marino— pero no debería exigir un segundo sistema de diseño.Por eso el sistema lleva dos modos de marca. Las ranuras semánticas como brand/primary, brand/alert y bg/page resuelven distinto según el tema activo, y un solo cambio de clase CSS reviste toda la biblioteca de componentes pasando del azul BDA al verde SIPY. Los componentes no saben qué marca están renderizando. Ese es el punto: una submarca es un conjunto de valores, no una bifurcación del código.
La parte difícil: entregar a un CMS heredado
El sitio público del banco funciona sobre DNN, un gestor de contenidos .NET antiguo. Sus editores trabajan con módulos de HTML. No pueden consumir una biblioteca de componentes de React, y no van a instalar una cadena de compilación.Aquí es donde la mayoría de los sistemas de diseño fracasan en silencio. La biblioteca es hermosa, el sitio en producción no la usa, y el hueco se llena con HTML escrito a mano que se desvía en un mes.La solución fue una pipeline de exportación. Cada sección de una plantilla tiene un botón que copia su HTML con todos los estilos en línea, listo para pegar directamente en un módulo de DNN. Un script genera el juego completo de snippets para las nueve variantes de tarjeta Visa —Internacional, Gold, Platinum, Signature, Infinite, Prepago, KIA, Hyundai y Familia— para que quien lance una página de tarjeta parta de un marcado correcto según el sistema y no de un editor en blanco.El compromiso es deliberado y conviene nombrarlo: los estilos en línea no son como escribirías un sitio desde cero. Pero un sistema de diseño que el CMS de producción no puede consumir es decoración. Encontrarse con la plataforma heredada donde está es lo que convierte a la biblioteca en algo que el banco realmente publica.
Mantener Figma al día
Los diseñadores trabajan en Figma; el sistema vive en el código. En lugar de dejar que ambos se separen, el código es dueño de los tokens y Figma los refleja: un plan de sincronización escrito mapea cada propiedad CSS a una variable de Figma, incluyendo los dos modos de marca, de modo que el archivo de diseño es un reflejo del build y no una verdad paralela. Un plugin de Figma vive en el repositorio para empujar esos valores.La dirección importa. El código es la fuente de verdad porque el código es lo que se publica.
Movimiento e íconos: Framer Motion para las transiciones, Lucide para la iconografía.
Pipeline de exportación: un script de Node que genera snippets HTML con estilos en línea por variante de tarjeta para DNN.
Puente de diseño: un plugin de Figma más una especificación escrita de mapeo de variables, de código a Figma.
Captación de leads: una app independiente para el formulario de solicitud de crédito.
Qué cambia
La medida de un sistema de diseño no es cuántos componentes tiene, sino cuánto tarda una página nueva y cuánto se desvía después.Una nueva landing de tarjeta ahora parte de una plantilla funcional y un botón de exportación en lugar de un módulo DNN vacío. Un banner de campaña parte de un componente de marketing atado a la paleta real. Un desarrollador que pregunta «¿qué azul es este?» lee un token en vez de sacarle el color a un PDF. Y cuando la marca evoluciona, evoluciona en un archivo, no en catorce lugares que primero hay que encontrar.Esa es la diferencia entre tener lineamientos de marca y tener una marca que se sostiene.
