The Backbase Design System is the foundation for crafting seamless, consistent, and engaging digital banking experiences. Designed for efficiency and scalability, it provides a unified framework that empowers designers and developers to create superior user experiences across iOS, Android, Web, and Figma with a set of libraries tailored for each platform.

Getting started

These guides will help you with the initial set up, customization of the design system to match your brand, and walk you through the best accessibility practices—so you can create a superior banking experience with ease.

Foundations

Explore the foundations of the Backbase Design System. Learn how to use components, design tokens and apply UI patterns to create accessible and consistent banking experiences. These guides will help you build a solid design foundation.

Why a Design System?

In the fast-evolving and highly competitive world of digital banking, speed & quality are key to delivering exceptional customer journeys that resonate with your customers. The Backbase Design System ensures:

• Reusability & Speed: Our ready-to-use components and design patterns help teams reuse UI elements across multitude of applications, cutting down on duplicate work and speeding up development.
• Consistency: A design system delivers a consistent design language, ensuring that part of the customer journey feels familiar. This consistency enhances customer's trust, strengthens brand recognition, and improves usability, leading to a more intuitive and engaging banking experience.
• Theming & Customization: Backbase Design System is powered by a robust theming engine that enables banks and financial institutions to easily customize their digital banking experiences, ensuring seamless expression of their unique brand identity. This allows them to stand out in the market while maintaining consistency, usability, and trust with their customers.

What's inside?

• Design Tokens: A set of configurable design variables that enable theming and branding that helps maintain visual consistency across platforms. These tokens define reusable design values such as Colors, Typography, Radius or Spacing.
• Component Libraries: Acollection of pre-built, reusable components that can be used for the design and development of iOS, Android, and web applications.
• Documentation: Part of the Backbase Design System is also complete documentation, structured to guide the adoption and implementation of the system across each platform — including Figma, iOS, Android, and Web — during the design and development process.