September 10, 2026

Overview

A bank's brand does not live in one place. It lives in the public website, the mobile banking app, the ATM screens, the branch signage, the credit-card landing pages, the campaign banners marketing ships every week, and the job board HR runs on the side. At Banco del Austro all of those were drifting apart, each one re-interpreting a PDF brand manual in its own way. The BDA Design System is the fix: a single running application that is simultaneously the brand documentation, the component library, and the page-template factory. It is the interactive source of truth for the bank's digital and physical brand, and it is built so that the people who need it most — marketing, the in-house developers, external agencies — can use it without installing anything.

The problem with a PDF

The bank already had a brand manual: the Manual de Imagen 2024, covering the branch branding process, signage, materials and ATM treatments in careful detail. It is a genuinely good document. It is also a PDF, which means three things. It cannot be checked. Nothing stops a campaign banner from using a slightly wrong blue, because nothing compares the banner to the manual. It cannot be reused. A developer reading "primary blue" has to retype the hex value, and retyping is where drift begins. It goes out of date the moment a new product needs a treatment the manual did not anticipate. So the system absorbed the manual rather than replacing it. The brand rules, the branding process, the signage timelines and the ATM specifications all live inside the app as structured content, next to the code that implements them. The rule and its implementation sit in the same place, which is the only arrangement where they stay in agreement.

What is in it

Design tokens. Around 135 CSS custom properties covering the full palette with its Pantone references, the type scale, spacing, radii and shadows. Every component reads from these, so a token change propagates everywhere at once rather than becoming a find-and-replace exercise. A banking component library. Just over 50 React components, organised the way a designer thinks rather than the way a file tree defaults to: actions (inputs, selects, switches, sliders, one-time-password fields), data display (cards, tables, transaction rows, stats, timelines, avatars, badges), navigation (navbars, tabs, breadcrumbs, pagination, mobile tab bars), feedback (alerts, toasts, modals, steppers, progress, skeletons), brand (logo, animated logo), and marketing (web banners, social posts). They are the pieces a bank actually assembles pages from — a transaction row and a one-time-password input are not generic UI, they are banking UI. Product page templates. Sixteen full page views: the Visa card family, credit cards, BDA Rewards, the institutional site, the careers page, campaign layouts, credit application forms in two versions, and presentation decks. These are not screenshots of a design; they are the real pages, running. Interface mockups. Web and mobile banking mockups that let a stakeholder see a proposed change in context, inside a realistic product frame, instead of on an empty canvas.

Two brands, one system

Banco del Austro also runs SIPY, a free digital wallet for paying municipal services, parking and the tram in Cuenca. SIPY has its own identity — a bright lime green where BDA is navy — but it should not require a second design system. So the system carries two brand modes. Semantic slots such as brand/primary, brand/alert and bg/page resolve differently depending on the active theme, and a single CSS class switch re-skins the entire component library from BDA navy to SIPY green. The components do not know which brand they are rendering. That is the point: a sub-brand is a set of values, not a fork of the code.

The hard part: shipping into a legacy CMS

The bank's public site runs on DNN, an older .NET content management system. Its editors work in HTML modules. They cannot consume a React component library, and they are not going to install a build toolchain. This is where most design systems quietly fail. The library is beautiful, the production site does not use it, and the gap is filled by hand-written HTML that drifts within a month. The solution was an export pipeline. Each section of a page template has a button that copies its HTML with every style inlined, ready to paste straight into a DNN module. A script generates the full snippet set for all nine Visa card variants — Internacional, Gold, Platinum, Signature, Infinite, Prepago, KIA, Hyundai and Familia — so a marketer launching a card page starts from system-correct markup instead of a blank editor. The compromise is deliberate and worth naming: inlined styles are not how you would write a greenfield site. But a design system that the production CMS cannot consume is decoration. Meeting the legacy platform where it stands is what turns the library into something the bank actually ships.

Keeping Figma in step

Designers work in Figma; the system lives in code. Rather than letting the two drift, the codebase owns the tokens and Figma mirrors them — a written sync plan maps every CSS custom property to a Figma variable, including both brand modes, so the design file is a reflection of the build rather than a parallel truth. A companion Figma plugin lives in the repository for pushing those values across. The direction matters. Code is the source of truth because code is what ships.

Technologies used

• Frontend: React 19, TypeScript, Vite, React Router, Tailwind CSS v4.
• Motion and icons: Framer Motion for component transitions, Lucide for iconography.
• Export pipeline: a Node script that generates inline-styled HTML snippets per card variant for DNN.
• Design bridge: a Figma plugin plus a written variable-mapping spec, code to Figma.
• Lead capture: a separate standalone app for the credit-application lead form.

What it changes

The measure of a design system is not how many components it has, it is how long a new page takes and how far it drifts afterwards. A new card landing page now starts from a working template and an export button rather than from a blank DNN module. A campaign banner starts from a marketing component bound to the real palette. A developer asking "what blue is this" reads a token instead of eyedropping a PDF. And when the brand evolves, it evolves in one file, not in fourteen places that each need to be found first. That is the difference between having brand guidelines and having a brand that holds.