The design system for D2C: flexible enough is enough

Direct-to-consumer (D2C) brands thrive on continuous campaign rhythms: launching new collections, seasonal sales, special days, and holidays. The question Sinh Vũ hears most from D2C brand owners is: how flexible should the design system be to keep up without turning into an unmanageable chaos? The answer is not "the more flexible, the better." The answer is: flexible where it matters, rigid where it counts.

Two layers need to be separated from the start

All digital design systems have two types of decisions. One is perceptual decisions (the sensory layer): colors, typography, imagery, tone. This is where the brand expresses its personality and differentiates each campaign. The second is functional decisions: page layout, cart flow, checkout steps. This is where users complete what they need to do.

The most common mistake for D2C brands is mixing these two layers. Each Tet sale or summer sale creates a completely separate interface set, with different colors and flows. As a result, after three seasons, the codebase has three sets, none of which are consistent, and the technical team spends many hours figuring out where the errors are.

Alla Kholmatova's principle in the book Design Systems clearly states: a good system allows for variations at the perceptual layer while keeping functional patterns stable. By separating these two layers, you can run campaigns quickly without disrupting what is already working well.

Three-tier token architecture: the key to flexibility

Tokens (definitions of design values such as color, font size, spacing) are organized into three layers:

• Primitive level: Lists all raw values in the color palette, for example, green 500, orange 300. This level does not change.
• Semantic level (or alias): Assigns design intent to raw values, for example, "primary button color" points to green 500. This is the level you override when running a new campaign: "primary button color" changes to orange 300 for the Tet sale, with no need to modify a line of code in the component.
• Component level: Components use semantic tokens, so they automatically recognize new ones when the semantic layer changes.

Nathan Curtis from EightShapes calls semantic tokens the place that carries "contextual design intent." Just touching this layer, the entire campaign interface becomes consistent without missing anything.

Brad Frost in The Many Faces of Themeable Design Systems calls this architecture the secret to theming, meaning changing the appearance of a campaign or sub-brand without having to rebuild the system.

When to need a self-service toolkit for the marketing team

If the marketing team builds landing pages a few times a month but always has to wait for technical support, the campaign pace will slow down regardless of how good the token system is.

Conditions for the self-service block to operate smoothly: the block must be thoroughly vetted before release. If the marketing team is allowed to assemble everything without limits, brand identity will gradually dilute with each campaign.

Payment flow: no-touch zone

This is a principle that Sinh Vũ strictly adheres to in all D2C projects. The payment flow is the final step, where actual revenue is generated. Any change in the interface here, even a small one, can confuse customers or erode trust at the most critical moment.

The campaign has strong variations on previous pages: campaign homepage, category page, product page. However, from the cart page to order confirmation, the interface remains consistent throughout the year, not seasonally.

Semantic tokens carry design intent based on context, separated from the original values. Changing a campaign only requires touching this layer.

Nathan Curtis, Naming Tokens in Design Systems (EightShapes)

Common mistakes and how to avoid them

• Each campaign creates a separate interface: After a few seasons, no one knows which version is still in use and which has been discarded. To avoid this: all campaigns run on a core component set, only overriding semantic tokens.
• Inserting hard colors into components: when developers directly code color values into components instead of referencing tokens, each theme change requires manual code adjustments, which can easily be overlooked. To avoid this: establish an internal guideline that components should only use tokens, not direct base values.
• Over-flexibility: allows changes to everything, making the brand unrecognizable after several campaigns. To avoid this: define core identity elements that must not change regardless of the campaign.
• Neglecting the alignment between design and code: The design team uses Figma, while the technical team uses code; if both sides do not synchronize tokens, the campaign will run very differently from the mockup. Sinh Vũ uses Figma Code Connect to ensure both sides align from the start.

Sinh Vũ's viewpoint

For D2C projects, Sinh Vũ builds tokens in the DTCG format (Design Token Community Group, a standard for design tools and code to read the same token file). The marketing team is empowered to change the semantic layer for each campaign, while the core component set and purchase flow remain unchanged. The rhythm of launching new campaigns is no longer dependent on the technical schedule, but it is also not completely unanchored as the tokens and block set define the limits of variation.

The flexible level sufficient for high-paced D2C is: the ability to change the appearance according to the campaign within hours, not days, without writing an additional line of code beyond the token layer.