Theming System for Real-World Products

Building a unified, scalable theming system that balances brand individuality with design consistency across a multi-tenant product.

Theming System for Real-World Products

When working with a multi-tenant product, theming becomes a serious design and engineering challenge. Each customer has their own brand color palette, and aligning the interface visuals to match all of them consistently can quickly become unmanageable — especially when charts, dashboards, and components need to adapt accordingly.

To address this, I analyzed our customers’ brand palettes and identified several core color schemes that represent the most common tonal groups.

Instead of maintaining hundreds of one-off themes, we introduced a unified system where customers can select the closest matching theme in their settings.

This initiative was part of a larger migration effort — moving away from a monolithic architecture and cleaning up legacy CSS frameworks that often conflicted and overlapped.

As a result, we established a consistent design foundation based on CSS variables, paving the way for dynamic theme generation in the future.

The long-term goal is to compute derived and complementary brand colors automatically, ensuring visual harmony and scalability across all customer interfaces.

20251024_203933_6719e5.webp