Hi everyone 👋
We’re building a white-label Design System that needs to support different clients and brand identities with minimal setup effort.
🎯 The goal
We’d like to achieve a setup where updating a single base HEX color (e.g. #0056A6) automatically updates all related states of components (like hover, pressed, disabled) based on a relative transformation, such as:
-
hover = darken(base, 10%) -
pressed = darken(base, 20%) -
disabled = alpha(base, 30%)
Currently, we know that plugins like Token Studio support this kind of logic using transformation functions. But we’re wondering if anyone has found a native workaround in Figma so that we don’t have to introduce a new tool.
🧠 Context:
-
Our DS already supports multi-brand via Variable Modes
-
Color tokens are manually defined for each brand (which isn’t scalable)
-
We’re looking for a way to automate color states based on one base input
(instead of having to define full palettes or scales for each client)
Bonus points if anyone has tips around using this logic inside components for:
-
Buttons (base, hover, pressed)
-
Inputs (focus ring, background, border)
-
Disabled states with alpha or desaturation
Thanks so much in advance to anyone willing to share experience or insights 🙏
We’d love to hear how others have approached this!