Loading project case study
All work

InFlight / 2019-2021

Theme Switching

Let every InFlight customer deliver its own branded experience from one maintainable product foundation, supporting hundreds of themes without customer-specific builds.

Read the case study
Theme Switching

Value and impact

Customers on one foundation
All Implementations
Brand experiences supported
100s of Themes

01

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.

  • Design Systems
  • Theming
  • InFlight

Challenge

Enterprise clients required that InFlight products match every part of their corporate branding, including 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.

04

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.

05

Impact

Employees and candidates received an experience that felt connected to the organization they already knew rather than a generic third-party tool.

Every InFlight customer implementation could express its brand through a shared system supporting hundreds of themes. For InFlight, one codebase replaced customer-specific branded builds, reducing implementation effort and long-term maintenance while preserving white-label flexibility.

06

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.

PreviousTimesheets & Absence Tracking View all projects