White-Labelling Your Compose and XML UI with Design Tokens
summary
Nutmeg builds a single Android codebase that white‑labels into Nutmeg and Chase UK by mapping Global, Semantic and Component tokens so components ask for semantic tokens while themes swap primitive mappings (e.g., Nutmeg button used brand_primary_50 vs Chase brand_primary_30). Implementation uses modular Gradle themes for XML and Jetpack Compose, a centralized token repo that emits XML/JSON/CSS, Compose preview annotations and Paparazzi + KSP screenshots, and an iterative token cut from ~20–30 button tokens to ~10 — system works in production.
AI-written summary · about
chapters (9)
- 0:00Introduction to white labeling
- 1:36Design system and tokens
- 5:13The Nutmeg and Chase challenge
- 8:46Developing a multi-layer system
- 12:52Implementing the token architecture
- 20:11Scalable previewing and testing
- 25:01Cross-platform consistency
- 27:07Lessons learned and final advice
- 32:46Q&A and conclusion
related talks
18mOne design system to rule them all 1
15mBuild beautiful Material Design apps with Jetpack Compose
06mDesign Tokens as Platform Infrastructure
19m"Building a Highly Customizable Theming Engine for Android Automotive using Jetpack Compose"
39mA Design System, it Composes!
31mDesign System 3.0 with Jetpack Compose at N26
36m6 weeks of Compose or How a good Design System is vital in Compose
40mArchitecture Design for Design Libraries