{
  "control": {
    "$description": "Size tokens for interactive controls (buttons, inputs, selects). Includes overall size, padding, line height, and gap values for each size variant.",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["button", "input", "select", "form-control", "interactive-element"],
        "rules": "Use size variants consistently across related controls. Match control size to context: xsmall/small for dense UIs, medium for standard forms, large/xlarge for prominent CTAs. Use minTarget values to ensure touch accessibility on coarse pointer devices."
      }
    },
    "minTarget": {
      "fine": {
        "$value": "{base.size.16}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "coarse": {
        "$value": "{base.size.44}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      }
    },
    "xsmall": {
      "size": {
        "$value": "{base.size.24}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "paddingBlock": {
        "$value": {"value": 2, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "paddingInline": {
        "condensed": {
          "$value": "{base.size.4}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "normal": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      },
      "gap": {
        "$value": "{base.size.4}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    },
    "small": {
      "size": {
        "$value": "{base.size.28}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "paddingBlock": {
        "$value": "{base.size.4}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "paddingInline": {
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "normal": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.16}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      },
      "gap": {
        "$value": "{base.size.4}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    },
    "medium": {
      "size": {
        "$value": "{base.size.32}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "paddingBlock": {
        "$value": {"value": 6, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "paddingInline": {
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "normal": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.16}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      },
      "gap": {
        "$value": "{base.size.8}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    },
    "large": {
      "size": {
        "$value": "{base.size.40}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "paddingBlock": {
        "$value": {"value": 10, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "paddingInline": {
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "normal": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.16}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      },
      "gap": {
        "$value": "{base.size.8}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    },
    "xlarge": {
      "size": {
        "$value": "{base.size.48}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "paddingBlock": {
        "$value": {"value": 14, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "paddingInline": {
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "normal": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.16}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      },
      "gap": {
        "$value": "{base.size.8}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    }
  },
  "spinner": {
    "$description": "Size and stroke tokens for loading spinner components.",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["loading-spinner", "progress-indicator", "async-loading"],
        "rules": "Match spinner size to context: small for inline loading, medium for buttons and cards, large for full-page loading states."
      }
    },
    "strokeWidth": {
      "default": {
        "$value": {"value": 2, "unit": "px"},
        "$type": "dimension"
      }
    },
    "size": {
      "small": {
        "$value": "{base.size.16}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "medium": {
        "$value": "{base.size.32}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "large": {
        "$value": "{base.size.64}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      }
    }
  },
  "stack": {
    "$description": "Spacing tokens for Stack layout components including padding and gap values.",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["stack-layout", "vertical-stack", "horizontal-stack", "flex-container"],
        "rules": "Use condensed for dense lists, normal for standard layouts, spacious for prominent sections. Stack tokens provide consistent spacing within layout containers."
      }
    },
    "padding": {
      "condensed": {
        "$value": "{base.size.8}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"],
            "group": "component",
            "codeSyntax": {
              "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
            }
          }
        }
      },
      "normal": {
        "$value": "{base.size.16}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "group": "component",
            "scopes": ["gap"],
            "codeSyntax": {
              "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
            }
          }
        }
      },
      "spacious": {
        "$value": "{base.size.24}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "group": "component",
            "scopes": ["gap"],
            "codeSyntax": {
              "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
            }
          }
        }
      }
    },
    "gap": {
      "condensed": {
        "$value": "{base.size.8}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "group": "component",
            "scopes": ["gap"],
            "codeSyntax": {
              "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
            }
          }
        }
      },
      "normal": {
        "$value": "{base.size.16}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "group": "component",
            "scopes": ["gap"],
            "codeSyntax": {
              "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
            }
          }
        }
      },
      "spacious": {
        "$value": "{base.size.24}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "group": "component",
            "scopes": ["gap"],
            "codeSyntax": {
              "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
            }
          }
        }
      }
    }
  },
  "controlStack": {
    "$description": "Gap tokens for groups of controls (buttons, form elements) arranged in a row or column.",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["button-group", "form-control-group", "action-bar", "toolbar"],
        "rules": "Use with groups of related controls. Match gap size to control size (small controls use small gaps). Condensed for tight groupings, spacious for separated actions."
      }
    },
    "small": {
      "gap": {
        "auto": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.16}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      }
    },
    "medium": {
      "gap": {
        "auto": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      }
    },
    "large": {
      "gap": {
        "auto": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "condensed": {
          "$value": "{base.size.8}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        },
        "spacious": {
          "$value": "{base.size.12}",
          "$type": "dimension",
          "$extensions": {
            "org.primer.figma": {
              "collection": "pattern/size",
              "scopes": ["gap"]
            }
          }
        }
      }
    }
  },
  "overlay": {
    "$description": "Dimension tokens for overlay components like modals, dialogs, popovers, and dropdown menus.",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["modal", "dialog", "popover", "dropdown", "tooltip", "overlay-panel"],
        "rules": "Match overlay size to content: xsmall/small for menus and tooltips, medium for dialogs, large/xlarge for complex modals. Use height tokens to constrain scrollable overlays. Always consider viewport size constraints."
      }
    },
    "width": {
      "xsmall": {
        "$value": {"value": 192, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "small": {
        "$value": {"value": 320, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "medium": {
        "$value": {"value": 480, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "large": {
        "$value": {"value": 640, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "xlarge": {
        "$value": {"value": 960, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      }
    },
    "height": {
      "small": {
        "$value": {"value": 256, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "medium": {
        "$value": {"value": 320, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "large": {
        "$value": {"value": 432, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      },
      "xlarge": {
        "$value": {"value": 600, "unit": "px"},
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["size"]
          }
        }
      }
    },
    "padding": {
      "normal": {
        "$value": "{base.size.16}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "condensed": {
        "$value": "{base.size.8}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    },
    "paddingBlock": {
      "condensed": {
        "$value": "{base.size.4}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      },
      "normal": {
        "$value": "{base.size.12}",
        "$type": "dimension",
        "$extensions": {
          "org.primer.figma": {
            "collection": "pattern/size",
            "scopes": ["gap"]
          }
        }
      }
    },
    "borderRadius": {
      "$value": "{borderRadius.medium}",
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "pattern/size",
          "scopes": ["radius"]
        }
      }
    },
    "offset": {
      "$value": {"value": 4, "unit": "px"},
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "pattern/size",
          "scopes": ["size"]
        }
      }
    }
  }
}