Design Systems at Scale: Maintaining UI Consistency in Dynamic Plugin Architecture
summary
Red Hat Developer Hub (RHDH) built on Backstage runs 100 plus plugins and demonstrates concrete answers: a centralized TypeScript theme package exporting tokens to enforce one primary palette, runtime theming and configuration overrides for branding, and sharing react and common libs via module federation so only single copies ship. Style isolation uses class prefixing, shadow DOM and CSS modules to prevent conflicts. These patterns reduce dependency drift, stop CSS bleed, and deliver a unified UI across independently released plugins.
AI-written summary · about
chapters (8)
- 0:00Plugin architecture challenges
- 3:01Key challenges in plugin UIs
- 5:28Central theme for visual consistency
- 8:24Runtime dependency sharing
- 11:04CSS conflict isolation
- 13:45Extension contracts for plugins
- 16:21Configuration-driven customizations
- 18:55Key takeaways
related talks
12mDesign Systems-Revamping Products for Consistent UIs
19mHarnessing React to Build Consistently Designed Applications
35mDesign system - From a Developer Point-of-View
21mComponent-based Design System and Development
20mDesign Systems for the Rest of Us
21mDesign Systems @Scale
21mDesign Systems 101: The Developer Approach to Better Frontends
27mAdvanced Design System Considerations