@primer/primitives/dist/docs/functional/spacing/space.json

Typography, spacing, and color primitives for Primer design system

{
  "space-lg": {
    "key": "{space.lg}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
        "rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
      },
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["gap"]
      }
    },
    "filePath": "src/tokens/functional/spacing/space.json5",
    "isSource": true,
    "original": {
      "$value": "{base.size.16}",
      "$type": "dimension",
      "$description": "Spacious spacing for major layout divisions and visual separation between content blocks.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
          "rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
        },
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["gap"]
        }
      },
      "key": "{space.lg}"
    },
    "name": "space-lg",
    "attributes": {},
    "path": ["space", "lg"],
    "value": "1rem",
    "type": "dimension",
    "description": "Spacious spacing for major layout divisions and visual separation between content blocks."
  },
  "space-md": {
    "key": "{space.md}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
        "rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
      },
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["gap"]
      }
    },
    "filePath": "src/tokens/functional/spacing/space.json5",
    "isSource": true,
    "original": {
      "$value": "{base.size.12}",
      "$type": "dimension",
      "$description": "Relaxed spacing for breathing room and comfortable internal container space.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
          "rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
        },
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["gap"]
        }
      },
      "key": "{space.md}"
    },
    "name": "space-md",
    "attributes": {},
    "path": ["space", "md"],
    "value": "0.75rem",
    "type": "dimension",
    "description": "Relaxed spacing for breathing room and comfortable internal container space."
  },
  "space-sm": {
    "key": "{space.sm}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
        "rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
      },
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["gap"]
      }
    },
    "filePath": "src/tokens/functional/spacing/space.json5",
    "isSource": true,
    "original": {
      "$value": "{base.size.8}",
      "$type": "dimension",
      "$description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
          "rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
        },
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["gap"]
        }
      },
      "key": "{space.sm}"
    },
    "name": "space-sm",
    "attributes": {},
    "path": ["space", "sm"],
    "value": "0.5rem",
    "type": "dimension",
    "description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts."
  },
  "space-xl": {
    "key": "{space.xl}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
        "rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
      },
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["gap"]
      }
    },
    "filePath": "src/tokens/functional/spacing/space.json5",
    "isSource": true,
    "original": {
      "$value": "{base.size.24}",
      "$type": "dimension",
      "$description": "Expansive spacing for large sections and top-level structure separation.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
          "rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
        },
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["gap"]
        }
      },
      "key": "{space.xl}"
    },
    "name": "space-xl",
    "attributes": {},
    "path": ["space", "xl"],
    "value": "1.5rem",
    "type": "dimension",
    "description": "Expansive spacing for large sections and top-level structure separation."
  },
  "space-xs": {
    "key": "{space.xs}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
        "rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
      },
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["gap"]
      }
    },
    "filePath": "src/tokens/functional/spacing/space.json5",
    "isSource": true,
    "original": {
      "$value": "{base.size.4}",
      "$type": "dimension",
      "$description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
          "rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
        },
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["gap"]
        }
      },
      "key": "{space.xs}"
    },
    "name": "space-xs",
    "attributes": {},
    "path": ["space", "xs"],
    "value": "0.25rem",
    "type": "dimension",
    "description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room."
  },
  "space-xxs": {
    "key": "{space.xxs}",
    "$extensions": {
      "org.primer.llm": {
        "usage": ["gap", "padding", "margin", "form-separators"],
        "rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
      },
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["gap"]
      }
    },
    "filePath": "src/tokens/functional/spacing/space.json5",
    "isSource": true,
    "original": {
      "$value": "{base.size.2}",
      "$type": "dimension",
      "$description": "Ultra-compact spacing for form field separators and tight visual divisions.",
      "$extensions": {
        "org.primer.llm": {
          "usage": ["gap", "padding", "margin", "form-separators"],
          "rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
        },
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["gap"]
        }
      },
      "key": "{space.xxs}"
    },
    "name": "space-xxs",
    "attributes": {},
    "path": ["space", "xxs"],
    "value": "0.125rem",
    "type": "dimension",
    "description": "Ultra-compact spacing for form field separators and tight visual divisions."
  }
}