InFlight / 2019-2021
Theme Switching
Central repository enabling theme switching API for branding control.
Design Highlights
Overview
Theme Switching was the foundational theming framework for InFlight's entire product suite, enabling white-label branding across all customer implementations. Built with design tokens, CSS variables, and live theme switching, the system powered the multi-brand support described in the InFlight design system and was used by every InFlight customer deployment.
Challenge
Enterprise clients required that InFlight products match their corporate branding—colors, typography, logos, and visual identity. Each customer needed a distinct branded experience, but the product suite couldn't maintain separate codebases for every client. The challenge was building a theming system flexible enough to support hundreds of different brand identities while keeping the product maintainable and the design system consistent.
Approach
Designed a centralized theming architecture using design tokens and CSS variables that separated brand identity from component structure. Created a system where brand themes could be defined, previewed, and switched in real time without modifying component code. The theming layer was designed as the foundation for the InFlight design system's multi-brand support.
Solution
Built a theming framework using design tokens for all brand-variable properties (colors, typography, spacing, logos) and CSS variables for real-time theme switching. The system allowed themes to be defined declaratively and applied instantly across the entire product suite. Every component in the InFlight design system was built to be theme-aware, adapting to any brand configuration without modification. The architecture supported live switching between themes for demos and testing.
Impact
Used by every InFlight customer implementation, enabling white-label deployment for Fortune 500 clients. The theming framework became the foundation for the InFlight design system's ability to support hundreds of different customer brands with a single codebase. Eliminated the need for custom branded builds, significantly reducing implementation and maintenance costs.
Key Learnings
Separating brand identity from component structure through design tokens is the key architectural decision for any multi-brand product. CSS variables enable real-time theme switching that would be impossible with build-time theming approaches. Building the theming layer as a foundational system rather than an afterthought meant every component was theme-aware from the start, avoiding the costly retrofitting that often plagues theming initiatives.