Skip to main content

Hello community! I need your help to understand if I’m taking the right approach to solve a problem.


We have a UIKIT composed of: foundations (using styles, not variables yet), components, widgets (i.e., groups of components with functionality), and pages (i.e., groups of widgets). We have two design teams using it in parallel:



  • Team A - Product: Updates the UIKIT regularly and provides Team B with new features.

  • Team B - Internal Agency: Uses the “pages” of the UIKIT and modifies the foundations to resemble the customer’s brand.


Currently, Team B forks the UIKIT to work locally, changing styles and so on, always in local. The problem is they lose all opportunities to receive product updates.


The solution I propose is to have two kits: one for foundations, components, and widgets (Main) and a second for Pages. Both should share the same variable names for color, fonts, spacing, radius, etc. The Pages kit will consume the Main kit. Then Team B will fork the Pages kit locally and work on it. If the Main kit has an update, the Pages kit will receive the update notifications. In case there is a need to include a new widget in the local file, the overriding of the variables could be done with a plugin.


What do you think? Does anyone have a better solution?

Hi @Eva_Giambastiani


Your UIKIT conundrum is like a puzzle waiting to be solved. Let’s break it down and see if we can find the golden key to unlock this design treasure chest! 💡


Team A and Team B—sounds like a superhero duo, doesn’t it? 🦸‍♂️🦸‍♀️ They’re both wielding their design powers, but here’s the challenge: Team B wants to tweak the UIKIT locally without missing out on Team A’s updates. Let’s sprinkle some magic dust on this situation:



  1. The Fork Dilemma: Currently, Team B forks the UIKIT like a master chef separating egg yolks from whites. But alas, they lose out on those tasty product updates. 🍳

  2. Enter the Two Kits: Your proposed solution is like having a twin kit scenario:



  • Main Kit: This one’s the foundation—the bedrock of your design universe. It houses styles, components, and widgets. Think of it as the Hogwarts castle.

  • Pages Kit: Here’s where the magic happens—the enchanted pages that adapt to customer brands. It sips from the Main Kit’s fountain of variables. 🪄



  1. Variable Harmony: By sharing the same variable names (color, fonts, spacing, radius), you’re creating a symphony. It’s like having the same musical notes across different compositions. 🎶

  2. Update Whispers: When Team A sprinkles updates into the Main Kit, the Pages Kit perks up its ears. It’s like receiving secret messages via magical owls. 🦉

  3. New Widgets, No Problem: If a shiny new widget appears, Team B can override variables with a plugin. It’s like adding a secret ingredient to a potion. 🌟


But wait, let’s consult the ancient scrolls (okay, the community forums) for more wisdom:



Remember, every design kingdom has its unique path. Your solution is like a magical bridge connecting parallel worlds. 🌉

Terms & ConditionsCookie settings