$type: "dimension" primitive

Dimension Token

Dimension tokens represent a distance or size in space. The $value must be a string containing a number followed by a unit — either px (pixels) or rem (root em units). Dimension tokens cover spacing, sizing, border radii, and any other spatial measurements in your design system.

Value Format

A string with a numeric value and a unit (px or rem)

When to Use

Use dimension tokens for margins, padding, widths, heights, border radii, gaps, and any spatial relationship. They keep your layout consistent and make density changes (compact vs. comfortable modes) easy to implement.

Valid Example

Valid JSON .json

{
  "spacing": {
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Small spacing unit"
    },
    "md": {
      "$value": "16px",
      "$type": "dimension"
    },
    "lg": {
      "$value": "1.5rem",
      "$type": "dimension"
    }
  }
}

Common Mistake

Invalid — will fail validation

{
  "spacing-sm": {
    "$value": 8,
    "$type": "dimension"
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types