Skip to the content.

🏠 Home

Token naming reference

Definitions

Our design tokens follow a consistent taxonomy and naming system. To understand it, first, a few definitions:

It's worth noting that token sets and control mappings are not currently used by our token system, but they're supported for use in the future. For now, you'll just see global tokens and alias tokens.

Token names are split up by dots (.), but sometimes people write them with a hyphen (-) instead.

Finally, each UI platform (Fluent UI React for Web, Fluent UI React Native, WinUI, etc.) transforms token names into what makes the most sense for that platform's codebase. So Global.Color.Blue.60 might appear as colorBlue60 in code. Those transformed names aren't referenced here and are only relevant to people working in that codebase.

The rules

Prefix

  1. All global tokens should have a name that starts with Global.
    • Example: Global.Color.Berry.Primary
  2. All alias tokens should have a name that starts with Set in the JSON file, though we typically omit that when talking about the token.
    • Example: Set.NeutralForeground1.Fill.Color.Rest (NeutralForeground1.Fill.Color.Rest)
  3. Control mappings should never have a prefix.
    • Example: AccentButton.Base.Fill.Color.Rest

The rest of the name depends on the type of token. The naming system is designed so that, roughly speaking, you can describe everything you need to know about when to use a token by putting its parts into a fill-in-the-blanks sentence.

Global tokens

Global token names have the most flexible format:

  1. Global
  2. Type of thing (can be a single word, or a pair of words if useful for grouping)
  3. Name of thing (can be a single word, or a pair of words/numbers if useful for grouping)

"The (2) named (3)."

Alias tokens

Alias token names are a bit more restrictive:

  1. Set
  2. Name of thing (or token set)
  3. Part of that thing
  4. Property of that part
  5. Interaction state (if appropriate)

"Things using the token set (2) have a (3) that should have this (4) [when (5)]."

Remember that we almost always leave off the word "Set" when referring to these tokens, but it's not optional in the token JSON file itself.

Control mappings

Control mapping names follow a very similar scheme as alias token names, but don't include the word Set and instead have an extra word that specifies the specific element of the control being described.

  1. Name of control (or control variant)
  2. Element of the control
  3. Part of that element
  4. Property of that part
  5. Interaction state (if appropriate)

"A (1) has a (2) and its (3) should be this (4) [when (5)]."

Allowed words

Prefix

Elements

Parts and properties

Interaction states

You can also prefix the four core interaction states with another state, such as Selected.

Other interaction states are allowed, and our token naming is sometimes inconsistent here. For example, you might find Selected used as a single interaction state even though it doesn't really fit there since a control's selected/checked state is independent of whether it's hovered, pressed, disabled, or neither. The preferred set of states for a control that can be selected/checked is: