### Component Tokens: Badge Color Examples (JSON)

Source: https://www.designtokens.org/TR/2025.10/color

Shows how component-specific tokens are structured, starting with the component name. This example defines color tokens for a 'badge' component, referencing alias tokens for error and success states.

```json
{
  "color": {
    "badge": {
      "background": {
        "error": {
          "$value": "{color.background.error}"
        },
        "success": {
          "$value": "{color.background.success}"
        }
      },
      "text": {
        "error": {
          "$value": "{color.text.error}"
        },
        "success": {
          "$value": "{color.text.success}"
        }
      }
    }
  }
}
```

--------------------------------

### JSON - Theme Resolution Example

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

Illustrates the theme resolution process, starting with a resolver document that defines sets, modifiers, and their order. The input specifies a 'dark' theme, influencing which theme file's tokens are included in the final output.

```json
{
  "sets": {
    "foundation": {
      "sources": [{ "$ref": "foundation.json" }]
    },
    "components": {
      "sources": [{ "$ref": "components/button.json" }]
    }
  },
  "modifiers": {
    "theme": {
      "context": {
        "light": [{ "$ref": "themes/light.json" }],
        "dark": [{ "$ref": "themes/dark.json" }]
      }
    }
  },
  "resolutionOrder": [
    { "$ref": "#/sets/foundation" },
    { "$ref": "#/sets/components" },
    { "$ref": "#/modifiers/theme" }
  ]
}
```

```json
{ "theme": "dark" }
```

--------------------------------

### Example Sets Definition in Resolver Document

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

This JSON snippet demonstrates the structure for defining 'sets' within a resolver document. It includes examples of sets for 'color' and 'size', showcasing descriptions and sources which can be remote JSON references or inline token definitions. The 'size' set includes an example of a nested token with a 'dimension' type.

```json
{
  "sets": {
    "color": {
      "description": "Color tokens",
      "sources": [
        { "$ref": "base/legacy.json" },
        { "$ref": "base/foundation.json" },
        { "$ref": "base/color-ramps.json" },
        { "$ref": "base/semantic.json" }
      ]
    },
    "size": {
      "description": "Dimension, margin, and spacing tokens",
      "sources": [
        {
          "space": {
            "base": {
              "100": {
                "$type": "dimension",
                "$value": { "value": 2, "unit": "rem" }
              }
            }
          }
        }
      ]
    }
  }
}
```

--------------------------------

### JSON: Valid Reference Object Examples

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

Provides common examples of valid reference objects used to link to other JSON documents or specific structures within the same document. These examples cover same-document references, relative file paths, and remote URIs, illustrating how to properly structure `$ref` pointers.

```json
{ "$ref": "#/sets/MySet" }
```

```json
{ "$ref": "path/to/example.json" }
```

```json
{ "$ref": "example.json#sets/MySet" }
```

```json
{ "$ref": "https://my-server.com/tokens.json" }
```

--------------------------------

### Design Token Alias Reference Example

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates the recommended current reference syntax for creating aliases in design tokens. This example shows how a token can reference another token or group using curly braces, facilitating value reuse.

```json
{
  "base": {
    "$value": {
      "colorSpace": "srgb",
      "components": [0, 0.4, 0.8],
      "hex": "#0066cc"
    }
  },
  "alias": { "$value": "{base}" }
}

```

--------------------------------

### Theme Resolution Example for Design Tokens

Source: https://www.designtokens.org/TR/2025.10/resolver

Demonstrates the step-by-step process of theme resolution in design tokens, showing how different sets and modifiers are combined based on the resolution order and input context.

```json
{
  "sets": {
    "foundation": {
      "sources": [{ "$ref": "foundation.json" }]
    },
    "components": {
      "sources": [{ "$ref": "components/button.json" }]
    }
  },
  "modifiers": {
    "theme": {
      "context": {
        "light": [{ "$ref": "themes/light.json" }],
        "dark": [{ "$ref": "themes/dark.json" }]
      }
    }
  },
  "resolutionOrder": [
    { "$ref": "#/sets/foundation" },
    { "$ref": "#/sets/components" },
    { "$ref": "#/modifiers/theme" }
  ]
}

```

```json
{ "theme": "dark" }

```

--------------------------------

### Group Extension Example (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Shows how to use the $extends property to inherit tokens and properties from another group. This allows for code reuse and defining variations. The example demonstrates extending a base 'button' group to create a 'button-primary' with a modified background color.

```json
{
  "button": {
    "$type": "color",
    "background": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0, 0.4, 0.8],
        "hex": "#0066cc"
      }
    },
    "text": {
      "$value": {
        "colorSpace": "srgb",
        "components": [1, 1, 1],
        "hex": "#ffffff"
      }
    }
  },
  "button-primary": {
    "$extends": "{button}",
    "background": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0.8, 0, 0.4],
        "hex": "#cc0066"
      }
    }
  }
}
```

--------------------------------

### Composite Shadow Token Example (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

An example illustrating the structure of a composite shadow design token. This token defines properties like color, offset, blur, and spread, demonstrating how multiple style attributes can be grouped under a single token.

```json
{
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0, 0, 0],
          "alpha": 0.5,
          "hex": "#000000"
        }
      },
      "offsetX": { "value": 0.5, "unit": "rem" },
      "offsetY": { "value": 0.5, "unit": "rem" },
      "blur": { "value": 1.5, "unit": "rem" },
      "spread": { "value": 0, "unit": "rem" }
    }
  }
}
```

--------------------------------

### Transition Token Structure and Examples

Source: https://www.designtokens.org/TR/2025.10/format

Defines the 'transition' composite token type. It requires a '$type' of 'transition' and a '$value' object containing 'duration', 'delay', and 'timingFunction'. An example shows a typical transition setup.

```json
{
  "transition": {
    "emphasis": {
      "$type": "transition",
      "$value": {
        "duration": { "value": 200, "unit": "ms" },
        "delay": { "value": 0, "unit": "ms" },
        "timingFunction": [0.5, 0, 1, 1]
      }
    }
  }
}
```

--------------------------------

### Alias Tokens: Color Background and Text Examples (JSON)

Source: https://www.designtokens.org/TR/2025.10/color

Demonstrates the structure for alias color tokens, grouped by category and property. It shows how to define background and text colors, referencing base color values.

```json
{
  "color": {
    "background": {
      "error": {
        "$value": "{color.red.600}"
      },
      "success": {
        "$value": "{color.green.400}"
      }
    },
    "text": {
      "base": {
        "$value": "{color.palette.black}"
      },
      "errorHover": {
        "$value": "{color.red.700}"
      }
    }
  }
}
```

--------------------------------

### Organized Token Groups vs. Flat Token Structure

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/format

This example contrasts two methods for organizing design tokens: nested groups and a flat structure. Grouping allows for better file organization and alignment with naming conventions, while a flat structure uses hyphenated names. Both examples define color and font family tokens.

```json
{
  "brand": {
    "color": {
      "$type": "color",
      "acid green": {
        "$value": {
          "colorSpace": "srgb",
          "components": [0, 1, 0.4]
        }
      },
      "hot pink": {
        "$value": {
          "colorSpace": "srgb",
          "components": [1, 0, 1]
        }
      }
    },
    "typeface": {
      "$type": "fontFamily",
      "primary": {
        "$value": "Comic Sans MS"
      },
      "secondary": {
        "$value": "Times New Roman"
      }
    }
  }
}
```

```json
{
  "brand-color-acid-green": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0, 1, 0.4]
    }
  },
  "brand-color-hot-pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [1, 0, 1]
    }
  },
  "brand-typeface-primary": {
    "$value": "Comic Sans MS",
    "$type": "fontFamily"
  },
  "brand-typeface-secondary": {
    "$value": "Times New Roman",
    "$type": "fontFamily"
  }
}
```

--------------------------------

### XYZ-D65 Color Space Example

Source: https://www.designtokens.org/TR/2025.10/color

Presents an example of a color token in the XYZ-D65 color space. This fundamental space uses X, Y, and Z components, each between 0 and 1, and is capable of representing all perceivable colors. It is useful for color conversions and is based on CIE 1931 with the D65 illuminant.

```json
{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "xyz-d65",
      "components": [0.5929, 0.2848, 0.9699],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}
```

--------------------------------

### ProPhoto RGB Color Space Example

Source: https://www.designtokens.org/TR/2025.10/color

Provides an example of a color token using the ProPhoto RGB color space. This space also utilizes Red, Green, and Blue components normalized between 0 and 1. It is designed for wide gamut displays and is based on the ProPhoto RGB color space.

```json
{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "prophoto-rgb",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}
```

--------------------------------

### OKLAB Color Representation (JSON)

Source: https://www.designtokens.org/TR/2025.10/color

Illustrates the JSON structure for the OKLAB perceptually uniform color space. The example shows the color space identifier, its components (L, A, B), alpha value, and hex representation.

```json
{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "oklab",
      "components": [0.701, 0.2746, -0.169],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}
```

--------------------------------

### JSON: Flat Token Structure Example

Source: https://www.designtokens.org/TR/2025.10/format

Presents a flat structure for design tokens, where each token is defined at the top level with a hyphenated name. This contrasts with hierarchical structures and can be less readable and more verbose for managing related tokens.

```json
{
  "brand-color-acid-green": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0, 1, 0.4]
    }
  },
  "brand-color-hot-pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [1, 0, 1]
    }
  },
  "brand-typeface-primary": {
    "$value": "Comic Sans MS",
    "$type": "fontFamily"
  },
  "brand-typeface-secondary": {
    "$value": "Times New Roman",
    "$type": "fontFamily"
  }
}
```

--------------------------------

### String Stroke Style Example

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates a basic 'strokeStyle' design token using a predefined string value. This format is simple and relies on the rendering engine's interpretation of standard CSS line styles.

```json
{
  "focus-ring-style": {
    "$type": "strokeStyle",
    "$value": "dashed"
  }
}
```

--------------------------------

### Advanced Composite Token Example (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Illustrates advanced composite token definitions, including 'space', 'color', and 'shadow' tokens. The 'shadow.medium' token demonstrates mixing referenced values ('{color.shadow-050}', '{space.small}') with explicit values, and 'component.card.box-shadow' shows aliasing a composite token.

```json
{
  "space": {
    "small": {
      "$type": "dimension",
      "$value": { "value": 0.5, "unit": "rem" }
    }
  },

  "color": {
    "shadow-050": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0, 0, 0],
        "alpha": 0.5,
        "hex": "#000000"
      }
    }
  },

  "shadow": {
    "medium": {
      "$type": "shadow",
      "$description": "A composite token where some sub-values are references to tokens that have the correct type and others are explicit values",
      "$value": {
        "color": "{color.shadow-050}",
        "offsetX": "{space.small}",
        "offsetY": "{space.small}",
        "blur": { "value": 1.5, "unit": "rem" },
        "spread": { "value": 0, "unit": "rem" }
      }
    }
  },

  "component": {
    "card": {
      "box-shadow": {
        "$description": "This token is an alias for the composite token {shadow.medium}",
        "$value": "{shadow.medium}"
      }
    }
  }
}
```

--------------------------------

### Border Token Structure and Examples

Source: https://www.designtokens.org/TR/2025.10/format

Defines the 'border' composite token type. It requires a '$type' of 'border' and a '$value' object containing 'color', 'width', and 'style'. Examples demonstrate different border configurations.

```json
{
  "border": {
    "heavy": {
      "$type": "border",
      "$value": {
        "color": {
          "colorSpace": "srgb",
          "components": [0.218, 0.218, 0.218]
        },
        "width": {
          "value": 3,
          "unit": "px"
        },
        "style": "solid"
      }
    },
    "focusring": {
      "$type": "border",
      "$value": {
        "color": "{color.focusring}",
        "width": {
          "value": 1,
          "unit": "px"
        },
        "style": {
          "dashArray": [
            { "value": 0.5, "unit": "rem" },
            { "value": 0.25, "unit": "rem" }
          ],
          "lineCap": "round"
        }
      }
    }
  }
}
```

--------------------------------

### Design Tokens Inheritance Override Example

Source: https://www.designtokens.org/TR/2025.10/format

Illustrates how a local token definition completely overrides an inherited token definition at the same path. In this example, 'input-amount' extends 'input', and its 'field.width' property replaces the inherited 'field.width'.

```json
{
  "input": {
    "field": {
      "width": {
        "$type": "dimension",
        "$value": { "value": 12, "unit": "rem" },
      },
      "background": {
        "$value": {
          "colorSpace": "srgb",
          "components": [1, 1, 1],
          "hex": "#ffffff",
        },
      },
    },
  },
  "input-amount": {
    "$extends": "{input}",
    "field": {
      "width": { "$value": "100px" }, 
    },
  },
}
```

--------------------------------

### JSON Pointer Support using $ref

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates how to use the '$ref' property with JSON Pointer syntax to create aliases and references within design tokens. This allows for modularity and reuse of token definitions.

```json
{
  "base": {
    "$value": {
      "colorSpace": "srgb",
      "components": [0, 0.4, 0.8],
      "hex": "#0066cc"
    }
  },
  "alias": { "$ref": "#/base" }
}
```

--------------------------------

### Gradient Token with Omitted Start Stop (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Illustrates a gradient token where the start stop is omitted, resulting in the color of the first stop being extended to the gradient's beginning. This is useful for gradients that are solid for a portion.

```json
{
  "mostly-yellow": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [1, 1, 0]
        },
        "position": 0.666
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [1, 0, 0]
        },
        "position": 1
      }
    ]
  }
}
```

--------------------------------

### sRGB Color Space Example

Source: https://www.designtokens.org/TR/2025.10/color

Provides an example of defining a color in the sRGB color space. It includes the color space name, the components (Red, Green, Blue) as numbers between 0 and 1, and the alpha and hex values.

```json
{
  "Hot pink": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [1, 0, 1],
      "alpha": 1,
      "hex": "#ff00ff"
    }
  }
}
```

--------------------------------

### Valid Inheritance Patterns in Design Tokens

Source: https://www.designtokens.org/TR/2025.10/format

Illustrates valid design token inheritance structures using the `$extends` keyword. These examples show how child groups can validly reference parent groups, enabling code reuse and maintaining a clear hierarchy.

```json
{
  "button": {
    "color": { "$value": "#blue" },
    "border": { "$value": "1px solid" }
  },
  "button-secondary": {
    "$extends": "{button}", // ✅ Valid: references parent group
    "color": { "$value": "#gray" }
  },
  "button-large": {
    "$extends": "{button}", // ✅ Valid: siblings can reference same parent
    "padding": { "$value": "16px" }
  }
}

```

--------------------------------

### Layered Shadow Token Example (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Defines a 'layered-shadow' token using an array of shadow objects. Each object specifies color, offsets, blur, and spread, allowing for multiple shadows to be applied. This demonstrates how to create depth and complex shadow effects.

```json
{
  "layered-shadow": {
    "$type": "shadow",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [0, 0, 0],
          "alpha": 0.1
        },
        "offsetX": { "value": 0, "unit": "px" },
        "offsetY": { "value": 24, "unit": "px" },
        "blur": { "value": 22, "unit": "px" },
        "spread": { "value": 0, "unit": "px" }
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [0, 0, 0],
          "alpha": 0.2
        },
        "offsetX": { "value": 0, "unit": "px" },
        "offsetY": { "value": 42.9, "unit": "px" },
        "blur": { "value": 44, "unit": "px" },
        "spread": { "value": 0, "unit": "px" }
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [0, 0, 0],
          "alpha": 0.3
        },
        "offsetX": { "value": 0, "unit": "px" },
        "offsetY": { "value": 64, "unit": "px" },
        "blur": { "value": 64, "unit": "px" },
        "spread": { "value": 0, "unit": "px" }
      }
    ]
  }
}
```

--------------------------------

### Color Theme Modifier Example

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

Demonstrates a color theme modifier with different contexts (light, dark, high contrast). Each context is an array of token sources, which can be references to other JSON files or inline tokens. The 'default' context is also specified.

```json
{
  "modifiers": {
    "theme": {
      "description": "Color theme",
      "contexts": {
        "light": [{ "$ref": "theme/light.json" }],
        "lightHighContrast": [
          { "$ref": "theme/light.json" },
          { "$ref": "theme/dark-high-contrast.json" }
        ],
        "dark": [{ "$ref": "theme/dark.json" }],
        "darkHighContrast": [
          { "$ref": "theme/dark.json" },
          { "$ref": "theme/dark-high-contrast.json" }
        ]
      },
      "default": "light"
    }
  }
}
```

--------------------------------

### Group Type Inheritance Example (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates the $type property for default type inheritance within a group. Tokens within a group inherit the group's type unless they explicitly declare their own. This example shows a 'color' group with nested color tokens, including one that overrides the default type.

```json
{
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0, 0.4, 0.8],
        "hex": "#0066cc"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0.4, 0.6, 1],
        "hex": "#6699ff"
      }
    },
    "semantic": {
      "success": {
        "$value": {
          "colorSpace": "srgb",
          "components": [0, 0.8, 0.4],
          "hex": "#00cc66"
        }
      },
      "warning": {
        "$type": "string",
        "$value": "amber"
      }
    }
  }
}
```

--------------------------------

### Gradient Token Using References (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates using token references within a gradient definition. This includes referencing color tokens, number tokens for position, and even other gradient tokens.

```json
{
  "brand-primary": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0, 1, 0.4]
    }
  },

  "position-end": {
    "$type": "number",
    "$value": 1
  },

  "brand-in-the-middle": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [0, 0, 0]
        },
        "position": 0
      },
      {
        "color": "{brand-primary}",
        "position": 0.5
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [0, 0, 0]
        },
        "position": "{position-end}"
      }
    ]
  },

  "gradient-with-references": {
    "$type": "gradient",
    "$value": [
      "{gradient.start-stop}",
      {
        "color": "{brand.secondary}",
        "position": 0.333
      },
      "{gradient.end-stop}"
    ]
  },

  "gradient": {
    "start-stop": {
      "$type": "gradient",
      "$value": [
        {
          "color": { "colorSpace": "srgb", "components": [1, 1, 1] },
          "position": 0
        }
      ]
    },
    "end-stop": {
      "$type": "gradient",
      "$value": [
        {
          "color": { "colorSpace": "srgb", "components": [0, 0, 0] },
          "position": 1
        }
      ]
    }
  }
}
```

--------------------------------

### Invalid Design Token Input Object

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

An example of an invalid input object, demonstrating unknown keys, invalid contexts, and missing required modifiers.

```json
{
  "theme": "blue",
  "foo": "bar"
}
```

--------------------------------

### Valid Design Token Input Object

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

An example of a valid input object for a design token resolver, where keys match modifier names and values correspond to allowed contexts.

```json
{
  "theme": "light",
  "size": "large",
  "beta": "true"
}
```

--------------------------------

### Mixed Reference Shadow Token Example (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates a 'mixed-reference-shadow' token where the '$value' array includes references to other shadow tokens (e.g., '{base.shadow}') alongside explicit shadow object definitions. This allows for composition and reuse of existing shadow styles.

```json
{
  "mixed-reference-shadow": {
    "$type": "shadow",
    "$value": [
      "{base.shadow}",
      {
        "color": "{brand.accent}",
        "offsetX": { "value": 2, "unit": "px" },
        "offsetY": { "value": 2, "unit": "px" },
        "blur": { "value": 4, "unit": "px" },
        "spread": { "value": 1, "unit": "px" }
      },
      "{highlight.shadow}"
    ]
  }
}
```

--------------------------------

### JSON - Conflict Resolution Example

Source: https://www.designtokens.org/TR/2025.10/tr/2025.10/resolver

Demonstrates how design tokens are resolved when multiple declarations exist, with the last declaration taking precedence. This applies to sets and modifiers based on their order in the resolutionOrder array.

```json
{
  "sets": {
    "foundation": {
      "sources": [
        {
          "color": {
            "text": {
              "default": {
                "$value": { "colorSpace": "srgb", "components": [0, 0, 0] },
                "$type": "color"
              }
            }
          }
        },
        {
          "color": {
            "text": {
              "default": {
                "$value": {
                  "colorSpace": "srgb",
                  "components": [0.1, 0.1, 0.1]
                },
                "$type": "color"
              }
            }
          }
        }
      ]
    }
  },
  "resolutionOrder": [{ "$ref": "#/sets/foundation" }]
}
```

```json
{
  "color": {
    "text": {
      "default": {
        "$value": { "colorSpace": "srgb", "components": [0.1, 0.1, 0.1] },
        "$type": "color"
      }
    }
  }
}
```

--------------------------------

### Dimension Component References using JSON Pointer (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates property-level referencing for dimension tokens using JSON Pointer. This example shows how to reuse the numeric value from a base dimension token while applying a different unit, and vice versa.

```json
{
  "base": {
    "spacing": {
      "$value": { "value": 16, "unit": "px" },
      "$type": "dimension"
    }
  },
  "layout": {
    "small": {
      "$value": {
        "value": { "$ref": "#/base/spacing/$value/value" },
        "unit": "rem"
      },
      "$type": "dimension"
    },
    "large": {
      "$value": {
        "value": 32,
        "unit": { "$ref": "#/base/spacing/$value/unit" }
      },
      "$type": "dimension"
    }
  }
}
```

--------------------------------

### Basic Group with Root Token

Source: https://www.designtokens.org/TR/2025.10/format

A fundamental example of a design token group named 'spacing'. It includes a '$type', a '$description', a root token '$root' with a '$value', and other nested tokens like 'small' and 'large'.

```json
{
  "spacing": {
    "$type": "dimension",
    "$description": "Base spacing scale",
    "$root": { "$value": { "value": 16, "unit": "px" } },
    "small": { "$value": { "value": 8, "unit": "px" } },
    "large": { "$value": { "value": 32, "unit": "px" } }
  }
}
```

--------------------------------

### Color Component References using JSON Pointer (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Shows how JSON Pointer references can be used to reference specific components of a composite token, like color values. This example demonstrates reusing parts of a base color token in semantic tokens, allowing for partial updates.

```json
{
  "base": {
    "blue": {
      "$value": {
        "colorSpace": "srgb",
        "components": [0.2, 0.4, 0.9],
        "hex": "#3366e6"
      },
      "$type": "color"
    }
  },
  "semantic": {
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          { "$ref": "#/base/blue/$value/components/0" },
          { "$ref": "#/base/blue/$value/components/1" },
          0.7
        ],
        "hex": "#3366b3"
      },
      "$type": "color"
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          { "$ref": "#/base/blue/$value/components/0" },
          { "$ref": "#/base/blue/$value/components/1" },
          0.5
        ],
        "hex": "#336680"
      },
      "$type": "color"
    }
  }
}
```

--------------------------------

### Define Design Token with Type and Value (JSON)

Source: https://www.designtokens.org/TR/2025.10/format

Demonstrates specifying the '$type' property for a design token. This ensures the token's value is unambiguously interpreted by tools. The example defines a color token.

```json
{
  "Button background": {
    "$type": "color",
    "$value": {
      "colorSpace": "srgb",
      "components": [0.467, 0.467, 0.467]
    }
  }
}
```