Prefer English?
Prefer English? Switch the website language for a better experience.
The answer fits in one sentence: because they were designed color by color, not relationship by relationship. A blue button stays blue in classic Figma Styles, regardless of theme. So you end up duplicating the component, creating a "dark" variant, and hoping nobody forgets to update it at the next redesign.
At Mazette.co, in 2026 we took over the design system of an e-commerce client whose product team had bolted on a dark mode "on the fly" three years earlier. The result: 340 components, of which around 90 existed in duplicate (light and dark), with visible hue mismatches between the two versions of the same button. The real cost wasn't visual, it was human: every update to the brand guidelines required twice the maintenance time, on both the design side and the downstream Webflow development side.
Figma Variables, which reached stable release in 2023 and have been considerably enriched since (multiple modes, nested aliases, direct linking to code tokens), solve this structurally. But only if the underlying architecture is designed for it from the start.
A theming-ready design system is always organized around the same hierarchy, regardless of the product. It's the structure that changes everything, far more than the number of available colors.
These are the raw values, with no intended use. Gray-100, Gray-900, Blue-500. They reference nothing but themselves and should never be applied directly to a production layer. They exist purely as a reservoir for the next tier.
This is the heart of the system. A variable like background/surface/primary or text/color/muted points to a different primitive depending on the active mode. In light mode, surface/primary aliases Gray-50. In dark mode, the same variable aliases Gray-900. The component itself never changes: it always consumes surface/primary, without knowing what's behind it.
Some cases need an extra layer, particularly for complex components (cards, modals, tables) where several semantic states intersect. A variable like card/border/default that aliases surface/border/subtle avoids rebuilding the logic for every new component.
This three-tier architecture is exactly what mature design systems like Shopify Polaris or Atlassian's use: raw color is never placed directly on a final component.
| Tier | Example name | Role |
|---|---|---|
| Primitive | Blue-600 | Raw value, never used directly |
| Semantic | action/primary/bg | Changes value depending on active mode |
| Component | button/primary/bg | Aliases the semantic layer, consumed by layers |
In practice, you need to create a variable collection dedicated to theming, separate from the primitives collection. Within this semantic collection, you add two modes: Light and Dark. Each semantic variable then receives two values, one per mode, by aliasing the corresponding primitives.
One thing many teams get wrong: you also need to set a default light mode at the file level, and above all apply the mode at the root frame of each screen, not layer by layer. It's this frame-level setting that lets you preview an entire screen in dark mode with a single click in the variables panel, without touching a single element.
For multi-product or multi-client brands (common in our agency projects), we add a third dimension: brand modes. A "Brand" collection with one mode per client, crossed with the "Theme" collection (light/dark). This lets a single Figma file generate, in theory, four rendering combinations without duplicating a single component.
Calling a semantic variable white or black instead of surface/inverse is the most common mistake. The day dark mode flips the logic, the name becomes a lie: the "white" variable holds a dark value. Always name by intent, never by hue.
Success, error, warning and info colors also need to run through the mode system. An error red in light mode (often too saturated and harsh in dark mode) needs to be desaturated or lightened for dark mode, otherwise accessibility takes a serious hit — WCAG AA contrast (4.5:1 minimum) is often broken on these bright colors when they're simply copied over as-is.
In light mode, depth reads through drop shadows. In dark mode, shadows are nearly invisible against a dark background: depth should instead come through surface brightness variations (a card lighter than the background). This is something many design systems completely overlook, resulting in dark mode interfaces that feel "flat".
A theming-ready design system only has value if the semantic variables are cleanly exported to code, as CSS custom properties or JSON tokens via a plugin like Tokens Studio. On our Webflow projects, these same semantic variables become the site's Custom Properties, enabling a genuine dark mode toggle in production, not just on the mockup.
{{webdesign}}
On a recent project for a B2B SaaS scale-up, the initial request seemed simple: "we want a dark mode". After auditing the existing Figma file, the real work wasn't building a dark theme, it was completely rebuilding the variable architecture, which until then was 100% classic color Styles hard-applied across 210 components. Dark mode ultimately took three days of production once the semantic architecture was in place. Rebuilding the architecture took twelve.
That's the real lesson we repeat to every client: investing in semantic variables is never a cost tied to dark mode. It's an investment in the velocity of every future brand evolution, whether that's a dark theme, a rebrand, or a multi-brand variation. A client who "just" asks us for a dark mode actually needs us to fix the foundations of their design system — and that's often where the real value of end-to-end product design support lies, rather than a simple mockup delivery.
This work naturally carries through to development: a well-thought-out variable architecture in Figma implements directly as CSS variables in Webflow, without tedious manual translation or drift between design and code. It's this continuity between Webflow and Figma that, in our experience, saves the most time over a product's lifespan — far more than any shortcut taken upstream.
Code
Over 120 companies have already stepped out of the shadows with us.
You need a three-tier architecture: primitive variables (raw color values), semantic variables that change value depending on the active mode, and optionally component variables. Only the semantic variables are consumed by the final components.
Figma Styles are static and require duplicating components for each theme. Variables let you attach multiple values to a single name through modes, which switches the entire design between light and dark without duplicating a single layer.
Semantic Figma variables are exported as JSON tokens, often via a plugin like Tokens Studio, then translated into CSS custom properties in Webflow. It is this same architecture that then enables a genuinely functional dark mode toggle in production.
Impactful titles, polished meta descriptions, sitemaps, Schema.org, Hn structure, and audits: these are the SEO foundations that make your content readable by both Google AND generative AI. We cover both simultaneously.
With over 180 clients, our agency is one of the few in France to hold the Webflow Premium Partner label, supporting you in every area, including custom web design, sophisticated automation, conversion optimization, and SEO and GEO visibility.
We create bespoke web designs focused on performance, user journeys, and conversion. Join over 180 clients who have trusted us to elevate their brand.
