@primer/primitives

[ { "name": "base/text/size/xs", "value": 12, "type": "FLOAT", "description": "12px - Smallest text size for captions and compact UI elements.", "refId": "base/typography/base/text/size/xs", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_SIZE"] }, { "name": "base/text/size/sm", "value": 14, "type": "FLOAT", "description": "14px - Default body text size for UI.", "refId": "base/typography/base/text/size/sm", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_SIZE"] }, { "name": "base/text/size/md", "value": 16, "type": "FLOAT", "description": "16px - Large body text and small titles.", "refId": "base/typography/base/text/size/md", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_SIZE"] }, { "name": "base/text/size/lg", "value": 20, "type": "FLOAT", "description": "20px - Medium titles and subtitles.", "refId": "base/typography/base/text/size/lg", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_SIZE"] }, { "name": "base/text/size/xl", "value": 32, "type": "FLOAT", "description": "32px - Large titles and page headings.", "refId": "base/typography/base/text/size/xl", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_SIZE"] }, { "name": "base/text/size/2xl", "value": 40, "type": "FLOAT", "description": "40px - Display text for hero sections.", "refId": "base/typography/base/text/size/2xl", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_SIZE"] }, { "name": "base/text/weight/light", "value": 300, "type": "FLOAT", "refId": "base/typography/base/text/weight/light", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_WEIGHT"] }, { "name": "base/text/weight/normal", "value": 400, "type": "FLOAT", "refId": "base/typography/base/text/weight/normal", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_WEIGHT"] }, { "name": "base/text/weight/medium", "value": 500, "type": "FLOAT", "refId": "base/typography/base/text/weight/medium", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_WEIGHT"] }, { "name": "base/text/weight/semibold", "value": 600, "type": "FLOAT", "refId": "base/typography/base/text/weight/semibold", "collection": "base/typography", "mode": "default", "group": "base/typography", "scopes": ["FONT_WEIGHT"] }, { "name": "tight", "value": 1.25, "type": "FLOAT", "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.", "refId": "tight" }, { "name": "snug", "value": 1.375, "type": "FLOAT", "description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.", "refId": "snug" }, { "name": "normal", "value": 1.5, "type": "FLOAT", "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.", "refId": "normal" }, { "name": "relaxed", "value": 1.625, "type": "FLOAT", "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.", "refId": "relaxed" }, { "name": "loose", "value": 1.75, "type": "FLOAT", "description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.", "refId": "loose" }, { "name": "lineBoxHeight", "value": 1.375, "type": "FLOAT", "refId": "lineBoxHeight", "reference": "base/text/lineHeight/snug" }, { "name": "text/display/size", "value": 40, "type": "FLOAT", "refId": "typography/text/display/size", "reference": "base/typography/base/text/size/2xl", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "lineHeight", "value": 1.375, "type": "FLOAT", "refId": "lineHeight", "reference": "base/text/lineHeight/snug" }, { "name": "text/display/weight", "value": 500, "type": "FLOAT", "refId": "typography/text/display/weight", "reference": "base/typography/base/text/weight/medium", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/title/size/large", "value": 32, "type": "FLOAT", "refId": "typography/text/title/size/large", "reference": "base/typography/base/text/size/xl", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "text/title/size/medium", "value": 20, "type": "FLOAT", "refId": "typography/text/title/size/medium", "reference": "base/typography/base/text/size/lg", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "text/title/size/small", "value": 16, "type": "FLOAT", "refId": "typography/text/title/size/small", "reference": "base/typography/base/text/size/md", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "large", "value": 1.5, "type": "FLOAT", "refId": "large", "reference": "base/text/lineHeight/normal" }, { "name": "medium", "value": 1.625, "type": "FLOAT", "refId": "medium", "reference": "base/text/lineHeight/relaxed" }, { "name": "small", "value": 1.5, "type": "FLOAT", "refId": "small", "reference": "base/text/lineHeight/normal" }, { "name": "text/title/weight/large", "value": 600, "type": "FLOAT", "refId": "typography/text/title/weight/large", "reference": "base/typography/base/text/weight/semibold", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/title/weight/medium", "value": 600, "type": "FLOAT", "refId": "typography/text/title/weight/medium", "reference": "base/typography/base/text/weight/semibold", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/title/weight/small", "value": 600, "type": "FLOAT", "refId": "typography/text/title/weight/small", "reference": "base/typography/base/text/weight/semibold", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/subtitle/size", "value": 20, "type": "FLOAT", "refId": "typography/text/subtitle/size", "reference": "base/typography/base/text/size/lg", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "lineHeight", "value": 1.625, "type": "FLOAT", "refId": "lineHeight", "reference": "base/text/lineHeight/relaxed" }, { "name": "text/subtitle/weight", "value": 400, "type": "FLOAT", "refId": "typography/text/subtitle/weight", "reference": "base/typography/base/text/weight/normal", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/body/size/large", "value": 16, "type": "FLOAT", "refId": "typography/text/body/size/large", "reference": "base/typography/base/text/size/md", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "text/body/size/medium", "value": 14, "type": "FLOAT", "refId": "typography/text/body/size/medium", "reference": "base/typography/base/text/size/sm", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "text/body/size/small", "value": 12, "type": "FLOAT", "refId": "typography/text/body/size/small", "reference": "base/typography/base/text/size/xs", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "large", "value": 1.5, "type": "FLOAT", "refId": "large", "reference": "base/text/lineHeight/normal" }, { "name": "medium", "value": 1.5, "type": "FLOAT", "refId": "medium", "reference": "base/text/lineHeight/normal" }, { "name": "small", "value": 1.625, "type": "FLOAT", "refId": "small", "reference": "base/text/lineHeight/relaxed" }, { "name": "text/body/weight", "value": 400, "type": "FLOAT", "refId": "typography/text/body/weight", "reference": "base/typography/base/text/weight/normal", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/caption/size", "value": 12, "type": "FLOAT", "refId": "typography/text/caption/size", "reference": "base/typography/base/text/size/xs", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "lineHeight", "value": 1.25, "type": "FLOAT", "refId": "lineHeight", "reference": "base/text/lineHeight/tight" }, { "name": "text/caption/weight", "value": 400, "type": "FLOAT", "refId": "typography/text/caption/weight", "reference": "base/typography/base/text/weight/normal", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/codeBlock/size", "value": 13, "type": "FLOAT", "refId": "typography/text/codeBlock/size", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_SIZE"] }, { "name": "lineHeight", "value": 1.5, "type": "FLOAT", "refId": "lineHeight", "reference": "base/text/lineHeight/normal" }, { "name": "text/codeBlock/weight", "value": 400, "type": "FLOAT", "refId": "typography/text/codeBlock/weight", "reference": "base/typography/base/text/weight/normal", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "text/codeInline/weight", "value": 400, "type": "FLOAT", "refId": "typography/text/codeInline/weight", "reference": "base/typography/base/text/weight/normal", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_WEIGHT"] }, { "name": "fontStack/system", "value": "SF Pro Text", "type": "STRING", "description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.", "refId": "typography/fontStack/system", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_FAMILY"] }, { "name": "fontStack/sansSerif", "value": "SF Pro Text", "type": "STRING", "description": "Sans-serif font stack for body text and general UI elements.", "refId": "typography/fontStack/sansSerif", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_FAMILY"] }, { "name": "fontStack/sansSerifDisplay", "value": "SF Pro Display", "type": "STRING", "description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.", "refId": "typography/fontStack/sansSerifDisplay", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_FAMILY"] }, { "name": "fontStack/monospace", "value": "SF Mono", "type": "STRING", "description": "Monospace font stack for code, technical content, and tabular data.", "refId": "typography/fontStack/monospace", "collection": "typography", "mode": "default", "group": "typography", "scopes": ["FONT_FAMILY"] } ]