The design system for D2C: flexible enough is enough

Direct-to-consumer brands (D2C, meaning selling directly to end users without intermediaries) thrive on a continuous campaign rhythm: launching new collections, seasonal sales, couple days, and holidays. A common question among D2C brand owners is: how flexible should the design system be to keep up without turning into an unmanageable mess? The answer is not "the more flexible, the better." The answer is: flexible where it counts, rigid where it matters.

Two layers need to be separated from the start

Every digital design system has two types of decisions. One is perceptual decisions: colors, typography, imagery, tone of voice. This is where the brand expresses its personality and differentiates each campaign. The other 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 the functional patterns stable. By separating these two layers, you will have a foundation to run campaigns quickly without disrupting what is already working well.

Three-layer 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 layer (semantic or alias): assigns design intent to base values, for example, "primary button color" points to green 500. This is the layer you override when running a new campaign: "primary button color" changes to orange 300 for the Tet sale, and the component does not need a single line of code changed.
• Component layer: components use semantic tokens, so they automatically adopt a new appearance 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 describes this architecture as a foundation for theming, meaning changing the appearance for campaigns or sub-brands 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 should remain firm across all D2C design systems. The checkout flow is the order confirmation step, where actual revenue is generated. Changing the interface here, even slightly, can confuse customers or cause them to lose trust at the most critical moment.

Campaigns can vary significantly on the earlier pages: campaign homepage, category page, product page. However, from the cart page to order confirmation, the interface should remain 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.
• Bypassing the design and code alignment step: the design team uses Figma, the technical team uses code, and the two sides not synchronizing tokens leads to the campaign running very differently from the mockup. A common way for both sides to align from the start is to use Figma Code Connect.

The DTCG (Design Token Community Group) standard allows design tools and code to read the same token file, making it worth considering when building a system. At that point, the marketing team only needs to change the semantic layer for each campaign, while the core component set and purchasing flow remain unchanged, and the rhythm of launching new campaigns is no longer dependent on the technical schedule. Therefore, tokens and component sets need to clearly define the limits of variation, so that flexibility does not become chaotic.

This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.