Skip to content
Tokenpedia Defining terms for design tokens

Fallback

A backup value used when a token cannot be resolved in the current context.

In CSS, the var() function accepts a second argument as a fallback value:

button {
    background-color: var(--action-primary-bgColor, #0000FF);
}

In this example, if --action-primary-bgColor is not defined within the current scope, the browser uses #0000FF instead. Fallbacks can also reference another custom property:

button {
    background-color: var(--action-primary-bgColor, var(--color-blue-500));
}

Tip

Fallback values are most useful during transitions, such as migrating to a new schema, rolling out a new mode, or introducing a token incrementally before it is fully defined in all themes.

Warning

Relying on fallbacks to compensate for missing tokens is not a substitute for a well-maintained theme. Deeply nested fallbacks (var(--a, var(--b, var(--c)))) make it difficult to trace the source of a final value, contributing to the same maintenance challenges as bloat.