@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
1,427 lines (1,426 loc) • 46.9 kB
JSON
{
"fontStack-monospace": {
"key": "{fontStack.monospace}",
"$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
"$type": "fontFamily",
"$description": "Monospace font stack for code, technical content, and tabular data.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
},
"org.primer.llm": {
"usage": ["code-block", "inline-code", "terminal", "technical-data", "tabular-numbers"],
"rules": "MUST use for all code display. Use for technical content requiring fixed-width characters."
}
},
"filePath": "src/tokens/functional/typography/font-stack.json5",
"isSource": true,
"original": {
"$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
"$type": "fontFamily",
"$description": "Monospace font stack for code, technical content, and tabular data.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
},
"org.primer.llm": {
"usage": ["code-block", "inline-code", "terminal", "technical-data", "tabular-numbers"],
"rules": "MUST use for all code display. Use for technical content requiring fixed-width characters."
}
},
"key": "{fontStack.monospace}"
},
"name": "fontStack-monospace",
"attributes": {},
"path": ["fontStack", "monospace"]
},
"fontStack-sansSerif": {
"key": "{fontStack.sansSerif}",
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "fontFamily",
"$description": "Sans-serif font stack for body text and general UI elements.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
},
"org.primer.llm": {
"usage": ["body-text", "form-inputs", "labels", "paragraphs"],
"rules": "Default font stack for all UI text. Use for body text and standard UI elements. MUST use for readable content."
}
},
"filePath": "src/tokens/functional/typography/font-stack.json5",
"isSource": true,
"original": {
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "fontFamily",
"$description": "Sans-serif font stack for body text and general UI elements.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
},
"org.primer.llm": {
"usage": ["body-text", "form-inputs", "labels", "paragraphs"],
"rules": "Default font stack for all UI text. Use for body text and standard UI elements. MUST use for readable content."
}
},
"key": "{fontStack.sansSerif}"
},
"name": "fontStack-sansSerif",
"attributes": {},
"path": ["fontStack", "sansSerif"]
},
"fontStack-sansSerifDisplay": {
"key": "{fontStack.sansSerifDisplay}",
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "fontFamily",
"$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
},
"org.primer.llm": {
"usage": ["heading", "title", "display-text", "hero-text"],
"rules": "Use for headings and display text. Prefer over sansSerif for titles."
}
},
"filePath": "src/tokens/functional/typography/font-stack.json5",
"isSource": true,
"original": {
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "fontFamily",
"$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
},
"org.primer.llm": {
"usage": ["heading", "title", "display-text", "hero-text"],
"rules": "Use for headings and display text. Prefer over sansSerif for titles."
}
},
"key": "{fontStack.sansSerifDisplay}"
},
"name": "fontStack-sansSerifDisplay",
"attributes": {},
"path": ["fontStack", "sansSerifDisplay"]
},
"fontStack-system": {
"key": "{fontStack.system}",
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "fontFamily",
"$description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
}
},
"filePath": "src/tokens/functional/typography/font-stack.json5",
"isSource": true,
"original": {
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "fontFamily",
"$description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontFamily"]
}
},
"key": "{fontStack.system}"
},
"name": "fontStack-system",
"attributes": {},
"path": ["fontStack", "system"]
},
"text-body-lineHeight-large": {
"key": "{text.body.lineHeight.large}",
"$value": 1.5,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 16
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.normal}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 16
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.body.lineHeight.large}"
},
"name": "text-body-lineHeight-large",
"attributes": {},
"path": ["text", "body", "lineHeight", "large"]
},
"text-body-lineHeight-medium": {
"key": "{text.body.lineHeight.medium}",
"$value": 1.5,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 14
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.normal}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 14
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.body.lineHeight.medium}"
},
"name": "text-body-lineHeight-medium",
"attributes": {},
"path": ["text", "body", "lineHeight", "medium"]
},
"text-body-lineHeight-small": {
"key": "{text.body.lineHeight.small}",
"$value": 1.625,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 12
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.relaxed}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 12
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.body.lineHeight.small}"
},
"name": "text-body-lineHeight-small",
"attributes": {},
"path": ["text", "body", "lineHeight", "small"]
},
"text-body-shorthand-large": {
"key": "{text.body.shorthand.large}",
"$value": "400 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "User-generated content, markdown rendering.",
"$extensions": {
"org.primer.llm": {
"usage": ["markdown-content", "article-text", "readme", "comment-body"],
"rules": "Use for user-generated content and markdown. Better readability for longer text."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.body.weight}",
"fontSize": "{text.body.size.large}",
"lineHeight": "{text.body.lineHeight.large}",
"fontFamily": "{fontStack.sansSerif}"
},
"$type": "typography",
"$description": "User-generated content, markdown rendering.",
"$extensions": {
"org.primer.llm": {
"usage": ["markdown-content", "article-text", "readme", "comment-body"],
"rules": "Use for user-generated content and markdown. Better readability for longer text."
}
},
"key": "{text.body.shorthand.large}"
},
"name": "text-body-shorthand-large",
"attributes": {},
"path": ["text", "body", "shorthand", "large"]
},
"text-body-shorthand-medium": {
"key": "{text.body.shorthand.medium}",
"$value": "400 0.875rem,14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Default UI font. Most commonly used for body text.",
"$extensions": {
"org.primer.llm": {
"usage": ["body-text", "ui-text", "form-label", "button-text", "navigation"],
"rules": "RECOMMENDED default for UI text. Use for buttons, labels, and general interface text."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.body.weight}",
"fontSize": "{text.body.size.medium}",
"lineHeight": "{text.body.lineHeight.medium}",
"fontFamily": "{fontStack.sansSerif}"
},
"$type": "typography",
"$description": "Default UI font. Most commonly used for body text.",
"$extensions": {
"org.primer.llm": {
"usage": ["body-text", "ui-text", "form-label", "button-text", "navigation"],
"rules": "RECOMMENDED default for UI text. Use for buttons, labels, and general interface text."
}
},
"key": "{text.body.shorthand.medium}"
},
"name": "text-body-shorthand-medium",
"attributes": {},
"path": ["text", "body", "shorthand", "medium"]
},
"text-body-shorthand-small": {
"key": "{text.body.shorthand.small}",
"$value": "400 0.75rem,12px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.",
"$extensions": {
"org.primer.llm": {
"usage": ["helper-text", "footnote", "metadata", "timestamp"],
"rules": "Use sparingly for secondary information. Do NOT use for primary content or interactive elements."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.body.weight}",
"fontSize": "{text.body.size.small}",
"lineHeight": "{text.body.lineHeight.small}",
"fontFamily": "{fontStack.sansSerif}"
},
"$type": "typography",
"$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.",
"$extensions": {
"org.primer.llm": {
"usage": ["helper-text", "footnote", "metadata", "timestamp"],
"rules": "Use sparingly for secondary information. Do NOT use for primary content or interactive elements."
}
},
"key": "{text.body.shorthand.small}"
},
"name": "text-body-shorthand-small",
"attributes": {},
"path": ["text", "body", "shorthand", "small"]
},
"text-body-size-large": {
"key": "{text.body.size.large}",
"$value": ["1rem", "16px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.md}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.body.size.large}"
},
"name": "text-body-size-large",
"attributes": {},
"path": ["text", "body", "size", "large"]
},
"text-body-size-medium": {
"key": "{text.body.size.medium}",
"$value": ["0.875rem", "14px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.sm}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.body.size.medium}"
},
"name": "text-body-size-medium",
"attributes": {},
"path": ["text", "body", "size", "medium"]
},
"text-body-size-small": {
"key": "{text.body.size.small}",
"$value": ["0.75rem", "12px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.xs}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.body.size.small}"
},
"name": "text-body-size-small",
"attributes": {},
"path": ["text", "body", "size", "small"]
},
"text-body-weight": {
"key": "{text.body.weight}",
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.normal}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.body.weight}"
},
"name": "text-body-weight",
"attributes": {},
"path": ["text", "body", "weight"]
},
"text-caption-lineHeight": {
"key": "{text.caption.lineHeight}",
"$value": 1.25,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 12
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.tight}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 12
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.caption.lineHeight}"
},
"name": "text-caption-lineHeight",
"attributes": {},
"path": ["text", "caption", "lineHeight"]
},
"text-caption-shorthand": {
"key": "{text.caption.shorthand}",
"$value": "400 0.75rem,12px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.",
"$extensions": {
"org.primer.llm": {
"usage": ["caption", "label", "badge-text", "single-line-metadata"],
"rules": "Use only for single-line or short text. Does NOT meet accessibility requirements for body text."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.caption.weight}",
"fontSize": "{text.caption.size}",
"lineHeight": "{text.caption.lineHeight}",
"fontFamily": "{fontStack.sansSerif}"
},
"$type": "typography",
"$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.",
"$extensions": {
"org.primer.llm": {
"usage": ["caption", "label", "badge-text", "single-line-metadata"],
"rules": "Use only for single-line or short text. Does NOT meet accessibility requirements for body text."
}
},
"key": "{text.caption.shorthand}"
},
"name": "text-caption-shorthand",
"attributes": {},
"path": ["text", "caption", "shorthand"]
},
"text-caption-size": {
"key": "{text.caption.size}",
"$value": ["0.75rem", "12px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.xs}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.caption.size}"
},
"name": "text-caption-size",
"attributes": {},
"path": ["text", "caption", "size"]
},
"text-caption-weight": {
"key": "{text.caption.weight}",
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.normal}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.caption.weight}"
},
"name": "text-caption-weight",
"attributes": {},
"path": ["text", "caption", "weight"]
},
"text-codeBlock-lineHeight": {
"key": "{text.codeBlock.lineHeight}",
"$value": 1.5,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 13
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.normal}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 13
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.codeBlock.lineHeight}"
},
"name": "text-codeBlock-lineHeight",
"attributes": {},
"path": ["text", "codeBlock", "lineHeight"]
},
"text-codeBlock-shorthand": {
"key": "{text.codeBlock.shorthand}",
"$value": "400 0.8125rem,13px/1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
"$type": "typography",
"$description": "Default style for rendering code blocks.",
"$extensions": {
"org.primer.llm": {
"usage": ["code-block", "pre-element", "code-snippet", "terminal-output"],
"rules": "MUST use for multi-line code. Use monospace font stack."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.codeBlock.weight}",
"fontSize": "{text.codeBlock.size}",
"lineHeight": "{text.codeBlock.lineHeight}",
"fontFamily": "{fontStack.monospace}"
},
"$type": "typography",
"$description": "Default style for rendering code blocks.",
"$extensions": {
"org.primer.llm": {
"usage": ["code-block", "pre-element", "code-snippet", "terminal-output"],
"rules": "MUST use for multi-line code. Use monospace font stack."
}
},
"key": "{text.codeBlock.shorthand}"
},
"name": "text-codeBlock-shorthand",
"attributes": {},
"path": ["text", "codeBlock", "shorthand"]
},
"text-codeBlock-size": {
"key": "{text.codeBlock.size}",
"$value": ["0.8125rem", "13px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"value": 13,
"unit": "px"
},
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.codeBlock.size}"
},
"name": "text-codeBlock-size",
"attributes": {},
"path": ["text", "codeBlock", "size"]
},
"text-codeBlock-weight": {
"key": "{text.codeBlock.weight}",
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.normal}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.codeBlock.weight}"
},
"name": "text-codeBlock-weight",
"attributes": {},
"path": ["text", "codeBlock", "weight"]
},
"text-codeInline-shorthand": {
"key": "{text.codeInline.shorthand}",
"$value": "400 0.9285em,0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
"$type": "typography",
"$description": "Inline code blocks using em units to inherit size from its parent.",
"$extensions": {
"org.primer.llm": {
"usage": ["inline-code", "code-element", "variable-name", "command"],
"rules": "Use for inline code within text. Size inherits from parent using em units."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.codeInline.weight}",
"fontSize": "{text.codeInline.size}",
"fontFamily": "{fontStack.monospace}"
},
"$type": "typography",
"$description": "Inline code blocks using em units to inherit size from its parent.",
"$extensions": {
"org.primer.llm": {
"usage": ["inline-code", "code-element", "variable-name", "command"],
"rules": "Use for inline code within text. Size inherits from parent using em units."
}
},
"key": "{text.codeInline.shorthand}"
},
"name": "text-codeInline-shorthand",
"attributes": {},
"path": ["text", "codeInline", "shorthand"]
},
"text-codeInline-size": {
"key": "{text.codeInline.size}",
"$value": ["0.9285em", "0.9285em"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"value": 0.9285,
"unit": "em"
},
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.codeInline.size}"
},
"name": "text-codeInline-size",
"attributes": {},
"path": ["text", "codeInline", "size"]
},
"text-codeInline-weight": {
"key": "{text.codeInline.weight}",
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.normal}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.codeInline.weight}"
},
"name": "text-codeInline-weight",
"attributes": {},
"path": ["text", "codeInline", "weight"]
},
"text-display-lineBoxHeight": {
"key": "{text.display.lineBoxHeight}",
"$value": 1.375,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 40
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"],
"fontSizeInPx": 40
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.snug}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 40
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"],
"fontSizeInPx": 40
}
},
"key": "{text.display.lineBoxHeight}"
},
"name": "text-display-lineBoxHeight",
"attributes": {},
"path": ["text", "display", "lineBoxHeight"]
},
"text-display-lineHeight": {
"key": "{text.display.lineHeight}",
"$value": 1.375,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 40
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.snug}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 40
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.display.lineHeight}"
},
"name": "text-display-lineHeight",
"attributes": {},
"path": ["text", "display", "lineHeight"]
},
"text-display-shorthand": {
"key": "{text.display.shorthand}",
"$value": "500 2.5rem,40px/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
"$extensions": {
"org.primer.llm": {
"usage": ["hero-section", "landing-page", "marketing-header"],
"rules": "Use sparingly for hero sections. Switch to title.large on narrow viewports."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.display.weight}",
"fontSize": "{text.display.size}",
"lineHeight": "{text.display.lineHeight}",
"fontFamily": "{fontStack.sansSerifDisplay}"
},
"$type": "typography",
"$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
"$extensions": {
"org.primer.llm": {
"usage": ["hero-section", "landing-page", "marketing-header"],
"rules": "Use sparingly for hero sections. Switch to title.large on narrow viewports."
}
},
"key": "{text.display.shorthand}"
},
"name": "text-display-shorthand",
"attributes": {},
"path": ["text", "display", "shorthand"]
},
"text-display-size": {
"key": "{text.display.size}",
"$value": ["2.5rem", "40px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.2xl}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.display.size}"
},
"name": "text-display-size",
"attributes": {},
"path": ["text", "display", "size"]
},
"text-display-weight": {
"key": "{text.display.weight}",
"$value": 500,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.medium}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.display.weight}"
},
"name": "text-display-weight",
"attributes": {},
"path": ["text", "display", "weight"]
},
"text-subtitle-lineHeight": {
"key": "{text.subtitle.lineHeight}",
"$value": 1.625,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 20
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.relaxed}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 20
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.subtitle.lineHeight}"
},
"name": "text-subtitle-lineHeight",
"attributes": {},
"path": ["text", "subtitle", "lineHeight"]
},
"text-subtitle-shorthand": {
"key": "{text.subtitle.shorthand}",
"$value": "400 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
"$extensions": {
"org.primer.llm": {
"usage": ["subtitle", "description", "secondary-heading", "lead-text"],
"rules": "Use below titles for supporting text. Normal weight distinguishes from title styles."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.subtitle.weight}",
"fontSize": "{text.subtitle.size}",
"lineHeight": "{text.subtitle.lineHeight}",
"fontFamily": "{fontStack.sansSerifDisplay}"
},
"$type": "typography",
"$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
"$extensions": {
"org.primer.llm": {
"usage": ["subtitle", "description", "secondary-heading", "lead-text"],
"rules": "Use below titles for supporting text. Normal weight distinguishes from title styles."
}
},
"key": "{text.subtitle.shorthand}"
},
"name": "text-subtitle-shorthand",
"attributes": {},
"path": ["text", "subtitle", "shorthand"]
},
"text-subtitle-size": {
"key": "{text.subtitle.size}",
"$value": ["1.25rem", "20px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.lg}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.subtitle.size}"
},
"name": "text-subtitle-size",
"attributes": {},
"path": ["text", "subtitle", "size"]
},
"text-subtitle-weight": {
"key": "{text.subtitle.weight}",
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.normal}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.subtitle.weight}"
},
"name": "text-subtitle-weight",
"attributes": {},
"path": ["text", "subtitle", "weight"]
},
"text-title-lineHeight-large": {
"key": "{text.title.lineHeight.large}",
"$value": 1.5,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 32
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.normal}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 32
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.title.lineHeight.large}"
},
"name": "text-title-lineHeight-large",
"attributes": {},
"path": ["text", "title", "lineHeight", "large"]
},
"text-title-lineHeight-medium": {
"key": "{text.title.lineHeight.medium}",
"$value": 1.625,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 20
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.relaxed}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 20
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.title.lineHeight.medium}"
},
"name": "text-title-lineHeight-medium",
"attributes": {},
"path": ["text", "title", "lineHeight", "medium"]
},
"text-title-lineHeight-small": {
"key": "{text.title.lineHeight.small}",
"$value": 1.5,
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 16
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.lineHeight.normal}",
"$type": "number",
"$extensions": {
"org.primer.data": {
"fontSize": 16
},
"org.primer.figma": {
"collection": "typography",
"scopes": ["lineHeight"]
}
},
"key": "{text.title.lineHeight.small}"
},
"name": "text-title-lineHeight-small",
"attributes": {},
"path": ["text", "title", "lineHeight", "small"]
},
"text-title-shorthand-large": {
"key": "{text.title.shorthand.large}",
"$value": "600 2rem,32px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
"$extensions": {
"org.primer.llm": {
"usage": ["page-heading", "issue-title", "pr-title", "h1"],
"rules": "Use for primary page headings. Switch to title.medium on narrow viewports."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.title.weight.large}",
"fontSize": "{text.title.size.large}",
"lineHeight": "{text.title.lineHeight.large}",
"fontFamily": "{fontStack.sansSerifDisplay}"
},
"$type": "typography",
"$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
"$extensions": {
"org.primer.llm": {
"usage": ["page-heading", "issue-title", "pr-title", "h1"],
"rules": "Use for primary page headings. Switch to title.medium on narrow viewports."
}
},
"key": "{text.title.shorthand.large}"
},
"name": "text-title-shorthand-large",
"attributes": {},
"path": ["text", "title", "shorthand", "large"]
},
"text-title-shorthand-medium": {
"key": "{text.title.shorthand.medium}",
"$value": "600 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
"$extensions": {
"org.primer.llm": {
"usage": ["section-heading", "card-title", "dialog-title", "h2"],
"rules": "RECOMMENDED default for page titles. Use for section headings and dialog titles."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.title.weight.medium}",
"fontSize": "{text.title.size.medium}",
"lineHeight": "{text.title.lineHeight.medium}",
"fontFamily": "{fontStack.sansSerifDisplay}"
},
"$type": "typography",
"$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
"$extensions": {
"org.primer.llm": {
"usage": ["section-heading", "card-title", "dialog-title", "h2"],
"rules": "RECOMMENDED default for page titles. Use for section headings and dialog titles."
}
},
"key": "{text.title.shorthand.medium}"
},
"name": "text-title-shorthand-medium",
"attributes": {},
"path": ["text", "title", "shorthand", "medium"]
},
"text-title-shorthand-small": {
"key": "{text.title.shorthand.small}",
"$value": "600 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
"$type": "typography",
"$description": "Uses the same size as body (large) with a heavier weight of semibold (600).",
"$extensions": {
"org.primer.llm": {
"usage": ["subsection-heading", "list-title", "h3", "sidebar-heading"],
"rules": "Use for smaller headings within sections. Same size as body.large but semibold."
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{text.title.weight.small}",
"fontSize": "{text.title.size.small}",
"lineHeight": "{text.title.lineHeight.small}",
"fontFamily": "{fontStack.sansSerif}"
},
"$type": "typography",
"$description": "Uses the same size as body (large) with a heavier weight of semibold (600).",
"$extensions": {
"org.primer.llm": {
"usage": ["subsection-heading", "list-title", "h3", "sidebar-heading"],
"rules": "Use for smaller headings within sections. Same size as body.large but semibold."
}
},
"key": "{text.title.shorthand.small}"
},
"name": "text-title-shorthand-small",
"attributes": {},
"path": ["text", "title", "shorthand", "small"]
},
"text-title-size-large": {
"key": "{text.title.size.large}",
"$value": ["2rem", "32px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.xl}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.title.size.large}"
},
"name": "text-title-size-large",
"attributes": {},
"path": ["text", "title", "size", "large"]
},
"text-title-size-medium": {
"key": "{text.title.size.medium}",
"$value": ["1.25rem", "20px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.lg}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.title.size.medium}"
},
"name": "text-title-size-medium",
"attributes": {},
"path": ["text", "title", "size", "medium"]
},
"text-title-size-small": {
"key": "{text.title.size.small}",
"$value": ["1rem", "16px"],
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.size.md}",
"$type": "dimension",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontSize"]
}
},
"key": "{text.title.size.small}"
},
"name": "text-title-size-small",
"attributes": {},
"path": ["text", "title", "size", "small"]
},
"text-title-weight-large": {
"key": "{text.title.weight.large}",
"$value": 600,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.semibold}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.title.weight.large}"
},
"name": "text-title-weight-large",
"attributes": {},
"path": ["text", "title", "weight", "large"]
},
"text-title-weight-medium": {
"key": "{text.title.weight.medium}",
"$value": 600,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.semibold}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.title.weight.medium}"
},
"name": "text-title-weight-medium",
"attributes": {},
"path": ["text", "title", "weight", "medium"]
},
"text-title-weight-small": {
"key": "{text.title.weight.small}",
"$value": 600,
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"filePath": "src/tokens/functional/typography/typography.json5",
"isSource": true,
"original": {
"$value": "{base.text.weight.semibold}",
"$type": "fontWeight",
"$extensions": {
"org.primer.figma": {
"collection": "typography",
"scopes": ["fontWeight"]
}
},
"key": "{text.title.weight.small}"
},
"name": "text-title-weight-small",
"attributes": {},
"path": ["text", "title", "weight", "small"]
}
}