Franke & Bornberg Multibrand-Designsystem Drupal

Goal

Goal for the project was a scalable multibrand-designsystem which combines the corporate identities of all brands. Besides the design goal we had the challenge to translate the design and tokens into Drupal.

Initial situation

Franke & Bornberg wanted to create a future-proof design system that would serve multiple brands consistently and efficiently. The goal was a system that unites the corporate identities of the main brand and sub-brands - without compromising on flexibility and recognizability.

Core requirements

• Scalable Multibrand-System

• Centralized maintenance of styles

• Consistent UI across all platforms

• Tight integration of design and code

Drupal serves as the technical foundation, as its flexible template and theme structure provided an optimal basis for the design system.

The solution

Design system according to Atomic Design

The entire UI was built modularly according to Atomic Design:

• Atoms: e.g. colors, icons, buttons

• Molecules: combinations such as cards, search fields

• Organisms: more complex components (headers etc.)

• Templates & Pages: ayout and content structure

Figma Variables and Tokens Studio enable the centralized management and reuse of all design elements.

Centralized design tokens

• Color, typography and spacing tokens created in Tokens Studio
• Export to JSON format for use in code
• Automated conversion to CSS variables via style dictionary
• Synchronization with Figma & Storybook

The result: full visual control, less redundancy and flexible theming per brand.

Implementation in Drupal

• Implementation in Drupal 10 with Tailwind CSS & Wingsuit

• Components were dynamically integrated into Drupal
• Storybook served as a “single source of truth” for developers

Advantages for multi-brand web structures

• Reduced maintenance effort: One central token set for all brands

• Increased efficiency: Fast theme changes, no redundant components
• Consistency in design & code: Uniform tokens in Figma and frontend
• Better documentation: Storybook as a living reference system

Overview of the token-based design workflow in the FUB Multibrand system: Central maintenance of design tokens in Tokens Studio, seamless transfer to Figma and as JSON for developers. The tokens flow into component-based UI design, are documented in the storybook and processed into accessible, dynamic pages in Drupal.

Modular design system with Atomic Design

Atomic Design is a structured approach to UI design in which interfaces consist of tiny, reusable building blocks. These are divided into five levels:
Atoms (e.g. colors, buttons), Molecules (e.g. search field with button), Organisms (e.g. headers), Templates (layouts) and Pages (pages with content).

Advantages: high reusability, consistent user experience and easy scalability. Design tokens create efficient, cross-brand design systems.

Multibrand design with token logic

For Franke & Bornberg, we developed a token structure that leaves room for creativity, is maintainable and can be easily expanded for other brands.

• Primitive tokens store raw values (e.g. primary.700).

• Semantic Tokens abstract these (e.g. primary).

• Component Tokens assign semantic tokens to UI elements such as buttons.

This structure enables flexible, cross-brand design systems with clear scaling and an efficient workflow.

Tokens in the Tokens Studio plugin (left) and in Figma variables and styles (right):

Conclusion: Successful multi-brand system with Drupal

The project is an example of how well thought-out design systems can be realized with a token-based approach and modern tools such as Figma, Storybook and Drupal - scalable, maintainable and consistent across brands.