Scalable Design System for Belfius mobile application

Redefining visual consistency, flexibility, and collaboration across platforms

The Client

Belfius Bank is a prominent Belgian banking and insurance group, wholly owned by the Belgian state since 2011. It offers a comprehensive range of services to retail customers, SMEs, public institutions, non-profit organizations, and large corporations. In 2012, following the restructuring of the Dexia Group, Dexia Bank Belgium was rebranded as Belfius Bank and Insurance, marking a new chapter in its history. Belfius has since established itself as a leader in digital banking, with its in-house developed mobile platform serving over 2 million users who engage with the app daily.

As digital banking becomes part of our daily routine, creating a smooth and modern mobile experience became a priority. This project was all about giving the app a fresh new look, making it more user-friendly, and building a design system in Figma that would bring clarity and consistency across all platforms.

Goals

  • Give the app a clean, modern visual refresh that fits today’s mobile standards
  • Make the app easier to use and more accessible for everyone
  • Build a shared design system in Figma—a single source of truth for both designers and developers working
     across different platforms
ds-big-01@2

The Challenge

The design and dev teams were running into the same problems over and over—UI components didn’t match, designs weren’t reused across projects, and everyone was solving the same issues separately. Without a shared system or clear standards, things got messy fast. It made everything take longer, cost more to maintain, and made it tough to scale new features or products with confidence.

Our Approach

Design Refresh

  • Updated typography, color palette, iconography, and spacing
  • Focus on accessibility (color contrast, type scaling, touch targets)
ds-big-02@2

Design Tokens in Figma

  • Introduced Figma Variables to define core styles (colors, spacing, fonts)
  • Organized tokens for easy scaling and future theming
ds-big-03@2
ds-small-01@2
ds-small-02@2
ds-big-04@2
ds-big-05@2

 Token Sync & Pipeline

To bridge design and development, we exported Figma Variable tokens (like colors, spacing, and typography) into a structured JSON format using Tokens Studio. These files were then processed with Style Dictionary to generate platform-specific design tokens (for web, iOS, Android, etc.). We set up an automated workflow to keep the tokens in sync via a GitHub repo, making it the single source of truth for developers.

ds-big-06@2

The Results

  • A consistent, unified user experience across platforms
  • Less back-and-forth between design and dev
  • Faster onboarding for new team members
  • Easier product scaling and theming