Design tokens

Design tokens are stored values used to assign Fluent styles like color, typography, spacing, or elevation, without hardcoding pixels and hex codes. Our token system allows us to speak a common language and ensure consistent designs across platforms and disciplines.

Global tokens

Fluent uses two layers of tokens. First, global tokens are context-agnostic and store raw values, like hex codes for color. Global tokens also store information for typography, border radius, stroke width, and animation.

Global tokens

Alias tokens

Alias tokens are Fluent’s second token layer and add semantic meaning to the stored values.

Alias tokens

For more complex elements, like shadows and type, alias tokens condense many values into one easily digestible format.

Alias tokens condense many values

Alias naming

We name alias tokens so that their function is immediately recognizable. At a glance, you’ll get an idea of where and how to apply consistent styles without worrying about the exact values.

Alias token functions are immediated recognizable by name


Fluent’s robust design tokens were built for flexibility and accessibility. That means that right out of the box, our tokens support OS theming for light, dark, high-contrast, and branded elements, as well as ensure sufficient color contrast across the system.

Theming and deisgn tokens