Design System Theming for White-Label Brands

Agoda developed a scalable design system capable of powering multiple travel brands. This system utilizes design tokens and a theming mechanism to allow for brand-specific visual customization without duplicating core component logic. The architecture involves core component libraries, base themes, and brand-specific theme packages that override design tokens. Runtime theming is managed via a Context Provider that injects CSS variables, enabling components to adapt their appearance based on the selected theme. This post details the implementation of design tokens and CSS variables for runtime theming, including the build process for theme NPM packages and testing tools like Storybook with a theme selector.