Skip to main content

Hi everyone,


I’m currently working on a project at a large company where we use a comprehensive design system with predefined components, color variants, and variables. The project I’m on, however, uses a different color style that isn’t currently incorporated into our main design system.


I need to apply our existing design system to this project but can’t alter the original color schemes within the design system. I want to use my own color palette, including specific hover states and other styles, without interfering with the established system.


Is there a way to apply a third-party color palette to the existing design system components without modifying them directly? Currently, when I upload a design system component, it retains its original colors, and I find myself needing to override these manually.


Any tips or tricks on how to manage this more efficiently? Any advice would be greatly appreciated!


Thanks in advance!

Hmm. This depends on your setup. Since our team is only on the professional plan and can’t really make many modes for the variables (we have more than 10 brands), we use a plugin called token studios to handle styling and also tokenize our styles including colors. I would just create a subset/theme with the same color structure but with different colors to change the colors of our components.


Since our components style is connected to token studio, we can easily rebrand the entire component library by just switching the brand set / theme.


So, what I do is if there’s a new brand with different color palette (they are not in the design system), I just duplicate a set/theme (brand) and then change the color like primary = “new color”, secondary = “new color”, or if you have a more complex semantics like primaryButton.hover.background, and so on…


And, that’s how we handle multi-branding using 1 design system library.

Reply


Terms & ConditionsCookie settings