10 september 2026

Overzicht

Het merk van een bank leeft niet op één plek. Het leeft op de publieke website, in de mobiele bankapp, op de geldautomatenschermen, op de signalisatie in de kantoren, op de landingspagina's voor kredietkaarten, op de campagnebanners die marketing wekelijks de deur uit doet, en op de jobpagina's die HR er intussen bij runt. Bij Banco del Austro dreven al die uitingen uit elkaar, elk met een eigen interpretatie van een PDF-merkhandboek. Het BDA Design System is de oplossing: één draaiende applicatie die tegelijk merkdocumentatie, componentenbibliotheek en fabriek voor paginasjablonen is. Het is de interactieve bron van waarheid voor het digitale en fysieke merk van de bank, en het is zo gebouwd dat de mensen die het het meest nodig hebben — marketing, de interne ontwikkelaars, externe agencies — het kunnen gebruiken zonder iets te installeren.

Het probleem met een PDF

De bank had al een merkhandboek: het Manual de Imagen 2024, met een nauwgezette beschrijving van het brandingproces voor kantoren, signalisatie, materialen en de aankleding van geldautomaten. Het is een echt goed document. Het is alleen ook een PDF, en dat betekent drie dingen. Je kan het niet controleren. Niets houdt een campagnebanner tegen die een net iets verkeerd blauw gebruikt, want niets vergelijkt de banner met het handboek. Je kan het niet hergebruiken. Een ontwikkelaar die "primair blauw" leest, moet de hexwaarde opnieuw overtypen, en met overtypen begint de drift. Het is verouderd zodra een nieuw product een uitwerking vraagt die het handboek niet had voorzien. Het systeem heeft het handboek dus opgenomen in plaats van vervangen. De merkreis, het brandingproces, de timing voor signalisatie en de specificaties voor geldautomaten staan allemaal als gestructureerde content in de app, naast de code die ze implementeert. De regel en de implementatie zitten op dezelfde plek, en dat is de enige opstelling waarin ze het met elkaar eens blijven.

Wat erin zit

Design tokens. Ongeveer 135 CSS-custom-properties voor het volledige palet met de Pantone-referenties, de typeschaal, spacing, radii en shadows. Elke component leest hieruit, dus een tokenwijziging plant zich in één keer overal voort in plaats van een zoek-en-vervangoperatie te worden. Een componentenbibliotheek voor bankieren. Iets meer dan 50 React-componenten, georganiseerd zoals een designer denkt in plaats van zoals een bestandsboom standaard doet: acties (inputs, selects, switches, sliders, velden voor eenmalige wachtwoorden), dataweergave (kaarten, tabellen, transactierijen, statistieken, tijdlijnen, avatars, badges), navigatie (navbars, tabs, breadcrumbs, paginering, mobiele tabbalken), feedback (alerts, toasts, modals, steppers, progress, skeletons), merk (logo, geanimeerd logo) en marketing (webbanners, social posts). Het zijn de stukken waaruit een bank echt pagina's bouwt — een transactierij en een veld voor een eenmalig wachtwoord zijn geen generieke UI, het is bank-UI. Paginasjablonen per product. Zestien volledige paginabeelden: de Visa-kaartfamilie, kredietkaarten, BDA Rewards, de institutionele site, de jobsite, campagnelayouts, kredietaanvraagformulieren in twee versies en presentatiedecks. Dat zijn geen screenshots van een design; het zijn de echte pagina's, live. Interfacemockups. Mockups voor web- en mobiel bankieren waarin een stakeholder een voorgestelde wijziging in context ziet, binnen een realistische productkader, in plaats van op een leeg canvas.

Twee merken, één systeem

Banco del Austro runt ook SIPY, een gratis digitale portemonnee om gemeentediensten, parkeren en de tram in Cuenca te betalen. SIPY heeft een eigen identiteit — een fel limoengroen waar BDA marineblauw is — maar zou geen tweede design system mogen vereisen. Het systeem heeft dus twee merkmodi. Semantische slots zoals brand/primary, brand/alert en bg/page lossen anders op afhankelijk van het actieve thema, en één CSS-klassewissel herskint de volledige componentenbibliotheek van BDA-marineblauw naar SIPY-groen. De componenten weten niet welk merk ze renderen. Dat is precies de bedoeling: een submerk is een set waarden, geen fork van de code.

Het lastige stuk: shippen naar een legacy-CMS

De publieke site van de bank draait op DNN, een ouder .NET-contentmanagementsysteem. De redacteurs werken in HTML-modules. Ze kunnen geen React-componentenbibliotheek gebruiken, en ze gaan geen buildtoolchain installeren. Hier gaan de meeste design systems stilletjes stuk. De bibliotheek is mooi, de productiesite gebruikt ze niet, en het gat wordt gevuld met handgeschreven HTML die binnen een maand afdrijft. De oplossing was een exportpipeline. Elke sectie van een paginasjabloon heeft een knop die de HTML kopieert met alle stijlen inline, klaar om rechtstreeks in een DNN-module te plakken. Een script genereert de volledige snippetset voor alle negen Visa-kaartvarianten — Internacional, Gold, Platinum, Signature, Infinite, Prepago, KIA, Hyundai en Familia — zodat een marketeer die een kaartpagina lanceert vertrekt van systeemcorrecte markup in plaats van een lege editor. Die afweging is bewust en mag bij naam genoemd worden: inline stijlen zijn niet hoe je een greenfield-site schrijft. Maar een design system dat het productie-CMS niet kan gebruiken, is decoratie. Het legacyplatform tegemoetkomen waar het staat, is wat de bibliotheek verandert in iets wat de bank echt de deur uit doet.

Figma in de pas houden

Designers werken in Figma; het systeem leeft in code. In plaats van de twee te laten afdrijven, is de codebase eigenaar van de tokens en spiegelt Figma ze — een uitgeschreven syncplan koppelt elke CSS-custom-property aan een Figma-variabele, inclusief beide merkmodi, zodat het designbestand een weerspiegeling van de build is in plaats van een parallelle waarheid. Een bijhorende Figma-plugin staat in de repository om die waarden door te pushen. De richting is belangrijk. Code is de bron van waarheid, want code is wat er uiteindelijk ship.

Gebruikte technologieën

• Frontend: React 19, TypeScript, Vite, React Router, Tailwind CSS v4.
• Motion en iconen: Framer Motion voor componenttransities, Lucide voor iconografie.
• Exportpipeline: een Node-script dat per kaartvariant HTML-snippets met inline stijlen genereert voor DNN.
• Designbrug: een Figma-plugin plus een uitgeschreven specificatie voor de variabelemmapping, van code naar Figma.
• Leadcaptatie: een aparte standalone app voor het leadformulier van de kredietaanvraag.

Wat het verandert

De maatstaf voor een design system is niet hoeveel componenten het heeft, maar hoe lang een nieuwe pagina duurt en hoeveel ze daarna afdrijft. Een nieuwe landingspagina voor een kaart vertrekt nu van een werkend sjabloon en een exportknop in plaats van een lege DNN-module. Een campagnebanner vertrekt van een marketingcomponent die aan het echte palet hangt. Een ontwikkelaar die vraagt "welk blauw is dit" leest een token in plaats van een PDF te eyedroppen. En wanneer het merk evolueert, evolueert het in één bestand, niet op veertien plekken die elk eerst gevonden moeten worden. Dat is het verschil tussen merkrichtlijnen hebben en een merk hebben dat standhoudt.