@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
  4. package/dist/build/filters/hasLlmExtensions.js +11 -0
  5. package/dist/build/filters/index.d.ts +1 -0
  6. package/dist/build/filters/index.js +1 -0
  7. package/dist/build/formats/index.d.ts +1 -0
  8. package/dist/build/formats/index.js +1 -0
  9. package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
  10. package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
  11. package/dist/build/platforms/index.d.ts +1 -0
  12. package/dist/build/platforms/index.js +1 -0
  13. package/dist/build/platforms/llmGuidelines.d.ts +2 -0
  14. package/dist/build/platforms/llmGuidelines.js +17 -0
  15. package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
  16. package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
  17. package/dist/build/primerStyleDictionary.js +7 -1
  18. package/dist/build/schemas/borderToken.d.ts +22 -2
  19. package/dist/build/schemas/borderToken.js +6 -0
  20. package/dist/build/schemas/colorToken.d.ts +4 -0
  21. package/dist/build/schemas/colorToken.js +2 -0
  22. package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
  23. package/dist/build/schemas/cubicBezierToken.js +10 -2
  24. package/dist/build/schemas/designToken.d.ts +1 -1
  25. package/dist/build/schemas/designToken.js +113 -21
  26. package/dist/build/schemas/dimensionToken.d.ts +14 -3
  27. package/dist/build/schemas/dimensionToken.js +6 -2
  28. package/dist/build/schemas/dimensionValue.d.ts +24 -1
  29. package/dist/build/schemas/dimensionValue.js +20 -1
  30. package/dist/build/schemas/durationToken.d.ts +13 -1
  31. package/dist/build/schemas/durationToken.js +6 -0
  32. package/dist/build/schemas/durationValue.d.ts +11 -1
  33. package/dist/build/schemas/durationValue.js +13 -3
  34. package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
  35. package/dist/build/schemas/fontFamilyToken.js +2 -0
  36. package/dist/build/schemas/fontWeightToken.d.ts +4 -0
  37. package/dist/build/schemas/fontWeightToken.js +2 -0
  38. package/dist/build/schemas/gradientToken.d.ts +4 -0
  39. package/dist/build/schemas/gradientToken.js +2 -0
  40. package/dist/build/schemas/llmExtension.d.ts +9 -0
  41. package/dist/build/schemas/llmExtension.js +11 -0
  42. package/dist/build/schemas/numberToken.d.ts +4 -0
  43. package/dist/build/schemas/numberToken.js +2 -0
  44. package/dist/build/schemas/shadowToken.d.ts +676 -84
  45. package/dist/build/schemas/shadowToken.js +2 -0
  46. package/dist/build/schemas/stringToken.d.ts +6 -0
  47. package/dist/build/schemas/stringToken.js +6 -0
  48. package/dist/build/schemas/transitionToken.d.ts +20 -2
  49. package/dist/build/schemas/transitionToken.js +6 -0
  50. package/dist/build/schemas/typographyToken.d.ts +38 -4
  51. package/dist/build/schemas/typographyToken.js +6 -0
  52. package/dist/build/schemas/validTokenType.d.ts +5 -1
  53. package/dist/build/schemas/validTokenType.js +71 -17
  54. package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
  55. package/dist/build/schemas/viewportRangeToken.js +6 -0
  56. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  57. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  58. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  59. package/dist/build/transformers/dimensionToRem.js +21 -22
  60. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  61. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  62. package/dist/build/transformers/durationToCss.d.ts +2 -1
  63. package/dist/build/transformers/durationToCss.js +18 -11
  64. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  65. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  66. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  67. package/dist/css/base/motion/motion.css +5 -4
  68. package/dist/css/functional/size/border.css +9 -14
  69. package/dist/css/functional/size/radius.css +7 -0
  70. package/dist/css/functional/size/size-coarse.css +3 -3
  71. package/dist/css/functional/size/size-fine.css +3 -3
  72. package/dist/css/functional/size/viewport.css +1 -1
  73. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
  74. package/dist/css/functional/themes/dark-colorblind.css +194 -190
  75. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
  76. package/dist/css/functional/themes/dark-dimmed.css +194 -190
  77. package/dist/css/functional/themes/dark-high-contrast.css +194 -190
  78. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
  79. package/dist/css/functional/themes/dark-tritanopia.css +194 -190
  80. package/dist/css/functional/themes/dark.css +194 -190
  81. package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
  82. package/dist/css/functional/themes/light-colorblind.css +194 -190
  83. package/dist/css/functional/themes/light-high-contrast.css +194 -190
  84. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
  85. package/dist/css/functional/themes/light-tritanopia.css +194 -190
  86. package/dist/css/functional/themes/light.css +194 -190
  87. package/dist/css/functional/typography/typography.css +4 -4
  88. package/dist/css/primitives.css +5 -0
  89. package/dist/docs/base/motion/motion.json +181 -32
  90. package/dist/docs/base/size/size.json +76 -19
  91. package/dist/docs/base/typography/typography.json +24 -6
  92. package/dist/docs/functional/size/border.json +62 -182
  93. package/dist/docs/functional/size/breakpoints.json +24 -6
  94. package/dist/docs/functional/size/radius.json +221 -0
  95. package/dist/docs/functional/size/size-coarse.json +45 -3
  96. package/dist/docs/functional/size/size-fine.json +45 -3
  97. package/dist/docs/functional/size/size.json +60 -15
  98. package/dist/docs/functional/size/viewport.json +2 -2
  99. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
  100. package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
  101. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
  102. package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
  103. package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
  104. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
  105. package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
  106. package/dist/docs/functional/themes/dark.json +1043 -97
  107. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
  108. package/dist/docs/functional/themes/light-colorblind.json +1049 -103
  109. package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
  110. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
  111. package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
  112. package/dist/docs/functional/themes/light.json +1049 -103
  113. package/dist/docs/functional/typography/typography.json +180 -10
  114. package/dist/fallbacks/base/motion/motion.json +49 -12
  115. package/dist/fallbacks/functional/size/border.json +0 -5
  116. package/dist/fallbacks/functional/size/radius.json +7 -0
  117. package/dist/fallbacks/functional/size/viewport.json +1 -1
  118. package/dist/figma/dimension/dimension.json +30 -20
  119. package/dist/figma/themes/dark-colorblind.json +85 -0
  120. package/dist/figma/themes/dark-dimmed.json +134 -49
  121. package/dist/figma/themes/dark-high-contrast.json +85 -0
  122. package/dist/figma/themes/dark-tritanopia.json +85 -0
  123. package/dist/figma/themes/dark.json +85 -0
  124. package/dist/figma/themes/light-colorblind.json +89 -4
  125. package/dist/figma/themes/light-high-contrast.json +89 -4
  126. package/dist/figma/themes/light-tritanopia.json +89 -4
  127. package/dist/figma/themes/light.json +89 -4
  128. package/dist/figma/typography/typography.json +44 -40
  129. package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
  130. package/dist/internalCss/dark-colorblind.css +208 -218
  131. package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
  132. package/dist/internalCss/dark-dimmed.css +208 -218
  133. package/dist/internalCss/dark-high-contrast.css +208 -218
  134. package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
  135. package/dist/internalCss/dark-tritanopia.css +208 -218
  136. package/dist/internalCss/dark.css +208 -218
  137. package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
  138. package/dist/internalCss/light-colorblind.css +208 -218
  139. package/dist/internalCss/light-high-contrast.css +208 -218
  140. package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
  141. package/dist/internalCss/light-tritanopia.css +208 -218
  142. package/dist/internalCss/light.css +208 -218
  143. package/dist/styleLint/base/motion/motion.json +181 -32
  144. package/dist/styleLint/base/size/size.json +76 -19
  145. package/dist/styleLint/base/typography/typography.json +30 -12
  146. package/dist/styleLint/functional/size/border.json +55 -175
  147. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  148. package/dist/styleLint/functional/size/radius.json +221 -0
  149. package/dist/styleLint/functional/size/size-coarse.json +45 -3
  150. package/dist/styleLint/functional/size/size-fine.json +45 -3
  151. package/dist/styleLint/functional/size/size.json +111 -66
  152. package/dist/styleLint/functional/size/viewport.json +2 -2
  153. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
  154. package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
  155. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
  156. package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
  157. package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
  158. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
  159. package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
  160. package/dist/styleLint/functional/themes/dark.json +975 -29
  161. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
  162. package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
  163. package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
  164. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
  165. package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
  166. package/dist/styleLint/functional/themes/light.json +981 -35
  167. package/dist/styleLint/functional/typography/typography.json +196 -26
  168. package/package.json +6 -3
  169. package/src/tokens/base/motion/easing.json5 +39 -4
  170. package/src/tokens/base/motion/timing.json5 +12 -12
  171. package/src/tokens/base/size/size.json5 +19 -19
  172. package/src/tokens/base/typography/typography.json5 +6 -6
  173. package/src/tokens/functional/border/border.json5 +25 -0
  174. package/src/tokens/functional/color/bgColor.json5 +165 -0
  175. package/src/tokens/functional/color/borderColor.json5 +146 -0
  176. package/src/tokens/functional/color/control.json5 +24 -0
  177. package/src/tokens/functional/color/data-vis.json5 +7 -0
  178. package/src/tokens/functional/color/display.json5 +7 -0
  179. package/src/tokens/functional/color/fgColor.json5 +101 -1
  180. package/src/tokens/functional/color/focus.json5 +5 -0
  181. package/src/tokens/functional/color/selection.json5 +5 -0
  182. package/src/tokens/functional/color/syntax.json5 +14 -0
  183. package/src/tokens/functional/shadow/shadow.json5 +49 -4
  184. package/src/tokens/functional/size/border.json5 +22 -74
  185. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  186. package/src/tokens/functional/size/radius.json5 +90 -0
  187. package/src/tokens/functional/size/size-coarse.json5 +24 -3
  188. package/src/tokens/functional/size/size-fine.json5 +45 -24
  189. package/src/tokens/functional/size/size.json5 +50 -15
  190. package/src/tokens/functional/size/viewport.json5 +1 -1
  191. package/src/tokens/functional/typography/font-stack.json5 +60 -0
  192. package/src/tokens/functional/typography/typography.json5 +71 -44
  193. package/dist/build/parsers/index.d.ts +0 -1
  194. package/dist/build/parsers/index.js +0 -1
  195. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  196. package/dist/build/parsers/w3cJsonParser.js +0 -25
  197. package/dist/removed/testing.json5 +0 -4
  198. package/src/tokens/removed/testing.json5 +0 -4
@@ -308,6 +308,10 @@
308
308
  "dark-dimmed-high-contrast": "#033d8b",
309
309
  "dark-tritanopia-high-contrast": "#002155",
310
310
  "dark-protanopia-deuteranopia-high-contrast": "#002155"
311
+ },
312
+ "org.primer.llm": {
313
+ "usage": ["active-states", "current", "selected", "active-toggle"],
314
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
311
315
  }
312
316
  },
313
317
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -315,6 +319,7 @@
315
319
  "original": {
316
320
  "$value": "{base.color.blue.5}",
317
321
  "$type": "color",
322
+ "$description": "Strong accent background for active states and focused states",
318
323
  "$extensions": {
319
324
  "org.primer.figma": {
320
325
  "collection": "mode",
@@ -330,6 +335,10 @@
330
335
  "dark-dimmed-high-contrast": "{base.color.blue.7}",
331
336
  "dark-tritanopia-high-contrast": "{base.color.blue.9}",
332
337
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
338
+ },
339
+ "org.primer.llm": {
340
+ "usage": ["active-states", "current", "selected", "active-toggle"],
341
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
333
342
  }
334
343
  },
335
344
  "key": "{bgColor.accent.emphasis}"
@@ -338,7 +347,8 @@
338
347
  "attributes": {},
339
348
  "path": ["bgColor", "accent", "emphasis"],
340
349
  "value": "#0969da",
341
- "type": "color"
350
+ "type": "color",
351
+ "description": "Strong accent background for active states and focused states"
342
352
  },
343
353
  "bgColor-accent-muted": {
344
354
  "key": "{bgColor.accent.muted}",
@@ -359,6 +369,10 @@
359
369
  "isSource": true,
360
370
  "$type": "color"
361
371
  }
372
+ },
373
+ "org.primer.llm": {
374
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
375
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
362
376
  }
363
377
  },
364
378
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -366,6 +380,7 @@
366
380
  "original": {
367
381
  "$value": "{base.color.blue.0}",
368
382
  "$type": "color",
383
+ "$description": "Subtle accent background for informational or selected elements",
369
384
  "$extensions": {
370
385
  "org.primer.figma": {
371
386
  "collection": "mode",
@@ -383,6 +398,10 @@
383
398
  "isSource": true,
384
399
  "$type": "color"
385
400
  }
401
+ },
402
+ "org.primer.llm": {
403
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
404
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
386
405
  }
387
406
  },
388
407
  "key": "{bgColor.accent.muted}"
@@ -391,7 +410,8 @@
391
410
  "attributes": {},
392
411
  "path": ["bgColor", "accent", "muted"],
393
412
  "value": "#ddf4ff",
394
- "type": "color"
413
+ "type": "color",
414
+ "description": "Subtle accent background for informational or selected elements"
395
415
  },
396
416
  "bgColor-attention-emphasis": {
397
417
  "key": "{bgColor.attention.emphasis}",
@@ -409,6 +429,10 @@
409
429
  "dark-dimmed-high-contrast": "#633c01",
410
430
  "dark-protanopia-deuteranopia-high-contrast": "#3b2300",
411
431
  "dark-tritanopia-high-contrast": "#3b2300"
432
+ },
433
+ "org.primer.llm": {
434
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
435
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
412
436
  }
413
437
  },
414
438
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -416,6 +440,7 @@
416
440
  "original": {
417
441
  "$value": "{base.color.yellow.5}",
418
442
  "$type": "color",
443
+ "$description": "Strong attention background for prominent warnings",
419
444
  "$extensions": {
420
445
  "org.primer.figma": {
421
446
  "collection": "mode",
@@ -430,6 +455,10 @@
430
455
  "dark-dimmed-high-contrast": "{base.color.yellow.7}",
431
456
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
432
457
  "dark-tritanopia-high-contrast": "{base.color.yellow.9}"
458
+ },
459
+ "org.primer.llm": {
460
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
461
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
433
462
  }
434
463
  },
435
464
  "key": "{bgColor.attention.emphasis}"
@@ -438,7 +467,8 @@
438
467
  "attributes": {},
439
468
  "path": ["bgColor", "attention", "emphasis"],
440
469
  "value": "#9a6700",
441
- "type": "color"
470
+ "type": "color",
471
+ "description": "Strong attention background for prominent warnings"
442
472
  },
443
473
  "bgColor-attention-muted": {
444
474
  "key": "{bgColor.attention.muted}",
@@ -459,6 +489,10 @@
459
489
  "isSource": true,
460
490
  "$type": "color"
461
491
  }
492
+ },
493
+ "org.primer.llm": {
494
+ "usage": ["warning-banner", "caution-message", "pending-state"],
495
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
462
496
  }
463
497
  },
464
498
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -466,6 +500,7 @@
466
500
  "original": {
467
501
  "$value": "{base.color.yellow.0}",
468
502
  "$type": "color",
503
+ "$description": "Subtle attention background for warnings and caution states",
469
504
  "$extensions": {
470
505
  "org.primer.figma": {
471
506
  "collection": "mode",
@@ -483,6 +518,10 @@
483
518
  "isSource": true,
484
519
  "$type": "color"
485
520
  }
521
+ },
522
+ "org.primer.llm": {
523
+ "usage": ["warning-banner", "caution-message", "pending-state"],
524
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
486
525
  }
487
526
  },
488
527
  "key": "{bgColor.attention.muted}"
@@ -491,7 +530,8 @@
491
530
  "attributes": {},
492
531
  "path": ["bgColor", "attention", "muted"],
493
532
  "value": "#fff8c5",
494
- "type": "color"
533
+ "type": "color",
534
+ "description": "Subtle attention background for warnings and caution states"
495
535
  },
496
536
  "bgColor-black": {
497
537
  "key": "{bgColor.black}",
@@ -503,6 +543,10 @@
503
543
  },
504
544
  "org.primer.overrides": {
505
545
  "dark": "#ffffff"
546
+ },
547
+ "org.primer.llm": {
548
+ "doNotUse": true,
549
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
506
550
  }
507
551
  },
508
552
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -510,6 +554,7 @@
510
554
  "original": {
511
555
  "$value": "{base.color.neutral.13}",
512
556
  "$type": "color",
557
+ "$description": "Pure black background",
513
558
  "$extensions": {
514
559
  "org.primer.figma": {
515
560
  "collection": "mode",
@@ -518,6 +563,10 @@
518
563
  },
519
564
  "org.primer.overrides": {
520
565
  "dark": "{base.color.neutral.0}"
566
+ },
567
+ "org.primer.llm": {
568
+ "doNotUse": true,
569
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
521
570
  }
522
571
  },
523
572
  "key": "{bgColor.black}"
@@ -526,7 +575,8 @@
526
575
  "attributes": {},
527
576
  "path": ["bgColor", "black"],
528
577
  "value": "#1f2328",
529
- "type": "color"
578
+ "type": "color",
579
+ "description": "Pure black background"
530
580
  },
531
581
  "bgColor-closed-emphasis": {
532
582
  "key": "{bgColor.closed.emphasis}",
@@ -548,6 +598,10 @@
548
598
  "light-protanopia-deuteranopia-high-contrast": "#59636e",
549
599
  "dark-protanopia-deuteranopia": "#59636e",
550
600
  "dark-protanopia-deuteranopia-high-contrast": "#59636e"
601
+ },
602
+ "org.primer.llm": {
603
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
604
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
551
605
  }
552
606
  },
553
607
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -555,6 +609,7 @@
555
609
  "original": {
556
610
  "$value": "{bgColor.danger.emphasis}",
557
611
  "$type": "color",
612
+ "$description": "Strong background for closed state badges and labels",
558
613
  "$extensions": {
559
614
  "org.primer.figma": {
560
615
  "collection": "mode",
@@ -573,6 +628,10 @@
573
628
  "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
574
629
  "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
575
630
  "dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
631
+ },
632
+ "org.primer.llm": {
633
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
634
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
576
635
  }
577
636
  },
578
637
  "key": "{bgColor.closed.emphasis}"
@@ -581,7 +640,8 @@
581
640
  "attributes": {},
582
641
  "path": ["bgColor", "closed", "emphasis"],
583
642
  "value": "#cf222e",
584
- "type": "color"
643
+ "type": "color",
644
+ "description": "Strong background for closed state badges and labels"
585
645
  },
586
646
  "bgColor-closed-muted": {
587
647
  "key": "{bgColor.closed.muted}",
@@ -620,6 +680,10 @@
620
680
  "isSource": true,
621
681
  "$type": "color"
622
682
  }
683
+ },
684
+ "org.primer.llm": {
685
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
686
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
623
687
  }
624
688
  },
625
689
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -627,6 +691,7 @@
627
691
  "original": {
628
692
  "$value": "{bgColor.danger.muted}",
629
693
  "$type": "color",
694
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
630
695
  "$extensions": {
631
696
  "org.primer.figma": {
632
697
  "collection": "mode",
@@ -662,6 +727,10 @@
662
727
  "isSource": true,
663
728
  "$type": "color"
664
729
  }
730
+ },
731
+ "org.primer.llm": {
732
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
733
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
665
734
  }
666
735
  },
667
736
  "key": "{bgColor.closed.muted}"
@@ -670,7 +739,8 @@
670
739
  "attributes": {},
671
740
  "path": ["bgColor", "closed", "muted"],
672
741
  "value": "#ffebe9",
673
- "type": "color"
742
+ "type": "color",
743
+ "description": "Subtle background for closed state indicators (issues, PRs)"
674
744
  },
675
745
  "bgColor-danger-emphasis": {
676
746
  "key": "{bgColor.danger.emphasis}",
@@ -691,6 +761,10 @@
691
761
  "dark-high-contrast": "#4c0014",
692
762
  "dark-dimmed-high-contrast": "#82071e",
693
763
  "dark-tritanopia-high-contrast": "#4c0014"
764
+ },
765
+ "org.primer.llm": {
766
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
767
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
694
768
  }
695
769
  },
696
770
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -698,6 +772,7 @@
698
772
  "original": {
699
773
  "$value": "{base.color.red.5}",
700
774
  "$type": "color",
775
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
701
776
  "$extensions": {
702
777
  "org.primer.figma": {
703
778
  "collection": "mode",
@@ -715,6 +790,10 @@
715
790
  "dark-high-contrast": "{base.color.red.9}",
716
791
  "dark-dimmed-high-contrast": "{base.color.red.7}",
717
792
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
793
+ },
794
+ "org.primer.llm": {
795
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
796
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
718
797
  }
719
798
  },
720
799
  "key": "{bgColor.danger.emphasis}"
@@ -723,7 +802,8 @@
723
802
  "attributes": {},
724
803
  "path": ["bgColor", "danger", "emphasis"],
725
804
  "value": "#cf222e",
726
- "type": "color"
805
+ "type": "color",
806
+ "description": "Emphasized danger background for critical errors and delete confirmations"
727
807
  },
728
808
  "bgColor-danger-muted": {
729
809
  "key": "{bgColor.danger.muted}",
@@ -753,6 +833,10 @@
753
833
  "isSource": true,
754
834
  "$type": "color"
755
835
  }
836
+ },
837
+ "org.primer.llm": {
838
+ "usage": ["error-message", "destructive-action", "validation-error"],
839
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
756
840
  }
757
841
  },
758
842
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -760,6 +844,7 @@
760
844
  "original": {
761
845
  "$value": "{base.color.red.0}",
762
846
  "$type": "color",
847
+ "$description": "Muted danger background for error states and destructive action contexts",
763
848
  "$extensions": {
764
849
  "org.primer.figma": {
765
850
  "collection": "mode",
@@ -786,6 +871,10 @@
786
871
  "isSource": true,
787
872
  "$type": "color"
788
873
  }
874
+ },
875
+ "org.primer.llm": {
876
+ "usage": ["error-message", "destructive-action", "validation-error"],
877
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
789
878
  }
790
879
  },
791
880
  "key": "{bgColor.danger.muted}"
@@ -794,7 +883,8 @@
794
883
  "attributes": {},
795
884
  "path": ["bgColor", "danger", "muted"],
796
885
  "value": "#ffebe9",
797
- "type": "color"
886
+ "type": "color",
887
+ "description": "Muted danger background for error states and destructive action contexts"
798
888
  },
799
889
  "bgColor-default": {
800
890
  "key": "{bgColor.default}",
@@ -814,6 +904,10 @@
814
904
  "dark-high-contrast": "#ffffff",
815
905
  "dark-tritanopia-high-contrast": "#ffffff",
816
906
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff"
907
+ },
908
+ "org.primer.llm": {
909
+ "usage": ["page-background", "main-content", "card-background"],
910
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
817
911
  }
818
912
  },
819
913
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -821,6 +915,7 @@
821
915
  "original": {
822
916
  "$value": "{base.color.neutral.0}",
823
917
  "$type": "color",
918
+ "$description": "Default background color for pages and main content areas",
824
919
  "$extensions": {
825
920
  "org.primer.figma": {
826
921
  "collection": "mode",
@@ -837,6 +932,10 @@
837
932
  "dark-high-contrast": "{base.color.neutral.0}",
838
933
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
839
934
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
935
+ },
936
+ "org.primer.llm": {
937
+ "usage": ["page-background", "main-content", "card-background"],
938
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
840
939
  }
841
940
  },
842
941
  "key": "{bgColor.default}"
@@ -845,7 +944,8 @@
845
944
  "attributes": {},
846
945
  "path": ["bgColor", "default"],
847
946
  "value": "#ffffff",
848
- "type": "color"
947
+ "type": "color",
948
+ "description": "Default background color for pages and main content areas"
849
949
  },
850
950
  "bgColor-disabled": {
851
951
  "key": "{bgColor.disabled}",
@@ -865,6 +965,10 @@
865
965
  "dark-high-contrast": "#e0e6eb",
866
966
  "dark-tritanopia-high-contrast": "#e0e6eb",
867
967
  "dark-protanopia-deuteranopia-high-contrast": "#e0e6eb"
968
+ },
969
+ "org.primer.llm": {
970
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
971
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
868
972
  }
869
973
  },
870
974
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -872,6 +976,7 @@
872
976
  "original": {
873
977
  "$value": "{base.color.neutral.2}",
874
978
  "$type": "color",
979
+ "$description": "Background for disabled interactive elements",
875
980
  "$extensions": {
876
981
  "org.primer.figma": {
877
982
  "collection": "mode",
@@ -888,6 +993,10 @@
888
993
  "dark-high-contrast": "{base.color.neutral.4}",
889
994
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
890
995
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
996
+ },
997
+ "org.primer.llm": {
998
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
999
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
891
1000
  }
892
1001
  },
893
1002
  "key": "{bgColor.disabled}"
@@ -896,7 +1005,8 @@
896
1005
  "attributes": {},
897
1006
  "path": ["bgColor", "disabled"],
898
1007
  "value": "#eff2f5",
899
- "type": "color"
1008
+ "type": "color",
1009
+ "description": "Background for disabled interactive elements"
900
1010
  },
901
1011
  "bgColor-done-emphasis": {
902
1012
  "key": "{bgColor.done.emphasis}",
@@ -914,6 +1024,10 @@
914
1024
  "dark-dimmed-high-contrast": "#512a97",
915
1025
  "dark-tritanopia-high-contrast": "#2e1461",
916
1026
  "dark-protanopia-deuteranopia-high-contrast": "#2e1461"
1027
+ },
1028
+ "org.primer.llm": {
1029
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1030
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
917
1031
  }
918
1032
  },
919
1033
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -921,6 +1035,7 @@
921
1035
  "original": {
922
1036
  "$value": "{base.color.purple.5}",
923
1037
  "$type": "color",
1038
+ "$description": "Strong background for completed/done state badges and labels",
924
1039
  "$extensions": {
925
1040
  "org.primer.figma": {
926
1041
  "collection": "mode",
@@ -935,6 +1050,10 @@
935
1050
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
936
1051
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
937
1052
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1053
+ },
1054
+ "org.primer.llm": {
1055
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1056
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
938
1057
  }
939
1058
  },
940
1059
  "key": "{bgColor.done.emphasis}"
@@ -943,7 +1062,8 @@
943
1062
  "attributes": {},
944
1063
  "path": ["bgColor", "done", "emphasis"],
945
1064
  "value": "#8250df",
946
- "type": "color"
1065
+ "type": "color",
1066
+ "description": "Strong background for completed/done state badges and labels"
947
1067
  },
948
1068
  "bgColor-done-muted": {
949
1069
  "key": "{bgColor.done.muted}",
@@ -964,6 +1084,10 @@
964
1084
  "isSource": true,
965
1085
  "$type": "color"
966
1086
  }
1087
+ },
1088
+ "org.primer.llm": {
1089
+ "usage": ["completed-task", "merged-pr", "done-state"],
1090
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
967
1091
  }
968
1092
  },
969
1093
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -971,6 +1095,7 @@
971
1095
  "original": {
972
1096
  "$value": "{base.color.purple.0}",
973
1097
  "$type": "color",
1098
+ "$description": "Subtle background for completed/done state indicators",
974
1099
  "$extensions": {
975
1100
  "org.primer.figma": {
976
1101
  "collection": "mode",
@@ -988,6 +1113,10 @@
988
1113
  "isSource": true,
989
1114
  "$type": "color"
990
1115
  }
1116
+ },
1117
+ "org.primer.llm": {
1118
+ "usage": ["completed-task", "merged-pr", "done-state"],
1119
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
991
1120
  }
992
1121
  },
993
1122
  "key": "{bgColor.done.muted}"
@@ -996,7 +1125,8 @@
996
1125
  "attributes": {},
997
1126
  "path": ["bgColor", "done", "muted"],
998
1127
  "value": "#fbefff",
999
- "type": "color"
1128
+ "type": "color",
1129
+ "description": "Subtle background for completed/done state indicators"
1000
1130
  },
1001
1131
  "bgColor-draft-emphasis": {
1002
1132
  "key": "{bgColor.draft.emphasis}",
@@ -1008,6 +1138,10 @@
1008
1138
  "codeSyntax": {
1009
1139
  "web": "var(--bgColor-draft-emphasis)"
1010
1140
  }
1141
+ },
1142
+ "org.primer.llm": {
1143
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1144
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1011
1145
  }
1012
1146
  },
1013
1147
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1015,6 +1149,7 @@
1015
1149
  "original": {
1016
1150
  "$value": "{bgColor.neutral.emphasis}",
1017
1151
  "$type": "color",
1152
+ "$description": "Strong background for draft state badges and labels",
1018
1153
  "$extensions": {
1019
1154
  "org.primer.figma": {
1020
1155
  "collection": "mode",
@@ -1023,6 +1158,10 @@
1023
1158
  "codeSyntax": {
1024
1159
  "web": "var(--bgColor-draft-emphasis)"
1025
1160
  }
1161
+ },
1162
+ "org.primer.llm": {
1163
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1164
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1026
1165
  }
1027
1166
  },
1028
1167
  "key": "{bgColor.draft.emphasis}"
@@ -1031,7 +1170,8 @@
1031
1170
  "attributes": {},
1032
1171
  "path": ["bgColor", "draft", "emphasis"],
1033
1172
  "value": "#59636e",
1034
- "type": "color"
1173
+ "type": "color",
1174
+ "description": "Strong background for draft state badges and labels"
1035
1175
  },
1036
1176
  "bgColor-draft-muted": {
1037
1177
  "key": "{bgColor.draft.muted}",
@@ -1070,6 +1210,10 @@
1070
1210
  "isSource": true,
1071
1211
  "$type": "color"
1072
1212
  }
1213
+ },
1214
+ "org.primer.llm": {
1215
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1216
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1073
1217
  }
1074
1218
  },
1075
1219
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1077,6 +1221,7 @@
1077
1221
  "original": {
1078
1222
  "$value": "{bgColor.neutral.muted}",
1079
1223
  "$type": "color",
1224
+ "$description": "Subtle background for draft state indicators",
1080
1225
  "$extensions": {
1081
1226
  "org.primer.figma": {
1082
1227
  "collection": "mode",
@@ -1112,6 +1257,10 @@
1112
1257
  "isSource": true,
1113
1258
  "$type": "color"
1114
1259
  }
1260
+ },
1261
+ "org.primer.llm": {
1262
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1263
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1115
1264
  }
1116
1265
  },
1117
1266
  "key": "{bgColor.draft.muted}"
@@ -1120,7 +1269,8 @@
1120
1269
  "attributes": {},
1121
1270
  "path": ["bgColor", "draft", "muted"],
1122
1271
  "value": "#818b981f",
1123
- "type": "color"
1272
+ "type": "color",
1273
+ "description": "Subtle background for draft state indicators"
1124
1274
  },
1125
1275
  "bgColor-emphasis": {
1126
1276
  "key": "{bgColor.emphasis}",
@@ -1135,6 +1285,10 @@
1135
1285
  },
1136
1286
  "org.primer.overrides": {
1137
1287
  "dark": "#c8d1da"
1288
+ },
1289
+ "org.primer.llm": {
1290
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1291
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1138
1292
  }
1139
1293
  },
1140
1294
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1142,6 +1296,7 @@
1142
1296
  "original": {
1143
1297
  "$value": "{base.color.neutral.12}",
1144
1298
  "$type": "color",
1299
+ "$description": "High-emphasis dark background for strong visual contrast",
1145
1300
  "$extensions": {
1146
1301
  "org.primer.figma": {
1147
1302
  "collection": "mode",
@@ -1153,6 +1308,10 @@
1153
1308
  },
1154
1309
  "org.primer.overrides": {
1155
1310
  "dark": "{base.color.neutral.7}"
1311
+ },
1312
+ "org.primer.llm": {
1313
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1314
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1156
1315
  }
1157
1316
  },
1158
1317
  "key": "{bgColor.emphasis}"
@@ -1161,7 +1320,8 @@
1161
1320
  "attributes": {},
1162
1321
  "path": ["bgColor", "emphasis"],
1163
1322
  "value": "#25292e",
1164
- "type": "color"
1323
+ "type": "color",
1324
+ "description": "High-emphasis dark background for strong visual contrast"
1165
1325
  },
1166
1326
  "bgColor-inset": {
1167
1327
  "key": "{bgColor.inset}",
@@ -1181,6 +1341,10 @@
1181
1341
  "light-high-contrast": "#eff2f5",
1182
1342
  "light-tritanopia-high-contrast": "#eff2f5",
1183
1343
  "light-protanopia-deuteranopia-high-contrast": "#eff2f5"
1344
+ },
1345
+ "org.primer.llm": {
1346
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1347
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1184
1348
  }
1185
1349
  },
1186
1350
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1188,6 +1352,7 @@
1188
1352
  "original": {
1189
1353
  "$value": "{bgColor.muted}",
1190
1354
  "$type": "color",
1355
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1191
1356
  "$extensions": {
1192
1357
  "org.primer.figma": {
1193
1358
  "collection": "mode",
@@ -1204,6 +1369,10 @@
1204
1369
  "light-high-contrast": "{base.color.neutral.2}",
1205
1370
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1206
1371
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1372
+ },
1373
+ "org.primer.llm": {
1374
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1375
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1207
1376
  }
1208
1377
  },
1209
1378
  "key": "{bgColor.inset}"
@@ -1212,7 +1381,8 @@
1212
1381
  "attributes": {},
1213
1382
  "path": ["bgColor", "inset"],
1214
1383
  "value": "#f6f8fa",
1215
- "type": "color"
1384
+ "type": "color",
1385
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1216
1386
  },
1217
1387
  "bgColor-inverse": {
1218
1388
  "key": "{bgColor.inverse}",
@@ -1224,6 +1394,10 @@
1224
1394
  },
1225
1395
  "org.primer.overrides": {
1226
1396
  "dark": "#1f2328"
1397
+ },
1398
+ "org.primer.llm": {
1399
+ "usage": ["overlay-content", "inverse-theme-element"],
1400
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1227
1401
  }
1228
1402
  },
1229
1403
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1231,6 +1405,7 @@
1231
1405
  "original": {
1232
1406
  "$value": "{base.color.neutral.12}",
1233
1407
  "$type": "color",
1408
+ "$description": "Inverse background that flips between light and dark modes",
1234
1409
  "$extensions": {
1235
1410
  "org.primer.figma": {
1236
1411
  "collection": "mode",
@@ -1239,6 +1414,10 @@
1239
1414
  },
1240
1415
  "org.primer.overrides": {
1241
1416
  "dark": "{base.color.neutral.13}"
1417
+ },
1418
+ "org.primer.llm": {
1419
+ "usage": ["overlay-content", "inverse-theme-element"],
1420
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1242
1421
  }
1243
1422
  },
1244
1423
  "key": "{bgColor.inverse}"
@@ -1247,7 +1426,8 @@
1247
1426
  "attributes": {},
1248
1427
  "path": ["bgColor", "inverse"],
1249
1428
  "value": "#25292e",
1250
- "type": "color"
1429
+ "type": "color",
1430
+ "description": "Inverse background that flips between light and dark modes"
1251
1431
  },
1252
1432
  "bgColor-muted": {
1253
1433
  "key": "{bgColor.muted}",
@@ -1270,6 +1450,10 @@
1270
1450
  "dark-high-contrast": "#eff2f5",
1271
1451
  "dark-tritanopia-high-contrast": "#eff2f5",
1272
1452
  "dark-protanopia-deuteranopia-high-contrast": "#eff2f5"
1453
+ },
1454
+ "org.primer.llm": {
1455
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1456
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1273
1457
  }
1274
1458
  },
1275
1459
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1277,6 +1461,7 @@
1277
1461
  "original": {
1278
1462
  "$value": "{base.color.neutral.1}",
1279
1463
  "$type": "color",
1464
+ "$description": "Muted background for secondary content areas and subtle grouping",
1280
1465
  "$extensions": {
1281
1466
  "org.primer.figma": {
1282
1467
  "collection": "mode",
@@ -1296,6 +1481,10 @@
1296
1481
  "dark-high-contrast": "{base.color.neutral.2}",
1297
1482
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1298
1483
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1484
+ },
1485
+ "org.primer.llm": {
1486
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1487
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1299
1488
  }
1300
1489
  },
1301
1490
  "key": "{bgColor.muted}"
@@ -1304,7 +1493,8 @@
1304
1493
  "attributes": {},
1305
1494
  "path": ["bgColor", "muted"],
1306
1495
  "value": "#f6f8fa",
1307
- "type": "color"
1496
+ "type": "color",
1497
+ "description": "Muted background for secondary content areas and subtle grouping"
1308
1498
  },
1309
1499
  "bgColor-neutral-emphasis": {
1310
1500
  "key": "{bgColor.neutral.emphasis}",
@@ -1324,6 +1514,10 @@
1324
1514
  "dark-high-contrast": "#c8d1da",
1325
1515
  "dark-tritanopia-high-contrast": "#c8d1da",
1326
1516
  "dark-protanopia-deuteranopia-high-contrast": "#c8d1da"
1517
+ },
1518
+ "org.primer.llm": {
1519
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1520
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1327
1521
  }
1328
1522
  },
1329
1523
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1331,6 +1525,7 @@
1331
1525
  "original": {
1332
1526
  "$value": "{base.color.neutral.9}",
1333
1527
  "$type": "color",
1528
+ "$description": "Strong neutral background for prominent neutral elements",
1334
1529
  "$extensions": {
1335
1530
  "org.primer.figma": {
1336
1531
  "collection": "mode",
@@ -1347,6 +1542,10 @@
1347
1542
  "dark-high-contrast": "{base.color.neutral.7}",
1348
1543
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1349
1544
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1545
+ },
1546
+ "org.primer.llm": {
1547
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1548
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1350
1549
  }
1351
1550
  },
1352
1551
  "key": "{bgColor.neutral.emphasis}"
@@ -1355,7 +1554,8 @@
1355
1554
  "attributes": {},
1356
1555
  "path": ["bgColor", "neutral", "emphasis"],
1357
1556
  "value": "#59636e",
1358
- "type": "color"
1557
+ "type": "color",
1558
+ "description": "Strong neutral background for prominent neutral elements"
1359
1559
  },
1360
1560
  "bgColor-neutral-muted": {
1361
1561
  "key": "{bgColor.neutral.muted}",
@@ -1386,6 +1586,10 @@
1386
1586
  "dark-high-contrast": "#e6eaef",
1387
1587
  "dark-tritanopia-high-contrast": "#e6eaef",
1388
1588
  "dark-protanopia-deuteranopia-high-contrast": "#e6eaef"
1589
+ },
1590
+ "org.primer.llm": {
1591
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1592
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1389
1593
  }
1390
1594
  },
1391
1595
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1394,6 +1598,7 @@
1394
1598
  "original": {
1395
1599
  "$value": "{base.color.neutral.8}",
1396
1600
  "$type": "color",
1601
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1397
1602
  "$extensions": {
1398
1603
  "org.primer.figma": {
1399
1604
  "collection": "mode",
@@ -1421,6 +1626,10 @@
1421
1626
  "dark-high-contrast": "{base.color.neutral.3}",
1422
1627
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1423
1628
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1629
+ },
1630
+ "org.primer.llm": {
1631
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1632
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1424
1633
  }
1425
1634
  },
1426
1635
  "alpha": 0.12,
@@ -1430,7 +1639,8 @@
1430
1639
  "attributes": {},
1431
1640
  "path": ["bgColor", "neutral", "muted"],
1432
1641
  "value": "#818b981f",
1433
- "type": "color"
1642
+ "type": "color",
1643
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1434
1644
  },
1435
1645
  "bgColor-open-emphasis": {
1436
1646
  "key": "{bgColor.open.emphasis}",
@@ -1452,6 +1662,10 @@
1452
1662
  "light-protanopia-deuteranopia-high-contrast": "#bc4c00",
1453
1663
  "dark-protanopia-deuteranopia": "#bc4c00",
1454
1664
  "dark-protanopia-deuteranopia-high-contrast": "#471700"
1665
+ },
1666
+ "org.primer.llm": {
1667
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1668
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1455
1669
  }
1456
1670
  },
1457
1671
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1459,6 +1673,7 @@
1459
1673
  "original": {
1460
1674
  "$value": "{bgColor.success.emphasis}",
1461
1675
  "$type": "color",
1676
+ "$description": "Strong background for open state badges and labels",
1462
1677
  "$extensions": {
1463
1678
  "org.primer.figma": {
1464
1679
  "collection": "mode",
@@ -1477,6 +1692,10 @@
1477
1692
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1478
1693
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1479
1694
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1695
+ },
1696
+ "org.primer.llm": {
1697
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1698
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1480
1699
  }
1481
1700
  },
1482
1701
  "key": "{bgColor.open.emphasis}"
@@ -1485,7 +1704,8 @@
1485
1704
  "attributes": {},
1486
1705
  "path": ["bgColor", "open", "emphasis"],
1487
1706
  "value": "#1f883d",
1488
- "type": "color"
1707
+ "type": "color",
1708
+ "description": "Strong background for open state badges and labels"
1489
1709
  },
1490
1710
  "bgColor-open-muted": {
1491
1711
  "key": "{bgColor.open.muted}",
@@ -1531,6 +1751,10 @@
1531
1751
  "isSource": true,
1532
1752
  "$type": "color"
1533
1753
  }
1754
+ },
1755
+ "org.primer.llm": {
1756
+ "usage": ["open-issue", "open-pr", "active-status"],
1757
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1534
1758
  }
1535
1759
  },
1536
1760
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1538,6 +1762,7 @@
1538
1762
  "original": {
1539
1763
  "$value": "{bgColor.success.muted}",
1540
1764
  "$type": "color",
1765
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1541
1766
  "$extensions": {
1542
1767
  "org.primer.figma": {
1543
1768
  "collection": "mode",
@@ -1580,6 +1805,10 @@
1580
1805
  "isSource": true,
1581
1806
  "$type": "color"
1582
1807
  }
1808
+ },
1809
+ "org.primer.llm": {
1810
+ "usage": ["open-issue", "open-pr", "active-status"],
1811
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1583
1812
  }
1584
1813
  },
1585
1814
  "key": "{bgColor.open.muted}"
@@ -1588,7 +1817,8 @@
1588
1817
  "attributes": {},
1589
1818
  "path": ["bgColor", "open", "muted"],
1590
1819
  "value": "#dafbe1",
1591
- "type": "color"
1820
+ "type": "color",
1821
+ "description": "Subtle background for open state indicators (issues, PRs)"
1592
1822
  },
1593
1823
  "bgColor-severe-emphasis": {
1594
1824
  "key": "{bgColor.severe.emphasis}",
@@ -1609,6 +1839,10 @@
1609
1839
  "dark-high-contrast": "#471700",
1610
1840
  "dark-dimmed-high-contrast": "#762c00",
1611
1841
  "dark-protanopia-deuteranopia-high-contrast": "#471700"
1842
+ },
1843
+ "org.primer.llm": {
1844
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1845
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1612
1846
  }
1613
1847
  },
1614
1848
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1616,6 +1850,7 @@
1616
1850
  "original": {
1617
1851
  "$value": "{base.color.orange.5}",
1618
1852
  "$type": "color",
1853
+ "$description": "Strong severe background for prominent high-priority warnings",
1619
1854
  "$extensions": {
1620
1855
  "org.primer.figma": {
1621
1856
  "collection": "mode",
@@ -1633,6 +1868,10 @@
1633
1868
  "dark-high-contrast": "{base.color.orange.9}",
1634
1869
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1635
1870
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1871
+ },
1872
+ "org.primer.llm": {
1873
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1874
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1636
1875
  }
1637
1876
  },
1638
1877
  "key": "{bgColor.severe.emphasis}"
@@ -1641,7 +1880,8 @@
1641
1880
  "attributes": {},
1642
1881
  "path": ["bgColor", "severe", "emphasis"],
1643
1882
  "value": "#bc4c00",
1644
- "type": "color"
1883
+ "type": "color",
1884
+ "description": "Strong severe background for prominent high-priority warnings"
1645
1885
  },
1646
1886
  "bgColor-severe-muted": {
1647
1887
  "key": "{bgColor.severe.muted}",
@@ -1671,6 +1911,10 @@
1671
1911
  "isSource": true,
1672
1912
  "$type": "color"
1673
1913
  }
1914
+ },
1915
+ "org.primer.llm": {
1916
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1917
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1674
1918
  }
1675
1919
  },
1676
1920
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1678,6 +1922,7 @@
1678
1922
  "original": {
1679
1923
  "$value": "{base.color.orange.0}",
1680
1924
  "$type": "color",
1925
+ "$description": "Subtle severe background for high-priority warnings",
1681
1926
  "$extensions": {
1682
1927
  "org.primer.figma": {
1683
1928
  "collection": "mode",
@@ -1704,6 +1949,10 @@
1704
1949
  "isSource": true,
1705
1950
  "$type": "color"
1706
1951
  }
1952
+ },
1953
+ "org.primer.llm": {
1954
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1955
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1707
1956
  }
1708
1957
  },
1709
1958
  "key": "{bgColor.severe.muted}"
@@ -1712,7 +1961,8 @@
1712
1961
  "attributes": {},
1713
1962
  "path": ["bgColor", "severe", "muted"],
1714
1963
  "value": "#fff1e5",
1715
- "type": "color"
1964
+ "type": "color",
1965
+ "description": "Subtle severe background for high-priority warnings"
1716
1966
  },
1717
1967
  "bgColor-sponsors-emphasis": {
1718
1968
  "key": "{bgColor.sponsors.emphasis}",
@@ -1730,6 +1980,10 @@
1730
1980
  "dark-dimmed-high-contrast": "#772057",
1731
1981
  "dark-tritanopia-high-contrast": "#4d0336",
1732
1982
  "dark-protanopia-deuteranopia-high-contrast": "#4d0336"
1983
+ },
1984
+ "org.primer.llm": {
1985
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
1986
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1733
1987
  }
1734
1988
  },
1735
1989
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1737,6 +1991,7 @@
1737
1991
  "original": {
1738
1992
  "$value": "{base.color.pink.5}",
1739
1993
  "$type": "color",
1994
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1740
1995
  "$extensions": {
1741
1996
  "org.primer.figma": {
1742
1997
  "collection": "mode",
@@ -1751,6 +2006,10 @@
1751
2006
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1752
2007
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1753
2008
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2009
+ },
2010
+ "org.primer.llm": {
2011
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2012
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1754
2013
  }
1755
2014
  },
1756
2015
  "key": "{bgColor.sponsors.emphasis}"
@@ -1759,7 +2018,8 @@
1759
2018
  "attributes": {},
1760
2019
  "path": ["bgColor", "sponsors", "emphasis"],
1761
2020
  "value": "#bf3989",
1762
- "type": "color"
2021
+ "type": "color",
2022
+ "description": "Strong background for prominent GitHub Sponsors elements"
1763
2023
  },
1764
2024
  "bgColor-sponsors-muted": {
1765
2025
  "key": "{bgColor.sponsors.muted}",
@@ -1787,6 +2047,10 @@
1787
2047
  "isSource": true,
1788
2048
  "$type": "color"
1789
2049
  }
2050
+ },
2051
+ "org.primer.llm": {
2052
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2053
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1790
2054
  }
1791
2055
  },
1792
2056
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1794,6 +2058,7 @@
1794
2058
  "original": {
1795
2059
  "$value": "{base.color.pink.0}",
1796
2060
  "$type": "color",
2061
+ "$description": "Subtle background for GitHub Sponsors content",
1797
2062
  "$extensions": {
1798
2063
  "org.primer.figma": {
1799
2064
  "collection": "mode",
@@ -1818,6 +2083,10 @@
1818
2083
  "isSource": true,
1819
2084
  "$type": "color"
1820
2085
  }
2086
+ },
2087
+ "org.primer.llm": {
2088
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2089
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1821
2090
  }
1822
2091
  },
1823
2092
  "key": "{bgColor.sponsors.muted}"
@@ -1826,7 +2095,8 @@
1826
2095
  "attributes": {},
1827
2096
  "path": ["bgColor", "sponsors", "muted"],
1828
2097
  "value": "#ffeff7",
1829
- "type": "color"
2098
+ "type": "color",
2099
+ "description": "Subtle background for GitHub Sponsors content"
1830
2100
  },
1831
2101
  "bgColor-success-emphasis": {
1832
2102
  "key": "{bgColor.success.emphasis}",
@@ -1852,6 +2122,10 @@
1852
2122
  "light-high-contrast": "#1a7f37",
1853
2123
  "dark-high-contrast": "#002d11",
1854
2124
  "dark-dimmed-high-contrast": "#044f1e"
2125
+ },
2126
+ "org.primer.llm": {
2127
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2128
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1855
2129
  }
1856
2130
  },
1857
2131
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1859,6 +2133,7 @@
1859
2133
  "original": {
1860
2134
  "$value": "#1f883d",
1861
2135
  "$type": "color",
2136
+ "$description": "Strong success background for prominent positive actions",
1862
2137
  "$extensions": {
1863
2138
  "org.primer.figma": {
1864
2139
  "collection": "mode",
@@ -1881,6 +2156,10 @@
1881
2156
  "light-high-contrast": "{base.color.green.5}",
1882
2157
  "dark-high-contrast": "{base.color.green.9}",
1883
2158
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2159
+ },
2160
+ "org.primer.llm": {
2161
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2162
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1884
2163
  }
1885
2164
  },
1886
2165
  "key": "{bgColor.success.emphasis}"
@@ -1889,7 +2168,8 @@
1889
2168
  "attributes": {},
1890
2169
  "path": ["bgColor", "success", "emphasis"],
1891
2170
  "value": "#1f883d",
1892
- "type": "color"
2171
+ "type": "color",
2172
+ "description": "Strong success background for prominent positive actions"
1893
2173
  },
1894
2174
  "bgColor-success-muted": {
1895
2175
  "key": "{bgColor.success.muted}",
@@ -1942,6 +2222,10 @@
1942
2222
  "isSource": true,
1943
2223
  "$type": "color"
1944
2224
  }
2225
+ },
2226
+ "org.primer.llm": {
2227
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2228
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1945
2229
  }
1946
2230
  },
1947
2231
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1949,6 +2233,7 @@
1949
2233
  "original": {
1950
2234
  "$value": "{base.color.green.0}",
1951
2235
  "$type": "color",
2236
+ "$description": "Subtle success background for positive feedback and completed states",
1952
2237
  "$extensions": {
1953
2238
  "org.primer.figma": {
1954
2239
  "collection": "mode",
@@ -1998,6 +2283,10 @@
1998
2283
  "isSource": true,
1999
2284
  "$type": "color"
2000
2285
  }
2286
+ },
2287
+ "org.primer.llm": {
2288
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2289
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
2001
2290
  }
2002
2291
  },
2003
2292
  "key": "{bgColor.success.muted}"
@@ -2006,7 +2295,8 @@
2006
2295
  "attributes": {},
2007
2296
  "path": ["bgColor", "success", "muted"],
2008
2297
  "value": "#dafbe1",
2009
- "type": "color"
2298
+ "type": "color",
2299
+ "description": "Subtle success background for positive feedback and completed states"
2010
2300
  },
2011
2301
  "bgColor-transparent": {
2012
2302
  "key": "{bgColor.transparent}",
@@ -2018,6 +2308,10 @@
2018
2308
  "codeSyntax": {
2019
2309
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2020
2310
  }
2311
+ },
2312
+ "org.primer.llm": {
2313
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2314
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2021
2315
  }
2022
2316
  },
2023
2317
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2025,6 +2319,7 @@
2025
2319
  "original": {
2026
2320
  "$value": "{base.color.transparent}",
2027
2321
  "$type": "color",
2322
+ "$description": "Fully transparent background",
2028
2323
  "$extensions": {
2029
2324
  "org.primer.figma": {
2030
2325
  "collection": "mode",
@@ -2033,6 +2328,10 @@
2033
2328
  "codeSyntax": {
2034
2329
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2035
2330
  }
2331
+ },
2332
+ "org.primer.llm": {
2333
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2334
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2036
2335
  }
2037
2336
  },
2038
2337
  "key": "{bgColor.transparent}"
@@ -2041,7 +2340,8 @@
2041
2340
  "attributes": {},
2042
2341
  "path": ["bgColor", "transparent"],
2043
2342
  "value": "#ffffff00",
2044
- "type": "color"
2343
+ "type": "color",
2344
+ "description": "Fully transparent background"
2045
2345
  },
2046
2346
  "bgColor-upsell-emphasis": {
2047
2347
  "key": "{bgColor.upsell.emphasis}",
@@ -2053,6 +2353,10 @@
2053
2353
  "codeSyntax": {
2054
2354
  "web": "var(--bgColor-upsell-emphasis)"
2055
2355
  }
2356
+ },
2357
+ "org.primer.llm": {
2358
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2359
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2056
2360
  }
2057
2361
  },
2058
2362
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2060,6 +2364,7 @@
2060
2364
  "original": {
2061
2365
  "$value": "{bgColor.done.emphasis}",
2062
2366
  "$type": "color",
2367
+ "$description": "Strong background for prominent upsell elements",
2063
2368
  "$extensions": {
2064
2369
  "org.primer.figma": {
2065
2370
  "collection": "mode",
@@ -2068,6 +2373,10 @@
2068
2373
  "codeSyntax": {
2069
2374
  "web": "var(--bgColor-upsell-emphasis)"
2070
2375
  }
2376
+ },
2377
+ "org.primer.llm": {
2378
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2379
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2071
2380
  }
2072
2381
  },
2073
2382
  "key": "{bgColor.upsell.emphasis}"
@@ -2076,7 +2385,8 @@
2076
2385
  "attributes": {},
2077
2386
  "path": ["bgColor", "upsell", "emphasis"],
2078
2387
  "value": "#8250df",
2079
- "type": "color"
2388
+ "type": "color",
2389
+ "description": "Strong background for prominent upsell elements"
2080
2390
  },
2081
2391
  "bgColor-upsell-muted": {
2082
2392
  "key": "{bgColor.upsell.muted}",
@@ -2088,6 +2398,10 @@
2088
2398
  "codeSyntax": {
2089
2399
  "web": "var(--bgColor-upsell-muted)"
2090
2400
  }
2401
+ },
2402
+ "org.primer.llm": {
2403
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2404
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2091
2405
  }
2092
2406
  },
2093
2407
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2095,6 +2409,7 @@
2095
2409
  "original": {
2096
2410
  "$value": "{bgColor.done.muted}",
2097
2411
  "$type": "color",
2412
+ "$description": "Subtle background for upsell and promotional content",
2098
2413
  "$extensions": {
2099
2414
  "org.primer.figma": {
2100
2415
  "collection": "mode",
@@ -2103,6 +2418,10 @@
2103
2418
  "codeSyntax": {
2104
2419
  "web": "var(--bgColor-upsell-muted)"
2105
2420
  }
2421
+ },
2422
+ "org.primer.llm": {
2423
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2424
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2106
2425
  }
2107
2426
  },
2108
2427
  "key": "{bgColor.upsell.muted}"
@@ -2111,7 +2430,8 @@
2111
2430
  "attributes": {},
2112
2431
  "path": ["bgColor", "upsell", "muted"],
2113
2432
  "value": "#fbefff",
2114
- "type": "color"
2433
+ "type": "color",
2434
+ "description": "Subtle background for upsell and promotional content"
2115
2435
  },
2116
2436
  "bgColor-white": {
2117
2437
  "key": "{bgColor.white}",
@@ -2123,6 +2443,10 @@
2123
2443
  },
2124
2444
  "org.primer.overrides": {
2125
2445
  "dark": "#1f2328"
2446
+ },
2447
+ "org.primer.llm": {
2448
+ "doNotUse": true,
2449
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2126
2450
  }
2127
2451
  },
2128
2452
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2130,6 +2454,7 @@
2130
2454
  "original": {
2131
2455
  "$value": "{base.color.neutral.0}",
2132
2456
  "$type": "color",
2457
+ "$description": "Pure white background",
2133
2458
  "$extensions": {
2134
2459
  "org.primer.figma": {
2135
2460
  "collection": "mode",
@@ -2138,6 +2463,10 @@
2138
2463
  },
2139
2464
  "org.primer.overrides": {
2140
2465
  "dark": "{base.color.neutral.13}"
2466
+ },
2467
+ "org.primer.llm": {
2468
+ "doNotUse": true,
2469
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2141
2470
  }
2142
2471
  },
2143
2472
  "key": "{bgColor.white}"
@@ -2146,7 +2475,8 @@
2146
2475
  "attributes": {},
2147
2476
  "path": ["bgColor", "white"],
2148
2477
  "value": "#ffffff",
2149
- "type": "color"
2478
+ "type": "color",
2479
+ "description": "Pure white background"
2150
2480
  },
2151
2481
  "border-accent-emphasis": {
2152
2482
  "key": "{border.accent.emphasis}",
@@ -2658,6 +2988,10 @@
2658
2988
  },
2659
2989
  "org.primer.overrides": {
2660
2990
  "dark-dimmed-high-contrast": "#80ccff"
2991
+ },
2992
+ "org.primer.llm": {
2993
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
2994
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2661
2995
  }
2662
2996
  },
2663
2997
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2665,6 +2999,7 @@
2665
2999
  "original": {
2666
3000
  "$value": "{base.color.blue.5}",
2667
3001
  "$type": "color",
3002
+ "$description": "Strong accent border for selected or focused elements",
2668
3003
  "$extensions": {
2669
3004
  "org.primer.figma": {
2670
3005
  "collection": "mode",
@@ -2676,6 +3011,10 @@
2676
3011
  },
2677
3012
  "org.primer.overrides": {
2678
3013
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3014
+ },
3015
+ "org.primer.llm": {
3016
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3017
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2679
3018
  }
2680
3019
  },
2681
3020
  "key": "{borderColor.accent.emphasis}"
@@ -2684,7 +3023,8 @@
2684
3023
  "attributes": {},
2685
3024
  "path": ["borderColor", "accent", "emphasis"],
2686
3025
  "value": "#0969da",
2687
- "type": "color"
3026
+ "type": "color",
3027
+ "description": "Strong accent border for selected or focused elements"
2688
3028
  },
2689
3029
  "borderColor-accent-muted": {
2690
3030
  "key": "{borderColor.accent.muted}",
@@ -2748,6 +3088,10 @@
2748
3088
  "isSource": true,
2749
3089
  "$type": "color"
2750
3090
  }
3091
+ },
3092
+ "org.primer.llm": {
3093
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3094
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2751
3095
  }
2752
3096
  },
2753
3097
  "alpha": 0.4,
@@ -2756,6 +3100,7 @@
2756
3100
  "original": {
2757
3101
  "$value": "{base.color.blue.3}",
2758
3102
  "$type": "color",
3103
+ "$description": "Subtle accent border for selected or focused elements",
2759
3104
  "$extensions": {
2760
3105
  "org.primer.figma": {
2761
3106
  "collection": "mode",
@@ -2816,6 +3161,10 @@
2816
3161
  "isSource": true,
2817
3162
  "$type": "color"
2818
3163
  }
3164
+ },
3165
+ "org.primer.llm": {
3166
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3167
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2819
3168
  }
2820
3169
  },
2821
3170
  "alpha": 0.4,
@@ -2825,7 +3174,8 @@
2825
3174
  "attributes": {},
2826
3175
  "path": ["borderColor", "accent", "muted"],
2827
3176
  "value": "#54aeff66",
2828
- "type": "color"
3177
+ "type": "color",
3178
+ "description": "Subtle accent border for selected or focused elements"
2829
3179
  },
2830
3180
  "borderColor-attention-emphasis": {
2831
3181
  "key": "{borderColor.attention.emphasis}",
@@ -2840,6 +3190,10 @@
2840
3190
  },
2841
3191
  "org.primer.overrides": {
2842
3192
  "dark-dimmed-high-contrast": "#eac54f"
3193
+ },
3194
+ "org.primer.llm": {
3195
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3196
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2843
3197
  }
2844
3198
  },
2845
3199
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2847,6 +3201,7 @@
2847
3201
  "original": {
2848
3202
  "$value": "{base.color.yellow.5}",
2849
3203
  "$type": "color",
3204
+ "$description": "Strong attention border for prominent warnings",
2850
3205
  "$extensions": {
2851
3206
  "org.primer.figma": {
2852
3207
  "collection": "mode",
@@ -2858,6 +3213,10 @@
2858
3213
  },
2859
3214
  "org.primer.overrides": {
2860
3215
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3216
+ },
3217
+ "org.primer.llm": {
3218
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3219
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2861
3220
  }
2862
3221
  },
2863
3222
  "key": "{borderColor.attention.emphasis}"
@@ -2866,7 +3225,8 @@
2866
3225
  "attributes": {},
2867
3226
  "path": ["borderColor", "attention", "emphasis"],
2868
3227
  "value": "#9a6700",
2869
- "type": "color"
3228
+ "type": "color",
3229
+ "description": "Strong attention border for prominent warnings"
2870
3230
  },
2871
3231
  "borderColor-attention-muted": {
2872
3232
  "key": "{borderColor.attention.muted}",
@@ -2930,6 +3290,10 @@
2930
3290
  "isSource": true,
2931
3291
  "$type": "color"
2932
3292
  }
3293
+ },
3294
+ "org.primer.llm": {
3295
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3296
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2933
3297
  }
2934
3298
  },
2935
3299
  "alpha": 0.4,
@@ -2938,6 +3302,7 @@
2938
3302
  "original": {
2939
3303
  "$value": "{base.color.yellow.3}",
2940
3304
  "$type": "color",
3305
+ "$description": "Subtle attention border for warnings and caution states",
2941
3306
  "$extensions": {
2942
3307
  "org.primer.figma": {
2943
3308
  "collection": "mode",
@@ -2998,6 +3363,10 @@
2998
3363
  "isSource": true,
2999
3364
  "$type": "color"
3000
3365
  }
3366
+ },
3367
+ "org.primer.llm": {
3368
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3369
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
3001
3370
  }
3002
3371
  },
3003
3372
  "alpha": 0.4,
@@ -3007,7 +3376,8 @@
3007
3376
  "attributes": {},
3008
3377
  "path": ["borderColor", "attention", "muted"],
3009
3378
  "value": "#d4a72c66",
3010
- "type": "color"
3379
+ "type": "color",
3380
+ "description": "Subtle attention border for warnings and caution states"
3011
3381
  },
3012
3382
  "borderColor-closed-emphasis": {
3013
3383
  "key": "{borderColor.closed.emphasis}",
@@ -3029,6 +3399,10 @@
3029
3399
  "dark-tritanopia-high-contrast": "#818b98",
3030
3400
  "light-tritanopia": "#818b98",
3031
3401
  "light-tritanopia-high-contrast": "#818b98"
3402
+ },
3403
+ "org.primer.llm": {
3404
+ "usage": ["closed-emphasis", "closed-status"],
3405
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3032
3406
  }
3033
3407
  },
3034
3408
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3036,6 +3410,7 @@
3036
3410
  "original": {
3037
3411
  "$value": "{borderColor.danger.emphasis}",
3038
3412
  "$type": "color",
3413
+ "$description": "Strong border for closed state badges",
3039
3414
  "$extensions": {
3040
3415
  "org.primer.figma": {
3041
3416
  "collection": "mode",
@@ -3054,6 +3429,10 @@
3054
3429
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3055
3430
  "light-tritanopia": "{borderColor.emphasis}",
3056
3431
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3432
+ },
3433
+ "org.primer.llm": {
3434
+ "usage": ["closed-emphasis", "closed-status"],
3435
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3057
3436
  }
3058
3437
  },
3059
3438
  "key": "{borderColor.closed.emphasis}"
@@ -3062,7 +3441,8 @@
3062
3441
  "attributes": {},
3063
3442
  "path": ["borderColor", "closed", "emphasis"],
3064
3443
  "value": "#cf222e",
3065
- "type": "color"
3444
+ "type": "color",
3445
+ "description": "Strong border for closed state badges"
3066
3446
  },
3067
3447
  "borderColor-closed-muted": {
3068
3448
  "key": "{borderColor.closed.muted}",
@@ -3132,6 +3512,10 @@
3132
3512
  "isSource": true,
3133
3513
  "$type": "color"
3134
3514
  }
3515
+ },
3516
+ "org.primer.llm": {
3517
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3518
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3135
3519
  }
3136
3520
  },
3137
3521
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3139,6 +3523,7 @@
3139
3523
  "original": {
3140
3524
  "$value": "{borderColor.danger.muted}",
3141
3525
  "$type": "color",
3526
+ "$description": "Subtle border for closed state indicators",
3142
3527
  "$extensions": {
3143
3528
  "org.primer.figma": {
3144
3529
  "collection": "mode",
@@ -3205,6 +3590,10 @@
3205
3590
  "isSource": true,
3206
3591
  "$type": "color"
3207
3592
  }
3593
+ },
3594
+ "org.primer.llm": {
3595
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3596
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3208
3597
  }
3209
3598
  },
3210
3599
  "key": "{borderColor.closed.muted}"
@@ -3213,7 +3602,8 @@
3213
3602
  "attributes": {},
3214
3603
  "path": ["borderColor", "closed", "muted"],
3215
3604
  "value": "#ff818266",
3216
- "type": "color"
3605
+ "type": "color",
3606
+ "description": "Subtle border for closed state indicators"
3217
3607
  },
3218
3608
  "borderColor-danger-emphasis": {
3219
3609
  "key": "{borderColor.danger.emphasis}",
@@ -3252,6 +3642,10 @@
3252
3642
  "$type": "color"
3253
3643
  },
3254
3644
  "dark-dimmed-high-contrast": "#ffaba8"
3645
+ },
3646
+ "org.primer.llm": {
3647
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3648
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3255
3649
  }
3256
3650
  },
3257
3651
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3259,6 +3653,7 @@
3259
3653
  "original": {
3260
3654
  "$value": "{base.color.red.5}",
3261
3655
  "$type": "color",
3656
+ "$description": "Strong danger border for destructive actions and errors",
3262
3657
  "$extensions": {
3263
3658
  "org.primer.figma": {
3264
3659
  "collection": "mode",
@@ -3294,6 +3689,10 @@
3294
3689
  "$type": "color"
3295
3690
  },
3296
3691
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3692
+ },
3693
+ "org.primer.llm": {
3694
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3695
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3297
3696
  }
3298
3697
  },
3299
3698
  "key": "{borderColor.danger.emphasis}"
@@ -3302,7 +3701,8 @@
3302
3701
  "attributes": {},
3303
3702
  "path": ["borderColor", "danger", "emphasis"],
3304
3703
  "value": "#cf222e",
3305
- "type": "color"
3704
+ "type": "color",
3705
+ "description": "Strong danger border for destructive actions and errors"
3306
3706
  },
3307
3707
  "borderColor-danger-muted": {
3308
3708
  "key": "{borderColor.danger.muted}",
@@ -3379,6 +3779,10 @@
3379
3779
  "isSource": true,
3380
3780
  "$type": "color"
3381
3781
  }
3782
+ },
3783
+ "org.primer.llm": {
3784
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3785
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3382
3786
  }
3383
3787
  },
3384
3788
  "alpha": 0.4,
@@ -3387,6 +3791,7 @@
3387
3791
  "original": {
3388
3792
  "$value": "{base.color.red.3}",
3389
3793
  "$type": "color",
3794
+ "$description": "Subtle danger border for errors and destructive contexts",
3390
3795
  "$extensions": {
3391
3796
  "org.primer.figma": {
3392
3797
  "collection": "mode",
@@ -3460,6 +3865,10 @@
3460
3865
  "isSource": true,
3461
3866
  "$type": "color"
3462
3867
  }
3868
+ },
3869
+ "org.primer.llm": {
3870
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3871
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3463
3872
  }
3464
3873
  },
3465
3874
  "alpha": 0.4,
@@ -3469,7 +3878,8 @@
3469
3878
  "attributes": {},
3470
3879
  "path": ["borderColor", "danger", "muted"],
3471
3880
  "value": "#ff818266",
3472
- "type": "color"
3881
+ "type": "color",
3882
+ "description": "Subtle danger border for errors and destructive contexts"
3473
3883
  },
3474
3884
  "borderColor-default": {
3475
3885
  "key": "{borderColor.default}",
@@ -3492,6 +3902,10 @@
3492
3902
  "codeSyntax": {
3493
3903
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3494
3904
  }
3905
+ },
3906
+ "org.primer.llm": {
3907
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3908
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3495
3909
  }
3496
3910
  },
3497
3911
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3499,6 +3913,7 @@
3499
3913
  "original": {
3500
3914
  "$value": "{base.color.neutral.6}",
3501
3915
  "$type": "color",
3916
+ "$description": "Default border color for most UI elements",
3502
3917
  "$extensions": {
3503
3918
  "org.primer.overrides": {
3504
3919
  "dark": "{base.color.neutral.7}",
@@ -3518,6 +3933,10 @@
3518
3933
  "codeSyntax": {
3519
3934
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3520
3935
  }
3936
+ },
3937
+ "org.primer.llm": {
3938
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3939
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3521
3940
  }
3522
3941
  },
3523
3942
  "key": "{borderColor.default}"
@@ -3526,7 +3945,8 @@
3526
3945
  "attributes": {},
3527
3946
  "path": ["borderColor", "default"],
3528
3947
  "value": "#d1d9e0",
3529
- "type": "color"
3948
+ "type": "color",
3949
+ "description": "Default border color for most UI elements"
3530
3950
  },
3531
3951
  "borderColor-disabled": {
3532
3952
  "key": "{borderColor.disabled}",
@@ -3572,6 +3992,10 @@
3572
3992
  "isSource": true,
3573
3993
  "$type": "color"
3574
3994
  }
3995
+ },
3996
+ "org.primer.llm": {
3997
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
3998
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3575
3999
  }
3576
4000
  },
3577
4001
  "alpha": 0.1,
@@ -3580,6 +4004,7 @@
3580
4004
  "original": {
3581
4005
  "$value": "{base.color.neutral.8}",
3582
4006
  "$type": "color",
4007
+ "$description": "Border color for disabled interactive elements",
3583
4008
  "$extensions": {
3584
4009
  "org.primer.figma": {
3585
4010
  "collection": "mode",
@@ -3622,6 +4047,10 @@
3622
4047
  "isSource": true,
3623
4048
  "$type": "color"
3624
4049
  }
4050
+ },
4051
+ "org.primer.llm": {
4052
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4053
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3625
4054
  }
3626
4055
  },
3627
4056
  "alpha": 0.1,
@@ -3631,7 +4060,8 @@
3631
4060
  "attributes": {},
3632
4061
  "path": ["borderColor", "disabled"],
3633
4062
  "value": "#818b981a",
3634
- "type": "color"
4063
+ "type": "color",
4064
+ "description": "Border color for disabled interactive elements"
3635
4065
  },
3636
4066
  "borderColor-done-emphasis": {
3637
4067
  "key": "{borderColor.done.emphasis}",
@@ -3646,6 +4076,10 @@
3646
4076
  },
3647
4077
  "org.primer.overrides": {
3648
4078
  "dark-dimmed-high-contrast": "#d8b9ff"
4079
+ },
4080
+ "org.primer.llm": {
4081
+ "usage": ["done-emphasis", "merged-status"],
4082
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3649
4083
  }
3650
4084
  },
3651
4085
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3653,6 +4087,7 @@
3653
4087
  "original": {
3654
4088
  "$value": "{base.color.purple.5}",
3655
4089
  "$type": "color",
4090
+ "$description": "Strong border for completed/done state badges",
3656
4091
  "$extensions": {
3657
4092
  "org.primer.figma": {
3658
4093
  "collection": "mode",
@@ -3664,6 +4099,10 @@
3664
4099
  },
3665
4100
  "org.primer.overrides": {
3666
4101
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4102
+ },
4103
+ "org.primer.llm": {
4104
+ "usage": ["done-emphasis", "merged-status"],
4105
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3667
4106
  }
3668
4107
  },
3669
4108
  "key": "{borderColor.done.emphasis}"
@@ -3672,7 +4111,8 @@
3672
4111
  "attributes": {},
3673
4112
  "path": ["borderColor", "done", "emphasis"],
3674
4113
  "value": "#8250df",
3675
- "type": "color"
4114
+ "type": "color",
4115
+ "description": "Strong border for completed/done state badges"
3676
4116
  },
3677
4117
  "borderColor-done-muted": {
3678
4118
  "key": "{borderColor.done.muted}",
@@ -3736,6 +4176,10 @@
3736
4176
  "isSource": true,
3737
4177
  "$type": "color"
3738
4178
  }
4179
+ },
4180
+ "org.primer.llm": {
4181
+ "usage": ["done-muted", "merged", "completed"],
4182
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3739
4183
  }
3740
4184
  },
3741
4185
  "alpha": 0.4,
@@ -3744,6 +4188,7 @@
3744
4188
  "original": {
3745
4189
  "$value": "{base.color.purple.3}",
3746
4190
  "$type": "color",
4191
+ "$description": "Subtle border for completed/done state indicators",
3747
4192
  "$extensions": {
3748
4193
  "org.primer.figma": {
3749
4194
  "collection": "mode",
@@ -3804,6 +4249,10 @@
3804
4249
  "isSource": true,
3805
4250
  "$type": "color"
3806
4251
  }
4252
+ },
4253
+ "org.primer.llm": {
4254
+ "usage": ["done-muted", "merged", "completed"],
4255
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3807
4256
  }
3808
4257
  },
3809
4258
  "alpha": 0.4,
@@ -3813,7 +4262,8 @@
3813
4262
  "attributes": {},
3814
4263
  "path": ["borderColor", "done", "muted"],
3815
4264
  "value": "#c297ff66",
3816
- "type": "color"
4265
+ "type": "color",
4266
+ "description": "Subtle border for completed/done state indicators"
3817
4267
  },
3818
4268
  "borderColor-draft-emphasis": {
3819
4269
  "key": "{borderColor.draft.emphasis}",
@@ -3825,6 +4275,10 @@
3825
4275
  "codeSyntax": {
3826
4276
  "web": "var(--borderColor-draft-emphasis)"
3827
4277
  }
4278
+ },
4279
+ "org.primer.llm": {
4280
+ "usage": ["draft-emphasis", "draft-status"],
4281
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3828
4282
  }
3829
4283
  },
3830
4284
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3832,6 +4286,7 @@
3832
4286
  "original": {
3833
4287
  "$value": "{borderColor.neutral.emphasis}",
3834
4288
  "$type": "color",
4289
+ "$description": "Strong border for draft state badges",
3835
4290
  "$extensions": {
3836
4291
  "org.primer.figma": {
3837
4292
  "collection": "mode",
@@ -3840,6 +4295,10 @@
3840
4295
  "codeSyntax": {
3841
4296
  "web": "var(--borderColor-draft-emphasis)"
3842
4297
  }
4298
+ },
4299
+ "org.primer.llm": {
4300
+ "usage": ["draft-emphasis", "draft-status"],
4301
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3843
4302
  }
3844
4303
  },
3845
4304
  "key": "{borderColor.draft.emphasis}"
@@ -3848,7 +4307,8 @@
3848
4307
  "attributes": {},
3849
4308
  "path": ["borderColor", "draft", "emphasis"],
3850
4309
  "value": "#59636e",
3851
- "type": "color"
4310
+ "type": "color",
4311
+ "description": "Strong border for draft state badges"
3852
4312
  },
3853
4313
  "borderColor-draft-muted": {
3854
4314
  "key": "{borderColor.draft.muted}",
@@ -3918,6 +4378,10 @@
3918
4378
  "isSource": true,
3919
4379
  "$type": "color"
3920
4380
  }
4381
+ },
4382
+ "org.primer.llm": {
4383
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4384
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3921
4385
  }
3922
4386
  },
3923
4387
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3925,6 +4389,7 @@
3925
4389
  "original": {
3926
4390
  "$value": "{borderColor.neutral.muted}",
3927
4391
  "$type": "color",
4392
+ "$description": "Subtle border for draft state indicators",
3928
4393
  "$extensions": {
3929
4394
  "org.primer.figma": {
3930
4395
  "collection": "mode",
@@ -3991,6 +4456,10 @@
3991
4456
  "isSource": true,
3992
4457
  "$type": "color"
3993
4458
  }
4459
+ },
4460
+ "org.primer.llm": {
4461
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4462
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3994
4463
  }
3995
4464
  },
3996
4465
  "key": "{borderColor.draft.muted}"
@@ -3999,7 +4468,8 @@
3999
4468
  "attributes": {},
4000
4469
  "path": ["borderColor", "draft", "muted"],
4001
4470
  "value": "#d1d9e0b3",
4002
- "type": "color"
4471
+ "type": "color",
4472
+ "description": "Subtle border for draft state indicators"
4003
4473
  },
4004
4474
  "borderColor-emphasis": {
4005
4475
  "key": "{borderColor.emphasis}",
@@ -4017,6 +4487,10 @@
4017
4487
  "dark-dimmed-high-contrast": "#d1d9e0",
4018
4488
  "dark-tritanopia-high-contrast": "#d1d9e0",
4019
4489
  "dark-protanopia-deuteranopia-high-contrast": "#d1d9e0"
4490
+ },
4491
+ "org.primer.llm": {
4492
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4493
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4020
4494
  }
4021
4495
  },
4022
4496
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4024,6 +4498,7 @@
4024
4498
  "original": {
4025
4499
  "$value": "{base.color.neutral.8}",
4026
4500
  "$type": "color",
4501
+ "$description": "Strong border for emphasis and visual weight",
4027
4502
  "$extensions": {
4028
4503
  "org.primer.figma": {
4029
4504
  "collection": "mode",
@@ -4038,6 +4513,10 @@
4038
4513
  "dark-dimmed-high-contrast": "{borderColor.default}",
4039
4514
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4040
4515
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
4516
+ },
4517
+ "org.primer.llm": {
4518
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4519
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4041
4520
  }
4042
4521
  },
4043
4522
  "key": "{borderColor.emphasis}"
@@ -4046,7 +4525,8 @@
4046
4525
  "attributes": {},
4047
4526
  "path": ["borderColor", "emphasis"],
4048
4527
  "value": "#818b98",
4049
- "type": "color"
4528
+ "type": "color",
4529
+ "description": "Strong border for emphasis and visual weight"
4050
4530
  },
4051
4531
  "borderColor-muted": {
4052
4532
  "key": "{borderColor.muted}",
@@ -4116,6 +4596,10 @@
4116
4596
  "isSource": true,
4117
4597
  "$type": "color"
4118
4598
  }
4599
+ },
4600
+ "org.primer.llm": {
4601
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4602
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4119
4603
  }
4120
4604
  },
4121
4605
  "alpha": 0.7,
@@ -4124,6 +4608,7 @@
4124
4608
  "original": {
4125
4609
  "$value": "{borderColor.default}",
4126
4610
  "$type": "color",
4611
+ "$description": "Subtle border for secondary elements and light separators",
4127
4612
  "$extensions": {
4128
4613
  "org.primer.figma": {
4129
4614
  "collection": "mode",
@@ -4190,6 +4675,10 @@
4190
4675
  "isSource": true,
4191
4676
  "$type": "color"
4192
4677
  }
4678
+ },
4679
+ "org.primer.llm": {
4680
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4681
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4193
4682
  }
4194
4683
  },
4195
4684
  "alpha": 0.7,
@@ -4199,7 +4688,8 @@
4199
4688
  "attributes": {},
4200
4689
  "path": ["borderColor", "muted"],
4201
4690
  "value": "#d1d9e0b3",
4202
- "type": "color"
4691
+ "type": "color",
4692
+ "description": "Subtle border for secondary elements and light separators"
4203
4693
  },
4204
4694
  "borderColor-neutral-emphasis": {
4205
4695
  "key": "{borderColor.neutral.emphasis}",
@@ -4211,6 +4701,10 @@
4211
4701
  },
4212
4702
  "org.primer.overrides": {
4213
4703
  "dark": "#818b98"
4704
+ },
4705
+ "org.primer.llm": {
4706
+ "usage": ["neutral-emphasis", "neutral-strong"],
4707
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4214
4708
  }
4215
4709
  },
4216
4710
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4218,6 +4712,7 @@
4218
4712
  "original": {
4219
4713
  "$value": "{base.color.neutral.9}",
4220
4714
  "$type": "color",
4715
+ "$description": "Strong neutral semantic border",
4221
4716
  "$extensions": {
4222
4717
  "org.primer.figma": {
4223
4718
  "collection": "mode",
@@ -4226,6 +4721,10 @@
4226
4721
  },
4227
4722
  "org.primer.overrides": {
4228
4723
  "dark": "{borderColor.emphasis}"
4724
+ },
4725
+ "org.primer.llm": {
4726
+ "usage": ["neutral-emphasis", "neutral-strong"],
4727
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4229
4728
  }
4230
4729
  },
4231
4730
  "key": "{borderColor.neutral.emphasis}"
@@ -4234,7 +4733,8 @@
4234
4733
  "attributes": {},
4235
4734
  "path": ["borderColor", "neutral", "emphasis"],
4236
4735
  "value": "#59636e",
4237
- "type": "color"
4736
+ "type": "color",
4737
+ "description": "Strong neutral semantic border"
4238
4738
  },
4239
4739
  "borderColor-neutral-muted": {
4240
4740
  "key": "{borderColor.neutral.muted}",
@@ -4259,6 +4759,10 @@
4259
4759
  "isSource": true,
4260
4760
  "$type": "color"
4261
4761
  }
4762
+ },
4763
+ "org.primer.llm": {
4764
+ "usage": ["neutral-muted", "neutral-secondary"],
4765
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4262
4766
  }
4263
4767
  },
4264
4768
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4266,6 +4770,7 @@
4266
4770
  "original": {
4267
4771
  "$value": "{borderColor.muted}",
4268
4772
  "$type": "color",
4773
+ "$description": "Subtle neutral semantic border",
4269
4774
  "$extensions": {
4270
4775
  "org.primer.figma": {
4271
4776
  "collection": "mode",
@@ -4287,6 +4792,10 @@
4287
4792
  "isSource": true,
4288
4793
  "$type": "color"
4289
4794
  }
4795
+ },
4796
+ "org.primer.llm": {
4797
+ "usage": ["neutral-muted", "neutral-secondary"],
4798
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4290
4799
  }
4291
4800
  },
4292
4801
  "key": "{borderColor.neutral.muted}"
@@ -4295,7 +4804,8 @@
4295
4804
  "attributes": {},
4296
4805
  "path": ["borderColor", "neutral", "muted"],
4297
4806
  "value": "#d1d9e0b3",
4298
- "type": "color"
4807
+ "type": "color",
4808
+ "description": "Subtle neutral semantic border"
4299
4809
  },
4300
4810
  "borderColor-open-emphasis": {
4301
4811
  "key": "{borderColor.open.emphasis}",
@@ -4317,6 +4827,10 @@
4317
4827
  "dark-protanopia-deuteranopia-high-contrast": "#bc4c00",
4318
4828
  "light-protanopia-deuteranopia": "#bc4c00",
4319
4829
  "light-protanopia-deuteranopia-high-contrast": "#bc4c00"
4830
+ },
4831
+ "org.primer.llm": {
4832
+ "usage": ["open-emphasis", "open-status"],
4833
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4320
4834
  }
4321
4835
  },
4322
4836
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4324,6 +4838,7 @@
4324
4838
  "original": {
4325
4839
  "$value": "{borderColor.success.emphasis}",
4326
4840
  "$type": "color",
4841
+ "$description": "Strong border for open state badges",
4327
4842
  "$extensions": {
4328
4843
  "org.primer.figma": {
4329
4844
  "collection": "mode",
@@ -4342,6 +4857,10 @@
4342
4857
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4343
4858
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4344
4859
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4860
+ },
4861
+ "org.primer.llm": {
4862
+ "usage": ["open-emphasis", "open-status"],
4863
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4345
4864
  }
4346
4865
  },
4347
4866
  "key": "{borderColor.open.emphasis}"
@@ -4350,7 +4869,8 @@
4350
4869
  "attributes": {},
4351
4870
  "path": ["borderColor", "open", "emphasis"],
4352
4871
  "value": "#1a7f37",
4353
- "type": "color"
4872
+ "type": "color",
4873
+ "description": "Strong border for open state badges"
4354
4874
  },
4355
4875
  "borderColor-open-muted": {
4356
4876
  "key": "{borderColor.open.muted}",
@@ -4420,6 +4940,10 @@
4420
4940
  "isSource": true,
4421
4941
  "$type": "color"
4422
4942
  }
4943
+ },
4944
+ "org.primer.llm": {
4945
+ "usage": ["open-muted", "open-issue", "open-pr"],
4946
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4423
4947
  }
4424
4948
  },
4425
4949
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4427,6 +4951,7 @@
4427
4951
  "original": {
4428
4952
  "$value": "{borderColor.success.muted}",
4429
4953
  "$type": "color",
4954
+ "$description": "Subtle border for open state indicators",
4430
4955
  "$extensions": {
4431
4956
  "org.primer.figma": {
4432
4957
  "collection": "mode",
@@ -4493,6 +5018,10 @@
4493
5018
  "isSource": true,
4494
5019
  "$type": "color"
4495
5020
  }
5021
+ },
5022
+ "org.primer.llm": {
5023
+ "usage": ["open-muted", "open-issue", "open-pr"],
5024
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4496
5025
  }
4497
5026
  },
4498
5027
  "key": "{borderColor.open.muted}"
@@ -4501,7 +5030,8 @@
4501
5030
  "attributes": {},
4502
5031
  "path": ["borderColor", "open", "muted"],
4503
5032
  "value": "#4ac26b66",
4504
- "type": "color"
5033
+ "type": "color",
5034
+ "description": "Subtle border for open state indicators"
4505
5035
  },
4506
5036
  "borderColor-severe-emphasis": {
4507
5037
  "key": "{borderColor.severe.emphasis}",
@@ -4519,6 +5049,10 @@
4519
5049
  "light-tritanopia": "#cf222e",
4520
5050
  "light-tritanopia-high-contrast": "#cf222e",
4521
5051
  "dark-dimmed-high-contrast": "#ffb77c"
5052
+ },
5053
+ "org.primer.llm": {
5054
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5055
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4522
5056
  }
4523
5057
  },
4524
5058
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4526,6 +5060,7 @@
4526
5060
  "original": {
4527
5061
  "$value": "{base.color.orange.5}",
4528
5062
  "$type": "color",
5063
+ "$description": "Strong severe border for prominent high-priority warnings",
4529
5064
  "$extensions": {
4530
5065
  "org.primer.figma": {
4531
5066
  "collection": "mode",
@@ -4540,6 +5075,10 @@
4540
5075
  "light-tritanopia": "{base.color.red.5}",
4541
5076
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4542
5077
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5078
+ },
5079
+ "org.primer.llm": {
5080
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5081
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4543
5082
  }
4544
5083
  },
4545
5084
  "key": "{borderColor.severe.emphasis}"
@@ -4548,7 +5087,8 @@
4548
5087
  "attributes": {},
4549
5088
  "path": ["borderColor", "severe", "emphasis"],
4550
5089
  "value": "#bc4c00",
4551
- "type": "color"
5090
+ "type": "color",
5091
+ "description": "Strong severe border for prominent high-priority warnings"
4552
5092
  },
4553
5093
  "borderColor-severe-muted": {
4554
5094
  "key": "{borderColor.severe.muted}",
@@ -4607,6 +5147,10 @@
4607
5147
  "isSource": true,
4608
5148
  "$type": "color"
4609
5149
  }
5150
+ },
5151
+ "org.primer.llm": {
5152
+ "usage": ["severe-muted", "urgent-muted"],
5153
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4610
5154
  }
4611
5155
  },
4612
5156
  "alpha": 0.4,
@@ -4615,6 +5159,7 @@
4615
5159
  "original": {
4616
5160
  "$value": "{base.color.orange.3}",
4617
5161
  "$type": "color",
5162
+ "$description": "Subtle severe border for high-priority warnings",
4618
5163
  "$extensions": {
4619
5164
  "org.primer.figma": {
4620
5165
  "collection": "mode",
@@ -4670,6 +5215,10 @@
4670
5215
  "isSource": true,
4671
5216
  "$type": "color"
4672
5217
  }
5218
+ },
5219
+ "org.primer.llm": {
5220
+ "usage": ["severe-muted", "urgent-muted"],
5221
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4673
5222
  }
4674
5223
  },
4675
5224
  "alpha": 0.4,
@@ -4679,7 +5228,8 @@
4679
5228
  "attributes": {},
4680
5229
  "path": ["borderColor", "severe", "muted"],
4681
5230
  "value": "#fb8f4466",
4682
- "type": "color"
5231
+ "type": "color",
5232
+ "description": "Subtle severe border for high-priority warnings"
4683
5233
  },
4684
5234
  "borderColor-sponsors-emphasis": {
4685
5235
  "key": "{borderColor.sponsors.emphasis}",
@@ -4694,6 +5244,10 @@
4694
5244
  },
4695
5245
  "org.primer.overrides": {
4696
5246
  "dark-dimmed-high-contrast": "#ff80c8"
5247
+ },
5248
+ "org.primer.llm": {
5249
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5250
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4697
5251
  }
4698
5252
  },
4699
5253
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4701,6 +5255,7 @@
4701
5255
  "original": {
4702
5256
  "$value": "{base.color.pink.5}",
4703
5257
  "$type": "color",
5258
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4704
5259
  "$extensions": {
4705
5260
  "org.primer.figma": {
4706
5261
  "collection": "mode",
@@ -4712,6 +5267,10 @@
4712
5267
  },
4713
5268
  "org.primer.overrides": {
4714
5269
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5270
+ },
5271
+ "org.primer.llm": {
5272
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5273
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4715
5274
  }
4716
5275
  },
4717
5276
  "key": "{borderColor.sponsors.emphasis}"
@@ -4720,7 +5279,8 @@
4720
5279
  "attributes": {},
4721
5280
  "path": ["borderColor", "sponsors", "emphasis"],
4722
5281
  "value": "#bf3989",
4723
- "type": "color"
5282
+ "type": "color",
5283
+ "description": "Strong border for prominent GitHub Sponsors elements"
4724
5284
  },
4725
5285
  "borderColor-sponsors-muted": {
4726
5286
  "key": "{borderColor.sponsors.muted}",
@@ -4784,6 +5344,10 @@
4784
5344
  "isSource": true,
4785
5345
  "$type": "color"
4786
5346
  }
5347
+ },
5348
+ "org.primer.llm": {
5349
+ "usage": ["sponsors-muted", "funding-muted"],
5350
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4787
5351
  }
4788
5352
  },
4789
5353
  "alpha": 0.4,
@@ -4792,6 +5356,7 @@
4792
5356
  "original": {
4793
5357
  "$value": "{base.color.pink.3}",
4794
5358
  "$type": "color",
5359
+ "$description": "Subtle border for GitHub Sponsors content",
4795
5360
  "$extensions": {
4796
5361
  "org.primer.figma": {
4797
5362
  "collection": "mode",
@@ -4852,6 +5417,10 @@
4852
5417
  "isSource": true,
4853
5418
  "$type": "color"
4854
5419
  }
5420
+ },
5421
+ "org.primer.llm": {
5422
+ "usage": ["sponsors-muted", "funding-muted"],
5423
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4855
5424
  }
4856
5425
  },
4857
5426
  "alpha": 0.4,
@@ -4861,7 +5430,8 @@
4861
5430
  "attributes": {},
4862
5431
  "path": ["borderColor", "sponsors", "muted"],
4863
5432
  "value": "#ff80c866",
4864
- "type": "color"
5433
+ "type": "color",
5434
+ "description": "Subtle border for GitHub Sponsors content"
4865
5435
  },
4866
5436
  "borderColor-success-emphasis": {
4867
5437
  "key": "{borderColor.success.emphasis}",
@@ -4884,6 +5454,10 @@
4884
5454
  "light-protanopia-deuteranopia": "#0969da",
4885
5455
  "light-protanopia-deuteranopia-high-contrast": "#0969da",
4886
5456
  "dark-dimmed-high-contrast": "#6fdd8b"
5457
+ },
5458
+ "org.primer.llm": {
5459
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5460
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4887
5461
  }
4888
5462
  },
4889
5463
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4891,6 +5465,7 @@
4891
5465
  "original": {
4892
5466
  "$value": "{base.color.green.5}",
4893
5467
  "$type": "color",
5468
+ "$description": "Strong success border for prominent positive elements",
4894
5469
  "$extensions": {
4895
5470
  "org.primer.figma": {
4896
5471
  "collection": "mode",
@@ -4910,6 +5485,10 @@
4910
5485
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4911
5486
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4912
5487
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5488
+ },
5489
+ "org.primer.llm": {
5490
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5491
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4913
5492
  }
4914
5493
  },
4915
5494
  "key": "{borderColor.success.emphasis}"
@@ -4918,7 +5497,8 @@
4918
5497
  "attributes": {},
4919
5498
  "path": ["borderColor", "success", "emphasis"],
4920
5499
  "value": "#1a7f37",
4921
- "type": "color"
5500
+ "type": "color",
5501
+ "description": "Strong success border for prominent positive elements"
4922
5502
  },
4923
5503
  "borderColor-success-muted": {
4924
5504
  "key": "{borderColor.success.muted}",
@@ -5009,6 +5589,10 @@
5009
5589
  "isSource": true,
5010
5590
  "$type": "color"
5011
5591
  }
5592
+ },
5593
+ "org.primer.llm": {
5594
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5595
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5012
5596
  }
5013
5597
  },
5014
5598
  "alpha": 0.4,
@@ -5017,6 +5601,7 @@
5017
5601
  "original": {
5018
5602
  "$value": "{base.color.green.3}",
5019
5603
  "$type": "color",
5604
+ "$description": "Subtle success border for positive feedback elements",
5020
5605
  "$extensions": {
5021
5606
  "org.primer.figma": {
5022
5607
  "collection": "mode",
@@ -5104,6 +5689,10 @@
5104
5689
  "isSource": true,
5105
5690
  "$type": "color"
5106
5691
  }
5692
+ },
5693
+ "org.primer.llm": {
5694
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5695
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5107
5696
  }
5108
5697
  },
5109
5698
  "alpha": 0.4,
@@ -5113,7 +5702,8 @@
5113
5702
  "attributes": {},
5114
5703
  "path": ["borderColor", "success", "muted"],
5115
5704
  "value": "#4ac26b66",
5116
- "type": "color"
5705
+ "type": "color",
5706
+ "description": "Subtle success border for positive feedback elements"
5117
5707
  },
5118
5708
  "borderColor-translucent": {
5119
5709
  "key": "{borderColor.translucent}",
@@ -5173,6 +5763,10 @@
5173
5763
  "isSource": true,
5174
5764
  "$type": "color"
5175
5765
  }
5766
+ },
5767
+ "org.primer.llm": {
5768
+ "usage": ["overlay-border", "translucent-border"],
5769
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5176
5770
  }
5177
5771
  },
5178
5772
  "alpha": 0.15,
@@ -5181,6 +5775,7 @@
5181
5775
  "original": {
5182
5776
  "$value": "{base.color.neutral.13}",
5183
5777
  "$type": "color",
5778
+ "$description": "Semi-transparent border for overlays and layered elements",
5184
5779
  "$extensions": {
5185
5780
  "org.primer.figma": {
5186
5781
  "collection": "mode",
@@ -5237,6 +5832,10 @@
5237
5832
  "isSource": true,
5238
5833
  "$type": "color"
5239
5834
  }
5835
+ },
5836
+ "org.primer.llm": {
5837
+ "usage": ["overlay-border", "translucent-border"],
5838
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5240
5839
  }
5241
5840
  },
5242
5841
  "alpha": 0.15,
@@ -5246,7 +5845,8 @@
5246
5845
  "attributes": {},
5247
5846
  "path": ["borderColor", "translucent"],
5248
5847
  "value": "#1f232826",
5249
- "type": "color"
5848
+ "type": "color",
5849
+ "description": "Semi-transparent border for overlays and layered elements"
5250
5850
  },
5251
5851
  "borderColor-transparent": {
5252
5852
  "key": "{borderColor.transparent}",
@@ -5262,6 +5862,7 @@
5262
5862
  "original": {
5263
5863
  "$value": "{base.color.transparent}",
5264
5864
  "$type": "color",
5865
+ "$description": "Fully transparent border",
5265
5866
  "$extensions": {
5266
5867
  "org.primer.figma": {
5267
5868
  "collection": "mode",
@@ -5275,7 +5876,8 @@
5275
5876
  "attributes": {},
5276
5877
  "path": ["borderColor", "transparent"],
5277
5878
  "value": "#ffffff00",
5278
- "type": "color"
5879
+ "type": "color",
5880
+ "description": "Fully transparent border"
5279
5881
  },
5280
5882
  "borderColor-upsell-emphasis": {
5281
5883
  "key": "{borderColor.upsell.emphasis}",
@@ -5287,6 +5889,10 @@
5287
5889
  "codeSyntax": {
5288
5890
  "web": "var(--borderColor-upsell-emphasis)"
5289
5891
  }
5892
+ },
5893
+ "org.primer.llm": {
5894
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5895
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5290
5896
  }
5291
5897
  },
5292
5898
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5294,6 +5900,7 @@
5294
5900
  "original": {
5295
5901
  "$value": "{borderColor.done.emphasis}",
5296
5902
  "$type": "color",
5903
+ "$description": "Strong border for prominent upsell elements",
5297
5904
  "$extensions": {
5298
5905
  "org.primer.figma": {
5299
5906
  "collection": "mode",
@@ -5302,6 +5909,10 @@
5302
5909
  "codeSyntax": {
5303
5910
  "web": "var(--borderColor-upsell-emphasis)"
5304
5911
  }
5912
+ },
5913
+ "org.primer.llm": {
5914
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5915
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5305
5916
  }
5306
5917
  },
5307
5918
  "key": "{borderColor.upsell.emphasis}"
@@ -5310,7 +5921,8 @@
5310
5921
  "attributes": {},
5311
5922
  "path": ["borderColor", "upsell", "emphasis"],
5312
5923
  "value": "#8250df",
5313
- "type": "color"
5924
+ "type": "color",
5925
+ "description": "Strong border for prominent upsell elements"
5314
5926
  },
5315
5927
  "borderColor-upsell-muted": {
5316
5928
  "key": "{borderColor.upsell.muted}",
@@ -5322,6 +5934,10 @@
5322
5934
  "codeSyntax": {
5323
5935
  "web": "var(--borderColor-upsell-muted)"
5324
5936
  }
5937
+ },
5938
+ "org.primer.llm": {
5939
+ "usage": ["upsell-muted", "premium-muted"],
5940
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5325
5941
  }
5326
5942
  },
5327
5943
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5329,6 +5945,7 @@
5329
5945
  "original": {
5330
5946
  "$value": "{borderColor.done.muted}",
5331
5947
  "$type": "color",
5948
+ "$description": "Subtle border for upsell and promotional content",
5332
5949
  "$extensions": {
5333
5950
  "org.primer.figma": {
5334
5951
  "collection": "mode",
@@ -5337,6 +5954,10 @@
5337
5954
  "codeSyntax": {
5338
5955
  "web": "var(--borderColor-upsell-muted)"
5339
5956
  }
5957
+ },
5958
+ "org.primer.llm": {
5959
+ "usage": ["upsell-muted", "premium-muted"],
5960
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5340
5961
  }
5341
5962
  },
5342
5963
  "key": "{borderColor.upsell.muted}"
@@ -5345,7 +5966,8 @@
5345
5966
  "attributes": {},
5346
5967
  "path": ["borderColor", "upsell", "muted"],
5347
5968
  "value": "#c297ff66",
5348
- "type": "color"
5969
+ "type": "color",
5970
+ "description": "Subtle border for upsell and promotional content"
5349
5971
  },
5350
5972
  "button-danger-bgColor-active": {
5351
5973
  "key": "{button.danger.bgColor.active}",
@@ -36490,6 +37112,10 @@
36490
37112
  "light-high-contrast": "#0550ae",
36491
37113
  "light-tritanopia-high-contrast": "#0550ae",
36492
37114
  "light-protanopia-deuteranopia-high-contrast": "#0550ae"
37115
+ },
37116
+ "org.primer.llm": {
37117
+ "usage": ["accent-text", "info-text", "accent-icon"],
37118
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36493
37119
  }
36494
37120
  },
36495
37121
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36497,6 +37123,7 @@
36497
37123
  "original": {
36498
37124
  "$value": "{base.color.blue.5}",
36499
37125
  "$type": "color",
37126
+ "$description": "Accent text for links and interactive elements",
36500
37127
  "$extensions": {
36501
37128
  "org.primer.figma": {
36502
37129
  "collection": "mode",
@@ -36516,6 +37143,10 @@
36516
37143
  "light-high-contrast": "{base.color.blue.6}",
36517
37144
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36518
37145
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37146
+ },
37147
+ "org.primer.llm": {
37148
+ "usage": ["accent-text", "info-text", "accent-icon"],
37149
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36519
37150
  }
36520
37151
  },
36521
37152
  "key": "{fgColor.accent}"
@@ -36524,7 +37155,8 @@
36524
37155
  "attributes": {},
36525
37156
  "path": ["fgColor", "accent"],
36526
37157
  "value": "#0969da",
36527
- "type": "color"
37158
+ "type": "color",
37159
+ "description": "Accent text for links and interactive elements"
36528
37160
  },
36529
37161
  "fgColor-attention": {
36530
37162
  "key": "{fgColor.attention}",
@@ -36543,6 +37175,10 @@
36543
37175
  "light-protanopia-deuteranopia-high-contrast": "#7d4e00",
36544
37176
  "light-tritanopia-high-contrast": "#7d4e00",
36545
37177
  "dark-dimmed-high-contrast": "#fae17d"
37178
+ },
37179
+ "org.primer.llm": {
37180
+ "usage": ["attention-text", "warning-text", "caution-text"],
37181
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36546
37182
  }
36547
37183
  },
36548
37184
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36550,6 +37186,7 @@
36550
37186
  "original": {
36551
37187
  "$value": "{base.color.yellow.5}",
36552
37188
  "$type": "color",
37189
+ "$description": "Attention text for warnings and caution states",
36553
37190
  "$extensions": {
36554
37191
  "org.primer.figma": {
36555
37192
  "collection": "mode",
@@ -36565,6 +37202,10 @@
36565
37202
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36566
37203
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36567
37204
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37205
+ },
37206
+ "org.primer.llm": {
37207
+ "usage": ["attention-text", "warning-text", "caution-text"],
37208
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36568
37209
  }
36569
37210
  },
36570
37211
  "key": "{fgColor.attention}"
@@ -36573,7 +37214,8 @@
36573
37214
  "attributes": {},
36574
37215
  "path": ["fgColor", "attention"],
36575
37216
  "value": "#9a6700",
36576
- "type": "color"
37217
+ "type": "color",
37218
+ "description": "Attention text for warnings and caution states"
36577
37219
  },
36578
37220
  "fgColor-black": {
36579
37221
  "key": "{fgColor.black}",
@@ -36585,6 +37227,10 @@
36585
37227
  },
36586
37228
  "org.primer.overrides": {
36587
37229
  "dark": "#ffffff"
37230
+ },
37231
+ "org.primer.llm": {
37232
+ "doNotUse": true,
37233
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
36588
37234
  }
36589
37235
  },
36590
37236
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36592,6 +37238,7 @@
36592
37238
  "original": {
36593
37239
  "$value": "{base.color.neutral.13}",
36594
37240
  "$type": "color",
37241
+ "$description": "Pure black text",
36595
37242
  "$extensions": {
36596
37243
  "org.primer.figma": {
36597
37244
  "collection": "mode",
@@ -36600,6 +37247,10 @@
36600
37247
  },
36601
37248
  "org.primer.overrides": {
36602
37249
  "dark": "{base.color.neutral.0}"
37250
+ },
37251
+ "org.primer.llm": {
37252
+ "doNotUse": true,
37253
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
36603
37254
  }
36604
37255
  },
36605
37256
  "key": "{fgColor.black}"
@@ -36608,7 +37259,8 @@
36608
37259
  "attributes": {},
36609
37260
  "path": ["fgColor", "black"],
36610
37261
  "value": "#1f2328",
36611
- "type": "color"
37262
+ "type": "color",
37263
+ "description": "Pure black text"
36612
37264
  },
36613
37265
  "fgColor-closed": {
36614
37266
  "key": "{fgColor.closed}",
@@ -36630,6 +37282,10 @@
36630
37282
  "dark-tritanopia-high-contrast": "#59636e",
36631
37283
  "light-tritanopia": "#59636e",
36632
37284
  "light-tritanopia-high-contrast": "#59636e"
37285
+ },
37286
+ "org.primer.llm": {
37287
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37288
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36633
37289
  }
36634
37290
  },
36635
37291
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36637,6 +37293,7 @@
36637
37293
  "original": {
36638
37294
  "$value": "{fgColor.danger}",
36639
37295
  "$type": "color",
37296
+ "$description": "Text color for closed state indicators (issues, PRs)",
36640
37297
  "$extensions": {
36641
37298
  "org.primer.figma": {
36642
37299
  "collection": "mode",
@@ -36655,6 +37312,10 @@
36655
37312
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36656
37313
  "light-tritanopia": "{fgColor.muted}",
36657
37314
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37315
+ },
37316
+ "org.primer.llm": {
37317
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37318
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36658
37319
  }
36659
37320
  },
36660
37321
  "key": "{fgColor.closed}"
@@ -36663,7 +37324,8 @@
36663
37324
  "attributes": {},
36664
37325
  "path": ["fgColor", "closed"],
36665
37326
  "value": "#d1242f",
36666
- "type": "color"
37327
+ "type": "color",
37328
+ "description": "Text color for closed state indicators (issues, PRs)"
36667
37329
  },
36668
37330
  "fgColor-danger": {
36669
37331
  "key": "{fgColor.danger}",
@@ -36687,6 +37349,10 @@
36687
37349
  "dark-tritanopia-high-contrast": "#ff8182",
36688
37350
  "light-high-contrast": "#a40e26",
36689
37351
  "light-tritanopia-high-contrast": "#a40e26"
37352
+ },
37353
+ "org.primer.llm": {
37354
+ "usage": ["danger-text", "error-text", "destructive-text"],
37355
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36690
37356
  }
36691
37357
  },
36692
37358
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36694,6 +37360,7 @@
36694
37360
  "original": {
36695
37361
  "$value": "#d1242f",
36696
37362
  "$type": "color",
37363
+ "$description": "Danger text for errors and destructive actions",
36697
37364
  "$extensions": {
36698
37365
  "org.primer.figma": {
36699
37366
  "collection": "mode",
@@ -36714,6 +37381,10 @@
36714
37381
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36715
37382
  "light-high-contrast": "{base.color.red.6}",
36716
37383
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37384
+ },
37385
+ "org.primer.llm": {
37386
+ "usage": ["danger-text", "error-text", "destructive-text"],
37387
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36717
37388
  }
36718
37389
  },
36719
37390
  "key": "{fgColor.danger}"
@@ -36722,7 +37393,8 @@
36722
37393
  "attributes": {},
36723
37394
  "path": ["fgColor", "danger"],
36724
37395
  "value": "#d1242f",
36725
- "type": "color"
37396
+ "type": "color",
37397
+ "description": "Danger text for errors and destructive actions"
36726
37398
  },
36727
37399
  "fgColor-default": {
36728
37400
  "key": "{fgColor.default}",
@@ -36740,8 +37412,12 @@
36740
37412
  "dark-high-contrast": "#1f2328",
36741
37413
  "dark-tritanopia-high-contrast": "#1f2328",
36742
37414
  "dark-protanopia-deuteranopia-high-contrast": "#1f2328",
36743
- "dark-dimmed": "#393f46",
37415
+ "dark-dimmed": "#25292e",
36744
37416
  "dark-dimmed-high-contrast": "#25292e"
37417
+ },
37418
+ "org.primer.llm": {
37419
+ "usage": ["default-text", "heading", "body-text"],
37420
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36745
37421
  }
36746
37422
  },
36747
37423
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36749,6 +37425,7 @@
36749
37425
  "original": {
36750
37426
  "$value": "{base.color.neutral.13}",
36751
37427
  "$type": "color",
37428
+ "$description": "Default text color for primary content and headings",
36752
37429
  "$extensions": {
36753
37430
  "org.primer.figma": {
36754
37431
  "collection": "mode",
@@ -36763,8 +37440,12 @@
36763
37440
  "dark-high-contrast": "{base.color.neutral.13}",
36764
37441
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36765
37442
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36766
- "dark-dimmed": "{base.color.neutral.11}",
37443
+ "dark-dimmed": "{base.color.neutral.12}",
36767
37444
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37445
+ },
37446
+ "org.primer.llm": {
37447
+ "usage": ["default-text", "heading", "body-text"],
37448
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36768
37449
  }
36769
37450
  },
36770
37451
  "key": "{fgColor.default}"
@@ -36773,7 +37454,8 @@
36773
37454
  "attributes": {},
36774
37455
  "path": ["fgColor", "default"],
36775
37456
  "value": "#1f2328",
36776
- "type": "color"
37457
+ "type": "color",
37458
+ "description": "Default text color for primary content and headings"
36777
37459
  },
36778
37460
  "fgColor-disabled": {
36779
37461
  "key": "{fgColor.disabled}",
@@ -36798,6 +37480,10 @@
36798
37480
  "dark-high-contrast": "#818b98",
36799
37481
  "dark-tritanopia-high-contrast": "#818b98",
36800
37482
  "dark-protanopia-deuteranopia-high-contrast": "#818b98"
37483
+ },
37484
+ "org.primer.llm": {
37485
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37486
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36801
37487
  }
36802
37488
  },
36803
37489
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36805,6 +37491,7 @@
36805
37491
  "original": {
36806
37492
  "$value": "{base.color.neutral.8}",
36807
37493
  "$type": "color",
37494
+ "$description": "Text color for disabled interactive elements",
36808
37495
  "$extensions": {
36809
37496
  "org.primer.figma": {
36810
37497
  "collection": "mode",
@@ -36826,6 +37513,10 @@
36826
37513
  "dark-high-contrast": "{base.color.neutral.8}",
36827
37514
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36828
37515
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37516
+ },
37517
+ "org.primer.llm": {
37518
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37519
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36829
37520
  }
36830
37521
  },
36831
37522
  "key": "{fgColor.disabled}"
@@ -36834,7 +37525,8 @@
36834
37525
  "attributes": {},
36835
37526
  "path": ["fgColor", "disabled"],
36836
37527
  "value": "#818b98",
36837
- "type": "color"
37528
+ "type": "color",
37529
+ "description": "Text color for disabled interactive elements"
36838
37530
  },
36839
37531
  "fgColor-done": {
36840
37532
  "key": "{fgColor.done}",
@@ -36856,6 +37548,10 @@
36856
37548
  "light-high-contrast": "#6639ba",
36857
37549
  "light-protanopia-deuteranopia-high-contrast": "#6639ba",
36858
37550
  "light-tritanopia-high-contrast": "#6639ba"
37551
+ },
37552
+ "org.primer.llm": {
37553
+ "usage": ["done-text", "merged", "completed"],
37554
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36859
37555
  }
36860
37556
  },
36861
37557
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36863,6 +37559,7 @@
36863
37559
  "original": {
36864
37560
  "$value": "{base.color.purple.5}",
36865
37561
  "$type": "color",
37562
+ "$description": "Text color for completed/done state indicators",
36866
37563
  "$extensions": {
36867
37564
  "org.primer.figma": {
36868
37565
  "collection": "mode",
@@ -36881,6 +37578,10 @@
36881
37578
  "light-high-contrast": "{base.color.purple.6}",
36882
37579
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36883
37580
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37581
+ },
37582
+ "org.primer.llm": {
37583
+ "usage": ["done-text", "merged", "completed"],
37584
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36884
37585
  }
36885
37586
  },
36886
37587
  "key": "{fgColor.done}"
@@ -36889,7 +37590,8 @@
36889
37590
  "attributes": {},
36890
37591
  "path": ["fgColor", "done"],
36891
37592
  "value": "#8250df",
36892
- "type": "color"
37593
+ "type": "color",
37594
+ "description": "Text color for completed/done state indicators"
36893
37595
  },
36894
37596
  "fgColor-draft": {
36895
37597
  "key": "{fgColor.draft}",
@@ -36901,6 +37603,10 @@
36901
37603
  "codeSyntax": {
36902
37604
  "web": "var(--fgColor-draft)"
36903
37605
  }
37606
+ },
37607
+ "org.primer.llm": {
37608
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37609
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36904
37610
  }
36905
37611
  },
36906
37612
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36908,6 +37614,7 @@
36908
37614
  "original": {
36909
37615
  "$value": "{fgColor.neutral}",
36910
37616
  "$type": "color",
37617
+ "$description": "Text color for draft state indicators",
36911
37618
  "$extensions": {
36912
37619
  "org.primer.figma": {
36913
37620
  "collection": "mode",
@@ -36916,6 +37623,10 @@
36916
37623
  "codeSyntax": {
36917
37624
  "web": "var(--fgColor-draft)"
36918
37625
  }
37626
+ },
37627
+ "org.primer.llm": {
37628
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37629
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36919
37630
  }
36920
37631
  },
36921
37632
  "key": "{fgColor.draft}"
@@ -36924,7 +37635,8 @@
36924
37635
  "attributes": {},
36925
37636
  "path": ["fgColor", "draft"],
36926
37637
  "value": "#59636e",
36927
- "type": "color"
37638
+ "type": "color",
37639
+ "description": "Text color for draft state indicators"
36928
37640
  },
36929
37641
  "fgColor-link": {
36930
37642
  "key": "{fgColor.link}",
@@ -36936,6 +37648,10 @@
36936
37648
  "codeSyntax": {
36937
37649
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36938
37650
  }
37651
+ },
37652
+ "org.primer.llm": {
37653
+ "usage": ["link-text", "hyperlink"],
37654
+ "rules": "MUST use for all text links. Provides expected link affordance."
36939
37655
  }
36940
37656
  },
36941
37657
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36943,6 +37659,7 @@
36943
37659
  "original": {
36944
37660
  "$value": "{fgColor.accent}",
36945
37661
  "$type": "color",
37662
+ "$description": "Text color for hyperlinks",
36946
37663
  "$extensions": {
36947
37664
  "org.primer.figma": {
36948
37665
  "collection": "mode",
@@ -36951,6 +37668,10 @@
36951
37668
  "codeSyntax": {
36952
37669
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36953
37670
  }
37671
+ },
37672
+ "org.primer.llm": {
37673
+ "usage": ["link-text", "hyperlink"],
37674
+ "rules": "MUST use for all text links. Provides expected link affordance."
36954
37675
  }
36955
37676
  },
36956
37677
  "key": "{fgColor.link}"
@@ -36959,7 +37680,8 @@
36959
37680
  "attributes": {},
36960
37681
  "path": ["fgColor", "link"],
36961
37682
  "value": "#0969da",
36962
- "type": "color"
37683
+ "type": "color",
37684
+ "description": "Text color for hyperlinks"
36963
37685
  },
36964
37686
  "fgColor-muted": {
36965
37687
  "key": "{fgColor.muted}",
@@ -36980,6 +37702,10 @@
36980
37702
  "dark-dimmed-high-contrast": "#454c54",
36981
37703
  "dark-tritanopia-high-contrast": "#454c54",
36982
37704
  "dark-protanopia-deuteranopia-high-contrast": "#454c54"
37705
+ },
37706
+ "org.primer.llm": {
37707
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37708
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
36983
37709
  }
36984
37710
  },
36985
37711
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36987,6 +37713,7 @@
36987
37713
  "original": {
36988
37714
  "$value": "{base.color.neutral.9}",
36989
37715
  "$type": "color",
37716
+ "$description": "Muted text for secondary content and less important information",
36990
37717
  "$extensions": {
36991
37718
  "org.primer.figma": {
36992
37719
  "collection": "mode",
@@ -37004,6 +37731,10 @@
37004
37731
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37005
37732
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37006
37733
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37734
+ },
37735
+ "org.primer.llm": {
37736
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37737
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37007
37738
  }
37008
37739
  },
37009
37740
  "key": "{fgColor.muted}"
@@ -37012,7 +37743,8 @@
37012
37743
  "attributes": {},
37013
37744
  "path": ["fgColor", "muted"],
37014
37745
  "value": "#59636e",
37015
- "type": "color"
37746
+ "type": "color",
37747
+ "description": "Muted text for secondary content and less important information"
37016
37748
  },
37017
37749
  "fgColor-neutral": {
37018
37750
  "key": "{fgColor.neutral}",
@@ -37030,6 +37762,10 @@
37030
37762
  "dark-dimmed-high-contrast": "#393f46",
37031
37763
  "dark-tritanopia-high-contrast": "#393f46",
37032
37764
  "dark-protanopia-deuteranopia-high-contrast": "#393f46"
37765
+ },
37766
+ "org.primer.llm": {
37767
+ "usage": ["neutral-icon", "neutral-text"],
37768
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37033
37769
  }
37034
37770
  },
37035
37771
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37037,6 +37773,7 @@
37037
37773
  "original": {
37038
37774
  "$value": "{base.color.neutral.9}",
37039
37775
  "$type": "color",
37776
+ "$description": "Neutral semantic text for icons and secondary elements",
37040
37777
  "$extensions": {
37041
37778
  "org.primer.figma": {
37042
37779
  "collection": "mode",
@@ -37051,6 +37788,10 @@
37051
37788
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37052
37789
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37053
37790
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37791
+ },
37792
+ "org.primer.llm": {
37793
+ "usage": ["neutral-icon", "neutral-text"],
37794
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37054
37795
  }
37055
37796
  },
37056
37797
  "key": "{fgColor.neutral}"
@@ -37059,7 +37800,8 @@
37059
37800
  "attributes": {},
37060
37801
  "path": ["fgColor", "neutral"],
37061
37802
  "value": "#59636e",
37062
- "type": "color"
37803
+ "type": "color",
37804
+ "description": "Neutral semantic text for icons and secondary elements"
37063
37805
  },
37064
37806
  "fgColor-onEmphasis": {
37065
37807
  "key": "{fgColor.onEmphasis}",
@@ -37076,6 +37818,10 @@
37076
37818
  "dark": "#1f2328",
37077
37819
  "dark-dimmed": "#25292e",
37078
37820
  "dark-dimmed-high-contrast": "#ffffff"
37821
+ },
37822
+ "org.primer.llm": {
37823
+ "usage": ["text-on-emphasis", "contrast-text"],
37824
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37079
37825
  }
37080
37826
  },
37081
37827
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37083,6 +37829,7 @@
37083
37829
  "original": {
37084
37830
  "$value": "{base.color.neutral.0}",
37085
37831
  "$type": "color",
37832
+ "$description": "Text color for use on emphasis backgrounds",
37086
37833
  "$extensions": {
37087
37834
  "org.primer.figma": {
37088
37835
  "collection": "mode",
@@ -37096,6 +37843,10 @@
37096
37843
  "dark": "{base.color.neutral.13}",
37097
37844
  "dark-dimmed": "{base.color.neutral.12}",
37098
37845
  "dark-dimmed-high-contrast": "#ffffff"
37846
+ },
37847
+ "org.primer.llm": {
37848
+ "usage": ["text-on-emphasis", "contrast-text"],
37849
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37099
37850
  }
37100
37851
  },
37101
37852
  "key": "{fgColor.onEmphasis}"
@@ -37104,7 +37855,8 @@
37104
37855
  "attributes": {},
37105
37856
  "path": ["fgColor", "onEmphasis"],
37106
37857
  "value": "#ffffff",
37107
- "type": "color"
37858
+ "type": "color",
37859
+ "description": "Text color for use on emphasis backgrounds"
37108
37860
  },
37109
37861
  "fgColor-onInverse": {
37110
37862
  "key": "{fgColor.onInverse}",
@@ -37113,6 +37865,10 @@
37113
37865
  "collection": "mode",
37114
37866
  "group": "semantic",
37115
37867
  "scopes": ["fgColor"]
37868
+ },
37869
+ "org.primer.llm": {
37870
+ "usage": ["text-on-inverse", "inverse-text"],
37871
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37116
37872
  }
37117
37873
  },
37118
37874
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37120,11 +37876,16 @@
37120
37876
  "original": {
37121
37877
  "$value": "{base.color.neutral.0}",
37122
37878
  "$type": "color",
37879
+ "$description": "Text color for use on inverse backgrounds",
37123
37880
  "$extensions": {
37124
37881
  "org.primer.figma": {
37125
37882
  "collection": "mode",
37126
37883
  "group": "semantic",
37127
37884
  "scopes": ["fgColor"]
37885
+ },
37886
+ "org.primer.llm": {
37887
+ "usage": ["text-on-inverse", "inverse-text"],
37888
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37128
37889
  }
37129
37890
  },
37130
37891
  "key": "{fgColor.onInverse}"
@@ -37133,7 +37894,8 @@
37133
37894
  "attributes": {},
37134
37895
  "path": ["fgColor", "onInverse"],
37135
37896
  "value": "#ffffff",
37136
- "type": "color"
37897
+ "type": "color",
37898
+ "description": "Text color for use on inverse backgrounds"
37137
37899
  },
37138
37900
  "fgColor-open": {
37139
37901
  "key": "{fgColor.open}",
@@ -37155,6 +37917,10 @@
37155
37917
  "dark-tritanopia-high-contrast": "#ffaba8",
37156
37918
  "light-tritanopia": "#cf222e",
37157
37919
  "light-tritanopia-high-contrast": "#a40e26"
37920
+ },
37921
+ "org.primer.llm": {
37922
+ "usage": ["open-text", "open-issue", "open-pr"],
37923
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37158
37924
  }
37159
37925
  },
37160
37926
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37162,6 +37928,7 @@
37162
37928
  "original": {
37163
37929
  "$value": "{fgColor.success}",
37164
37930
  "$type": "color",
37931
+ "$description": "Text color for open state indicators (issues, PRs)",
37165
37932
  "$extensions": {
37166
37933
  "org.primer.figma": {
37167
37934
  "collection": "mode",
@@ -37180,6 +37947,10 @@
37180
37947
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37181
37948
  "light-tritanopia": "{base.color.red.5}",
37182
37949
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37950
+ },
37951
+ "org.primer.llm": {
37952
+ "usage": ["open-text", "open-issue", "open-pr"],
37953
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37183
37954
  }
37184
37955
  },
37185
37956
  "key": "{fgColor.open}"
@@ -37188,7 +37959,8 @@
37188
37959
  "attributes": {},
37189
37960
  "path": ["fgColor", "open"],
37190
37961
  "value": "#1a7f37",
37191
- "type": "color"
37962
+ "type": "color",
37963
+ "description": "Text color for open state indicators (issues, PRs)"
37192
37964
  },
37193
37965
  "fgColor-severe": {
37194
37966
  "key": "{fgColor.severe}",
@@ -37212,6 +37984,10 @@
37212
37984
  "light-tritanopia": "#cf222e",
37213
37985
  "light-tritanopia-high-contrast": "#a40e26",
37214
37986
  "light-protanopia-deuteranopia-high-contrast": "#953800"
37987
+ },
37988
+ "org.primer.llm": {
37989
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
37990
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37215
37991
  }
37216
37992
  },
37217
37993
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37219,6 +37995,7 @@
37219
37995
  "original": {
37220
37996
  "$value": "{base.color.orange.5}",
37221
37997
  "$type": "color",
37998
+ "$description": "Severe text for high-priority warnings",
37222
37999
  "$extensions": {
37223
38000
  "org.primer.figma": {
37224
38001
  "collection": "mode",
@@ -37239,6 +38016,10 @@
37239
38016
  "light-tritanopia": "{base.color.red.5}",
37240
38017
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37241
38018
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
38019
+ },
38020
+ "org.primer.llm": {
38021
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38022
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37242
38023
  }
37243
38024
  },
37244
38025
  "key": "{fgColor.severe}"
@@ -37247,7 +38028,8 @@
37247
38028
  "attributes": {},
37248
38029
  "path": ["fgColor", "severe"],
37249
38030
  "value": "#bc4c00",
37250
- "type": "color"
38031
+ "type": "color",
38032
+ "description": "Severe text for high-priority warnings"
37251
38033
  },
37252
38034
  "fgColor-sponsors": {
37253
38035
  "key": "{fgColor.sponsors}",
@@ -37269,6 +38051,10 @@
37269
38051
  "light-high-contrast": "#99286e",
37270
38052
  "light-protanopia-deuteranopia-high-contrast": "#99286e",
37271
38053
  "light-tritanopia-high-contrast": "#99286e"
38054
+ },
38055
+ "org.primer.llm": {
38056
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38057
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37272
38058
  }
37273
38059
  },
37274
38060
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37276,6 +38062,7 @@
37276
38062
  "original": {
37277
38063
  "$value": "{base.color.pink.5}",
37278
38064
  "$type": "color",
38065
+ "$description": "Text color for GitHub Sponsors content",
37279
38066
  "$extensions": {
37280
38067
  "org.primer.figma": {
37281
38068
  "collection": "mode",
@@ -37294,6 +38081,10 @@
37294
38081
  "light-high-contrast": "{base.color.pink.6}",
37295
38082
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37296
38083
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38084
+ },
38085
+ "org.primer.llm": {
38086
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38087
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37297
38088
  }
37298
38089
  },
37299
38090
  "key": "{fgColor.sponsors}"
@@ -37302,7 +38093,8 @@
37302
38093
  "attributes": {},
37303
38094
  "path": ["fgColor", "sponsors"],
37304
38095
  "value": "#bf3989",
37305
- "type": "color"
38096
+ "type": "color",
38097
+ "description": "Text color for GitHub Sponsors content"
37306
38098
  },
37307
38099
  "fgColor-success": {
37308
38100
  "key": "{fgColor.success}",
@@ -37328,6 +38120,10 @@
37328
38120
  "dark-tritanopia-high-contrast": "#80ccff",
37329
38121
  "light-tritanopia": "#0969da",
37330
38122
  "light-tritanopia-high-contrast": "#0550ae"
38123
+ },
38124
+ "org.primer.llm": {
38125
+ "usage": ["success-text", "positive-text", "success-icon"],
38126
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37331
38127
  }
37332
38128
  },
37333
38129
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37335,6 +38131,7 @@
37335
38131
  "original": {
37336
38132
  "$value": "{base.color.green.5}",
37337
38133
  "$type": "color",
38134
+ "$description": "Success text for positive feedback and completed states",
37338
38135
  "$extensions": {
37339
38136
  "org.primer.figma": {
37340
38137
  "collection": "mode",
@@ -37357,6 +38154,10 @@
37357
38154
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37358
38155
  "light-tritanopia": "{base.color.blue.5}",
37359
38156
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38157
+ },
38158
+ "org.primer.llm": {
38159
+ "usage": ["success-text", "positive-text", "success-icon"],
38160
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37360
38161
  }
37361
38162
  },
37362
38163
  "key": "{fgColor.success}"
@@ -37365,7 +38166,8 @@
37365
38166
  "attributes": {},
37366
38167
  "path": ["fgColor", "success"],
37367
38168
  "value": "#1a7f37",
37368
- "type": "color"
38169
+ "type": "color",
38170
+ "description": "Success text for positive feedback and completed states"
37369
38171
  },
37370
38172
  "fgColor-upsell": {
37371
38173
  "key": "{fgColor.upsell}",
@@ -37377,6 +38179,10 @@
37377
38179
  "codeSyntax": {
37378
38180
  "web": "var(--fgColor-upsell)"
37379
38181
  }
38182
+ },
38183
+ "org.primer.llm": {
38184
+ "usage": ["upsell-text", "premium-text", "promotional"],
38185
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37380
38186
  }
37381
38187
  },
37382
38188
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37384,6 +38190,7 @@
37384
38190
  "original": {
37385
38191
  "$value": "{fgColor.done}",
37386
38192
  "$type": "color",
38193
+ "$description": "Text color for upsell and promotional content",
37387
38194
  "$extensions": {
37388
38195
  "org.primer.figma": {
37389
38196
  "collection": "mode",
@@ -37392,6 +38199,10 @@
37392
38199
  "codeSyntax": {
37393
38200
  "web": "var(--fgColor-upsell)"
37394
38201
  }
38202
+ },
38203
+ "org.primer.llm": {
38204
+ "usage": ["upsell-text", "premium-text", "promotional"],
38205
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37395
38206
  }
37396
38207
  },
37397
38208
  "key": "{fgColor.upsell}"
@@ -37400,7 +38211,8 @@
37400
38211
  "attributes": {},
37401
38212
  "path": ["fgColor", "upsell"],
37402
38213
  "value": "#8250df",
37403
- "type": "color"
38214
+ "type": "color",
38215
+ "description": "Text color for upsell and promotional content"
37404
38216
  },
37405
38217
  "fgColor-white": {
37406
38218
  "key": "{fgColor.white}",
@@ -37412,6 +38224,10 @@
37412
38224
  },
37413
38225
  "org.primer.overrides": {
37414
38226
  "dark": "#1f2328"
38227
+ },
38228
+ "org.primer.llm": {
38229
+ "doNotUse": true,
38230
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
37415
38231
  }
37416
38232
  },
37417
38233
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37419,6 +38235,7 @@
37419
38235
  "original": {
37420
38236
  "$value": "{base.color.neutral.0}",
37421
38237
  "$type": "color",
38238
+ "$description": "Pure white text",
37422
38239
  "$extensions": {
37423
38240
  "org.primer.figma": {
37424
38241
  "collection": "mode",
@@ -37427,6 +38244,10 @@
37427
38244
  },
37428
38245
  "org.primer.overrides": {
37429
38246
  "dark": "{base.color.neutral.13}"
38247
+ },
38248
+ "org.primer.llm": {
38249
+ "doNotUse": true,
38250
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
37430
38251
  }
37431
38252
  },
37432
38253
  "key": "{fgColor.white}"
@@ -37435,10 +38256,17 @@
37435
38256
  "attributes": {},
37436
38257
  "path": ["fgColor", "white"],
37437
38258
  "value": "#ffffff",
37438
- "type": "color"
38259
+ "type": "color",
38260
+ "description": "Pure white text"
37439
38261
  },
37440
38262
  "focus-outline": {
37441
38263
  "key": "{focus.outline}",
38264
+ "$extensions": {
38265
+ "org.primer.llm": {
38266
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38267
+ "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
38268
+ }
38269
+ },
37442
38270
  "filePath": "src/tokens/functional/border/border.json5",
37443
38271
  "isSource": true,
37444
38272
  "original": {
@@ -37448,13 +38276,21 @@
37448
38276
  "width": "2px"
37449
38277
  },
37450
38278
  "$type": "border",
38279
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38280
+ "$extensions": {
38281
+ "org.primer.llm": {
38282
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38283
+ "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
38284
+ }
38285
+ },
37451
38286
  "key": "{focus.outline}"
37452
38287
  },
37453
38288
  "name": "focus-outline",
37454
38289
  "attributes": {},
37455
38290
  "path": ["focus", "outline"],
37456
38291
  "value": "2px solid #0969da",
37457
- "type": "border"
38292
+ "type": "border",
38293
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37458
38294
  },
37459
38295
  "focus-outlineColor": {
37460
38296
  "key": "{focus.outlineColor}",
@@ -37463,6 +38299,10 @@
37463
38299
  "collection": "mode",
37464
38300
  "group": "component (internal)",
37465
38301
  "scopes": ["borderColor", "effectColor"]
38302
+ },
38303
+ "org.primer.llm": {
38304
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38305
+ "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
37466
38306
  }
37467
38307
  },
37468
38308
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37470,11 +38310,16 @@
37470
38310
  "original": {
37471
38311
  "$value": "{borderColor.accent.emphasis}",
37472
38312
  "$type": "color",
38313
+ "$description": "Outline color for focus states on interactive elements",
37473
38314
  "$extensions": {
37474
38315
  "org.primer.figma": {
37475
38316
  "collection": "mode",
37476
38317
  "group": "component (internal)",
37477
38318
  "scopes": ["borderColor", "effectColor"]
38319
+ },
38320
+ "org.primer.llm": {
38321
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38322
+ "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
37478
38323
  }
37479
38324
  },
37480
38325
  "key": "{focus.outlineColor}"
@@ -37483,7 +38328,8 @@
37483
38328
  "attributes": {},
37484
38329
  "path": ["focus", "outlineColor"],
37485
38330
  "value": "#0969da",
37486
- "type": "color"
38331
+ "type": "color",
38332
+ "description": "Outline color for focus states on interactive elements"
37487
38333
  },
37488
38334
  "header-bgColor": {
37489
38335
  "key": "{header.bgColor}",
@@ -46536,6 +47382,10 @@
46536
47382
  "isSource": true,
46537
47383
  "$type": "color"
46538
47384
  }
47385
+ },
47386
+ "org.primer.llm": {
47387
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47388
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46539
47389
  }
46540
47390
  },
46541
47391
  "alpha": 0.2,
@@ -46544,6 +47394,7 @@
46544
47394
  "original": {
46545
47395
  "$value": "{bgColor.accent.emphasis}",
46546
47396
  "$type": "color",
47397
+ "$description": "Background color for text selection highlights",
46547
47398
  "$extensions": {
46548
47399
  "org.primer.figma": {
46549
47400
  "collection": "mode",
@@ -46558,6 +47409,10 @@
46558
47409
  "isSource": true,
46559
47410
  "$type": "color"
46560
47411
  }
47412
+ },
47413
+ "org.primer.llm": {
47414
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47415
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46561
47416
  }
46562
47417
  },
46563
47418
  "alpha": 0.2,
@@ -46567,7 +47422,8 @@
46567
47422
  "attributes": {},
46568
47423
  "path": ["selection", "bgColor"],
46569
47424
  "value": "#0969da33",
46570
- "type": "color"
47425
+ "type": "color",
47426
+ "description": "Background color for text selection highlights"
46571
47427
  },
46572
47428
  "shadow-floating-large": {
46573
47429
  "key": "{shadow.floating.large}",
@@ -46600,6 +47456,10 @@
46600
47456
  "isSource": true,
46601
47457
  "$type": "shadow"
46602
47458
  }
47459
+ },
47460
+ "org.primer.llm": {
47461
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47462
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46603
47463
  }
46604
47464
  },
46605
47465
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46624,6 +47484,7 @@
46624
47484
  }
46625
47485
  ],
46626
47486
  "$type": "shadow",
47487
+ "$description": "Large floating shadow for modals and dialogs",
46627
47488
  "$extensions": {
46628
47489
  "org.primer.figma": {
46629
47490
  "collection": "mode",
@@ -46653,6 +47514,10 @@
46653
47514
  "isSource": true,
46654
47515
  "$type": "shadow"
46655
47516
  }
47517
+ },
47518
+ "org.primer.llm": {
47519
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47520
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46656
47521
  }
46657
47522
  },
46658
47523
  "key": "{shadow.floating.large}"
@@ -46661,7 +47526,8 @@
46661
47526
  "attributes": {},
46662
47527
  "path": ["shadow", "floating", "large"],
46663
47528
  "value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
46664
- "type": "shadow"
47529
+ "type": "shadow",
47530
+ "description": "Large floating shadow for modals and dialogs"
46665
47531
  },
46666
47532
  "shadow-floating-legacy": {
46667
47533
  "key": "{shadow.floating.legacy}",
@@ -46691,6 +47557,10 @@
46691
47557
  "isSource": true,
46692
47558
  "$type": "shadow"
46693
47559
  }
47560
+ },
47561
+ "org.primer.llm": {
47562
+ "usage": ["legacy-component", "backward-compatibility"],
47563
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46694
47564
  }
46695
47565
  },
46696
47566
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46715,6 +47585,7 @@
46715
47585
  }
46716
47586
  ],
46717
47587
  "$type": "shadow",
47588
+ "$description": "Legacy floating shadow for backward compatibility",
46718
47589
  "$extensions": {
46719
47590
  "org.primer.figma": {},
46720
47591
  "org.primer.overrides": {
@@ -46741,6 +47612,10 @@
46741
47612
  "isSource": true,
46742
47613
  "$type": "shadow"
46743
47614
  }
47615
+ },
47616
+ "org.primer.llm": {
47617
+ "usage": ["legacy-component", "backward-compatibility"],
47618
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46744
47619
  }
46745
47620
  },
46746
47621
  "key": "{shadow.floating.legacy}"
@@ -46749,7 +47624,8 @@
46749
47624
  "attributes": {},
46750
47625
  "path": ["shadow", "floating", "legacy"],
46751
47626
  "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
46752
- "type": "shadow"
47627
+ "type": "shadow",
47628
+ "description": "Legacy floating shadow for backward compatibility"
46753
47629
  },
46754
47630
  "shadow-floating-medium": {
46755
47631
  "key": "{shadow.floating.medium}",
@@ -46806,6 +47682,10 @@
46806
47682
  "isSource": true,
46807
47683
  "$type": "shadow"
46808
47684
  }
47685
+ },
47686
+ "org.primer.llm": {
47687
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47688
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
46809
47689
  }
46810
47690
  },
46811
47691
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46854,6 +47734,7 @@
46854
47734
  }
46855
47735
  ],
46856
47736
  "$type": "shadow",
47737
+ "$description": "Medium floating shadow for popovers and action menus",
46857
47738
  "$extensions": {
46858
47739
  "org.primer.figma": {
46859
47740
  "collection": "mode",
@@ -46907,6 +47788,10 @@
46907
47788
  "isSource": true,
46908
47789
  "$type": "shadow"
46909
47790
  }
47791
+ },
47792
+ "org.primer.llm": {
47793
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47794
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
46910
47795
  }
46911
47796
  },
46912
47797
  "key": "{shadow.floating.medium}"
@@ -46915,7 +47800,8 @@
46915
47800
  "attributes": {},
46916
47801
  "path": ["shadow", "floating", "medium"],
46917
47802
  "value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
46918
- "type": "shadow"
47803
+ "type": "shadow",
47804
+ "description": "Medium floating shadow for popovers and action menus"
46919
47805
  },
46920
47806
  "shadow-floating-small": {
46921
47807
  "key": "{shadow.floating.small}",
@@ -46956,6 +47842,10 @@
46956
47842
  "isSource": true,
46957
47843
  "$type": "shadow"
46958
47844
  }
47845
+ },
47846
+ "org.primer.llm": {
47847
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47848
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
46959
47849
  }
46960
47850
  },
46961
47851
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46988,6 +47878,7 @@
46988
47878
  }
46989
47879
  ],
46990
47880
  "$type": "shadow",
47881
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
46991
47882
  "$extensions": {
46992
47883
  "org.primer.figma": {
46993
47884
  "collection": "mode",
@@ -47025,6 +47916,10 @@
47025
47916
  "isSource": true,
47026
47917
  "$type": "shadow"
47027
47918
  }
47919
+ },
47920
+ "org.primer.llm": {
47921
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47922
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47028
47923
  }
47029
47924
  },
47030
47925
  "key": "{shadow.floating.small}"
@@ -47033,7 +47928,8 @@
47033
47928
  "attributes": {},
47034
47929
  "path": ["shadow", "floating", "small"],
47035
47930
  "value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47036
- "type": "shadow"
47931
+ "type": "shadow",
47932
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47037
47933
  },
47038
47934
  "shadow-floating-xlarge": {
47039
47935
  "key": "{shadow.floating.xlarge}",
@@ -47066,6 +47962,10 @@
47066
47962
  "isSource": true,
47067
47963
  "$type": "shadow"
47068
47964
  }
47965
+ },
47966
+ "org.primer.llm": {
47967
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
47968
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47069
47969
  }
47070
47970
  },
47071
47971
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47090,6 +47990,7 @@
47090
47990
  }
47091
47991
  ],
47092
47992
  "$type": "shadow",
47993
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47093
47994
  "$extensions": {
47094
47995
  "org.primer.figma": {
47095
47996
  "collection": "mode",
@@ -47119,6 +48020,10 @@
47119
48020
  "isSource": true,
47120
48021
  "$type": "shadow"
47121
48022
  }
48023
+ },
48024
+ "org.primer.llm": {
48025
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48026
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47122
48027
  }
47123
48028
  },
47124
48029
  "key": "{shadow.floating.xlarge}"
@@ -47127,7 +48032,8 @@
47127
48032
  "attributes": {},
47128
48033
  "path": ["shadow", "floating", "xlarge"],
47129
48034
  "value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
47130
- "type": "shadow"
48035
+ "type": "shadow",
48036
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47131
48037
  },
47132
48038
  "shadow-inset": {
47133
48039
  "key": "{shadow.inset}",
@@ -47151,6 +48057,10 @@
47151
48057
  "isSource": true,
47152
48058
  "$type": "shadow"
47153
48059
  }
48060
+ },
48061
+ "org.primer.llm": {
48062
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48063
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47154
48064
  }
47155
48065
  },
47156
48066
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47166,6 +48076,7 @@
47166
48076
  "inset": true
47167
48077
  },
47168
48078
  "$type": "shadow",
48079
+ "$description": "Inset shadow for recessed elements",
47169
48080
  "$extensions": {
47170
48081
  "org.primer.figma": {
47171
48082
  "collection": "mode",
@@ -47186,6 +48097,10 @@
47186
48097
  "isSource": true,
47187
48098
  "$type": "shadow"
47188
48099
  }
48100
+ },
48101
+ "org.primer.llm": {
48102
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48103
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47189
48104
  }
47190
48105
  },
47191
48106
  "key": "{shadow.inset}"
@@ -47194,7 +48109,8 @@
47194
48109
  "attributes": {},
47195
48110
  "path": ["shadow", "inset"],
47196
48111
  "value": "inset 0px 1px 0px 0px #1f23280a",
47197
- "type": "shadow"
48112
+ "type": "shadow",
48113
+ "description": "Inset shadow for recessed elements"
47198
48114
  },
47199
48115
  "shadow-resting-medium": {
47200
48116
  "key": "{shadow.resting.medium}",
@@ -47227,6 +48143,10 @@
47227
48143
  "isSource": true,
47228
48144
  "$type": "shadow"
47229
48145
  }
48146
+ },
48147
+ "org.primer.llm": {
48148
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48149
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
47230
48150
  }
47231
48151
  },
47232
48152
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47251,6 +48171,7 @@
47251
48171
  }
47252
48172
  ],
47253
48173
  "$type": "shadow",
48174
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47254
48175
  "$extensions": {
47255
48176
  "org.primer.figma": {
47256
48177
  "collection": "mode",
@@ -47280,6 +48201,10 @@
47280
48201
  "isSource": true,
47281
48202
  "$type": "shadow"
47282
48203
  }
48204
+ },
48205
+ "org.primer.llm": {
48206
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48207
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
47283
48208
  }
47284
48209
  },
47285
48210
  "key": "{shadow.resting.medium}"
@@ -47288,7 +48213,8 @@
47288
48213
  "attributes": {},
47289
48214
  "path": ["shadow", "resting", "medium"],
47290
48215
  "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
47291
- "type": "shadow"
48216
+ "type": "shadow",
48217
+ "description": "Medium resting shadow for cards and elevated surfaces"
47292
48218
  },
47293
48219
  "shadow-resting-small": {
47294
48220
  "key": "{shadow.resting.small}",
@@ -47323,6 +48249,10 @@
47323
48249
  "isSource": true,
47324
48250
  "$type": "shadow"
47325
48251
  }
48252
+ },
48253
+ "org.primer.llm": {
48254
+ "usage": ["button", "interactive-card", "clickable-element"],
48255
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47326
48256
  }
47327
48257
  },
47328
48258
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47331,7 +48261,7 @@
47331
48261
  "$value": [
47332
48262
  {
47333
48263
  "color": "{base.color.neutral.13}",
47334
- "alpha": 0.06,
48264
+ "alpha": 0.04,
47335
48265
  "offsetX": "0px",
47336
48266
  "offsetY": "1px",
47337
48267
  "blur": "1px",
@@ -47340,15 +48270,16 @@
47340
48270
  },
47341
48271
  {
47342
48272
  "color": "{base.color.neutral.13}",
47343
- "alpha": 0.06,
48273
+ "alpha": 0.03,
47344
48274
  "offsetX": "0px",
47345
48275
  "offsetY": "1px",
47346
- "blur": "3px",
48276
+ "blur": "2px",
47347
48277
  "spread": "0px",
47348
48278
  "inset": false
47349
48279
  }
47350
48280
  ],
47351
48281
  "$type": "shadow",
48282
+ "$description": "Small resting shadow for buttons and interactive elements",
47352
48283
  "$extensions": {
47353
48284
  "org.primer.figma": {
47354
48285
  "collection": "mode",
@@ -47380,6 +48311,10 @@
47380
48311
  "isSource": true,
47381
48312
  "$type": "shadow"
47382
48313
  }
48314
+ },
48315
+ "org.primer.llm": {
48316
+ "usage": ["button", "interactive-card", "clickable-element"],
48317
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47383
48318
  }
47384
48319
  },
47385
48320
  "key": "{shadow.resting.small}"
@@ -47387,8 +48322,9 @@
47387
48322
  "name": "shadow-resting-small",
47388
48323
  "attributes": {},
47389
48324
  "path": ["shadow", "resting", "small"],
47390
- "value": "0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f",
47391
- "type": "shadow"
48325
+ "value": "0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808",
48326
+ "type": "shadow",
48327
+ "description": "Small resting shadow for buttons and interactive elements"
47392
48328
  },
47393
48329
  "shadow-resting-xsmall": {
47394
48330
  "key": "{shadow.resting.xsmall}",
@@ -47412,6 +48348,10 @@
47412
48348
  "isSource": true,
47413
48349
  "$type": "shadow"
47414
48350
  }
48351
+ },
48352
+ "org.primer.llm": {
48353
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48354
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47415
48355
  }
47416
48356
  },
47417
48357
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47419,7 +48359,7 @@
47419
48359
  "original": {
47420
48360
  "$value": {
47421
48361
  "color": "{base.color.neutral.13}",
47422
- "alpha": 0.06,
48362
+ "alpha": 0.05,
47423
48363
  "offsetX": "0px",
47424
48364
  "offsetY": "1px",
47425
48365
  "blur": "1px",
@@ -47427,6 +48367,7 @@
47427
48367
  "inset": false
47428
48368
  },
47429
48369
  "$type": "shadow",
48370
+ "$description": "Extra small resting shadow for minimal elevation",
47430
48371
  "$extensions": {
47431
48372
  "org.primer.figma": {
47432
48373
  "collection": "mode",
@@ -47447,6 +48388,10 @@
47447
48388
  "isSource": true,
47448
48389
  "$type": "shadow"
47449
48390
  }
48391
+ },
48392
+ "org.primer.llm": {
48393
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48394
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47450
48395
  }
47451
48396
  },
47452
48397
  "key": "{shadow.resting.xsmall}"
@@ -47454,8 +48399,9 @@
47454
48399
  "name": "shadow-resting-xsmall",
47455
48400
  "attributes": {},
47456
48401
  "path": ["shadow", "resting", "xsmall"],
47457
- "value": "0px 1px 1px 0px #1f23280f",
47458
- "type": "shadow"
48402
+ "value": "0px 1px 1px 0px #1f23280d",
48403
+ "type": "shadow",
48404
+ "description": "Extra small resting shadow for minimal elevation"
47459
48405
  },
47460
48406
  "sideNav-bgColor-selected": {
47461
48407
  "key": "{sideNav.bgColor.selected}",