Enterprise White Label Theming System
Enterprise White Label Theming System
A theming system that allows B2B clients to seamlessly customize HRIS platform’s branding
Project Type
Design System
Role
UI/UX Designer
Year
2025
[Important Notice] All data shown here has been obfuscated for confidentiality.
At a Glance
The global search feature on CATAPA was functionally limited to a "Menu Finder," forcing users to memorize complex navigation paths to complete simple tasks. I led a competitive analysis and redesign initiative to transform search into an intelligent "Command Center," reducing cognitive load by enabling direct data access, natural language queries, and actionable workflows.
The Challenge
Enabling hundreds of B2B clients to brand the platform without maintaining hundreds of custom CSS files.
The Approach
A "Headless" Design System based on semantic tokens, not static hex codes.
The Outcome
Reduced client theme configuration time by 90% and ensured 100% WCAG accessibility compliance via algorithmic guardrails..
The Problem
Our clients demanded the platform that match their brand color. However, our legacy approach of manual CSS overrides was unscalable.
The Maintenance Trap
Every UI update risked breaking client themes
The Accessibility Risk
Clients might unconsciously chose brand colors that made text unreadable (e.g., white text on yellow buttons).
Strategic Analysis
I conducted an audit of our system against principles of Atomic Design and Hick’s Law (minimizing choices to reduce load). The analysis revealed we needed to hide the complexity.
Constraint as a Feature: Instead of offering infinite choices, we needed to curate the inputs to ensure quality.
Meaning over Values: We needed to stop asking clients for colors (Hex Codes) and start defining roles (Primary Action, Surface, Alert).
Automation: If a client gives us a Brand Color, the system should be smart enough to calculate the Hover and Active states automatically.
The Solution
Lean Design Token Architecture
To handle the complexity of white-labeling for both our clients and designers, I designed a lean version of Semantic Design Token Architecture.
Logic-Based Inputs: Instead of maintaining a bloated library of static primitives (e.g.,
Blue-100toBlue-900), the system accepts just two inputs—Brand and Accent—and programmatically generates the entire interface theme.Semantic Mapping: We mapped colors to intent (e.g.,
Information,Warning,Surface) rather than raw values. This abstraction layer is what makes the system maintainable and scalable.
Primary Mapping
The client's brand color is assigned strictly to high-value interactions (Primary Buttons) and key hierarchy markers (Page Titles).
The "10/20" Rule
Instead of asking clients to pick a "secondary" or "subtle" color, the system generates them using alpha channels:
Surface Fills: Automatically set to
Brand Color @ 10% Opacity.Borders & Outlines: Automatically set to
Brand Color @ 20% Opacity.
The Result
Perfect tonal harmony is guaranteed. The "subtle" background always matches the "primary" button, regardless of the hue.
Scalability: Native Dark Mode
Because the system is built on semantic tokens, Dark Mode wasn't a separate build—it was an inherited feature of the architecture.
The Mechanism: By simply re-mapping the semantic layer (e.g., swapping
Surface-Backgroundfrom#FFFFFFto#333333), the entire application adapts instantly.The Result: A zero-maintenance Dark Mode that works for every client brand automatically.
To eliminate user error, I designed a system that relies on calculation over selection. The system requires only two inputs—Brand and Accent—and mathematically derives the rest of the UI.
The Results
95%
Faster new theme configuration
Operational Impact
This system shifted the workload from Design/Engineering to the System itself.
Efficiency: Implementation Engineers can now deploy a new client theme in minutes by updating a single JSON config file.
Scalability: The platform now supports unlimited client themes with zero increase in CSS bundle size.
Consistency: We eliminated "flash of unstyled content" and layout shifts caused by legacy CSS overrides.