In this brief dialogue, Speaker B explains the development approach for a design system that serves both web and native products. By leveraging Tailwind CSS together with cross‑platform libraries such as NativeWind or Unowind, the team creates a single theme package that can be consumed by any product, avoiding duplicate theme files. This solution is described as stable, productive, and the preferred long‑term strategy. Speaker A then discusses the design side, noting that the team has adapted Google’s light/dark mode recommendations because the original framework lacks mode management. Currently, multi‑theme support is handled via two separate files, and the team is actively exploring more efficient ways to manage and deliver these themes to product teams.
What's your approach to handling multi-product themes within a design system? How are themes organized in the repo and consumed by different products?
I can start with the dev side. We've leveraged Tailwind. When we would build a design system, even if web is the primary target, or let's say native is the primary target, we, we'd build it in a way that would be able to be consumed by both platforms. And so we would use Tailwind and then Tailwind with the help of a library like NativeWind or Unowind gives us the ability to apply those Tailwind classes and styles to both, both platforms. And so we don't end up with two copies of a theme file. We have a single theme package that then product teams can ingest, and that theme is what is a dependency of all the components and other packages that our design system UI kit exposes. And so with the help again of a tool like NativeWind or UniWind, we then have the advantage of using Tailwind cross-platform. And that's been, been a, a very good solution. And there's, there's other solutions for sure, but we, we've found this to be pretty stable and productive and one we'll likely stick with for the foreseeable future.
Yeah. And on the Design MD side of that as well, we've already sort of modified from the straight Google framework and recommendations for like light and dark mode because they don't have mode management in there. So we found a pattern that other folks were using that seemed to work really well. Multi-theme as of right now is two different files. So when we manage those, they are two different files across the board. We're still trying to figure out what is the best way to do that. That's what we found to be the most effective. Way to deliver those to the teams who need those.
