@primer/primitives/dist/docs/base/typography/typography.json

Typography, spacing, and color primitives for Primer design system

{
  "base-text-lineHeight-loose": {
    "key": "{base.text.lineHeight.loose}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "typography",
        "scopes": ["lineHeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 1.75,
      "$type": "number",
      "$description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "typography",
          "scopes": ["lineHeight"]
        }
      },
      "key": "{base.text.lineHeight.loose}"
    },
    "name": "base-text-lineHeight-loose",
    "attributes": {},
    "path": ["base", "text", "lineHeight", "loose"],
    "value": 1.75,
    "type": "number",
    "description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility."
  },
  "base-text-lineHeight-normal": {
    "key": "{base.text.lineHeight.normal}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "typography",
        "scopes": ["lineHeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 1.5,
      "$type": "number",
      "$description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "typography",
          "scopes": ["lineHeight"]
        }
      },
      "key": "{base.text.lineHeight.normal}"
    },
    "name": "base-text-lineHeight-normal",
    "attributes": {},
    "path": ["base", "text", "lineHeight", "normal"],
    "value": 1.5,
    "type": "number",
    "description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick."
  },
  "base-text-lineHeight-relaxed": {
    "key": "{base.text.lineHeight.relaxed}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "typography",
        "scopes": ["lineHeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 1.625,
      "$type": "number",
      "$description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "typography",
          "scopes": ["lineHeight"]
        }
      },
      "key": "{base.text.lineHeight.relaxed}"
    },
    "name": "base-text-lineHeight-relaxed",
    "attributes": {},
    "path": ["base", "text", "lineHeight", "relaxed"],
    "value": 1.625,
    "type": "number",
    "description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room."
  },
  "base-text-lineHeight-snug": {
    "key": "{base.text.lineHeight.snug}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "typography",
        "scopes": ["lineHeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 1.375,
      "$type": "number",
      "$description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "typography",
          "scopes": ["lineHeight"]
        }
      },
      "key": "{base.text.lineHeight.snug}"
    },
    "name": "base-text-lineHeight-snug",
    "attributes": {},
    "path": ["base", "text", "lineHeight", "snug"],
    "value": 1.375,
    "type": "number",
    "description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines."
  },
  "base-text-lineHeight-tight": {
    "key": "{base.text.lineHeight.tight}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "typography",
        "scopes": ["lineHeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 1.25,
      "$type": "number",
      "$description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "typography",
          "scopes": ["lineHeight"]
        }
      },
      "key": "{base.text.lineHeight.tight}"
    },
    "name": "base-text-lineHeight-tight",
    "attributes": {},
    "path": ["base", "text", "lineHeight", "tight"],
    "value": 1.25,
    "type": "number",
    "description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability."
  },
  "base-text-size-2xl": {
    "key": "{base.text.size.2xl}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontSize"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 2.5,
        "unit": "rem"
      },
      "$type": "dimension",
      "$description": "40px - Display text for hero sections.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontSize"]
        }
      },
      "key": "{base.text.size.2xl}"
    },
    "name": "base-text-size-2xl",
    "attributes": {},
    "path": ["base", "text", "size", "2xl"],
    "value": "2.5rem",
    "type": "dimension",
    "description": "40px - Display text for hero sections."
  },
  "base-text-size-lg": {
    "key": "{base.text.size.lg}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontSize"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 1.25,
        "unit": "rem"
      },
      "$type": "dimension",
      "$description": "20px - Medium titles and subtitles.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontSize"]
        }
      },
      "key": "{base.text.size.lg}"
    },
    "name": "base-text-size-lg",
    "attributes": {},
    "path": ["base", "text", "size", "lg"],
    "value": "1.25rem",
    "type": "dimension",
    "description": "20px - Medium titles and subtitles."
  },
  "base-text-size-md": {
    "key": "{base.text.size.md}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontSize"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 1,
        "unit": "rem"
      },
      "$type": "dimension",
      "$description": "16px - Large body text and small titles.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontSize"]
        }
      },
      "key": "{base.text.size.md}"
    },
    "name": "base-text-size-md",
    "attributes": {},
    "path": ["base", "text", "size", "md"],
    "value": "1rem",
    "type": "dimension",
    "description": "16px - Large body text and small titles."
  },
  "base-text-size-sm": {
    "key": "{base.text.size.sm}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontSize"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 0.875,
        "unit": "rem"
      },
      "$type": "dimension",
      "$description": "14px - Default body text size for UI.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontSize"]
        }
      },
      "key": "{base.text.size.sm}"
    },
    "name": "base-text-size-sm",
    "attributes": {},
    "path": ["base", "text", "size", "sm"],
    "value": "0.875rem",
    "type": "dimension",
    "description": "14px - Default body text size for UI."
  },
  "base-text-size-xl": {
    "key": "{base.text.size.xl}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontSize"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 2,
        "unit": "rem"
      },
      "$type": "dimension",
      "$description": "32px - Large titles and page headings.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontSize"]
        }
      },
      "key": "{base.text.size.xl}"
    },
    "name": "base-text-size-xl",
    "attributes": {},
    "path": ["base", "text", "size", "xl"],
    "value": "2rem",
    "type": "dimension",
    "description": "32px - Large titles and page headings."
  },
  "base-text-size-xs": {
    "key": "{base.text.size.xs}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontSize"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 0.75,
        "unit": "rem"
      },
      "$type": "dimension",
      "$description": "12px - Smallest text size for captions and compact UI elements.",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontSize"]
        }
      },
      "key": "{base.text.size.xs}"
    },
    "name": "base-text-size-xs",
    "attributes": {},
    "path": ["base", "text", "size", "xs"],
    "value": "0.75rem",
    "type": "dimension",
    "description": "12px - Smallest text size for captions and compact UI elements."
  },
  "base-text-weight-light": {
    "key": "{base.text.weight.light}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontWeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$type": "fontWeight",
      "$value": 300,
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontWeight"]
        }
      },
      "key": "{base.text.weight.light}"
    },
    "name": "base-text-weight-light",
    "attributes": {},
    "path": ["base", "text", "weight", "light"],
    "value": 300,
    "type": "fontWeight"
  },
  "base-text-weight-medium": {
    "key": "{base.text.weight.medium}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontWeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 500,
      "$type": "fontWeight",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontWeight"]
        }
      },
      "key": "{base.text.weight.medium}"
    },
    "name": "base-text-weight-medium",
    "attributes": {},
    "path": ["base", "text", "weight", "medium"],
    "value": 500,
    "type": "fontWeight"
  },
  "base-text-weight-normal": {
    "key": "{base.text.weight.normal}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontWeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 400,
      "$type": "fontWeight",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontWeight"]
        }
      },
      "key": "{base.text.weight.normal}"
    },
    "name": "base-text-weight-normal",
    "attributes": {},
    "path": ["base", "text", "weight", "normal"],
    "value": 400,
    "type": "fontWeight"
  },
  "base-text-weight-semibold": {
    "key": "{base.text.weight.semibold}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "base/typography",
        "scopes": ["fontWeight"]
      }
    },
    "filePath": "src/tokens/base/typography/typography.json5",
    "isSource": true,
    "original": {
      "$value": 600,
      "$type": "fontWeight",
      "$extensions": {
        "org.primer.figma": {
          "collection": "base/typography",
          "scopes": ["fontWeight"]
        }
      },
      "key": "{base.text.weight.semibold}"
    },
    "name": "base-text-weight-semibold",
    "attributes": {},
    "path": ["base", "text", "weight", "semibold"],
    "value": 600,
    "type": "fontWeight"
  }
}