How do I choose colors for multibrand apps?
TL;DR
To choose colors for multibrand apps, start by auditing your current design to identify core elements and color styles. Develop a foundational palette that captures your main brand's essence, ensuring it includes colors that can adapt across sub-brands while maintaining harmony. Focus on accessibility by meeting contrast standards. Establish clear guidelines for color use, specifying how sub-brands can introduce accent colors and define color roles for specific UI contexts. Use design tokens for efficient updates and ensure consistency across different brands while allowing for customization.
Deep dive
A multibrand UI is a design system that supports multiple brands on the same platform. It customizes UI elements like colors, fonts, and logos to match different brand identities, yet keeps the overall design consistent. The system is flexible enough for each brand to showcase its unique visual style.
Use cases of multibrand UI
- Franchise operations: A franchisor may develop a centralized software platform for managing operations, marketing, and sales across all franchise locations. Each franchisee can then customize the UI to reflect their branding while adhering to the overarching design system.
- Ecommerce platforms: Online marketplaces or eCommerce platforms that host multiple sellers or vendors may adopt a multibrand UI approach. Each seller can personalize their store with their branding while maintaining a consistent overall platform design.
- Parent company with subsidiaries: Large corporations with multiple subsidiaries or brands under their umbrella may use a multibrand UI for their internal systems, such as employee portals or CRM platforms. Each subsidiary can have its branding while benefiting from a unified design system.
- White-labeled applications: Software vendors may offer white-labeled versions of their applications to resellers, partners, or clients who want to offer the software under their branding. A multibrand UI allows for easy customization of the application's look and feel to match the client's brand identity.
How to scale your app’s UI to multibrand
Consistency enhances the user experience. By using a component library, designers have the prepared “building blocks" they need to create a consistent and effective base of styles scaling for other brands.
Here’s a guide on how to prepare for a smooth style transition:
1. Perform inventory and audit
Audit your existing design system, and catalog all the components, UI elements, and style guides currently in use. Pay close attention to how these elements function within the context of your current brand identity.
- Identify brand-specific elements: Distinguish between elements that are core to your main brand and those that could be adapted or re-imagined for other brands.
- Evaluate color styles: Analyze your existing color palette and document the rationale behind each color choice.
2. Develop a foundational color palette
Extract a set of core colors that represent the essence of your main brand. These colors will likely appear across all sub-brands in some form.
- Consider color scaling: Create a color scale based on your core palette. This scale can be used to generate variations for different sub-brands while maintaining overall harmony.
- Accessibility first: Ensure all color combinations meet accessibility standards (WCAG) for contrast between text and background elements. Tools like Adobe Contrast Checker or WebAIM can help with this.
3. Define color usage guidelines
Establish clear rules on how and when to use different colors within the design system. This will ensure consistency across sub-brands while allowing for customization. Here are some specific examples of color usage guidelines you can implement:
- Core colors: Define which colors from your core palette are mandatory for all sub-brands to use, and in what contexts (e.g., primary brand color for logos, secondary brand color for buttons).
- Accent colors: Specify how sub-brands can introduce their accent colors while maintaining overall color harmony. This could involve providing a set of pre-approved accent colors that complement your core palette or outlining guidelines for choosing appropriate accent colors (e.g., ensuring sufficient contrast with core colors, avoiding overly saturated or bright colors).
- Color combinations: Offer pre-defined color combinations for common UI elements (e.g., buttons, backgrounds, text) that use colors from your core palette and potential accent colors. This provides a starting point for sub-brands while ensuring a baseline level of visual consistency.
- Color for specific contexts: Consider defining color usage for specific contexts within the UI (e.g., using green for success states, and red for error states). This can further enhance usability and consistency across sub-brands.
How to work with white-label UI
Designing a white-label app is creating an application that can be rebranded and customized by different businesses or organizations to suit their branding and functionality needs. Solutions within a white-label design system for multibrand use, particularly for color customization, are quite similar to the approach of scaling an existing app’s design:
- Establish core colors that represent the essence of your white-label brand. These colors should appear subtly across all sub-brands, forming a foundation for the broader system.
- Offer core pre-defined design elements that stay consistent across all brand variations within your UI component library.
- Implement theming capabilities to allow dynamic customization for each brand's unique preferences.
An example of multibrand app design by Cieden
Initially, the client expected us to create a simple system just to slightly configure the functionality and visual style of a basic app. There wasn't much room for initiative as we needed to follow their direct instructions closely. However, our team still found a way to go beyond their expectations.
We created a loyalty app builder that allows for constructing an app from scratch, with such options as:
- Selecting basic functional modules and pages (e.g. registration, events, offers, news);
- A toolkit for managing format, content, and accessibility within every module;
- The definitive collection of icon sets for features and functions “for all occasions”.
Flexybox has plenty of products in the most diverse industries, and their number grows persistently. Therefore, our client got a “jackpot” with this universal constructor applying to the needs of any online business in any area, infinitely.
How to facilitate color updates through design token system
Implementing a tokens design system (variables in Figma) for color values allows you to easily manage and update across different brand palettes. Transitioning into a token-based design guarantees coherence and facilitates efficient updates. A brand's set of tokens can be compiled into a token sheet to create our brand theme. Components can then reference this token sheet as their source of truth.
A token is documented in four parts:
-
- Brand theme – A set of unique tokens that define a unique brand theme;
- Token – The code identifier for a unique role. Tokens are universal and remain consistent across all themes, ensuring a single source of truth for all our brands;
- Role – The specific use of a token. Roles are consistent across themes and define how the token can be used, including accessibility criteria;
- Value - The actual style (e.g., hex code) assigned to a token. Values can be adjusted for each brand theme, considering their application.
Each white-label component references multiple tokens, allowing color properties to be customized for each brand theme while keeping the same token identifier. However, it's important to use tokens consistently for their role and keep them unchanged within each brand theme.
Volkswagen's GroupUI: a multibrand design system in action
Volkswagen Group, with brands like Audi, Skoda, and Porsche under its umbrella, is one of those multibrand companies that faced a challenge: maintaining design consistency across various digital products while allowing each brand to retain its unique identity. Their solution is GroupUI – a multibrand design system.
Here's how GroupUI is designed to serve multiple brands
- Shared foundation: GroupUI provides a core set of UI components, like buttons, forms, and navigation bars. These components share a consistent look and feel, ensuring a familiar user experience across all brands. Imagine reusable building blocks that function similarly but can be styled differently for each brand.
- Brand customization: While core components offer consistency, GroupUI allows for brand-specific customization. This can involve tailoring colors, typography, and iconography to reflect each brand's personality. Think of it like having different colored paints to decorate the same pre-built furniture.
- Improved design efficiency: By reusing pre-built components, designers across brands save time and effort, allowing them to focus on brand-specific design elements and innovation.
- Enhanced brand consistency: GroupUI ensures a baseline level of design consistency across all brands, giving a sense of familiarity and trust to users interacting with different Volkswagen Group products.
Examples of brand adoption
- Skoda: Skoda's website uses GroupUI components while incorporating their signature brand colors (green and white) and a clean, minimalist aesthetic.
- Audi: Audi's digital products use GroupUI for core functionalities, but maintain their brand identity through a sophisticated color palette (black and silver) and a focus on high-tech visuals.
Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- Volkswagen Group Case Study: Driving Digital Transformation, Company-Wide Collaboration & Consistency with Stencil
- Designing with tokens for a flexible multi-brand design system by Jason Bird
- Top Design Considerations for White Label Applications by Monique Solva
- How to create a design system for white label apps by Yubing Zhang