@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
@@ -310,6 +310,10 @@
310
310
  "dark-dimmed-high-contrast": "#2672f3",
311
311
  "dark-tritanopia-high-contrast": "#194fb1",
312
312
  "dark-protanopia-deuteranopia-high-contrast": "#194fb1"
313
+ },
314
+ "org.primer.llm": {
315
+ "usage": ["active-states", "current", "selected", "active-toggle"],
316
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
313
317
  }
314
318
  },
315
319
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -317,6 +321,7 @@
317
321
  "original": {
318
322
  "$value": "{base.color.blue.9}",
319
323
  "$type": "color",
324
+ "$description": "Strong accent background for active states and focused states",
320
325
  "$extensions": {
321
326
  "org.primer.figma": {
322
327
  "collection": "mode",
@@ -332,6 +337,10 @@
332
337
  "dark-dimmed-high-contrast": "{base.color.blue.7}",
333
338
  "dark-tritanopia-high-contrast": "{base.color.blue.9}",
334
339
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
340
+ },
341
+ "org.primer.llm": {
342
+ "usage": ["active-states", "current", "selected", "active-toggle"],
343
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
335
344
  }
336
345
  },
337
346
  "key": "{bgColor.accent.emphasis}"
@@ -340,7 +349,8 @@
340
349
  "attributes": {},
341
350
  "path": ["bgColor", "accent", "emphasis"],
342
351
  "value": "#194fb1",
343
- "type": "color"
352
+ "type": "color",
353
+ "description": "Strong accent background for active states and focused states"
344
354
  },
345
355
  "bgColor-accent-muted": {
346
356
  "key": "{bgColor.accent.muted}",
@@ -361,6 +371,10 @@
361
371
  "isSource": true,
362
372
  "$type": "color"
363
373
  }
374
+ },
375
+ "org.primer.llm": {
376
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
377
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
364
378
  }
365
379
  },
366
380
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -369,6 +383,7 @@
369
383
  "original": {
370
384
  "$value": "{base.color.blue.4}",
371
385
  "$type": "color",
386
+ "$description": "Subtle accent background for informational or selected elements",
372
387
  "$extensions": {
373
388
  "org.primer.figma": {
374
389
  "collection": "mode",
@@ -386,6 +401,10 @@
386
401
  "isSource": true,
387
402
  "$type": "color"
388
403
  }
404
+ },
405
+ "org.primer.llm": {
406
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
407
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
389
408
  }
390
409
  },
391
410
  "alpha": 0.1,
@@ -395,7 +414,8 @@
395
414
  "attributes": {},
396
415
  "path": ["bgColor", "accent", "muted"],
397
416
  "value": "#5cacff1a",
398
- "type": "color"
417
+ "type": "color",
418
+ "description": "Subtle accent background for informational or selected elements"
399
419
  },
400
420
  "bgColor-attention-emphasis": {
401
421
  "key": "{bgColor.attention.emphasis}",
@@ -413,6 +433,10 @@
413
433
  "dark-dimmed-high-contrast": "#ae7104",
414
434
  "dark-protanopia-deuteranopia-high-contrast": "#7b4900",
415
435
  "dark-tritanopia-high-contrast": "#7b4900"
436
+ },
437
+ "org.primer.llm": {
438
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
439
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
416
440
  }
417
441
  },
418
442
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -420,6 +444,7 @@
420
444
  "original": {
421
445
  "$value": "{base.color.yellow.9}",
422
446
  "$type": "color",
447
+ "$description": "Strong attention background for prominent warnings",
423
448
  "$extensions": {
424
449
  "org.primer.figma": {
425
450
  "collection": "mode",
@@ -434,6 +459,10 @@
434
459
  "dark-dimmed-high-contrast": "{base.color.yellow.7}",
435
460
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
436
461
  "dark-tritanopia-high-contrast": "{base.color.yellow.9}"
462
+ },
463
+ "org.primer.llm": {
464
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
465
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
437
466
  }
438
467
  },
439
468
  "key": "{bgColor.attention.emphasis}"
@@ -442,7 +471,8 @@
442
471
  "attributes": {},
443
472
  "path": ["bgColor", "attention", "emphasis"],
444
473
  "value": "#7b4900",
445
- "type": "color"
474
+ "type": "color",
475
+ "description": "Strong attention background for prominent warnings"
446
476
  },
447
477
  "bgColor-attention-muted": {
448
478
  "key": "{bgColor.attention.muted}",
@@ -463,6 +493,10 @@
463
493
  "isSource": true,
464
494
  "$type": "color"
465
495
  }
496
+ },
497
+ "org.primer.llm": {
498
+ "usage": ["warning-banner", "caution-message", "pending-state"],
499
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
466
500
  }
467
501
  },
468
502
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -471,6 +505,7 @@
471
505
  "original": {
472
506
  "$value": "{base.color.yellow.4}",
473
507
  "$type": "color",
508
+ "$description": "Subtle attention background for warnings and caution states",
474
509
  "$extensions": {
475
510
  "org.primer.figma": {
476
511
  "collection": "mode",
@@ -488,6 +523,10 @@
488
523
  "isSource": true,
489
524
  "$type": "color"
490
525
  }
526
+ },
527
+ "org.primer.llm": {
528
+ "usage": ["warning-banner", "caution-message", "pending-state"],
529
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
491
530
  }
492
531
  },
493
532
  "alpha": 0.15,
@@ -497,7 +536,8 @@
497
536
  "attributes": {},
498
537
  "path": ["bgColor", "attention", "muted"],
499
538
  "value": "#edaa2726",
500
- "type": "color"
539
+ "type": "color",
540
+ "description": "Subtle attention background for warnings and caution states"
501
541
  },
502
542
  "bgColor-black": {
503
543
  "key": "{bgColor.black}",
@@ -509,6 +549,10 @@
509
549
  },
510
550
  "org.primer.overrides": {
511
551
  "dark": "#010409"
552
+ },
553
+ "org.primer.llm": {
554
+ "doNotUse": true,
555
+ "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."
512
556
  }
513
557
  },
514
558
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -516,6 +560,7 @@
516
560
  "original": {
517
561
  "$value": "{base.color.neutral.0}",
518
562
  "$type": "color",
563
+ "$description": "Pure black background",
519
564
  "$extensions": {
520
565
  "org.primer.figma": {
521
566
  "collection": "mode",
@@ -524,6 +569,10 @@
524
569
  },
525
570
  "org.primer.overrides": {
526
571
  "dark": "{base.color.neutral.0}"
572
+ },
573
+ "org.primer.llm": {
574
+ "doNotUse": true,
575
+ "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."
527
576
  }
528
577
  },
529
578
  "key": "{bgColor.black}"
@@ -532,7 +581,8 @@
532
581
  "attributes": {},
533
582
  "path": ["bgColor", "black"],
534
583
  "value": "#010409",
535
- "type": "color"
584
+ "type": "color",
585
+ "description": "Pure black background"
536
586
  },
537
587
  "bgColor-closed-emphasis": {
538
588
  "key": "{bgColor.closed.emphasis}",
@@ -554,6 +604,10 @@
554
604
  "light-protanopia-deuteranopia-high-contrast": "#3d444d",
555
605
  "dark-protanopia-deuteranopia": "#3d444d",
556
606
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
607
+ },
608
+ "org.primer.llm": {
609
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
610
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
557
611
  }
558
612
  },
559
613
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -561,6 +615,7 @@
561
615
  "original": {
562
616
  "$value": "{bgColor.neutral.emphasis}",
563
617
  "$type": "color",
618
+ "$description": "Strong background for closed state badges and labels",
564
619
  "$extensions": {
565
620
  "org.primer.figma": {
566
621
  "collection": "mode",
@@ -579,6 +634,10 @@
579
634
  "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
580
635
  "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
581
636
  "dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
637
+ },
638
+ "org.primer.llm": {
639
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
640
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
582
641
  }
583
642
  },
584
643
  "key": "{bgColor.closed.emphasis}"
@@ -587,7 +646,8 @@
587
646
  "attributes": {},
588
647
  "path": ["bgColor", "closed", "emphasis"],
589
648
  "value": "#3d444d",
590
- "type": "color"
649
+ "type": "color",
650
+ "description": "Strong background for closed state badges and labels"
591
651
  },
592
652
  "bgColor-closed-muted": {
593
653
  "key": "{bgColor.closed.muted}",
@@ -626,6 +686,10 @@
626
686
  "isSource": true,
627
687
  "$type": "color"
628
688
  }
689
+ },
690
+ "org.primer.llm": {
691
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
692
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
629
693
  }
630
694
  },
631
695
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -634,6 +698,7 @@
634
698
  "original": {
635
699
  "$value": "{bgColor.neutral.muted}",
636
700
  "$type": "color",
701
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
637
702
  "$extensions": {
638
703
  "org.primer.figma": {
639
704
  "collection": "mode",
@@ -669,6 +734,10 @@
669
734
  "isSource": true,
670
735
  "$type": "color"
671
736
  }
737
+ },
738
+ "org.primer.llm": {
739
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
740
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
672
741
  }
673
742
  },
674
743
  "alpha": 0.1,
@@ -678,7 +747,8 @@
678
747
  "attributes": {},
679
748
  "path": ["bgColor", "closed", "muted"],
680
749
  "value": "#2128301a",
681
- "type": "color"
750
+ "type": "color",
751
+ "description": "Subtle background for closed state indicators (issues, PRs)"
682
752
  },
683
753
  "bgColor-danger-emphasis": {
684
754
  "key": "{bgColor.danger.emphasis}",
@@ -699,6 +769,10 @@
699
769
  "dark-high-contrast": "#ad0116",
700
770
  "dark-dimmed-high-contrast": "#e82a2f",
701
771
  "dark-tritanopia-high-contrast": "#ad0116"
772
+ },
773
+ "org.primer.llm": {
774
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
775
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
702
776
  }
703
777
  },
704
778
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -706,6 +780,7 @@
706
780
  "original": {
707
781
  "$value": "{base.color.orange.9}",
708
782
  "$type": "color",
783
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
709
784
  "$extensions": {
710
785
  "org.primer.figma": {
711
786
  "collection": "mode",
@@ -723,6 +798,10 @@
723
798
  "dark-high-contrast": "{base.color.red.9}",
724
799
  "dark-dimmed-high-contrast": "{base.color.red.7}",
725
800
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
801
+ },
802
+ "org.primer.llm": {
803
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
804
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
726
805
  }
727
806
  },
728
807
  "key": "{bgColor.danger.emphasis}"
@@ -731,7 +810,8 @@
731
810
  "attributes": {},
732
811
  "path": ["bgColor", "danger", "emphasis"],
733
812
  "value": "#8f3c00",
734
- "type": "color"
813
+ "type": "color",
814
+ "description": "Emphasized danger background for critical errors and delete confirmations"
735
815
  },
736
816
  "bgColor-danger-muted": {
737
817
  "key": "{bgColor.danger.muted}",
@@ -761,6 +841,10 @@
761
841
  "isSource": true,
762
842
  "$type": "color"
763
843
  }
844
+ },
845
+ "org.primer.llm": {
846
+ "usage": ["error-message", "destructive-action", "validation-error"],
847
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
764
848
  }
765
849
  },
766
850
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -769,6 +853,7 @@
769
853
  "original": {
770
854
  "$value": "{base.color.red.4}",
771
855
  "$type": "color",
856
+ "$description": "Muted danger background for error states and destructive action contexts",
772
857
  "$extensions": {
773
858
  "org.primer.figma": {
774
859
  "collection": "mode",
@@ -795,6 +880,10 @@
795
880
  "isSource": true,
796
881
  "$type": "color"
797
882
  }
883
+ },
884
+ "org.primer.llm": {
885
+ "usage": ["error-message", "destructive-action", "validation-error"],
886
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
798
887
  }
799
888
  },
800
889
  "alpha": 0.1,
@@ -804,7 +893,8 @@
804
893
  "attributes": {},
805
894
  "path": ["bgColor", "danger", "muted"],
806
895
  "value": "#ff80801a",
807
- "type": "color"
896
+ "type": "color",
897
+ "description": "Muted danger background for error states and destructive action contexts"
808
898
  },
809
899
  "bgColor-default": {
810
900
  "key": "{bgColor.default}",
@@ -824,6 +914,10 @@
824
914
  "dark-high-contrast": "#010409",
825
915
  "dark-tritanopia-high-contrast": "#010409",
826
916
  "dark-protanopia-deuteranopia-high-contrast": "#010409"
917
+ },
918
+ "org.primer.llm": {
919
+ "usage": ["page-background", "main-content", "card-background"],
920
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
827
921
  }
828
922
  },
829
923
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -831,6 +925,7 @@
831
925
  "original": {
832
926
  "$value": "{base.color.neutral.0}",
833
927
  "$type": "color",
928
+ "$description": "Default background color for pages and main content areas",
834
929
  "$extensions": {
835
930
  "org.primer.figma": {
836
931
  "collection": "mode",
@@ -847,6 +942,10 @@
847
942
  "dark-high-contrast": "{base.color.neutral.0}",
848
943
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
849
944
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
945
+ },
946
+ "org.primer.llm": {
947
+ "usage": ["page-background", "main-content", "card-background"],
948
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
850
949
  }
851
950
  },
852
951
  "key": "{bgColor.default}"
@@ -855,7 +954,8 @@
855
954
  "attributes": {},
856
955
  "path": ["bgColor", "default"],
857
956
  "value": "#010409",
858
- "type": "color"
957
+ "type": "color",
958
+ "description": "Default background color for pages and main content areas"
859
959
  },
860
960
  "bgColor-disabled": {
861
961
  "key": "{bgColor.disabled}",
@@ -875,6 +975,10 @@
875
975
  "dark-high-contrast": "#262c36",
876
976
  "dark-tritanopia-high-contrast": "#262c36",
877
977
  "dark-protanopia-deuteranopia-high-contrast": "#262c36"
978
+ },
979
+ "org.primer.llm": {
980
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
981
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
878
982
  }
879
983
  },
880
984
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -882,6 +986,7 @@
882
986
  "original": {
883
987
  "$value": "{base.color.neutral.4}",
884
988
  "$type": "color",
989
+ "$description": "Background for disabled interactive elements",
885
990
  "$extensions": {
886
991
  "org.primer.figma": {
887
992
  "collection": "mode",
@@ -898,6 +1003,10 @@
898
1003
  "dark-high-contrast": "{base.color.neutral.4}",
899
1004
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
900
1005
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
1006
+ },
1007
+ "org.primer.llm": {
1008
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
1009
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
901
1010
  }
902
1011
  },
903
1012
  "key": "{bgColor.disabled}"
@@ -906,7 +1015,8 @@
906
1015
  "attributes": {},
907
1016
  "path": ["bgColor", "disabled"],
908
1017
  "value": "#262c36",
909
- "type": "color"
1018
+ "type": "color",
1019
+ "description": "Background for disabled interactive elements"
910
1020
  },
911
1021
  "bgColor-done-emphasis": {
912
1022
  "key": "{bgColor.done.emphasis}",
@@ -924,6 +1034,10 @@
924
1034
  "dark-dimmed-high-contrast": "#954ffd",
925
1035
  "dark-tritanopia-high-contrast": "#6921d7",
926
1036
  "dark-protanopia-deuteranopia-high-contrast": "#6921d7"
1037
+ },
1038
+ "org.primer.llm": {
1039
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1040
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
927
1041
  }
928
1042
  },
929
1043
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -931,6 +1045,7 @@
931
1045
  "original": {
932
1046
  "$value": "{base.color.purple.9}",
933
1047
  "$type": "color",
1048
+ "$description": "Strong background for completed/done state badges and labels",
934
1049
  "$extensions": {
935
1050
  "org.primer.figma": {
936
1051
  "collection": "mode",
@@ -945,6 +1060,10 @@
945
1060
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
946
1061
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
947
1062
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1063
+ },
1064
+ "org.primer.llm": {
1065
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1066
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
948
1067
  }
949
1068
  },
950
1069
  "key": "{bgColor.done.emphasis}"
@@ -953,7 +1072,8 @@
953
1072
  "attributes": {},
954
1073
  "path": ["bgColor", "done", "emphasis"],
955
1074
  "value": "#6921d7",
956
- "type": "color"
1075
+ "type": "color",
1076
+ "description": "Strong background for completed/done state badges and labels"
957
1077
  },
958
1078
  "bgColor-done-muted": {
959
1079
  "key": "{bgColor.done.muted}",
@@ -974,6 +1094,10 @@
974
1094
  "isSource": true,
975
1095
  "$type": "color"
976
1096
  }
1097
+ },
1098
+ "org.primer.llm": {
1099
+ "usage": ["completed-task", "merged-pr", "done-state"],
1100
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
977
1101
  }
978
1102
  },
979
1103
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -982,6 +1106,7 @@
982
1106
  "original": {
983
1107
  "$value": "{base.color.purple.4}",
984
1108
  "$type": "color",
1109
+ "$description": "Subtle background for completed/done state indicators",
985
1110
  "$extensions": {
986
1111
  "org.primer.figma": {
987
1112
  "collection": "mode",
@@ -999,6 +1124,10 @@
999
1124
  "isSource": true,
1000
1125
  "$type": "color"
1001
1126
  }
1127
+ },
1128
+ "org.primer.llm": {
1129
+ "usage": ["completed-task", "merged-pr", "done-state"],
1130
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
1002
1131
  }
1003
1132
  },
1004
1133
  "alpha": 0.15,
@@ -1008,7 +1137,8 @@
1008
1137
  "attributes": {},
1009
1138
  "path": ["bgColor", "done", "muted"],
1010
1139
  "value": "#bf8fff26",
1011
- "type": "color"
1140
+ "type": "color",
1141
+ "description": "Subtle background for completed/done state indicators"
1012
1142
  },
1013
1143
  "bgColor-draft-emphasis": {
1014
1144
  "key": "{bgColor.draft.emphasis}",
@@ -1020,6 +1150,10 @@
1020
1150
  "codeSyntax": {
1021
1151
  "web": "var(--bgColor-draft-emphasis)"
1022
1152
  }
1153
+ },
1154
+ "org.primer.llm": {
1155
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1156
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1023
1157
  }
1024
1158
  },
1025
1159
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1027,6 +1161,7 @@
1027
1161
  "original": {
1028
1162
  "$value": "{bgColor.neutral.emphasis}",
1029
1163
  "$type": "color",
1164
+ "$description": "Strong background for draft state badges and labels",
1030
1165
  "$extensions": {
1031
1166
  "org.primer.figma": {
1032
1167
  "collection": "mode",
@@ -1035,6 +1170,10 @@
1035
1170
  "codeSyntax": {
1036
1171
  "web": "var(--bgColor-draft-emphasis)"
1037
1172
  }
1173
+ },
1174
+ "org.primer.llm": {
1175
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1176
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1038
1177
  }
1039
1178
  },
1040
1179
  "key": "{bgColor.draft.emphasis}"
@@ -1043,7 +1182,8 @@
1043
1182
  "attributes": {},
1044
1183
  "path": ["bgColor", "draft", "emphasis"],
1045
1184
  "value": "#3d444d",
1046
- "type": "color"
1185
+ "type": "color",
1186
+ "description": "Strong background for draft state badges and labels"
1047
1187
  },
1048
1188
  "bgColor-draft-muted": {
1049
1189
  "key": "{bgColor.draft.muted}",
@@ -1082,6 +1222,10 @@
1082
1222
  "isSource": true,
1083
1223
  "$type": "color"
1084
1224
  }
1225
+ },
1226
+ "org.primer.llm": {
1227
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1228
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1085
1229
  }
1086
1230
  },
1087
1231
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1090,6 +1234,7 @@
1090
1234
  "original": {
1091
1235
  "$value": "{bgColor.neutral.muted}",
1092
1236
  "$type": "color",
1237
+ "$description": "Subtle background for draft state indicators",
1093
1238
  "$extensions": {
1094
1239
  "org.primer.figma": {
1095
1240
  "collection": "mode",
@@ -1125,6 +1270,10 @@
1125
1270
  "isSource": true,
1126
1271
  "$type": "color"
1127
1272
  }
1273
+ },
1274
+ "org.primer.llm": {
1275
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1276
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1128
1277
  }
1129
1278
  },
1130
1279
  "alpha": 0.1,
@@ -1134,7 +1283,8 @@
1134
1283
  "attributes": {},
1135
1284
  "path": ["bgColor", "draft", "muted"],
1136
1285
  "value": "#2128301a",
1137
- "type": "color"
1286
+ "type": "color",
1287
+ "description": "Subtle background for draft state indicators"
1138
1288
  },
1139
1289
  "bgColor-emphasis": {
1140
1290
  "key": "{bgColor.emphasis}",
@@ -1149,6 +1299,10 @@
1149
1299
  },
1150
1300
  "org.primer.overrides": {
1151
1301
  "dark": "#3d444d"
1302
+ },
1303
+ "org.primer.llm": {
1304
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1305
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1152
1306
  }
1153
1307
  },
1154
1308
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1156,6 +1310,7 @@
1156
1310
  "original": {
1157
1311
  "$value": "{base.color.neutral.7}",
1158
1312
  "$type": "color",
1313
+ "$description": "High-emphasis dark background for strong visual contrast",
1159
1314
  "$extensions": {
1160
1315
  "org.primer.figma": {
1161
1316
  "collection": "mode",
@@ -1167,6 +1322,10 @@
1167
1322
  },
1168
1323
  "org.primer.overrides": {
1169
1324
  "dark": "{base.color.neutral.7}"
1325
+ },
1326
+ "org.primer.llm": {
1327
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1328
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1170
1329
  }
1171
1330
  },
1172
1331
  "key": "{bgColor.emphasis}"
@@ -1175,7 +1334,8 @@
1175
1334
  "attributes": {},
1176
1335
  "path": ["bgColor", "emphasis"],
1177
1336
  "value": "#3d444d",
1178
- "type": "color"
1337
+ "type": "color",
1338
+ "description": "High-emphasis dark background for strong visual contrast"
1179
1339
  },
1180
1340
  "bgColor-inset": {
1181
1341
  "key": "{bgColor.inset}",
@@ -1195,6 +1355,10 @@
1195
1355
  "light-high-contrast": "#151b23",
1196
1356
  "light-tritanopia-high-contrast": "#151b23",
1197
1357
  "light-protanopia-deuteranopia-high-contrast": "#151b23"
1358
+ },
1359
+ "org.primer.llm": {
1360
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1361
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1198
1362
  }
1199
1363
  },
1200
1364
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1202,6 +1366,7 @@
1202
1366
  "original": {
1203
1367
  "$value": "{base.color.neutral.0}",
1204
1368
  "$type": "color",
1369
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1205
1370
  "$extensions": {
1206
1371
  "org.primer.figma": {
1207
1372
  "collection": "mode",
@@ -1218,6 +1383,10 @@
1218
1383
  "light-high-contrast": "{base.color.neutral.2}",
1219
1384
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1220
1385
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1386
+ },
1387
+ "org.primer.llm": {
1388
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1389
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1221
1390
  }
1222
1391
  },
1223
1392
  "key": "{bgColor.inset}"
@@ -1226,7 +1395,8 @@
1226
1395
  "attributes": {},
1227
1396
  "path": ["bgColor", "inset"],
1228
1397
  "value": "#010409",
1229
- "type": "color"
1398
+ "type": "color",
1399
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1230
1400
  },
1231
1401
  "bgColor-inverse": {
1232
1402
  "key": "{bgColor.inverse}",
@@ -1238,6 +1408,10 @@
1238
1408
  },
1239
1409
  "org.primer.overrides": {
1240
1410
  "dark": "#ffffff"
1411
+ },
1412
+ "org.primer.llm": {
1413
+ "usage": ["overlay-content", "inverse-theme-element"],
1414
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1241
1415
  }
1242
1416
  },
1243
1417
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1245,6 +1419,7 @@
1245
1419
  "original": {
1246
1420
  "$value": "{base.color.neutral.13}",
1247
1421
  "$type": "color",
1422
+ "$description": "Inverse background that flips between light and dark modes",
1248
1423
  "$extensions": {
1249
1424
  "org.primer.figma": {
1250
1425
  "collection": "mode",
@@ -1253,6 +1428,10 @@
1253
1428
  },
1254
1429
  "org.primer.overrides": {
1255
1430
  "dark": "{base.color.neutral.13}"
1431
+ },
1432
+ "org.primer.llm": {
1433
+ "usage": ["overlay-content", "inverse-theme-element"],
1434
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1256
1435
  }
1257
1436
  },
1258
1437
  "key": "{bgColor.inverse}"
@@ -1261,7 +1440,8 @@
1261
1440
  "attributes": {},
1262
1441
  "path": ["bgColor", "inverse"],
1263
1442
  "value": "#ffffff",
1264
- "type": "color"
1443
+ "type": "color",
1444
+ "description": "Inverse background that flips between light and dark modes"
1265
1445
  },
1266
1446
  "bgColor-muted": {
1267
1447
  "key": "{bgColor.muted}",
@@ -1284,6 +1464,10 @@
1284
1464
  "dark-high-contrast": "#151b23",
1285
1465
  "dark-tritanopia-high-contrast": "#151b23",
1286
1466
  "dark-protanopia-deuteranopia-high-contrast": "#151b23"
1467
+ },
1468
+ "org.primer.llm": {
1469
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1470
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1287
1471
  }
1288
1472
  },
1289
1473
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1291,6 +1475,7 @@
1291
1475
  "original": {
1292
1476
  "$value": "{base.color.neutral.2}",
1293
1477
  "$type": "color",
1478
+ "$description": "Muted background for secondary content areas and subtle grouping",
1294
1479
  "$extensions": {
1295
1480
  "org.primer.figma": {
1296
1481
  "collection": "mode",
@@ -1310,6 +1495,10 @@
1310
1495
  "dark-high-contrast": "{base.color.neutral.2}",
1311
1496
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1312
1497
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1498
+ },
1499
+ "org.primer.llm": {
1500
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1501
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1313
1502
  }
1314
1503
  },
1315
1504
  "key": "{bgColor.muted}"
@@ -1318,7 +1507,8 @@
1318
1507
  "attributes": {},
1319
1508
  "path": ["bgColor", "muted"],
1320
1509
  "value": "#151b23",
1321
- "type": "color"
1510
+ "type": "color",
1511
+ "description": "Muted background for secondary content areas and subtle grouping"
1322
1512
  },
1323
1513
  "bgColor-neutral-emphasis": {
1324
1514
  "key": "{bgColor.neutral.emphasis}",
@@ -1338,6 +1528,10 @@
1338
1528
  "dark-high-contrast": "#3d444d",
1339
1529
  "dark-tritanopia-high-contrast": "#3d444d",
1340
1530
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
1531
+ },
1532
+ "org.primer.llm": {
1533
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1534
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1341
1535
  }
1342
1536
  },
1343
1537
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1345,6 +1539,7 @@
1345
1539
  "original": {
1346
1540
  "$value": "{base.color.neutral.7}",
1347
1541
  "$type": "color",
1542
+ "$description": "Strong neutral background for prominent neutral elements",
1348
1543
  "$extensions": {
1349
1544
  "org.primer.figma": {
1350
1545
  "collection": "mode",
@@ -1361,6 +1556,10 @@
1361
1556
  "dark-high-contrast": "{base.color.neutral.7}",
1362
1557
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1363
1558
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1559
+ },
1560
+ "org.primer.llm": {
1561
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1562
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1364
1563
  }
1365
1564
  },
1366
1565
  "key": "{bgColor.neutral.emphasis}"
@@ -1369,7 +1568,8 @@
1369
1568
  "attributes": {},
1370
1569
  "path": ["bgColor", "neutral", "emphasis"],
1371
1570
  "value": "#3d444d",
1372
- "type": "color"
1571
+ "type": "color",
1572
+ "description": "Strong neutral background for prominent neutral elements"
1373
1573
  },
1374
1574
  "bgColor-neutral-muted": {
1375
1575
  "key": "{bgColor.neutral.muted}",
@@ -1400,6 +1600,10 @@
1400
1600
  "dark-high-contrast": "#212830",
1401
1601
  "dark-tritanopia-high-contrast": "#212830",
1402
1602
  "dark-protanopia-deuteranopia-high-contrast": "#212830"
1603
+ },
1604
+ "org.primer.llm": {
1605
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1606
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1403
1607
  }
1404
1608
  },
1405
1609
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1407,6 +1611,7 @@
1407
1611
  "original": {
1408
1612
  "$value": "{base.color.neutral.3}",
1409
1613
  "$type": "color",
1614
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1410
1615
  "$extensions": {
1411
1616
  "org.primer.figma": {
1412
1617
  "collection": "mode",
@@ -1434,6 +1639,10 @@
1434
1639
  "dark-high-contrast": "{base.color.neutral.3}",
1435
1640
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1436
1641
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1642
+ },
1643
+ "org.primer.llm": {
1644
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1645
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1437
1646
  }
1438
1647
  },
1439
1648
  "key": "{bgColor.neutral.muted}"
@@ -1442,7 +1651,8 @@
1442
1651
  "attributes": {},
1443
1652
  "path": ["bgColor", "neutral", "muted"],
1444
1653
  "value": "#212830",
1445
- "type": "color"
1654
+ "type": "color",
1655
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1446
1656
  },
1447
1657
  "bgColor-open-emphasis": {
1448
1658
  "key": "{bgColor.open.emphasis}",
@@ -1464,6 +1674,10 @@
1464
1674
  "light-protanopia-deuteranopia-high-contrast": "#e7811d",
1465
1675
  "dark-protanopia-deuteranopia": "#e7811d",
1466
1676
  "dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
1677
+ },
1678
+ "org.primer.llm": {
1679
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1680
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1467
1681
  }
1468
1682
  },
1469
1683
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1471,6 +1685,7 @@
1471
1685
  "original": {
1472
1686
  "$value": "{base.color.orange.9}",
1473
1687
  "$type": "color",
1688
+ "$description": "Strong background for open state badges and labels",
1474
1689
  "$extensions": {
1475
1690
  "org.primer.figma": {
1476
1691
  "collection": "mode",
@@ -1489,6 +1704,10 @@
1489
1704
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1490
1705
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1491
1706
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1707
+ },
1708
+ "org.primer.llm": {
1709
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1710
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1492
1711
  }
1493
1712
  },
1494
1713
  "key": "{bgColor.open.emphasis}"
@@ -1497,7 +1716,8 @@
1497
1716
  "attributes": {},
1498
1717
  "path": ["bgColor", "open", "emphasis"],
1499
1718
  "value": "#8f3c00",
1500
- "type": "color"
1719
+ "type": "color",
1720
+ "description": "Strong background for open state badges and labels"
1501
1721
  },
1502
1722
  "bgColor-open-muted": {
1503
1723
  "key": "{bgColor.open.muted}",
@@ -1543,6 +1763,10 @@
1543
1763
  "isSource": true,
1544
1764
  "$type": "color"
1545
1765
  }
1766
+ },
1767
+ "org.primer.llm": {
1768
+ "usage": ["open-issue", "open-pr", "active-status"],
1769
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1546
1770
  }
1547
1771
  },
1548
1772
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1551,6 +1775,7 @@
1551
1775
  "original": {
1552
1776
  "$value": "{base.color.orange.4}",
1553
1777
  "$type": "color",
1778
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1554
1779
  "$extensions": {
1555
1780
  "org.primer.figma": {
1556
1781
  "collection": "mode",
@@ -1593,6 +1818,10 @@
1593
1818
  "isSource": true,
1594
1819
  "$type": "color"
1595
1820
  }
1821
+ },
1822
+ "org.primer.llm": {
1823
+ "usage": ["open-issue", "open-pr", "active-status"],
1824
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1596
1825
  }
1597
1826
  },
1598
1827
  "alpha": 0.1,
@@ -1602,7 +1831,8 @@
1602
1831
  "attributes": {},
1603
1832
  "path": ["bgColor", "open", "muted"],
1604
1833
  "value": "#f48b251a",
1605
- "type": "color"
1834
+ "type": "color",
1835
+ "description": "Subtle background for open state indicators (issues, PRs)"
1606
1836
  },
1607
1837
  "bgColor-severe-emphasis": {
1608
1838
  "key": "{bgColor.severe.emphasis}",
@@ -1623,6 +1853,10 @@
1623
1853
  "dark-high-contrast": "#8f3c00",
1624
1854
  "dark-dimmed-high-contrast": "#bf5e0a",
1625
1855
  "dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
1856
+ },
1857
+ "org.primer.llm": {
1858
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1859
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1626
1860
  }
1627
1861
  },
1628
1862
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1630,6 +1864,7 @@
1630
1864
  "original": {
1631
1865
  "$value": "{base.color.orange.9}",
1632
1866
  "$type": "color",
1867
+ "$description": "Strong severe background for prominent high-priority warnings",
1633
1868
  "$extensions": {
1634
1869
  "org.primer.figma": {
1635
1870
  "collection": "mode",
@@ -1647,6 +1882,10 @@
1647
1882
  "dark-high-contrast": "{base.color.orange.9}",
1648
1883
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1649
1884
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1885
+ },
1886
+ "org.primer.llm": {
1887
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1888
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1650
1889
  }
1651
1890
  },
1652
1891
  "key": "{bgColor.severe.emphasis}"
@@ -1655,7 +1894,8 @@
1655
1894
  "attributes": {},
1656
1895
  "path": ["bgColor", "severe", "emphasis"],
1657
1896
  "value": "#8f3c00",
1658
- "type": "color"
1897
+ "type": "color",
1898
+ "description": "Strong severe background for prominent high-priority warnings"
1659
1899
  },
1660
1900
  "bgColor-severe-muted": {
1661
1901
  "key": "{bgColor.severe.muted}",
@@ -1685,6 +1925,10 @@
1685
1925
  "isSource": true,
1686
1926
  "$type": "color"
1687
1927
  }
1928
+ },
1929
+ "org.primer.llm": {
1930
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1931
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1688
1932
  }
1689
1933
  },
1690
1934
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1693,6 +1937,7 @@
1693
1937
  "original": {
1694
1938
  "$value": "{base.color.orange.4}",
1695
1939
  "$type": "color",
1940
+ "$description": "Subtle severe background for high-priority warnings",
1696
1941
  "$extensions": {
1697
1942
  "org.primer.figma": {
1698
1943
  "collection": "mode",
@@ -1719,6 +1964,10 @@
1719
1964
  "isSource": true,
1720
1965
  "$type": "color"
1721
1966
  }
1967
+ },
1968
+ "org.primer.llm": {
1969
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1970
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1722
1971
  }
1723
1972
  },
1724
1973
  "alpha": 0.1,
@@ -1728,7 +1977,8 @@
1728
1977
  "attributes": {},
1729
1978
  "path": ["bgColor", "severe", "muted"],
1730
1979
  "value": "#f48b251a",
1731
- "type": "color"
1980
+ "type": "color",
1981
+ "description": "Subtle severe background for high-priority warnings"
1732
1982
  },
1733
1983
  "bgColor-sponsors-emphasis": {
1734
1984
  "key": "{bgColor.sponsors.emphasis}",
@@ -1746,6 +1996,10 @@
1746
1996
  "dark-dimmed-high-contrast": "#d23d91",
1747
1997
  "dark-tritanopia-high-contrast": "#9c1d6a",
1748
1998
  "dark-protanopia-deuteranopia-high-contrast": "#9c1d6a"
1999
+ },
2000
+ "org.primer.llm": {
2001
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2002
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1749
2003
  }
1750
2004
  },
1751
2005
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1753,6 +2007,7 @@
1753
2007
  "original": {
1754
2008
  "$value": "{base.color.pink.9}",
1755
2009
  "$type": "color",
2010
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1756
2011
  "$extensions": {
1757
2012
  "org.primer.figma": {
1758
2013
  "collection": "mode",
@@ -1767,6 +2022,10 @@
1767
2022
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1768
2023
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1769
2024
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2025
+ },
2026
+ "org.primer.llm": {
2027
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2028
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1770
2029
  }
1771
2030
  },
1772
2031
  "key": "{bgColor.sponsors.emphasis}"
@@ -1775,7 +2034,8 @@
1775
2034
  "attributes": {},
1776
2035
  "path": ["bgColor", "sponsors", "emphasis"],
1777
2036
  "value": "#9c1d6a",
1778
- "type": "color"
2037
+ "type": "color",
2038
+ "description": "Strong background for prominent GitHub Sponsors elements"
1779
2039
  },
1780
2040
  "bgColor-sponsors-muted": {
1781
2041
  "key": "{bgColor.sponsors.muted}",
@@ -1803,6 +2063,10 @@
1803
2063
  "isSource": true,
1804
2064
  "$type": "color"
1805
2065
  }
2066
+ },
2067
+ "org.primer.llm": {
2068
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2069
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1806
2070
  }
1807
2071
  },
1808
2072
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1811,6 +2075,7 @@
1811
2075
  "original": {
1812
2076
  "$value": "{base.color.pink.4}",
1813
2077
  "$type": "color",
2078
+ "$description": "Subtle background for GitHub Sponsors content",
1814
2079
  "$extensions": {
1815
2080
  "org.primer.figma": {
1816
2081
  "collection": "mode",
@@ -1835,6 +2100,10 @@
1835
2100
  "isSource": true,
1836
2101
  "$type": "color"
1837
2102
  }
2103
+ },
2104
+ "org.primer.llm": {
2105
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2106
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1838
2107
  }
1839
2108
  },
1840
2109
  "alpha": 0.1,
@@ -1844,7 +2113,8 @@
1844
2113
  "attributes": {},
1845
2114
  "path": ["bgColor", "sponsors", "muted"],
1846
2115
  "value": "#f87cbd1a",
1847
- "type": "color"
2116
+ "type": "color",
2117
+ "description": "Subtle background for GitHub Sponsors content"
1848
2118
  },
1849
2119
  "bgColor-success-emphasis": {
1850
2120
  "key": "{bgColor.success.emphasis}",
@@ -1870,6 +2140,10 @@
1870
2140
  "light-high-contrast": "#09b43a",
1871
2141
  "dark-high-contrast": "#006222",
1872
2142
  "dark-dimmed-high-contrast": "#008c2c"
2143
+ },
2144
+ "org.primer.llm": {
2145
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2146
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1873
2147
  }
1874
2148
  },
1875
2149
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1877,6 +2151,7 @@
1877
2151
  "original": {
1878
2152
  "$value": "{base.color.blue.9}",
1879
2153
  "$type": "color",
2154
+ "$description": "Strong success background for prominent positive actions",
1880
2155
  "$extensions": {
1881
2156
  "org.primer.figma": {
1882
2157
  "collection": "mode",
@@ -1899,6 +2174,10 @@
1899
2174
  "light-high-contrast": "{base.color.green.5}",
1900
2175
  "dark-high-contrast": "{base.color.green.9}",
1901
2176
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2177
+ },
2178
+ "org.primer.llm": {
2179
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2180
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1902
2181
  }
1903
2182
  },
1904
2183
  "key": "{bgColor.success.emphasis}"
@@ -1907,7 +2186,8 @@
1907
2186
  "attributes": {},
1908
2187
  "path": ["bgColor", "success", "emphasis"],
1909
2188
  "value": "#194fb1",
1910
- "type": "color"
2189
+ "type": "color",
2190
+ "description": "Strong success background for prominent positive actions"
1911
2191
  },
1912
2192
  "bgColor-success-muted": {
1913
2193
  "key": "{bgColor.success.muted}",
@@ -1960,6 +2240,10 @@
1960
2240
  "isSource": true,
1961
2241
  "$type": "color"
1962
2242
  }
2243
+ },
2244
+ "org.primer.llm": {
2245
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2246
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1963
2247
  }
1964
2248
  },
1965
2249
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1968,6 +2252,7 @@
1968
2252
  "original": {
1969
2253
  "$value": "{base.color.blue.4}",
1970
2254
  "$type": "color",
2255
+ "$description": "Subtle success background for positive feedback and completed states",
1971
2256
  "$extensions": {
1972
2257
  "org.primer.figma": {
1973
2258
  "collection": "mode",
@@ -2017,6 +2302,10 @@
2017
2302
  "isSource": true,
2018
2303
  "$type": "color"
2019
2304
  }
2305
+ },
2306
+ "org.primer.llm": {
2307
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2308
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
2020
2309
  }
2021
2310
  },
2022
2311
  "alpha": 0.2,
@@ -2026,7 +2315,8 @@
2026
2315
  "attributes": {},
2027
2316
  "path": ["bgColor", "success", "muted"],
2028
2317
  "value": "#5cacff33",
2029
- "type": "color"
2318
+ "type": "color",
2319
+ "description": "Subtle success background for positive feedback and completed states"
2030
2320
  },
2031
2321
  "bgColor-transparent": {
2032
2322
  "key": "{bgColor.transparent}",
@@ -2038,6 +2328,10 @@
2038
2328
  "codeSyntax": {
2039
2329
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2040
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."
2041
2335
  }
2042
2336
  },
2043
2337
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2045,6 +2339,7 @@
2045
2339
  "original": {
2046
2340
  "$value": "{base.color.transparent}",
2047
2341
  "$type": "color",
2342
+ "$description": "Fully transparent background",
2048
2343
  "$extensions": {
2049
2344
  "org.primer.figma": {
2050
2345
  "collection": "mode",
@@ -2053,6 +2348,10 @@
2053
2348
  "codeSyntax": {
2054
2349
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2055
2350
  }
2351
+ },
2352
+ "org.primer.llm": {
2353
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2354
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2056
2355
  }
2057
2356
  },
2058
2357
  "key": "{bgColor.transparent}"
@@ -2061,7 +2360,8 @@
2061
2360
  "attributes": {},
2062
2361
  "path": ["bgColor", "transparent"],
2063
2362
  "value": "#00000000",
2064
- "type": "color"
2363
+ "type": "color",
2364
+ "description": "Fully transparent background"
2065
2365
  },
2066
2366
  "bgColor-upsell-emphasis": {
2067
2367
  "key": "{bgColor.upsell.emphasis}",
@@ -2073,6 +2373,10 @@
2073
2373
  "codeSyntax": {
2074
2374
  "web": "var(--bgColor-upsell-emphasis)"
2075
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."
2076
2380
  }
2077
2381
  },
2078
2382
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2080,6 +2384,7 @@
2080
2384
  "original": {
2081
2385
  "$value": "{bgColor.done.emphasis}",
2082
2386
  "$type": "color",
2387
+ "$description": "Strong background for prominent upsell elements",
2083
2388
  "$extensions": {
2084
2389
  "org.primer.figma": {
2085
2390
  "collection": "mode",
@@ -2088,6 +2393,10 @@
2088
2393
  "codeSyntax": {
2089
2394
  "web": "var(--bgColor-upsell-emphasis)"
2090
2395
  }
2396
+ },
2397
+ "org.primer.llm": {
2398
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2399
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2091
2400
  }
2092
2401
  },
2093
2402
  "key": "{bgColor.upsell.emphasis}"
@@ -2096,7 +2405,8 @@
2096
2405
  "attributes": {},
2097
2406
  "path": ["bgColor", "upsell", "emphasis"],
2098
2407
  "value": "#6921d7",
2099
- "type": "color"
2408
+ "type": "color",
2409
+ "description": "Strong background for prominent upsell elements"
2100
2410
  },
2101
2411
  "bgColor-upsell-muted": {
2102
2412
  "key": "{bgColor.upsell.muted}",
@@ -2108,6 +2418,10 @@
2108
2418
  "codeSyntax": {
2109
2419
  "web": "var(--bgColor-upsell-muted)"
2110
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."
2111
2425
  }
2112
2426
  },
2113
2427
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2115,6 +2429,7 @@
2115
2429
  "original": {
2116
2430
  "$value": "{bgColor.done.muted}",
2117
2431
  "$type": "color",
2432
+ "$description": "Subtle background for upsell and promotional content",
2118
2433
  "$extensions": {
2119
2434
  "org.primer.figma": {
2120
2435
  "collection": "mode",
@@ -2123,6 +2438,10 @@
2123
2438
  "codeSyntax": {
2124
2439
  "web": "var(--bgColor-upsell-muted)"
2125
2440
  }
2441
+ },
2442
+ "org.primer.llm": {
2443
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2444
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2126
2445
  }
2127
2446
  },
2128
2447
  "key": "{bgColor.upsell.muted}"
@@ -2131,7 +2450,8 @@
2131
2450
  "attributes": {},
2132
2451
  "path": ["bgColor", "upsell", "muted"],
2133
2452
  "value": "#bf8fff26",
2134
- "type": "color"
2453
+ "type": "color",
2454
+ "description": "Subtle background for upsell and promotional content"
2135
2455
  },
2136
2456
  "bgColor-white": {
2137
2457
  "key": "{bgColor.white}",
@@ -2143,6 +2463,10 @@
2143
2463
  },
2144
2464
  "org.primer.overrides": {
2145
2465
  "dark": "#ffffff"
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."
2146
2470
  }
2147
2471
  },
2148
2472
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2150,6 +2474,7 @@
2150
2474
  "original": {
2151
2475
  "$value": "{base.color.neutral.13}",
2152
2476
  "$type": "color",
2477
+ "$description": "Pure white background",
2153
2478
  "$extensions": {
2154
2479
  "org.primer.figma": {
2155
2480
  "collection": "mode",
@@ -2158,6 +2483,10 @@
2158
2483
  },
2159
2484
  "org.primer.overrides": {
2160
2485
  "dark": "{base.color.neutral.13}"
2486
+ },
2487
+ "org.primer.llm": {
2488
+ "doNotUse": true,
2489
+ "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."
2161
2490
  }
2162
2491
  },
2163
2492
  "key": "{bgColor.white}"
@@ -2166,7 +2495,8 @@
2166
2495
  "attributes": {},
2167
2496
  "path": ["bgColor", "white"],
2168
2497
  "value": "#ffffff",
2169
- "type": "color"
2498
+ "type": "color",
2499
+ "description": "Pure white background"
2170
2500
  },
2171
2501
  "border-accent-emphasis": {
2172
2502
  "key": "{border.accent.emphasis}",
@@ -2678,6 +3008,10 @@
2678
3008
  },
2679
3009
  "org.primer.overrides": {
2680
3010
  "dark-dimmed-high-contrast": "#91cbff"
3011
+ },
3012
+ "org.primer.llm": {
3013
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3014
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2681
3015
  }
2682
3016
  },
2683
3017
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2685,6 +3019,7 @@
2685
3019
  "original": {
2686
3020
  "$value": "{base.color.blue.5}",
2687
3021
  "$type": "color",
3022
+ "$description": "Strong accent border for selected or focused elements",
2688
3023
  "$extensions": {
2689
3024
  "org.primer.figma": {
2690
3025
  "collection": "mode",
@@ -2696,6 +3031,10 @@
2696
3031
  },
2697
3032
  "org.primer.overrides": {
2698
3033
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3034
+ },
3035
+ "org.primer.llm": {
3036
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3037
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2699
3038
  }
2700
3039
  },
2701
3040
  "key": "{borderColor.accent.emphasis}"
@@ -2704,7 +3043,8 @@
2704
3043
  "attributes": {},
2705
3044
  "path": ["borderColor", "accent", "emphasis"],
2706
3045
  "value": "#409eff",
2707
- "type": "color"
3046
+ "type": "color",
3047
+ "description": "Strong accent border for selected or focused elements"
2708
3048
  },
2709
3049
  "borderColor-accent-muted": {
2710
3050
  "key": "{borderColor.accent.muted}",
@@ -2768,6 +3108,10 @@
2768
3108
  "isSource": true,
2769
3109
  "$type": "color"
2770
3110
  }
3111
+ },
3112
+ "org.primer.llm": {
3113
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3114
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2771
3115
  }
2772
3116
  },
2773
3117
  "alpha": 1,
@@ -2776,6 +3120,7 @@
2776
3120
  "original": {
2777
3121
  "$value": "{base.color.blue.4}",
2778
3122
  "$type": "color",
3123
+ "$description": "Subtle accent border for selected or focused elements",
2779
3124
  "$extensions": {
2780
3125
  "org.primer.figma": {
2781
3126
  "collection": "mode",
@@ -2836,6 +3181,10 @@
2836
3181
  "isSource": true,
2837
3182
  "$type": "color"
2838
3183
  }
3184
+ },
3185
+ "org.primer.llm": {
3186
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3187
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2839
3188
  }
2840
3189
  },
2841
3190
  "alpha": 1,
@@ -2845,7 +3194,8 @@
2845
3194
  "attributes": {},
2846
3195
  "path": ["borderColor", "accent", "muted"],
2847
3196
  "value": "#5cacff",
2848
- "type": "color"
3197
+ "type": "color",
3198
+ "description": "Subtle accent border for selected or focused elements"
2849
3199
  },
2850
3200
  "borderColor-attention-emphasis": {
2851
3201
  "key": "{borderColor.attention.emphasis}",
@@ -2860,6 +3210,10 @@
2860
3210
  },
2861
3211
  "org.primer.overrides": {
2862
3212
  "dark-dimmed-high-contrast": "#f7c843"
3213
+ },
3214
+ "org.primer.llm": {
3215
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3216
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2863
3217
  }
2864
3218
  },
2865
3219
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2867,6 +3221,7 @@
2867
3221
  "original": {
2868
3222
  "$value": "{base.color.yellow.5}",
2869
3223
  "$type": "color",
3224
+ "$description": "Strong attention border for prominent warnings",
2870
3225
  "$extensions": {
2871
3226
  "org.primer.figma": {
2872
3227
  "collection": "mode",
@@ -2878,6 +3233,10 @@
2878
3233
  },
2879
3234
  "org.primer.overrides": {
2880
3235
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3236
+ },
3237
+ "org.primer.llm": {
3238
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3239
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2881
3240
  }
2882
3241
  },
2883
3242
  "key": "{borderColor.attention.emphasis}"
@@ -2886,7 +3245,8 @@
2886
3245
  "attributes": {},
2887
3246
  "path": ["borderColor", "attention", "emphasis"],
2888
3247
  "value": "#e09b13",
2889
- "type": "color"
3248
+ "type": "color",
3249
+ "description": "Strong attention border for prominent warnings"
2890
3250
  },
2891
3251
  "borderColor-attention-muted": {
2892
3252
  "key": "{borderColor.attention.muted}",
@@ -2950,6 +3310,10 @@
2950
3310
  "isSource": true,
2951
3311
  "$type": "color"
2952
3312
  }
3313
+ },
3314
+ "org.primer.llm": {
3315
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3316
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2953
3317
  }
2954
3318
  },
2955
3319
  "alpha": 1,
@@ -2958,6 +3322,7 @@
2958
3322
  "original": {
2959
3323
  "$value": "{base.color.yellow.4}",
2960
3324
  "$type": "color",
3325
+ "$description": "Subtle attention border for warnings and caution states",
2961
3326
  "$extensions": {
2962
3327
  "org.primer.figma": {
2963
3328
  "collection": "mode",
@@ -3018,6 +3383,10 @@
3018
3383
  "isSource": true,
3019
3384
  "$type": "color"
3020
3385
  }
3386
+ },
3387
+ "org.primer.llm": {
3388
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3389
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
3021
3390
  }
3022
3391
  },
3023
3392
  "alpha": 1,
@@ -3027,7 +3396,8 @@
3027
3396
  "attributes": {},
3028
3397
  "path": ["borderColor", "attention", "muted"],
3029
3398
  "value": "#edaa27",
3030
- "type": "color"
3399
+ "type": "color",
3400
+ "description": "Subtle attention border for warnings and caution states"
3031
3401
  },
3032
3402
  "borderColor-closed-emphasis": {
3033
3403
  "key": "{borderColor.closed.emphasis}",
@@ -3049,6 +3419,10 @@
3049
3419
  "dark-tritanopia-high-contrast": "#b7bdc8",
3050
3420
  "light-tritanopia": "#b7bdc8",
3051
3421
  "light-tritanopia-high-contrast": "#b7bdc8"
3422
+ },
3423
+ "org.primer.llm": {
3424
+ "usage": ["closed-emphasis", "closed-status"],
3425
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3052
3426
  }
3053
3427
  },
3054
3428
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3056,6 +3430,7 @@
3056
3430
  "original": {
3057
3431
  "$value": "{borderColor.emphasis}",
3058
3432
  "$type": "color",
3433
+ "$description": "Strong border for closed state badges",
3059
3434
  "$extensions": {
3060
3435
  "org.primer.figma": {
3061
3436
  "collection": "mode",
@@ -3074,6 +3449,10 @@
3074
3449
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3075
3450
  "light-tritanopia": "{borderColor.emphasis}",
3076
3451
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3452
+ },
3453
+ "org.primer.llm": {
3454
+ "usage": ["closed-emphasis", "closed-status"],
3455
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3077
3456
  }
3078
3457
  },
3079
3458
  "key": "{borderColor.closed.emphasis}"
@@ -3082,7 +3461,8 @@
3082
3461
  "attributes": {},
3083
3462
  "path": ["borderColor", "closed", "emphasis"],
3084
3463
  "value": "#b7bdc8",
3085
- "type": "color"
3464
+ "type": "color",
3465
+ "description": "Strong border for closed state badges"
3086
3466
  },
3087
3467
  "borderColor-closed-muted": {
3088
3468
  "key": "{borderColor.closed.muted}",
@@ -3152,6 +3532,10 @@
3152
3532
  "isSource": true,
3153
3533
  "$type": "color"
3154
3534
  }
3535
+ },
3536
+ "org.primer.llm": {
3537
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3538
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3155
3539
  }
3156
3540
  },
3157
3541
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3160,6 +3544,7 @@
3160
3544
  "original": {
3161
3545
  "$value": "{borderColor.default}",
3162
3546
  "$type": "color",
3547
+ "$description": "Subtle border for closed state indicators",
3163
3548
  "$extensions": {
3164
3549
  "org.primer.figma": {
3165
3550
  "collection": "mode",
@@ -3226,6 +3611,10 @@
3226
3611
  "isSource": true,
3227
3612
  "$type": "color"
3228
3613
  }
3614
+ },
3615
+ "org.primer.llm": {
3616
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3617
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3229
3618
  }
3230
3619
  },
3231
3620
  "alpha": 1,
@@ -3235,7 +3624,8 @@
3235
3624
  "attributes": {},
3236
3625
  "path": ["borderColor", "closed", "muted"],
3237
3626
  "value": "#b7bdc8",
3238
- "type": "color"
3627
+ "type": "color",
3628
+ "description": "Subtle border for closed state indicators"
3239
3629
  },
3240
3630
  "borderColor-danger-emphasis": {
3241
3631
  "key": "{borderColor.danger.emphasis}",
@@ -3274,6 +3664,10 @@
3274
3664
  "$type": "color"
3275
3665
  },
3276
3666
  "dark-dimmed-high-contrast": "#ffb1af"
3667
+ },
3668
+ "org.primer.llm": {
3669
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3670
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3277
3671
  }
3278
3672
  },
3279
3673
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3281,6 +3675,7 @@
3281
3675
  "original": {
3282
3676
  "$value": "{base.color.orange.5}",
3283
3677
  "$type": "color",
3678
+ "$description": "Strong danger border for destructive actions and errors",
3284
3679
  "$extensions": {
3285
3680
  "org.primer.figma": {
3286
3681
  "collection": "mode",
@@ -3316,6 +3711,10 @@
3316
3711
  "$type": "color"
3317
3712
  },
3318
3713
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3714
+ },
3715
+ "org.primer.llm": {
3716
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3717
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3319
3718
  }
3320
3719
  },
3321
3720
  "key": "{borderColor.danger.emphasis}"
@@ -3324,7 +3723,8 @@
3324
3723
  "attributes": {},
3325
3724
  "path": ["borderColor", "danger", "emphasis"],
3326
3725
  "value": "#e7811d",
3327
- "type": "color"
3726
+ "type": "color",
3727
+ "description": "Strong danger border for destructive actions and errors"
3328
3728
  },
3329
3729
  "borderColor-danger-muted": {
3330
3730
  "key": "{borderColor.danger.muted}",
@@ -3401,6 +3801,10 @@
3401
3801
  "isSource": true,
3402
3802
  "$type": "color"
3403
3803
  }
3804
+ },
3805
+ "org.primer.llm": {
3806
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3807
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3404
3808
  }
3405
3809
  },
3406
3810
  "alpha": 1,
@@ -3409,6 +3813,7 @@
3409
3813
  "original": {
3410
3814
  "$value": "{base.color.orange.4}",
3411
3815
  "$type": "color",
3816
+ "$description": "Subtle danger border for errors and destructive contexts",
3412
3817
  "$extensions": {
3413
3818
  "org.primer.figma": {
3414
3819
  "collection": "mode",
@@ -3482,6 +3887,10 @@
3482
3887
  "isSource": true,
3483
3888
  "$type": "color"
3484
3889
  }
3890
+ },
3891
+ "org.primer.llm": {
3892
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3893
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3485
3894
  }
3486
3895
  },
3487
3896
  "alpha": 1,
@@ -3491,7 +3900,8 @@
3491
3900
  "attributes": {},
3492
3901
  "path": ["borderColor", "danger", "muted"],
3493
3902
  "value": "#f48b25",
3494
- "type": "color"
3903
+ "type": "color",
3904
+ "description": "Subtle danger border for errors and destructive contexts"
3495
3905
  },
3496
3906
  "borderColor-default": {
3497
3907
  "key": "{borderColor.default}",
@@ -3514,6 +3924,10 @@
3514
3924
  "codeSyntax": {
3515
3925
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3516
3926
  }
3927
+ },
3928
+ "org.primer.llm": {
3929
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3930
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3517
3931
  }
3518
3932
  },
3519
3933
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3521,6 +3935,7 @@
3521
3935
  "original": {
3522
3936
  "$value": "{base.color.neutral.10}",
3523
3937
  "$type": "color",
3938
+ "$description": "Default border color for most UI elements",
3524
3939
  "$extensions": {
3525
3940
  "org.primer.overrides": {
3526
3941
  "dark": "{base.color.neutral.7}",
@@ -3540,6 +3955,10 @@
3540
3955
  "codeSyntax": {
3541
3956
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3542
3957
  }
3958
+ },
3959
+ "org.primer.llm": {
3960
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3961
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3543
3962
  }
3544
3963
  },
3545
3964
  "key": "{borderColor.default}"
@@ -3548,7 +3967,8 @@
3548
3967
  "attributes": {},
3549
3968
  "path": ["borderColor", "default"],
3550
3969
  "value": "#b7bdc8",
3551
- "type": "color"
3970
+ "type": "color",
3971
+ "description": "Default border color for most UI elements"
3552
3972
  },
3553
3973
  "borderColor-disabled": {
3554
3974
  "key": "{borderColor.disabled}",
@@ -3594,6 +4014,10 @@
3594
4014
  "isSource": true,
3595
4015
  "$type": "color"
3596
4016
  }
4017
+ },
4018
+ "org.primer.llm": {
4019
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4020
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3597
4021
  }
3598
4022
  },
3599
4023
  "alpha": 0.1,
@@ -3602,6 +4026,7 @@
3602
4026
  "original": {
3603
4027
  "$value": "{base.color.neutral.8}",
3604
4028
  "$type": "color",
4029
+ "$description": "Border color for disabled interactive elements",
3605
4030
  "$extensions": {
3606
4031
  "org.primer.figma": {
3607
4032
  "collection": "mode",
@@ -3644,6 +4069,10 @@
3644
4069
  "isSource": true,
3645
4070
  "$type": "color"
3646
4071
  }
4072
+ },
4073
+ "org.primer.llm": {
4074
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4075
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3647
4076
  }
3648
4077
  },
3649
4078
  "alpha": 0.1,
@@ -3653,7 +4082,8 @@
3653
4082
  "attributes": {},
3654
4083
  "path": ["borderColor", "disabled"],
3655
4084
  "value": "#656c761a",
3656
- "type": "color"
4085
+ "type": "color",
4086
+ "description": "Border color for disabled interactive elements"
3657
4087
  },
3658
4088
  "borderColor-done-emphasis": {
3659
4089
  "key": "{borderColor.done.emphasis}",
@@ -3668,6 +4098,10 @@
3668
4098
  },
3669
4099
  "org.primer.overrides": {
3670
4100
  "dark-dimmed-high-contrast": "#dbb7ff"
4101
+ },
4102
+ "org.primer.llm": {
4103
+ "usage": ["done-emphasis", "merged-status"],
4104
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3671
4105
  }
3672
4106
  },
3673
4107
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3675,6 +4109,7 @@
3675
4109
  "original": {
3676
4110
  "$value": "{base.color.purple.5}",
3677
4111
  "$type": "color",
4112
+ "$description": "Strong border for completed/done state badges",
3678
4113
  "$extensions": {
3679
4114
  "org.primer.figma": {
3680
4115
  "collection": "mode",
@@ -3686,6 +4121,10 @@
3686
4121
  },
3687
4122
  "org.primer.overrides": {
3688
4123
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4124
+ },
4125
+ "org.primer.llm": {
4126
+ "usage": ["done-emphasis", "merged-status"],
4127
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3689
4128
  }
3690
4129
  },
3691
4130
  "key": "{borderColor.done.emphasis}"
@@ -3694,7 +4133,8 @@
3694
4133
  "attributes": {},
3695
4134
  "path": ["borderColor", "done", "emphasis"],
3696
4135
  "value": "#b87fff",
3697
- "type": "color"
4136
+ "type": "color",
4137
+ "description": "Strong border for completed/done state badges"
3698
4138
  },
3699
4139
  "borderColor-done-muted": {
3700
4140
  "key": "{borderColor.done.muted}",
@@ -3758,6 +4198,10 @@
3758
4198
  "isSource": true,
3759
4199
  "$type": "color"
3760
4200
  }
4201
+ },
4202
+ "org.primer.llm": {
4203
+ "usage": ["done-muted", "merged", "completed"],
4204
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3761
4205
  }
3762
4206
  },
3763
4207
  "alpha": 1,
@@ -3766,6 +4210,7 @@
3766
4210
  "original": {
3767
4211
  "$value": "{base.color.purple.4}",
3768
4212
  "$type": "color",
4213
+ "$description": "Subtle border for completed/done state indicators",
3769
4214
  "$extensions": {
3770
4215
  "org.primer.figma": {
3771
4216
  "collection": "mode",
@@ -3826,6 +4271,10 @@
3826
4271
  "isSource": true,
3827
4272
  "$type": "color"
3828
4273
  }
4274
+ },
4275
+ "org.primer.llm": {
4276
+ "usage": ["done-muted", "merged", "completed"],
4277
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3829
4278
  }
3830
4279
  },
3831
4280
  "alpha": 1,
@@ -3835,7 +4284,8 @@
3835
4284
  "attributes": {},
3836
4285
  "path": ["borderColor", "done", "muted"],
3837
4286
  "value": "#bf8fff",
3838
- "type": "color"
4287
+ "type": "color",
4288
+ "description": "Subtle border for completed/done state indicators"
3839
4289
  },
3840
4290
  "borderColor-draft-emphasis": {
3841
4291
  "key": "{borderColor.draft.emphasis}",
@@ -3847,6 +4297,10 @@
3847
4297
  "codeSyntax": {
3848
4298
  "web": "var(--borderColor-draft-emphasis)"
3849
4299
  }
4300
+ },
4301
+ "org.primer.llm": {
4302
+ "usage": ["draft-emphasis", "draft-status"],
4303
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3850
4304
  }
3851
4305
  },
3852
4306
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3854,6 +4308,7 @@
3854
4308
  "original": {
3855
4309
  "$value": "{borderColor.neutral.emphasis}",
3856
4310
  "$type": "color",
4311
+ "$description": "Strong border for draft state badges",
3857
4312
  "$extensions": {
3858
4313
  "org.primer.figma": {
3859
4314
  "collection": "mode",
@@ -3862,6 +4317,10 @@
3862
4317
  "codeSyntax": {
3863
4318
  "web": "var(--borderColor-draft-emphasis)"
3864
4319
  }
4320
+ },
4321
+ "org.primer.llm": {
4322
+ "usage": ["draft-emphasis", "draft-status"],
4323
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3865
4324
  }
3866
4325
  },
3867
4326
  "key": "{borderColor.draft.emphasis}"
@@ -3870,7 +4329,8 @@
3870
4329
  "attributes": {},
3871
4330
  "path": ["borderColor", "draft", "emphasis"],
3872
4331
  "value": "#b7bdc8",
3873
- "type": "color"
4332
+ "type": "color",
4333
+ "description": "Strong border for draft state badges"
3874
4334
  },
3875
4335
  "borderColor-draft-muted": {
3876
4336
  "key": "{borderColor.draft.muted}",
@@ -3940,6 +4400,10 @@
3940
4400
  "isSource": true,
3941
4401
  "$type": "color"
3942
4402
  }
4403
+ },
4404
+ "org.primer.llm": {
4405
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4406
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3943
4407
  }
3944
4408
  },
3945
4409
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3948,6 +4412,7 @@
3948
4412
  "original": {
3949
4413
  "$value": "{borderColor.default}",
3950
4414
  "$type": "color",
4415
+ "$description": "Subtle border for draft state indicators",
3951
4416
  "$extensions": {
3952
4417
  "org.primer.figma": {
3953
4418
  "collection": "mode",
@@ -4014,6 +4479,10 @@
4014
4479
  "isSource": true,
4015
4480
  "$type": "color"
4016
4481
  }
4482
+ },
4483
+ "org.primer.llm": {
4484
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4485
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
4017
4486
  }
4018
4487
  },
4019
4488
  "alpha": 1,
@@ -4023,7 +4492,8 @@
4023
4492
  "attributes": {},
4024
4493
  "path": ["borderColor", "draft", "muted"],
4025
4494
  "value": "#b7bdc8",
4026
- "type": "color"
4495
+ "type": "color",
4496
+ "description": "Subtle border for draft state indicators"
4027
4497
  },
4028
4498
  "borderColor-emphasis": {
4029
4499
  "key": "{borderColor.emphasis}",
@@ -4041,6 +4511,10 @@
4041
4511
  "dark-dimmed-high-contrast": "#b7bdc8",
4042
4512
  "dark-tritanopia-high-contrast": "#b7bdc8",
4043
4513
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
4514
+ },
4515
+ "org.primer.llm": {
4516
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4517
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4044
4518
  }
4045
4519
  },
4046
4520
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4048,6 +4522,7 @@
4048
4522
  "original": {
4049
4523
  "$value": "{borderColor.default}",
4050
4524
  "$type": "color",
4525
+ "$description": "Strong border for emphasis and visual weight",
4051
4526
  "$extensions": {
4052
4527
  "org.primer.figma": {
4053
4528
  "collection": "mode",
@@ -4062,6 +4537,10 @@
4062
4537
  "dark-dimmed-high-contrast": "{borderColor.default}",
4063
4538
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4064
4539
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
4540
+ },
4541
+ "org.primer.llm": {
4542
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4543
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4065
4544
  }
4066
4545
  },
4067
4546
  "key": "{borderColor.emphasis}"
@@ -4070,7 +4549,8 @@
4070
4549
  "attributes": {},
4071
4550
  "path": ["borderColor", "emphasis"],
4072
4551
  "value": "#b7bdc8",
4073
- "type": "color"
4552
+ "type": "color",
4553
+ "description": "Strong border for emphasis and visual weight"
4074
4554
  },
4075
4555
  "borderColor-muted": {
4076
4556
  "key": "{borderColor.muted}",
@@ -4140,6 +4620,10 @@
4140
4620
  "isSource": true,
4141
4621
  "$type": "color"
4142
4622
  }
4623
+ },
4624
+ "org.primer.llm": {
4625
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4626
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4143
4627
  }
4144
4628
  },
4145
4629
  "alpha": 1,
@@ -4148,6 +4632,7 @@
4148
4632
  "original": {
4149
4633
  "$value": "{borderColor.default}",
4150
4634
  "$type": "color",
4635
+ "$description": "Subtle border for secondary elements and light separators",
4151
4636
  "$extensions": {
4152
4637
  "org.primer.figma": {
4153
4638
  "collection": "mode",
@@ -4214,6 +4699,10 @@
4214
4699
  "isSource": true,
4215
4700
  "$type": "color"
4216
4701
  }
4702
+ },
4703
+ "org.primer.llm": {
4704
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4705
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4217
4706
  }
4218
4707
  },
4219
4708
  "alpha": 1,
@@ -4223,7 +4712,8 @@
4223
4712
  "attributes": {},
4224
4713
  "path": ["borderColor", "muted"],
4225
4714
  "value": "#b7bdc8",
4226
- "type": "color"
4715
+ "type": "color",
4716
+ "description": "Subtle border for secondary elements and light separators"
4227
4717
  },
4228
4718
  "borderColor-neutral-emphasis": {
4229
4719
  "key": "{borderColor.neutral.emphasis}",
@@ -4235,6 +4725,10 @@
4235
4725
  },
4236
4726
  "org.primer.overrides": {
4237
4727
  "dark": "#b7bdc8"
4728
+ },
4729
+ "org.primer.llm": {
4730
+ "usage": ["neutral-emphasis", "neutral-strong"],
4731
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4238
4732
  }
4239
4733
  },
4240
4734
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4242,6 +4736,7 @@
4242
4736
  "original": {
4243
4737
  "$value": "{borderColor.emphasis}",
4244
4738
  "$type": "color",
4739
+ "$description": "Strong neutral semantic border",
4245
4740
  "$extensions": {
4246
4741
  "org.primer.figma": {
4247
4742
  "collection": "mode",
@@ -4250,6 +4745,10 @@
4250
4745
  },
4251
4746
  "org.primer.overrides": {
4252
4747
  "dark": "{borderColor.emphasis}"
4748
+ },
4749
+ "org.primer.llm": {
4750
+ "usage": ["neutral-emphasis", "neutral-strong"],
4751
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4253
4752
  }
4254
4753
  },
4255
4754
  "key": "{borderColor.neutral.emphasis}"
@@ -4258,7 +4757,8 @@
4258
4757
  "attributes": {},
4259
4758
  "path": ["borderColor", "neutral", "emphasis"],
4260
4759
  "value": "#b7bdc8",
4261
- "type": "color"
4760
+ "type": "color",
4761
+ "description": "Strong neutral semantic border"
4262
4762
  },
4263
4763
  "borderColor-neutral-muted": {
4264
4764
  "key": "{borderColor.neutral.muted}",
@@ -4283,6 +4783,10 @@
4283
4783
  "isSource": true,
4284
4784
  "$type": "color"
4285
4785
  }
4786
+ },
4787
+ "org.primer.llm": {
4788
+ "usage": ["neutral-muted", "neutral-secondary"],
4789
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4286
4790
  }
4287
4791
  },
4288
4792
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4290,6 +4794,7 @@
4290
4794
  "original": {
4291
4795
  "$value": "{borderColor.muted}",
4292
4796
  "$type": "color",
4797
+ "$description": "Subtle neutral semantic border",
4293
4798
  "$extensions": {
4294
4799
  "org.primer.figma": {
4295
4800
  "collection": "mode",
@@ -4311,6 +4816,10 @@
4311
4816
  "isSource": true,
4312
4817
  "$type": "color"
4313
4818
  }
4819
+ },
4820
+ "org.primer.llm": {
4821
+ "usage": ["neutral-muted", "neutral-secondary"],
4822
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4314
4823
  }
4315
4824
  },
4316
4825
  "key": "{borderColor.neutral.muted}"
@@ -4319,7 +4828,8 @@
4319
4828
  "attributes": {},
4320
4829
  "path": ["borderColor", "neutral", "muted"],
4321
4830
  "value": "#b7bdc8",
4322
- "type": "color"
4831
+ "type": "color",
4832
+ "description": "Subtle neutral semantic border"
4323
4833
  },
4324
4834
  "borderColor-open-emphasis": {
4325
4835
  "key": "{borderColor.open.emphasis}",
@@ -4341,6 +4851,10 @@
4341
4851
  "dark-protanopia-deuteranopia-high-contrast": "#e7811d",
4342
4852
  "light-protanopia-deuteranopia": "#e7811d",
4343
4853
  "light-protanopia-deuteranopia-high-contrast": "#e7811d"
4854
+ },
4855
+ "org.primer.llm": {
4856
+ "usage": ["open-emphasis", "open-status"],
4857
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4344
4858
  }
4345
4859
  },
4346
4860
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4348,6 +4862,7 @@
4348
4862
  "original": {
4349
4863
  "$value": "{base.color.orange.5}",
4350
4864
  "$type": "color",
4865
+ "$description": "Strong border for open state badges",
4351
4866
  "$extensions": {
4352
4867
  "org.primer.figma": {
4353
4868
  "collection": "mode",
@@ -4366,6 +4881,10 @@
4366
4881
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4367
4882
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4368
4883
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4884
+ },
4885
+ "org.primer.llm": {
4886
+ "usage": ["open-emphasis", "open-status"],
4887
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4369
4888
  }
4370
4889
  },
4371
4890
  "key": "{borderColor.open.emphasis}"
@@ -4374,7 +4893,8 @@
4374
4893
  "attributes": {},
4375
4894
  "path": ["borderColor", "open", "emphasis"],
4376
4895
  "value": "#e7811d",
4377
- "type": "color"
4896
+ "type": "color",
4897
+ "description": "Strong border for open state badges"
4378
4898
  },
4379
4899
  "borderColor-open-muted": {
4380
4900
  "key": "{borderColor.open.muted}",
@@ -4444,6 +4964,10 @@
4444
4964
  "isSource": true,
4445
4965
  "$type": "color"
4446
4966
  }
4967
+ },
4968
+ "org.primer.llm": {
4969
+ "usage": ["open-muted", "open-issue", "open-pr"],
4970
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4447
4971
  }
4448
4972
  },
4449
4973
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4452,6 +4976,7 @@
4452
4976
  "original": {
4453
4977
  "$value": "{base.color.orange.4}",
4454
4978
  "$type": "color",
4979
+ "$description": "Subtle border for open state indicators",
4455
4980
  "$extensions": {
4456
4981
  "org.primer.figma": {
4457
4982
  "collection": "mode",
@@ -4518,6 +5043,10 @@
4518
5043
  "isSource": true,
4519
5044
  "$type": "color"
4520
5045
  }
5046
+ },
5047
+ "org.primer.llm": {
5048
+ "usage": ["open-muted", "open-issue", "open-pr"],
5049
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4521
5050
  }
4522
5051
  },
4523
5052
  "alpha": 1,
@@ -4527,7 +5056,8 @@
4527
5056
  "attributes": {},
4528
5057
  "path": ["borderColor", "open", "muted"],
4529
5058
  "value": "#f48b25",
4530
- "type": "color"
5059
+ "type": "color",
5060
+ "description": "Subtle border for open state indicators"
4531
5061
  },
4532
5062
  "borderColor-severe-emphasis": {
4533
5063
  "key": "{borderColor.severe.emphasis}",
@@ -4545,6 +5075,10 @@
4545
5075
  "light-tritanopia": "#ff6a69",
4546
5076
  "light-tritanopia-high-contrast": "#ff6a69",
4547
5077
  "dark-dimmed-high-contrast": "#ffb757"
5078
+ },
5079
+ "org.primer.llm": {
5080
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5081
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4548
5082
  }
4549
5083
  },
4550
5084
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4552,6 +5086,7 @@
4552
5086
  "original": {
4553
5087
  "$value": "{base.color.orange.5}",
4554
5088
  "$type": "color",
5089
+ "$description": "Strong severe border for prominent high-priority warnings",
4555
5090
  "$extensions": {
4556
5091
  "org.primer.figma": {
4557
5092
  "collection": "mode",
@@ -4566,6 +5101,10 @@
4566
5101
  "light-tritanopia": "{base.color.red.5}",
4567
5102
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4568
5103
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5104
+ },
5105
+ "org.primer.llm": {
5106
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5107
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4569
5108
  }
4570
5109
  },
4571
5110
  "key": "{borderColor.severe.emphasis}"
@@ -4574,7 +5113,8 @@
4574
5113
  "attributes": {},
4575
5114
  "path": ["borderColor", "severe", "emphasis"],
4576
5115
  "value": "#e7811d",
4577
- "type": "color"
5116
+ "type": "color",
5117
+ "description": "Strong severe border for prominent high-priority warnings"
4578
5118
  },
4579
5119
  "borderColor-severe-muted": {
4580
5120
  "key": "{borderColor.severe.muted}",
@@ -4633,6 +5173,10 @@
4633
5173
  "isSource": true,
4634
5174
  "$type": "color"
4635
5175
  }
5176
+ },
5177
+ "org.primer.llm": {
5178
+ "usage": ["severe-muted", "urgent-muted"],
5179
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4636
5180
  }
4637
5181
  },
4638
5182
  "alpha": 1,
@@ -4641,6 +5185,7 @@
4641
5185
  "original": {
4642
5186
  "$value": "{base.color.orange.5}",
4643
5187
  "$type": "color",
5188
+ "$description": "Subtle severe border for high-priority warnings",
4644
5189
  "$extensions": {
4645
5190
  "org.primer.figma": {
4646
5191
  "collection": "mode",
@@ -4696,6 +5241,10 @@
4696
5241
  "isSource": true,
4697
5242
  "$type": "color"
4698
5243
  }
5244
+ },
5245
+ "org.primer.llm": {
5246
+ "usage": ["severe-muted", "urgent-muted"],
5247
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4699
5248
  }
4700
5249
  },
4701
5250
  "alpha": 1,
@@ -4705,7 +5254,8 @@
4705
5254
  "attributes": {},
4706
5255
  "path": ["borderColor", "severe", "muted"],
4707
5256
  "value": "#e7811d",
4708
- "type": "color"
5257
+ "type": "color",
5258
+ "description": "Subtle severe border for high-priority warnings"
4709
5259
  },
4710
5260
  "borderColor-sponsors-emphasis": {
4711
5261
  "key": "{borderColor.sponsors.emphasis}",
@@ -4720,6 +5270,10 @@
4720
5270
  },
4721
5271
  "org.primer.overrides": {
4722
5272
  "dark-dimmed-high-contrast": "#ff8dc7"
5273
+ },
5274
+ "org.primer.llm": {
5275
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5276
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4723
5277
  }
4724
5278
  },
4725
5279
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4727,6 +5281,7 @@
4727
5281
  "original": {
4728
5282
  "$value": "{base.color.pink.5}",
4729
5283
  "$type": "color",
5284
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4730
5285
  "$extensions": {
4731
5286
  "org.primer.figma": {
4732
5287
  "collection": "mode",
@@ -4738,6 +5293,10 @@
4738
5293
  },
4739
5294
  "org.primer.overrides": {
4740
5295
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5296
+ },
5297
+ "org.primer.llm": {
5298
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5299
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4741
5300
  }
4742
5301
  },
4743
5302
  "key": "{borderColor.sponsors.emphasis}"
@@ -4746,7 +5305,8 @@
4746
5305
  "attributes": {},
4747
5306
  "path": ["borderColor", "sponsors", "emphasis"],
4748
5307
  "value": "#ef6eb1",
4749
- "type": "color"
5308
+ "type": "color",
5309
+ "description": "Strong border for prominent GitHub Sponsors elements"
4750
5310
  },
4751
5311
  "borderColor-sponsors-muted": {
4752
5312
  "key": "{borderColor.sponsors.muted}",
@@ -4810,6 +5370,10 @@
4810
5370
  "isSource": true,
4811
5371
  "$type": "color"
4812
5372
  }
5373
+ },
5374
+ "org.primer.llm": {
5375
+ "usage": ["sponsors-muted", "funding-muted"],
5376
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4813
5377
  }
4814
5378
  },
4815
5379
  "alpha": 1,
@@ -4818,6 +5382,7 @@
4818
5382
  "original": {
4819
5383
  "$value": "{base.color.pink.4}",
4820
5384
  "$type": "color",
5385
+ "$description": "Subtle border for GitHub Sponsors content",
4821
5386
  "$extensions": {
4822
5387
  "org.primer.figma": {
4823
5388
  "collection": "mode",
@@ -4878,6 +5443,10 @@
4878
5443
  "isSource": true,
4879
5444
  "$type": "color"
4880
5445
  }
5446
+ },
5447
+ "org.primer.llm": {
5448
+ "usage": ["sponsors-muted", "funding-muted"],
5449
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4881
5450
  }
4882
5451
  },
4883
5452
  "alpha": 1,
@@ -4887,7 +5456,8 @@
4887
5456
  "attributes": {},
4888
5457
  "path": ["borderColor", "sponsors", "muted"],
4889
5458
  "value": "#f87cbd",
4890
- "type": "color"
5459
+ "type": "color",
5460
+ "description": "Subtle border for GitHub Sponsors content"
4891
5461
  },
4892
5462
  "borderColor-success-emphasis": {
4893
5463
  "key": "{borderColor.success.emphasis}",
@@ -4910,6 +5480,10 @@
4910
5480
  "light-protanopia-deuteranopia": "#409eff",
4911
5481
  "light-protanopia-deuteranopia-high-contrast": "#409eff",
4912
5482
  "dark-dimmed-high-contrast": "#4ae168"
5483
+ },
5484
+ "org.primer.llm": {
5485
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5486
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4913
5487
  }
4914
5488
  },
4915
5489
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4917,6 +5491,7 @@
4917
5491
  "original": {
4918
5492
  "$value": "{base.color.blue.5}",
4919
5493
  "$type": "color",
5494
+ "$description": "Strong success border for prominent positive elements",
4920
5495
  "$extensions": {
4921
5496
  "org.primer.figma": {
4922
5497
  "collection": "mode",
@@ -4936,6 +5511,10 @@
4936
5511
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4937
5512
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4938
5513
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5514
+ },
5515
+ "org.primer.llm": {
5516
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5517
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4939
5518
  }
4940
5519
  },
4941
5520
  "key": "{borderColor.success.emphasis}"
@@ -4944,7 +5523,8 @@
4944
5523
  "attributes": {},
4945
5524
  "path": ["borderColor", "success", "emphasis"],
4946
5525
  "value": "#409eff",
4947
- "type": "color"
5526
+ "type": "color",
5527
+ "description": "Strong success border for prominent positive elements"
4948
5528
  },
4949
5529
  "borderColor-success-muted": {
4950
5530
  "key": "{borderColor.success.muted}",
@@ -5035,6 +5615,10 @@
5035
5615
  "isSource": true,
5036
5616
  "$type": "color"
5037
5617
  }
5618
+ },
5619
+ "org.primer.llm": {
5620
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5621
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5038
5622
  }
5039
5623
  },
5040
5624
  "alpha": 1,
@@ -5043,6 +5627,7 @@
5043
5627
  "original": {
5044
5628
  "$value": "{base.color.blue.4}",
5045
5629
  "$type": "color",
5630
+ "$description": "Subtle success border for positive feedback elements",
5046
5631
  "$extensions": {
5047
5632
  "org.primer.figma": {
5048
5633
  "collection": "mode",
@@ -5130,6 +5715,10 @@
5130
5715
  "isSource": true,
5131
5716
  "$type": "color"
5132
5717
  }
5718
+ },
5719
+ "org.primer.llm": {
5720
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5721
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5133
5722
  }
5134
5723
  },
5135
5724
  "alpha": 1,
@@ -5139,7 +5728,8 @@
5139
5728
  "attributes": {},
5140
5729
  "path": ["borderColor", "success", "muted"],
5141
5730
  "value": "#5cacff",
5142
- "type": "color"
5731
+ "type": "color",
5732
+ "description": "Subtle success border for positive feedback elements"
5143
5733
  },
5144
5734
  "borderColor-translucent": {
5145
5735
  "key": "{borderColor.translucent}",
@@ -5199,6 +5789,10 @@
5199
5789
  "isSource": true,
5200
5790
  "$type": "color"
5201
5791
  }
5792
+ },
5793
+ "org.primer.llm": {
5794
+ "usage": ["overlay-border", "translucent-border"],
5795
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5202
5796
  }
5203
5797
  },
5204
5798
  "alpha": 1,
@@ -5207,6 +5801,7 @@
5207
5801
  "original": {
5208
5802
  "$value": "{base.color.neutral.9}",
5209
5803
  "$type": "color",
5804
+ "$description": "Semi-transparent border for overlays and layered elements",
5210
5805
  "$extensions": {
5211
5806
  "org.primer.figma": {
5212
5807
  "collection": "mode",
@@ -5263,6 +5858,10 @@
5263
5858
  "isSource": true,
5264
5859
  "$type": "color"
5265
5860
  }
5861
+ },
5862
+ "org.primer.llm": {
5863
+ "usage": ["overlay-border", "translucent-border"],
5864
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5266
5865
  }
5267
5866
  },
5268
5867
  "alpha": 1,
@@ -5272,7 +5871,8 @@
5272
5871
  "attributes": {},
5273
5872
  "path": ["borderColor", "translucent"],
5274
5873
  "value": "#9198a1",
5275
- "type": "color"
5874
+ "type": "color",
5875
+ "description": "Semi-transparent border for overlays and layered elements"
5276
5876
  },
5277
5877
  "borderColor-transparent": {
5278
5878
  "key": "{borderColor.transparent}",
@@ -5288,6 +5888,7 @@
5288
5888
  "original": {
5289
5889
  "$value": "{base.color.transparent}",
5290
5890
  "$type": "color",
5891
+ "$description": "Fully transparent border",
5291
5892
  "$extensions": {
5292
5893
  "org.primer.figma": {
5293
5894
  "collection": "mode",
@@ -5301,7 +5902,8 @@
5301
5902
  "attributes": {},
5302
5903
  "path": ["borderColor", "transparent"],
5303
5904
  "value": "#00000000",
5304
- "type": "color"
5905
+ "type": "color",
5906
+ "description": "Fully transparent border"
5305
5907
  },
5306
5908
  "borderColor-upsell-emphasis": {
5307
5909
  "key": "{borderColor.upsell.emphasis}",
@@ -5313,6 +5915,10 @@
5313
5915
  "codeSyntax": {
5314
5916
  "web": "var(--borderColor-upsell-emphasis)"
5315
5917
  }
5918
+ },
5919
+ "org.primer.llm": {
5920
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5921
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5316
5922
  }
5317
5923
  },
5318
5924
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5320,6 +5926,7 @@
5320
5926
  "original": {
5321
5927
  "$value": "{borderColor.done.emphasis}",
5322
5928
  "$type": "color",
5929
+ "$description": "Strong border for prominent upsell elements",
5323
5930
  "$extensions": {
5324
5931
  "org.primer.figma": {
5325
5932
  "collection": "mode",
@@ -5328,6 +5935,10 @@
5328
5935
  "codeSyntax": {
5329
5936
  "web": "var(--borderColor-upsell-emphasis)"
5330
5937
  }
5938
+ },
5939
+ "org.primer.llm": {
5940
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5941
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5331
5942
  }
5332
5943
  },
5333
5944
  "key": "{borderColor.upsell.emphasis}"
@@ -5336,7 +5947,8 @@
5336
5947
  "attributes": {},
5337
5948
  "path": ["borderColor", "upsell", "emphasis"],
5338
5949
  "value": "#b87fff",
5339
- "type": "color"
5950
+ "type": "color",
5951
+ "description": "Strong border for prominent upsell elements"
5340
5952
  },
5341
5953
  "borderColor-upsell-muted": {
5342
5954
  "key": "{borderColor.upsell.muted}",
@@ -5348,6 +5960,10 @@
5348
5960
  "codeSyntax": {
5349
5961
  "web": "var(--borderColor-upsell-muted)"
5350
5962
  }
5963
+ },
5964
+ "org.primer.llm": {
5965
+ "usage": ["upsell-muted", "premium-muted"],
5966
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5351
5967
  }
5352
5968
  },
5353
5969
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5355,6 +5971,7 @@
5355
5971
  "original": {
5356
5972
  "$value": "{borderColor.done.muted}",
5357
5973
  "$type": "color",
5974
+ "$description": "Subtle border for upsell and promotional content",
5358
5975
  "$extensions": {
5359
5976
  "org.primer.figma": {
5360
5977
  "collection": "mode",
@@ -5363,6 +5980,10 @@
5363
5980
  "codeSyntax": {
5364
5981
  "web": "var(--borderColor-upsell-muted)"
5365
5982
  }
5983
+ },
5984
+ "org.primer.llm": {
5985
+ "usage": ["upsell-muted", "premium-muted"],
5986
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5366
5987
  }
5367
5988
  },
5368
5989
  "key": "{borderColor.upsell.muted}"
@@ -5371,7 +5992,8 @@
5371
5992
  "attributes": {},
5372
5993
  "path": ["borderColor", "upsell", "muted"],
5373
5994
  "value": "#bf8fff",
5374
- "type": "color"
5995
+ "type": "color",
5996
+ "description": "Subtle border for upsell and promotional content"
5375
5997
  },
5376
5998
  "button-danger-bgColor-active": {
5377
5999
  "key": "{button.danger.bgColor.active}",
@@ -36532,6 +37154,10 @@
36532
37154
  "light-high-contrast": "#318bf8",
36533
37155
  "light-tritanopia-high-contrast": "#318bf8",
36534
37156
  "light-protanopia-deuteranopia-high-contrast": "#318bf8"
37157
+ },
37158
+ "org.primer.llm": {
37159
+ "usage": ["accent-text", "info-text", "accent-icon"],
37160
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36535
37161
  }
36536
37162
  },
36537
37163
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36539,6 +37165,7 @@
36539
37165
  "original": {
36540
37166
  "$value": "#74B9FF",
36541
37167
  "$type": "color",
37168
+ "$description": "Accent text for links and interactive elements",
36542
37169
  "$extensions": {
36543
37170
  "org.primer.figma": {
36544
37171
  "collection": "mode",
@@ -36558,6 +37185,10 @@
36558
37185
  "light-high-contrast": "{base.color.blue.6}",
36559
37186
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36560
37187
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37188
+ },
37189
+ "org.primer.llm": {
37190
+ "usage": ["accent-text", "info-text", "accent-icon"],
37191
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36561
37192
  }
36562
37193
  },
36563
37194
  "key": "{fgColor.accent}"
@@ -36566,7 +37197,8 @@
36566
37197
  "attributes": {},
36567
37198
  "path": ["fgColor", "accent"],
36568
37199
  "value": "#74b9ff",
36569
- "type": "color"
37200
+ "type": "color",
37201
+ "description": "Accent text for links and interactive elements"
36570
37202
  },
36571
37203
  "fgColor-attention": {
36572
37204
  "key": "{fgColor.attention}",
@@ -36585,6 +37217,10 @@
36585
37217
  "light-protanopia-deuteranopia-high-contrast": "#c88508",
36586
37218
  "light-tritanopia-high-contrast": "#c88508",
36587
37219
  "dark-dimmed-high-contrast": "#fbd669"
37220
+ },
37221
+ "org.primer.llm": {
37222
+ "usage": ["attention-text", "warning-text", "caution-text"],
37223
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36588
37224
  }
36589
37225
  },
36590
37226
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36592,6 +37228,7 @@
36592
37228
  "original": {
36593
37229
  "$value": "{base.color.yellow.3}",
36594
37230
  "$type": "color",
37231
+ "$description": "Attention text for warnings and caution states",
36595
37232
  "$extensions": {
36596
37233
  "org.primer.figma": {
36597
37234
  "collection": "mode",
@@ -36607,6 +37244,10 @@
36607
37244
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36608
37245
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36609
37246
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37247
+ },
37248
+ "org.primer.llm": {
37249
+ "usage": ["attention-text", "warning-text", "caution-text"],
37250
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36610
37251
  }
36611
37252
  },
36612
37253
  "key": "{fgColor.attention}"
@@ -36615,7 +37256,8 @@
36615
37256
  "attributes": {},
36616
37257
  "path": ["fgColor", "attention"],
36617
37258
  "value": "#f0b72f",
36618
- "type": "color"
37259
+ "type": "color",
37260
+ "description": "Attention text for warnings and caution states"
36619
37261
  },
36620
37262
  "fgColor-black": {
36621
37263
  "key": "{fgColor.black}",
@@ -36627,6 +37269,10 @@
36627
37269
  },
36628
37270
  "org.primer.overrides": {
36629
37271
  "dark": "#010409"
37272
+ },
37273
+ "org.primer.llm": {
37274
+ "doNotUse": true,
37275
+ "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."
36630
37276
  }
36631
37277
  },
36632
37278
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36634,6 +37280,7 @@
36634
37280
  "original": {
36635
37281
  "$value": "{base.color.neutral.0}",
36636
37282
  "$type": "color",
37283
+ "$description": "Pure black text",
36637
37284
  "$extensions": {
36638
37285
  "org.primer.figma": {
36639
37286
  "collection": "mode",
@@ -36642,6 +37289,10 @@
36642
37289
  },
36643
37290
  "org.primer.overrides": {
36644
37291
  "dark": "{base.color.neutral.0}"
37292
+ },
37293
+ "org.primer.llm": {
37294
+ "doNotUse": true,
37295
+ "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."
36645
37296
  }
36646
37297
  },
36647
37298
  "key": "{fgColor.black}"
@@ -36650,7 +37301,8 @@
36650
37301
  "attributes": {},
36651
37302
  "path": ["fgColor", "black"],
36652
37303
  "value": "#010409",
36653
- "type": "color"
37304
+ "type": "color",
37305
+ "description": "Pure black text"
36654
37306
  },
36655
37307
  "fgColor-closed": {
36656
37308
  "key": "{fgColor.closed}",
@@ -36672,6 +37324,10 @@
36672
37324
  "dark-tritanopia-high-contrast": "#b7bdc8",
36673
37325
  "light-tritanopia": "#b7bdc8",
36674
37326
  "light-tritanopia-high-contrast": "#b7bdc8"
37327
+ },
37328
+ "org.primer.llm": {
37329
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37330
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36675
37331
  }
36676
37332
  },
36677
37333
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36679,6 +37335,7 @@
36679
37335
  "original": {
36680
37336
  "$value": "{fgColor.muted}",
36681
37337
  "$type": "color",
37338
+ "$description": "Text color for closed state indicators (issues, PRs)",
36682
37339
  "$extensions": {
36683
37340
  "org.primer.figma": {
36684
37341
  "collection": "mode",
@@ -36697,6 +37354,10 @@
36697
37354
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36698
37355
  "light-tritanopia": "{fgColor.muted}",
36699
37356
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37357
+ },
37358
+ "org.primer.llm": {
37359
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37360
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36700
37361
  }
36701
37362
  },
36702
37363
  "key": "{fgColor.closed}"
@@ -36705,7 +37366,8 @@
36705
37366
  "attributes": {},
36706
37367
  "path": ["fgColor", "closed"],
36707
37368
  "value": "#b7bdc8",
36708
- "type": "color"
37369
+ "type": "color",
37370
+ "description": "Text color for closed state indicators (issues, PRs)"
36709
37371
  },
36710
37372
  "fgColor-danger": {
36711
37373
  "key": "{fgColor.danger}",
@@ -36729,6 +37391,10 @@
36729
37391
  "dark-tritanopia-high-contrast": "#ff9492",
36730
37392
  "light-high-contrast": "#ff4445",
36731
37393
  "light-tritanopia-high-contrast": "#ff4445"
37394
+ },
37395
+ "org.primer.llm": {
37396
+ "usage": ["danger-text", "error-text", "destructive-text"],
37397
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36732
37398
  }
36733
37399
  },
36734
37400
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36736,6 +37402,7 @@
36736
37402
  "original": {
36737
37403
  "$value": "{base.color.orange.2}",
36738
37404
  "$type": "color",
37405
+ "$description": "Danger text for errors and destructive actions",
36739
37406
  "$extensions": {
36740
37407
  "org.primer.figma": {
36741
37408
  "collection": "mode",
@@ -36756,6 +37423,10 @@
36756
37423
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36757
37424
  "light-high-contrast": "{base.color.red.6}",
36758
37425
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37426
+ },
37427
+ "org.primer.llm": {
37428
+ "usage": ["danger-text", "error-text", "destructive-text"],
37429
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36759
37430
  }
36760
37431
  },
36761
37432
  "key": "{fgColor.danger}"
@@ -36764,7 +37435,8 @@
36764
37435
  "attributes": {},
36765
37436
  "path": ["fgColor", "danger"],
36766
37437
  "value": "#ffb757",
36767
- "type": "color"
37438
+ "type": "color",
37439
+ "description": "Danger text for errors and destructive actions"
36768
37440
  },
36769
37441
  "fgColor-default": {
36770
37442
  "key": "{fgColor.default}",
@@ -36782,8 +37454,12 @@
36782
37454
  "dark-high-contrast": "#ffffff",
36783
37455
  "dark-tritanopia-high-contrast": "#ffffff",
36784
37456
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff",
36785
- "dark-dimmed": "#d1d7e0",
37457
+ "dark-dimmed": "#f0f6fc",
36786
37458
  "dark-dimmed-high-contrast": "#f0f6fc"
37459
+ },
37460
+ "org.primer.llm": {
37461
+ "usage": ["default-text", "heading", "body-text"],
37462
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36787
37463
  }
36788
37464
  },
36789
37465
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36791,6 +37467,7 @@
36791
37467
  "original": {
36792
37468
  "$value": "{base.color.neutral.13}",
36793
37469
  "$type": "color",
37470
+ "$description": "Default text color for primary content and headings",
36794
37471
  "$extensions": {
36795
37472
  "org.primer.figma": {
36796
37473
  "collection": "mode",
@@ -36805,8 +37482,12 @@
36805
37482
  "dark-high-contrast": "{base.color.neutral.13}",
36806
37483
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36807
37484
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36808
- "dark-dimmed": "{base.color.neutral.11}",
37485
+ "dark-dimmed": "{base.color.neutral.12}",
36809
37486
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37487
+ },
37488
+ "org.primer.llm": {
37489
+ "usage": ["default-text", "heading", "body-text"],
37490
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36810
37491
  }
36811
37492
  },
36812
37493
  "key": "{fgColor.default}"
@@ -36815,7 +37496,8 @@
36815
37496
  "attributes": {},
36816
37497
  "path": ["fgColor", "default"],
36817
37498
  "value": "#ffffff",
36818
- "type": "color"
37499
+ "type": "color",
37500
+ "description": "Default text color for primary content and headings"
36819
37501
  },
36820
37502
  "fgColor-disabled": {
36821
37503
  "key": "{fgColor.disabled}",
@@ -36840,6 +37522,10 @@
36840
37522
  "dark-high-contrast": "#656c76",
36841
37523
  "dark-tritanopia-high-contrast": "#656c76",
36842
37524
  "dark-protanopia-deuteranopia-high-contrast": "#656c76"
37525
+ },
37526
+ "org.primer.llm": {
37527
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37528
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36843
37529
  }
36844
37530
  },
36845
37531
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36847,6 +37533,7 @@
36847
37533
  "original": {
36848
37534
  "$value": "{base.color.neutral.8}",
36849
37535
  "$type": "color",
37536
+ "$description": "Text color for disabled interactive elements",
36850
37537
  "$extensions": {
36851
37538
  "org.primer.figma": {
36852
37539
  "collection": "mode",
@@ -36868,6 +37555,10 @@
36868
37555
  "dark-high-contrast": "{base.color.neutral.8}",
36869
37556
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36870
37557
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37558
+ },
37559
+ "org.primer.llm": {
37560
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37561
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36871
37562
  }
36872
37563
  },
36873
37564
  "key": "{fgColor.disabled}"
@@ -36876,7 +37567,8 @@
36876
37567
  "attributes": {},
36877
37568
  "path": ["fgColor", "disabled"],
36878
37569
  "value": "#656c76",
36879
- "type": "color"
37570
+ "type": "color",
37571
+ "description": "Text color for disabled interactive elements"
36880
37572
  },
36881
37573
  "fgColor-done": {
36882
37574
  "key": "{fgColor.done}",
@@ -36898,6 +37590,10 @@
36898
37590
  "light-high-contrast": "#a66bff",
36899
37591
  "light-protanopia-deuteranopia-high-contrast": "#a66bff",
36900
37592
  "light-tritanopia-high-contrast": "#a66bff"
37593
+ },
37594
+ "org.primer.llm": {
37595
+ "usage": ["done-text", "merged", "completed"],
37596
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36901
37597
  }
36902
37598
  },
36903
37599
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36905,6 +37601,7 @@
36905
37601
  "original": {
36906
37602
  "$value": "#D3ABFF",
36907
37603
  "$type": "color",
37604
+ "$description": "Text color for completed/done state indicators",
36908
37605
  "$extensions": {
36909
37606
  "org.primer.figma": {
36910
37607
  "collection": "mode",
@@ -36923,6 +37620,10 @@
36923
37620
  "light-high-contrast": "{base.color.purple.6}",
36924
37621
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36925
37622
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37623
+ },
37624
+ "org.primer.llm": {
37625
+ "usage": ["done-text", "merged", "completed"],
37626
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36926
37627
  }
36927
37628
  },
36928
37629
  "key": "{fgColor.done}"
@@ -36931,7 +37632,8 @@
36931
37632
  "attributes": {},
36932
37633
  "path": ["fgColor", "done"],
36933
37634
  "value": "#d3abff",
36934
- "type": "color"
37635
+ "type": "color",
37636
+ "description": "Text color for completed/done state indicators"
36935
37637
  },
36936
37638
  "fgColor-draft": {
36937
37639
  "key": "{fgColor.draft}",
@@ -36943,6 +37645,10 @@
36943
37645
  "codeSyntax": {
36944
37646
  "web": "var(--fgColor-draft)"
36945
37647
  }
37648
+ },
37649
+ "org.primer.llm": {
37650
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37651
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36946
37652
  }
36947
37653
  },
36948
37654
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36950,6 +37656,7 @@
36950
37656
  "original": {
36951
37657
  "$value": "{fgColor.neutral}",
36952
37658
  "$type": "color",
37659
+ "$description": "Text color for draft state indicators",
36953
37660
  "$extensions": {
36954
37661
  "org.primer.figma": {
36955
37662
  "collection": "mode",
@@ -36958,6 +37665,10 @@
36958
37665
  "codeSyntax": {
36959
37666
  "web": "var(--fgColor-draft)"
36960
37667
  }
37668
+ },
37669
+ "org.primer.llm": {
37670
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37671
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36961
37672
  }
36962
37673
  },
36963
37674
  "key": "{fgColor.draft}"
@@ -36966,7 +37677,8 @@
36966
37677
  "attributes": {},
36967
37678
  "path": ["fgColor", "draft"],
36968
37679
  "value": "#d1d7e0",
36969
- "type": "color"
37680
+ "type": "color",
37681
+ "description": "Text color for draft state indicators"
36970
37682
  },
36971
37683
  "fgColor-link": {
36972
37684
  "key": "{fgColor.link}",
@@ -36978,6 +37690,10 @@
36978
37690
  "codeSyntax": {
36979
37691
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36980
37692
  }
37693
+ },
37694
+ "org.primer.llm": {
37695
+ "usage": ["link-text", "hyperlink"],
37696
+ "rules": "MUST use for all text links. Provides expected link affordance."
36981
37697
  }
36982
37698
  },
36983
37699
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36985,6 +37701,7 @@
36985
37701
  "original": {
36986
37702
  "$value": "{fgColor.accent}",
36987
37703
  "$type": "color",
37704
+ "$description": "Text color for hyperlinks",
36988
37705
  "$extensions": {
36989
37706
  "org.primer.figma": {
36990
37707
  "collection": "mode",
@@ -36993,6 +37710,10 @@
36993
37710
  "codeSyntax": {
36994
37711
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36995
37712
  }
37713
+ },
37714
+ "org.primer.llm": {
37715
+ "usage": ["link-text", "hyperlink"],
37716
+ "rules": "MUST use for all text links. Provides expected link affordance."
36996
37717
  }
36997
37718
  },
36998
37719
  "key": "{fgColor.link}"
@@ -37001,7 +37722,8 @@
37001
37722
  "attributes": {},
37002
37723
  "path": ["fgColor", "link"],
37003
37724
  "value": "#74b9ff",
37004
- "type": "color"
37725
+ "type": "color",
37726
+ "description": "Text color for hyperlinks"
37005
37727
  },
37006
37728
  "fgColor-muted": {
37007
37729
  "key": "{fgColor.muted}",
@@ -37022,6 +37744,10 @@
37022
37744
  "dark-dimmed-high-contrast": "#b7bdc8",
37023
37745
  "dark-tritanopia-high-contrast": "#b7bdc8",
37024
37746
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
37747
+ },
37748
+ "org.primer.llm": {
37749
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37750
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37025
37751
  }
37026
37752
  },
37027
37753
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37029,6 +37755,7 @@
37029
37755
  "original": {
37030
37756
  "$value": "{base.color.neutral.10}",
37031
37757
  "$type": "color",
37758
+ "$description": "Muted text for secondary content and less important information",
37032
37759
  "$extensions": {
37033
37760
  "org.primer.figma": {
37034
37761
  "collection": "mode",
@@ -37046,6 +37773,10 @@
37046
37773
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37047
37774
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37048
37775
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37776
+ },
37777
+ "org.primer.llm": {
37778
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37779
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37049
37780
  }
37050
37781
  },
37051
37782
  "key": "{fgColor.muted}"
@@ -37054,7 +37785,8 @@
37054
37785
  "attributes": {},
37055
37786
  "path": ["fgColor", "muted"],
37056
37787
  "value": "#b7bdc8",
37057
- "type": "color"
37788
+ "type": "color",
37789
+ "description": "Muted text for secondary content and less important information"
37058
37790
  },
37059
37791
  "fgColor-neutral": {
37060
37792
  "key": "{fgColor.neutral}",
@@ -37072,6 +37804,10 @@
37072
37804
  "dark-dimmed-high-contrast": "#d1d7e0",
37073
37805
  "dark-tritanopia-high-contrast": "#d1d7e0",
37074
37806
  "dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
37807
+ },
37808
+ "org.primer.llm": {
37809
+ "usage": ["neutral-icon", "neutral-text"],
37810
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37075
37811
  }
37076
37812
  },
37077
37813
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37079,6 +37815,7 @@
37079
37815
  "original": {
37080
37816
  "$value": "{base.color.neutral.11}",
37081
37817
  "$type": "color",
37818
+ "$description": "Neutral semantic text for icons and secondary elements",
37082
37819
  "$extensions": {
37083
37820
  "org.primer.figma": {
37084
37821
  "collection": "mode",
@@ -37093,6 +37830,10 @@
37093
37830
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37094
37831
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37095
37832
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37833
+ },
37834
+ "org.primer.llm": {
37835
+ "usage": ["neutral-icon", "neutral-text"],
37836
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37096
37837
  }
37097
37838
  },
37098
37839
  "key": "{fgColor.neutral}"
@@ -37101,7 +37842,8 @@
37101
37842
  "attributes": {},
37102
37843
  "path": ["fgColor", "neutral"],
37103
37844
  "value": "#d1d7e0",
37104
- "type": "color"
37845
+ "type": "color",
37846
+ "description": "Neutral semantic text for icons and secondary elements"
37105
37847
  },
37106
37848
  "fgColor-onEmphasis": {
37107
37849
  "key": "{fgColor.onEmphasis}",
@@ -37118,6 +37860,10 @@
37118
37860
  "dark": "#ffffff",
37119
37861
  "dark-dimmed": "#f0f6fc",
37120
37862
  "dark-dimmed-high-contrast": "#ffffff"
37863
+ },
37864
+ "org.primer.llm": {
37865
+ "usage": ["text-on-emphasis", "contrast-text"],
37866
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37121
37867
  }
37122
37868
  },
37123
37869
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37125,6 +37871,7 @@
37125
37871
  "original": {
37126
37872
  "$value": "{base.color.neutral.13}",
37127
37873
  "$type": "color",
37874
+ "$description": "Text color for use on emphasis backgrounds",
37128
37875
  "$extensions": {
37129
37876
  "org.primer.figma": {
37130
37877
  "collection": "mode",
@@ -37138,6 +37885,10 @@
37138
37885
  "dark": "{base.color.neutral.13}",
37139
37886
  "dark-dimmed": "{base.color.neutral.12}",
37140
37887
  "dark-dimmed-high-contrast": "#ffffff"
37888
+ },
37889
+ "org.primer.llm": {
37890
+ "usage": ["text-on-emphasis", "contrast-text"],
37891
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37141
37892
  }
37142
37893
  },
37143
37894
  "key": "{fgColor.onEmphasis}"
@@ -37146,7 +37897,8 @@
37146
37897
  "attributes": {},
37147
37898
  "path": ["fgColor", "onEmphasis"],
37148
37899
  "value": "#ffffff",
37149
- "type": "color"
37900
+ "type": "color",
37901
+ "description": "Text color for use on emphasis backgrounds"
37150
37902
  },
37151
37903
  "fgColor-onInverse": {
37152
37904
  "key": "{fgColor.onInverse}",
@@ -37155,6 +37907,10 @@
37155
37907
  "collection": "mode",
37156
37908
  "group": "semantic",
37157
37909
  "scopes": ["fgColor"]
37910
+ },
37911
+ "org.primer.llm": {
37912
+ "usage": ["text-on-inverse", "inverse-text"],
37913
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37158
37914
  }
37159
37915
  },
37160
37916
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37162,11 +37918,16 @@
37162
37918
  "original": {
37163
37919
  "$value": "{base.color.neutral.0}",
37164
37920
  "$type": "color",
37921
+ "$description": "Text color for use on inverse backgrounds",
37165
37922
  "$extensions": {
37166
37923
  "org.primer.figma": {
37167
37924
  "collection": "mode",
37168
37925
  "group": "semantic",
37169
37926
  "scopes": ["fgColor"]
37927
+ },
37928
+ "org.primer.llm": {
37929
+ "usage": ["text-on-inverse", "inverse-text"],
37930
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37170
37931
  }
37171
37932
  },
37172
37933
  "key": "{fgColor.onInverse}"
@@ -37175,7 +37936,8 @@
37175
37936
  "attributes": {},
37176
37937
  "path": ["fgColor", "onInverse"],
37177
37938
  "value": "#010409",
37178
- "type": "color"
37939
+ "type": "color",
37940
+ "description": "Text color for use on inverse backgrounds"
37179
37941
  },
37180
37942
  "fgColor-open": {
37181
37943
  "key": "{fgColor.open}",
@@ -37197,6 +37959,10 @@
37197
37959
  "dark-tritanopia-high-contrast": "#ffb1af",
37198
37960
  "light-tritanopia": "#ff6a69",
37199
37961
  "light-tritanopia-high-contrast": "#ff4445"
37962
+ },
37963
+ "org.primer.llm": {
37964
+ "usage": ["open-text", "open-issue", "open-pr"],
37965
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37200
37966
  }
37201
37967
  },
37202
37968
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37204,6 +37970,7 @@
37204
37970
  "original": {
37205
37971
  "$value": "{base.color.orange.2}",
37206
37972
  "$type": "color",
37973
+ "$description": "Text color for open state indicators (issues, PRs)",
37207
37974
  "$extensions": {
37208
37975
  "org.primer.figma": {
37209
37976
  "collection": "mode",
@@ -37222,6 +37989,10 @@
37222
37989
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37223
37990
  "light-tritanopia": "{base.color.red.5}",
37224
37991
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37992
+ },
37993
+ "org.primer.llm": {
37994
+ "usage": ["open-text", "open-issue", "open-pr"],
37995
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37225
37996
  }
37226
37997
  },
37227
37998
  "key": "{fgColor.open}"
@@ -37230,7 +38001,8 @@
37230
38001
  "attributes": {},
37231
38002
  "path": ["fgColor", "open"],
37232
38003
  "value": "#ffb757",
37233
- "type": "color"
38004
+ "type": "color",
38005
+ "description": "Text color for open state indicators (issues, PRs)"
37234
38006
  },
37235
38007
  "fgColor-severe": {
37236
38008
  "key": "{fgColor.severe}",
@@ -37254,6 +38026,10 @@
37254
38026
  "light-tritanopia": "#ff6a69",
37255
38027
  "light-tritanopia-high-contrast": "#ff4445",
37256
38028
  "light-protanopia-deuteranopia-high-contrast": "#d57014"
38029
+ },
38030
+ "org.primer.llm": {
38031
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38032
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37257
38033
  }
37258
38034
  },
37259
38035
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37261,6 +38037,7 @@
37261
38037
  "original": {
37262
38038
  "$value": "{base.color.orange.3}",
37263
38039
  "$type": "color",
38040
+ "$description": "Severe text for high-priority warnings",
37264
38041
  "$extensions": {
37265
38042
  "org.primer.figma": {
37266
38043
  "collection": "mode",
@@ -37281,6 +38058,10 @@
37281
38058
  "light-tritanopia": "{base.color.red.5}",
37282
38059
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37283
38060
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
38061
+ },
38062
+ "org.primer.llm": {
38063
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38064
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37284
38065
  }
37285
38066
  },
37286
38067
  "key": "{fgColor.severe}"
@@ -37289,7 +38070,8 @@
37289
38070
  "attributes": {},
37290
38071
  "path": ["fgColor", "severe"],
37291
38072
  "value": "#fe9a2d",
37292
- "type": "color"
38073
+ "type": "color",
38074
+ "description": "Severe text for high-priority warnings"
37293
38075
  },
37294
38076
  "fgColor-sponsors": {
37295
38077
  "key": "{fgColor.sponsors}",
@@ -37311,6 +38093,10 @@
37311
38093
  "light-high-contrast": "#e456a3",
37312
38094
  "light-protanopia-deuteranopia-high-contrast": "#e456a3",
37313
38095
  "light-tritanopia-high-contrast": "#e456a3"
38096
+ },
38097
+ "org.primer.llm": {
38098
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38099
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37314
38100
  }
37315
38101
  },
37316
38102
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37318,6 +38104,7 @@
37318
38104
  "original": {
37319
38105
  "$value": "#FF90C8",
37320
38106
  "$type": "color",
38107
+ "$description": "Text color for GitHub Sponsors content",
37321
38108
  "$extensions": {
37322
38109
  "org.primer.figma": {
37323
38110
  "collection": "mode",
@@ -37336,6 +38123,10 @@
37336
38123
  "light-high-contrast": "{base.color.pink.6}",
37337
38124
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37338
38125
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38126
+ },
38127
+ "org.primer.llm": {
38128
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38129
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37339
38130
  }
37340
38131
  },
37341
38132
  "key": "{fgColor.sponsors}"
@@ -37344,7 +38135,8 @@
37344
38135
  "attributes": {},
37345
38136
  "path": ["fgColor", "sponsors"],
37346
38137
  "value": "#ff90c8",
37347
- "type": "color"
38138
+ "type": "color",
38139
+ "description": "Text color for GitHub Sponsors content"
37348
38140
  },
37349
38141
  "fgColor-success": {
37350
38142
  "key": "{fgColor.success}",
@@ -37370,6 +38162,10 @@
37370
38162
  "dark-tritanopia-high-contrast": "#91cbff",
37371
38163
  "light-tritanopia": "#409eff",
37372
38164
  "light-tritanopia-high-contrast": "#318bf8"
38165
+ },
38166
+ "org.primer.llm": {
38167
+ "usage": ["success-text", "positive-text", "success-icon"],
38168
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37373
38169
  }
37374
38170
  },
37375
38171
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37377,6 +38173,7 @@
37377
38173
  "original": {
37378
38174
  "$value": "{base.color.blue.1}",
37379
38175
  "$type": "color",
38176
+ "$description": "Success text for positive feedback and completed states",
37380
38177
  "$extensions": {
37381
38178
  "org.primer.figma": {
37382
38179
  "collection": "mode",
@@ -37399,6 +38196,10 @@
37399
38196
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37400
38197
  "light-tritanopia": "{base.color.blue.5}",
37401
38198
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38199
+ },
38200
+ "org.primer.llm": {
38201
+ "usage": ["success-text", "positive-text", "success-icon"],
38202
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37402
38203
  }
37403
38204
  },
37404
38205
  "key": "{fgColor.success}"
@@ -37407,7 +38208,8 @@
37407
38208
  "attributes": {},
37408
38209
  "path": ["fgColor", "success"],
37409
38210
  "value": "#addcff",
37410
- "type": "color"
38211
+ "type": "color",
38212
+ "description": "Success text for positive feedback and completed states"
37411
38213
  },
37412
38214
  "fgColor-upsell": {
37413
38215
  "key": "{fgColor.upsell}",
@@ -37419,6 +38221,10 @@
37419
38221
  "codeSyntax": {
37420
38222
  "web": "var(--fgColor-upsell)"
37421
38223
  }
38224
+ },
38225
+ "org.primer.llm": {
38226
+ "usage": ["upsell-text", "premium-text", "promotional"],
38227
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37422
38228
  }
37423
38229
  },
37424
38230
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37426,6 +38232,7 @@
37426
38232
  "original": {
37427
38233
  "$value": "{fgColor.done}",
37428
38234
  "$type": "color",
38235
+ "$description": "Text color for upsell and promotional content",
37429
38236
  "$extensions": {
37430
38237
  "org.primer.figma": {
37431
38238
  "collection": "mode",
@@ -37434,6 +38241,10 @@
37434
38241
  "codeSyntax": {
37435
38242
  "web": "var(--fgColor-upsell)"
37436
38243
  }
38244
+ },
38245
+ "org.primer.llm": {
38246
+ "usage": ["upsell-text", "premium-text", "promotional"],
38247
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37437
38248
  }
37438
38249
  },
37439
38250
  "key": "{fgColor.upsell}"
@@ -37442,7 +38253,8 @@
37442
38253
  "attributes": {},
37443
38254
  "path": ["fgColor", "upsell"],
37444
38255
  "value": "#d3abff",
37445
- "type": "color"
38256
+ "type": "color",
38257
+ "description": "Text color for upsell and promotional content"
37446
38258
  },
37447
38259
  "fgColor-white": {
37448
38260
  "key": "{fgColor.white}",
@@ -37454,6 +38266,10 @@
37454
38266
  },
37455
38267
  "org.primer.overrides": {
37456
38268
  "dark": "#ffffff"
38269
+ },
38270
+ "org.primer.llm": {
38271
+ "doNotUse": true,
38272
+ "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."
37457
38273
  }
37458
38274
  },
37459
38275
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37461,6 +38277,7 @@
37461
38277
  "original": {
37462
38278
  "$value": "{base.color.neutral.13}",
37463
38279
  "$type": "color",
38280
+ "$description": "Pure white text",
37464
38281
  "$extensions": {
37465
38282
  "org.primer.figma": {
37466
38283
  "collection": "mode",
@@ -37469,6 +38286,10 @@
37469
38286
  },
37470
38287
  "org.primer.overrides": {
37471
38288
  "dark": "{base.color.neutral.13}"
38289
+ },
38290
+ "org.primer.llm": {
38291
+ "doNotUse": true,
38292
+ "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."
37472
38293
  }
37473
38294
  },
37474
38295
  "key": "{fgColor.white}"
@@ -37477,10 +38298,17 @@
37477
38298
  "attributes": {},
37478
38299
  "path": ["fgColor", "white"],
37479
38300
  "value": "#ffffff",
37480
- "type": "color"
38301
+ "type": "color",
38302
+ "description": "Pure white text"
37481
38303
  },
37482
38304
  "focus-outline": {
37483
38305
  "key": "{focus.outline}",
38306
+ "$extensions": {
38307
+ "org.primer.llm": {
38308
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38309
+ "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."
38310
+ }
38311
+ },
37484
38312
  "filePath": "src/tokens/functional/border/border.json5",
37485
38313
  "isSource": true,
37486
38314
  "original": {
@@ -37490,13 +38318,21 @@
37490
38318
  "width": "2px"
37491
38319
  },
37492
38320
  "$type": "border",
38321
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38322
+ "$extensions": {
38323
+ "org.primer.llm": {
38324
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38325
+ "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."
38326
+ }
38327
+ },
37493
38328
  "key": "{focus.outline}"
37494
38329
  },
37495
38330
  "name": "focus-outline",
37496
38331
  "attributes": {},
37497
38332
  "path": ["focus", "outline"],
37498
38333
  "value": "2px solid #409eff",
37499
- "type": "border"
38334
+ "type": "border",
38335
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37500
38336
  },
37501
38337
  "focus-outlineColor": {
37502
38338
  "key": "{focus.outlineColor}",
@@ -37505,6 +38341,10 @@
37505
38341
  "collection": "mode",
37506
38342
  "group": "component (internal)",
37507
38343
  "scopes": ["borderColor", "effectColor"]
38344
+ },
38345
+ "org.primer.llm": {
38346
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38347
+ "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."
37508
38348
  }
37509
38349
  },
37510
38350
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37512,11 +38352,16 @@
37512
38352
  "original": {
37513
38353
  "$value": "{borderColor.accent.emphasis}",
37514
38354
  "$type": "color",
38355
+ "$description": "Outline color for focus states on interactive elements",
37515
38356
  "$extensions": {
37516
38357
  "org.primer.figma": {
37517
38358
  "collection": "mode",
37518
38359
  "group": "component (internal)",
37519
38360
  "scopes": ["borderColor", "effectColor"]
38361
+ },
38362
+ "org.primer.llm": {
38363
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38364
+ "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."
37520
38365
  }
37521
38366
  },
37522
38367
  "key": "{focus.outlineColor}"
@@ -37525,7 +38370,8 @@
37525
38370
  "attributes": {},
37526
38371
  "path": ["focus", "outlineColor"],
37527
38372
  "value": "#409eff",
37528
- "type": "color"
38373
+ "type": "color",
38374
+ "description": "Outline color for focus states on interactive elements"
37529
38375
  },
37530
38376
  "header-bgColor": {
37531
38377
  "key": "{header.bgColor}",
@@ -46586,6 +47432,10 @@
46586
47432
  "isSource": true,
46587
47433
  "$type": "color"
46588
47434
  }
47435
+ },
47436
+ "org.primer.llm": {
47437
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47438
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46589
47439
  }
46590
47440
  },
46591
47441
  "alpha": 0.7,
@@ -46594,6 +47444,7 @@
46594
47444
  "original": {
46595
47445
  "$value": "{bgColor.accent.emphasis}",
46596
47446
  "$type": "color",
47447
+ "$description": "Background color for text selection highlights",
46597
47448
  "$extensions": {
46598
47449
  "org.primer.figma": {
46599
47450
  "collection": "mode",
@@ -46608,6 +47459,10 @@
46608
47459
  "isSource": true,
46609
47460
  "$type": "color"
46610
47461
  }
47462
+ },
47463
+ "org.primer.llm": {
47464
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47465
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46611
47466
  }
46612
47467
  },
46613
47468
  "alpha": 0.7,
@@ -46617,7 +47472,8 @@
46617
47472
  "attributes": {},
46618
47473
  "path": ["selection", "bgColor"],
46619
47474
  "value": "#194fb1b3",
46620
- "type": "color"
47475
+ "type": "color",
47476
+ "description": "Background color for text selection highlights"
46621
47477
  },
46622
47478
  "shadow-floating-large": {
46623
47479
  "key": "{shadow.floating.large}",
@@ -46650,6 +47506,10 @@
46650
47506
  "isSource": true,
46651
47507
  "$type": "shadow"
46652
47508
  }
47509
+ },
47510
+ "org.primer.llm": {
47511
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47512
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46653
47513
  }
46654
47514
  },
46655
47515
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46674,6 +47534,7 @@
46674
47534
  }
46675
47535
  ],
46676
47536
  "$type": "shadow",
47537
+ "$description": "Large floating shadow for modals and dialogs",
46677
47538
  "$extensions": {
46678
47539
  "org.primer.figma": {
46679
47540
  "collection": "mode",
@@ -46703,6 +47564,10 @@
46703
47564
  "isSource": true,
46704
47565
  "$type": "shadow"
46705
47566
  }
47567
+ },
47568
+ "org.primer.llm": {
47569
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47570
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46706
47571
  }
46707
47572
  },
46708
47573
  "key": "{shadow.floating.large}"
@@ -46711,7 +47576,8 @@
46711
47576
  "attributes": {},
46712
47577
  "path": ["shadow", "floating", "large"],
46713
47578
  "value": "0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409",
46714
- "type": "shadow"
47579
+ "type": "shadow",
47580
+ "description": "Large floating shadow for modals and dialogs"
46715
47581
  },
46716
47582
  "shadow-floating-legacy": {
46717
47583
  "key": "{shadow.floating.legacy}",
@@ -46741,6 +47607,10 @@
46741
47607
  "isSource": true,
46742
47608
  "$type": "shadow"
46743
47609
  }
47610
+ },
47611
+ "org.primer.llm": {
47612
+ "usage": ["legacy-component", "backward-compatibility"],
47613
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46744
47614
  }
46745
47615
  },
46746
47616
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46765,6 +47635,7 @@
46765
47635
  }
46766
47636
  ],
46767
47637
  "$type": "shadow",
47638
+ "$description": "Legacy floating shadow for backward compatibility",
46768
47639
  "$extensions": {
46769
47640
  "org.primer.figma": {},
46770
47641
  "org.primer.overrides": {
@@ -46791,6 +47662,10 @@
46791
47662
  "isSource": true,
46792
47663
  "$type": "shadow"
46793
47664
  }
47665
+ },
47666
+ "org.primer.llm": {
47667
+ "usage": ["legacy-component", "backward-compatibility"],
47668
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46794
47669
  }
46795
47670
  },
46796
47671
  "key": "{shadow.floating.legacy}"
@@ -46799,7 +47674,8 @@
46799
47674
  "attributes": {},
46800
47675
  "path": ["shadow", "floating", "legacy"],
46801
47676
  "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
46802
- "type": "shadow"
47677
+ "type": "shadow",
47678
+ "description": "Legacy floating shadow for backward compatibility"
46803
47679
  },
46804
47680
  "shadow-floating-medium": {
46805
47681
  "key": "{shadow.floating.medium}",
@@ -46856,6 +47732,10 @@
46856
47732
  "isSource": true,
46857
47733
  "$type": "shadow"
46858
47734
  }
47735
+ },
47736
+ "org.primer.llm": {
47737
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47738
+ "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."
46859
47739
  }
46860
47740
  },
46861
47741
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46904,6 +47784,7 @@
46904
47784
  }
46905
47785
  ],
46906
47786
  "$type": "shadow",
47787
+ "$description": "Medium floating shadow for popovers and action menus",
46907
47788
  "$extensions": {
46908
47789
  "org.primer.figma": {
46909
47790
  "collection": "mode",
@@ -46957,6 +47838,10 @@
46957
47838
  "isSource": true,
46958
47839
  "$type": "shadow"
46959
47840
  }
47841
+ },
47842
+ "org.primer.llm": {
47843
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47844
+ "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."
46960
47845
  }
46961
47846
  },
46962
47847
  "key": "{shadow.floating.medium}"
@@ -46965,7 +47850,8 @@
46965
47850
  "attributes": {},
46966
47851
  "path": ["shadow", "floating", "medium"],
46967
47852
  "value": "0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
46968
- "type": "shadow"
47853
+ "type": "shadow",
47854
+ "description": "Medium floating shadow for popovers and action menus"
46969
47855
  },
46970
47856
  "shadow-floating-small": {
46971
47857
  "key": "{shadow.floating.small}",
@@ -47006,6 +47892,10 @@
47006
47892
  "isSource": true,
47007
47893
  "$type": "shadow"
47008
47894
  }
47895
+ },
47896
+ "org.primer.llm": {
47897
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47898
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47009
47899
  }
47010
47900
  },
47011
47901
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47038,6 +47928,7 @@
47038
47928
  }
47039
47929
  ],
47040
47930
  "$type": "shadow",
47931
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47041
47932
  "$extensions": {
47042
47933
  "org.primer.figma": {
47043
47934
  "collection": "mode",
@@ -47075,6 +47966,10 @@
47075
47966
  "isSource": true,
47076
47967
  "$type": "shadow"
47077
47968
  }
47969
+ },
47970
+ "org.primer.llm": {
47971
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47972
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47078
47973
  }
47079
47974
  },
47080
47975
  "key": "{shadow.floating.small}"
@@ -47083,7 +47978,8 @@
47083
47978
  "attributes": {},
47084
47979
  "path": ["shadow", "floating", "small"],
47085
47980
  "value": "0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47086
- "type": "shadow"
47981
+ "type": "shadow",
47982
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47087
47983
  },
47088
47984
  "shadow-floating-xlarge": {
47089
47985
  "key": "{shadow.floating.xlarge}",
@@ -47116,6 +48012,10 @@
47116
48012
  "isSource": true,
47117
48013
  "$type": "shadow"
47118
48014
  }
48015
+ },
48016
+ "org.primer.llm": {
48017
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48018
+ "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."
47119
48019
  }
47120
48020
  },
47121
48021
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47140,6 +48040,7 @@
47140
48040
  }
47141
48041
  ],
47142
48042
  "$type": "shadow",
48043
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47143
48044
  "$extensions": {
47144
48045
  "org.primer.figma": {
47145
48046
  "collection": "mode",
@@ -47169,6 +48070,10 @@
47169
48070
  "isSource": true,
47170
48071
  "$type": "shadow"
47171
48072
  }
48073
+ },
48074
+ "org.primer.llm": {
48075
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48076
+ "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."
47172
48077
  }
47173
48078
  },
47174
48079
  "key": "{shadow.floating.xlarge}"
@@ -47177,7 +48082,8 @@
47177
48082
  "attributes": {},
47178
48083
  "path": ["shadow", "floating", "xlarge"],
47179
48084
  "value": "0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409",
47180
- "type": "shadow"
48085
+ "type": "shadow",
48086
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47181
48087
  },
47182
48088
  "shadow-inset": {
47183
48089
  "key": "{shadow.inset}",
@@ -47201,6 +48107,10 @@
47201
48107
  "isSource": true,
47202
48108
  "$type": "shadow"
47203
48109
  }
48110
+ },
48111
+ "org.primer.llm": {
48112
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48113
+ "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."
47204
48114
  }
47205
48115
  },
47206
48116
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47216,6 +48126,7 @@
47216
48126
  "inset": true
47217
48127
  },
47218
48128
  "$type": "shadow",
48129
+ "$description": "Inset shadow for recessed elements",
47219
48130
  "$extensions": {
47220
48131
  "org.primer.figma": {
47221
48132
  "collection": "mode",
@@ -47236,6 +48147,10 @@
47236
48147
  "isSource": true,
47237
48148
  "$type": "shadow"
47238
48149
  }
48150
+ },
48151
+ "org.primer.llm": {
48152
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48153
+ "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."
47239
48154
  }
47240
48155
  },
47241
48156
  "key": "{shadow.inset}"
@@ -47244,7 +48159,8 @@
47244
48159
  "attributes": {},
47245
48160
  "path": ["shadow", "inset"],
47246
48161
  "value": "inset 0px 1px 0px 0px #0104093d",
47247
- "type": "shadow"
48162
+ "type": "shadow",
48163
+ "description": "Inset shadow for recessed elements"
47248
48164
  },
47249
48165
  "shadow-resting-medium": {
47250
48166
  "key": "{shadow.resting.medium}",
@@ -47277,6 +48193,10 @@
47277
48193
  "isSource": true,
47278
48194
  "$type": "shadow"
47279
48195
  }
48196
+ },
48197
+ "org.primer.llm": {
48198
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48199
+ "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."
47280
48200
  }
47281
48201
  },
47282
48202
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47301,6 +48221,7 @@
47301
48221
  }
47302
48222
  ],
47303
48223
  "$type": "shadow",
48224
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47304
48225
  "$extensions": {
47305
48226
  "org.primer.figma": {
47306
48227
  "collection": "mode",
@@ -47330,6 +48251,10 @@
47330
48251
  "isSource": true,
47331
48252
  "$type": "shadow"
47332
48253
  }
48254
+ },
48255
+ "org.primer.llm": {
48256
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48257
+ "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."
47333
48258
  }
47334
48259
  },
47335
48260
  "key": "{shadow.resting.medium}"
@@ -47338,7 +48263,8 @@
47338
48263
  "attributes": {},
47339
48264
  "path": ["shadow", "resting", "medium"],
47340
48265
  "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
47341
- "type": "shadow"
48266
+ "type": "shadow",
48267
+ "description": "Medium resting shadow for cards and elevated surfaces"
47342
48268
  },
47343
48269
  "shadow-resting-small": {
47344
48270
  "key": "{shadow.resting.small}",
@@ -47373,6 +48299,10 @@
47373
48299
  "isSource": true,
47374
48300
  "$type": "shadow"
47375
48301
  }
48302
+ },
48303
+ "org.primer.llm": {
48304
+ "usage": ["button", "interactive-card", "clickable-element"],
48305
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47376
48306
  }
47377
48307
  },
47378
48308
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47399,6 +48329,7 @@
47399
48329
  }
47400
48330
  ],
47401
48331
  "$type": "shadow",
48332
+ "$description": "Small resting shadow for buttons and interactive elements",
47402
48333
  "$extensions": {
47403
48334
  "org.primer.figma": {
47404
48335
  "collection": "mode",
@@ -47430,6 +48361,10 @@
47430
48361
  "isSource": true,
47431
48362
  "$type": "shadow"
47432
48363
  }
48364
+ },
48365
+ "org.primer.llm": {
48366
+ "usage": ["button", "interactive-card", "clickable-element"],
48367
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47433
48368
  }
47434
48369
  },
47435
48370
  "key": "{shadow.resting.small}"
@@ -47438,7 +48373,8 @@
47438
48373
  "attributes": {},
47439
48374
  "path": ["shadow", "resting", "small"],
47440
48375
  "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
47441
- "type": "shadow"
48376
+ "type": "shadow",
48377
+ "description": "Small resting shadow for buttons and interactive elements"
47442
48378
  },
47443
48379
  "shadow-resting-xsmall": {
47444
48380
  "key": "{shadow.resting.xsmall}",
@@ -47462,6 +48398,10 @@
47462
48398
  "isSource": true,
47463
48399
  "$type": "shadow"
47464
48400
  }
48401
+ },
48402
+ "org.primer.llm": {
48403
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48404
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47465
48405
  }
47466
48406
  },
47467
48407
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47477,6 +48417,7 @@
47477
48417
  "inset": false
47478
48418
  },
47479
48419
  "$type": "shadow",
48420
+ "$description": "Extra small resting shadow for minimal elevation",
47480
48421
  "$extensions": {
47481
48422
  "org.primer.figma": {
47482
48423
  "collection": "mode",
@@ -47497,6 +48438,10 @@
47497
48438
  "isSource": true,
47498
48439
  "$type": "shadow"
47499
48440
  }
48441
+ },
48442
+ "org.primer.llm": {
48443
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48444
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47500
48445
  }
47501
48446
  },
47502
48447
  "key": "{shadow.resting.xsmall}"
@@ -47505,7 +48450,8 @@
47505
48450
  "attributes": {},
47506
48451
  "path": ["shadow", "resting", "xsmall"],
47507
48452
  "value": "0px 1px 1px 0px #010409cc",
47508
- "type": "shadow"
48453
+ "type": "shadow",
48454
+ "description": "Extra small resting shadow for minimal elevation"
47509
48455
  },
47510
48456
  "sideNav-bgColor-selected": {
47511
48457
  "key": "{sideNav.bgColor.selected}",