TeamBank – a Design System as a Product and Cultural Asset

Our Design System is not just a toolkit, but a living design culture – it scalably combines code, design, and documentation into a single source of truth, enabling consistent, accessible, and future-ready products.

Stylized graphic: Mouse cursor moving files of different formats back and forth.

From a style guide to a shared foundation

TeamBank focuses on the digital, hybrid and in-person environments when it comes to a design for its financial products. With a growing portfolio and increasing pace, existing brand guidelines needed to be further developed and made available from a single source of truth to provide accessibility and consistency in the user journey.

easyCredit B2C products on mobile: homepage, application process, app

Mockups of three smartphones showing the easyCredit applications

easyCredit B2C products on mobile: Homepage, application process, app

Design System as a Product

Together with .diff, the UI kit that had grown within cross-functional teams was further developed into a design system as a product – with a dedicated team and its own roadmap. Core components, documentation with real practical value, and initial accessibility standards form the foundation today. The design system serves designers and developers with its artifacts as a shared source of truth, ensuring design consistency and resource conservation.

Overview of various easyCredit design system elements such as typography, buttons, form fields, logos, icons and illustrations

A common language

From over 120 scattered Figma and UI components, 35 core components emerged — unified, well documented, and systematically maintained. The Figma libraries, the web components as a package and in Storybook, as well as the design system documentation website now bridge the gap between stakeholders. As a result, the system becomes the central hub of daily collaboration.

Decorative animated graphic. Stylized mouse cursors – symbolizing people and disciplines – interact with each other.

Everyday Value

Thanks to the optimized process, TeamBank's products are now brand-compliant and reach customers sooner. Internally, QA efforts decrease, accessibility is continuously integrated, and system acceptance grows. It is more than a tool – it shapes the way of working in product design.

User interfaces are built on modular building blocks. These are based on design system components.

Part 1 of a diagram – on a highly simplified mobile screen, building block-like elements that differ only in purpose are arranged. The graphic appears light and simple.

Adaptations to specific scenarios are quickly made through standards and collaborative work, and are ready for user testing before they can go live.

Part 2 of a diagram – on a highly simplified mobile screen, abstract mouse cursors hover over a building block-like element.

All product teams immediately benefit from improvements to shared building blocks.

Part 3 of a diagram – three highly simplified mobile screens display components of the same type and different colors.

A Process in Motion

80% of the foundations — such as colors, typography, and spacing — are already implemented, with semantic design tokens and more ui-components to follow along a roadmap. diff continues to support TeamBank in expanding the system and sustainably embedding a design culture that ensures long-term efficiency and consistency.

Diagram – Roadmap of a design system as a product. The image reads: Design System Product Transition. The roadmap shows three points, from left to right: Design system as a UI Kit, design system as a product and design system as a service

"For solid brand management, we need a common language across the company. We succeeded in building a solid design culture across teams right from the center between design and development. The design system is finally a reality – it conserves resources and gives us more control over our brand."