UNPKG

@primer/primitives

Version:

Typography, spacing, and color primitives for Primer design system

1,427 lines (1,426 loc) • 46.9 kB
{ "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"] } }