By default, every design token must have a default value. But with the "Brands & Contextual Overrides" feature in useDesignTokens, you can take customization to the next level. This powerful feature allows you to define different design decisions for your design tokens based on each brand and combination of context properties.

Similar to product configurators, where customers can customize products based on their preferences, useDesignTokens empowers you to customize your design system based on different brand identities and contextual requirements. With support for various pre-defined context properties such as color mode, breakpoints, and more, you can fine-tune your design tokens to adapt to different contexts out of the box.

Moreover, you also have the flexibility to edit these existing contexts and their properties or add new ones, giving you complete control over your design system's customization capabilities. This unlocks a world of customization possibilities for your design tokens, allowing you to create highly adaptable and versatile design systems that can effortlessly adapt to different brands, themes, and contextual variations.

Contexts are enabled on a token tier level, giving you granular control over which contexts are applicable for each token tier separately. This means that you can define overrides for the contexts that are enabled for a particular token tier, allowing for flexible customization.

For example, let's say you have two token tiers: "Global tokens" and "Semantic tokens". You may decide not to apply any contexts to the "Global tokens" tier, so all global tokens will have their default values. However, for the "Semantic tokens" tier, you can apply a "Color Mode" context with properties for "Light" and "Dark" states, where "Light" is the default state. Then, you can reference different global tokens for the "Light" and "Dark" contexts in your alias tokens within this tier, allowing for contextual overrides based on the color mode.