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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
  4. package/dist/build/filters/hasLlmExtensions.js +11 -0
  5. package/dist/build/filters/index.d.ts +1 -0
  6. package/dist/build/filters/index.js +1 -0
  7. package/dist/build/formats/index.d.ts +1 -0
  8. package/dist/build/formats/index.js +1 -0
  9. package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
  10. package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
  11. package/dist/build/platforms/index.d.ts +1 -0
  12. package/dist/build/platforms/index.js +1 -0
  13. package/dist/build/platforms/llmGuidelines.d.ts +2 -0
  14. package/dist/build/platforms/llmGuidelines.js +17 -0
  15. package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
  16. package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
  17. package/dist/build/primerStyleDictionary.js +7 -1
  18. package/dist/build/schemas/borderToken.d.ts +22 -2
  19. package/dist/build/schemas/borderToken.js +6 -0
  20. package/dist/build/schemas/colorToken.d.ts +4 -0
  21. package/dist/build/schemas/colorToken.js +2 -0
  22. package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
  23. package/dist/build/schemas/cubicBezierToken.js +10 -2
  24. package/dist/build/schemas/designToken.d.ts +1 -1
  25. package/dist/build/schemas/designToken.js +113 -21
  26. package/dist/build/schemas/dimensionToken.d.ts +14 -3
  27. package/dist/build/schemas/dimensionToken.js +6 -2
  28. package/dist/build/schemas/dimensionValue.d.ts +24 -1
  29. package/dist/build/schemas/dimensionValue.js +20 -1
  30. package/dist/build/schemas/durationToken.d.ts +13 -1
  31. package/dist/build/schemas/durationToken.js +6 -0
  32. package/dist/build/schemas/durationValue.d.ts +11 -1
  33. package/dist/build/schemas/durationValue.js +13 -3
  34. package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
  35. package/dist/build/schemas/fontFamilyToken.js +2 -0
  36. package/dist/build/schemas/fontWeightToken.d.ts +4 -0
  37. package/dist/build/schemas/fontWeightToken.js +2 -0
  38. package/dist/build/schemas/gradientToken.d.ts +4 -0
  39. package/dist/build/schemas/gradientToken.js +2 -0
  40. package/dist/build/schemas/llmExtension.d.ts +9 -0
  41. package/dist/build/schemas/llmExtension.js +11 -0
  42. package/dist/build/schemas/numberToken.d.ts +4 -0
  43. package/dist/build/schemas/numberToken.js +2 -0
  44. package/dist/build/schemas/shadowToken.d.ts +676 -84
  45. package/dist/build/schemas/shadowToken.js +2 -0
  46. package/dist/build/schemas/stringToken.d.ts +6 -0
  47. package/dist/build/schemas/stringToken.js +6 -0
  48. package/dist/build/schemas/transitionToken.d.ts +20 -2
  49. package/dist/build/schemas/transitionToken.js +6 -0
  50. package/dist/build/schemas/typographyToken.d.ts +38 -4
  51. package/dist/build/schemas/typographyToken.js +6 -0
  52. package/dist/build/schemas/validTokenType.d.ts +5 -1
  53. package/dist/build/schemas/validTokenType.js +71 -17
  54. package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
  55. package/dist/build/schemas/viewportRangeToken.js +6 -0
  56. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  57. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  58. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  59. package/dist/build/transformers/dimensionToRem.js +21 -22
  60. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  61. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  62. package/dist/build/transformers/durationToCss.d.ts +2 -1
  63. package/dist/build/transformers/durationToCss.js +18 -11
  64. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  65. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  66. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  67. package/dist/css/base/motion/motion.css +5 -4
  68. package/dist/css/functional/size/border.css +9 -14
  69. package/dist/css/functional/size/radius.css +7 -0
  70. package/dist/css/functional/size/size-coarse.css +3 -3
  71. package/dist/css/functional/size/size-fine.css +3 -3
  72. package/dist/css/functional/size/viewport.css +1 -1
  73. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
  74. package/dist/css/functional/themes/dark-colorblind.css +194 -190
  75. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
  76. package/dist/css/functional/themes/dark-dimmed.css +194 -190
  77. package/dist/css/functional/themes/dark-high-contrast.css +194 -190
  78. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
  79. package/dist/css/functional/themes/dark-tritanopia.css +194 -190
  80. package/dist/css/functional/themes/dark.css +194 -190
  81. package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
  82. package/dist/css/functional/themes/light-colorblind.css +194 -190
  83. package/dist/css/functional/themes/light-high-contrast.css +194 -190
  84. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
  85. package/dist/css/functional/themes/light-tritanopia.css +194 -190
  86. package/dist/css/functional/themes/light.css +194 -190
  87. package/dist/css/functional/typography/typography.css +4 -4
  88. package/dist/css/primitives.css +5 -0
  89. package/dist/docs/base/motion/motion.json +181 -32
  90. package/dist/docs/base/size/size.json +76 -19
  91. package/dist/docs/base/typography/typography.json +24 -6
  92. package/dist/docs/functional/size/border.json +62 -182
  93. package/dist/docs/functional/size/breakpoints.json +24 -6
  94. package/dist/docs/functional/size/radius.json +221 -0
  95. package/dist/docs/functional/size/size-coarse.json +45 -3
  96. package/dist/docs/functional/size/size-fine.json +45 -3
  97. package/dist/docs/functional/size/size.json +60 -15
  98. package/dist/docs/functional/size/viewport.json +2 -2
  99. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
  100. package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
  101. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
  102. package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
  103. package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
  104. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
  105. package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
  106. package/dist/docs/functional/themes/dark.json +1043 -97
  107. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
  108. package/dist/docs/functional/themes/light-colorblind.json +1049 -103
  109. package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
  110. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
  111. package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
  112. package/dist/docs/functional/themes/light.json +1049 -103
  113. package/dist/docs/functional/typography/typography.json +180 -10
  114. package/dist/fallbacks/base/motion/motion.json +49 -12
  115. package/dist/fallbacks/functional/size/border.json +0 -5
  116. package/dist/fallbacks/functional/size/radius.json +7 -0
  117. package/dist/fallbacks/functional/size/viewport.json +1 -1
  118. package/dist/figma/dimension/dimension.json +30 -20
  119. package/dist/figma/themes/dark-colorblind.json +85 -0
  120. package/dist/figma/themes/dark-dimmed.json +134 -49
  121. package/dist/figma/themes/dark-high-contrast.json +85 -0
  122. package/dist/figma/themes/dark-tritanopia.json +85 -0
  123. package/dist/figma/themes/dark.json +85 -0
  124. package/dist/figma/themes/light-colorblind.json +89 -4
  125. package/dist/figma/themes/light-high-contrast.json +89 -4
  126. package/dist/figma/themes/light-tritanopia.json +89 -4
  127. package/dist/figma/themes/light.json +89 -4
  128. package/dist/figma/typography/typography.json +44 -40
  129. package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
  130. package/dist/internalCss/dark-colorblind.css +208 -218
  131. package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
  132. package/dist/internalCss/dark-dimmed.css +208 -218
  133. package/dist/internalCss/dark-high-contrast.css +208 -218
  134. package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
  135. package/dist/internalCss/dark-tritanopia.css +208 -218
  136. package/dist/internalCss/dark.css +208 -218
  137. package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
  138. package/dist/internalCss/light-colorblind.css +208 -218
  139. package/dist/internalCss/light-high-contrast.css +208 -218
  140. package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
  141. package/dist/internalCss/light-tritanopia.css +208 -218
  142. package/dist/internalCss/light.css +208 -218
  143. package/dist/styleLint/base/motion/motion.json +181 -32
  144. package/dist/styleLint/base/size/size.json +76 -19
  145. package/dist/styleLint/base/typography/typography.json +30 -12
  146. package/dist/styleLint/functional/size/border.json +55 -175
  147. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  148. package/dist/styleLint/functional/size/radius.json +221 -0
  149. package/dist/styleLint/functional/size/size-coarse.json +45 -3
  150. package/dist/styleLint/functional/size/size-fine.json +45 -3
  151. package/dist/styleLint/functional/size/size.json +111 -66
  152. package/dist/styleLint/functional/size/viewport.json +2 -2
  153. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
  154. package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
  155. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
  156. package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
  157. package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
  158. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
  159. package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
  160. package/dist/styleLint/functional/themes/dark.json +975 -29
  161. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
  162. package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
  163. package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
  164. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
  165. package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
  166. package/dist/styleLint/functional/themes/light.json +981 -35
  167. package/dist/styleLint/functional/typography/typography.json +196 -26
  168. package/package.json +6 -3
  169. package/src/tokens/base/motion/easing.json5 +39 -4
  170. package/src/tokens/base/motion/timing.json5 +12 -12
  171. package/src/tokens/base/size/size.json5 +19 -19
  172. package/src/tokens/base/typography/typography.json5 +6 -6
  173. package/src/tokens/functional/border/border.json5 +25 -0
  174. package/src/tokens/functional/color/bgColor.json5 +165 -0
  175. package/src/tokens/functional/color/borderColor.json5 +146 -0
  176. package/src/tokens/functional/color/control.json5 +24 -0
  177. package/src/tokens/functional/color/data-vis.json5 +7 -0
  178. package/src/tokens/functional/color/display.json5 +7 -0
  179. package/src/tokens/functional/color/fgColor.json5 +101 -1
  180. package/src/tokens/functional/color/focus.json5 +5 -0
  181. package/src/tokens/functional/color/selection.json5 +5 -0
  182. package/src/tokens/functional/color/syntax.json5 +14 -0
  183. package/src/tokens/functional/shadow/shadow.json5 +49 -4
  184. package/src/tokens/functional/size/border.json5 +22 -74
  185. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  186. package/src/tokens/functional/size/radius.json5 +90 -0
  187. package/src/tokens/functional/size/size-coarse.json5 +24 -3
  188. package/src/tokens/functional/size/size-fine.json5 +45 -24
  189. package/src/tokens/functional/size/size.json5 +50 -15
  190. package/src/tokens/functional/size/viewport.json5 +1 -1
  191. package/src/tokens/functional/typography/font-stack.json5 +60 -0
  192. package/src/tokens/functional/typography/typography.json5 +71 -44
  193. package/dist/build/parsers/index.d.ts +0 -1
  194. package/dist/build/parsers/index.js +0 -1
  195. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  196. package/dist/build/parsers/w3cJsonParser.js +0 -25
  197. package/dist/removed/testing.json5 +0 -4
  198. package/src/tokens/removed/testing.json5 +0 -4
@@ -308,6 +308,10 @@
308
308
  "dark-dimmed-high-contrast": "#022f7a",
309
309
  "dark-tritanopia-high-contrast": "#021a4a",
310
310
  "dark-protanopia-deuteranopia-high-contrast": "#021a4a"
311
+ },
312
+ "org.primer.llm": {
313
+ "usage": ["active-states", "current", "selected", "active-toggle"],
314
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
311
315
  }
312
316
  },
313
317
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -315,6 +319,7 @@
315
319
  "original": {
316
320
  "$value": "{base.color.blue.5}",
317
321
  "$type": "color",
322
+ "$description": "Strong accent background for active states and focused states",
318
323
  "$extensions": {
319
324
  "org.primer.figma": {
320
325
  "collection": "mode",
@@ -330,6 +335,10 @@
330
335
  "dark-dimmed-high-contrast": "{base.color.blue.7}",
331
336
  "dark-tritanopia-high-contrast": "{base.color.blue.9}",
332
337
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
338
+ },
339
+ "org.primer.llm": {
340
+ "usage": ["active-states", "current", "selected", "active-toggle"],
341
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
333
342
  }
334
343
  },
335
344
  "key": "{bgColor.accent.emphasis}"
@@ -338,7 +347,8 @@
338
347
  "attributes": {},
339
348
  "path": ["bgColor", "accent", "emphasis"],
340
349
  "value": "#0349b4",
341
- "type": "color"
350
+ "type": "color",
351
+ "description": "Strong accent background for active states and focused states"
342
352
  },
343
353
  "bgColor-accent-muted": {
344
354
  "key": "{bgColor.accent.muted}",
@@ -359,6 +369,10 @@
359
369
  "isSource": true,
360
370
  "$type": "color"
361
371
  }
372
+ },
373
+ "org.primer.llm": {
374
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
375
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
362
376
  }
363
377
  },
364
378
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -366,6 +380,7 @@
366
380
  "original": {
367
381
  "$value": "{base.color.blue.0}",
368
382
  "$type": "color",
383
+ "$description": "Subtle accent background for informational or selected elements",
369
384
  "$extensions": {
370
385
  "org.primer.figma": {
371
386
  "collection": "mode",
@@ -383,6 +398,10 @@
383
398
  "isSource": true,
384
399
  "$type": "color"
385
400
  }
401
+ },
402
+ "org.primer.llm": {
403
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
404
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
386
405
  }
387
406
  },
388
407
  "key": "{bgColor.accent.muted}"
@@ -391,7 +410,8 @@
391
410
  "attributes": {},
392
411
  "path": ["bgColor", "accent", "muted"],
393
412
  "value": "#dff7ff",
394
- "type": "color"
413
+ "type": "color",
414
+ "description": "Subtle accent background for informational or selected elements"
395
415
  },
396
416
  "bgColor-attention-emphasis": {
397
417
  "key": "{bgColor.attention.emphasis}",
@@ -409,6 +429,10 @@
409
429
  "dark-dimmed-high-contrast": "#4e2c00",
410
430
  "dark-protanopia-deuteranopia-high-contrast": "#2e1800",
411
431
  "dark-tritanopia-high-contrast": "#2e1800"
432
+ },
433
+ "org.primer.llm": {
434
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
435
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
412
436
  }
413
437
  },
414
438
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -416,6 +440,7 @@
416
440
  "original": {
417
441
  "$value": "{base.color.yellow.5}",
418
442
  "$type": "color",
443
+ "$description": "Strong attention background for prominent warnings",
419
444
  "$extensions": {
420
445
  "org.primer.figma": {
421
446
  "collection": "mode",
@@ -430,6 +455,10 @@
430
455
  "dark-dimmed-high-contrast": "{base.color.yellow.7}",
431
456
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
432
457
  "dark-tritanopia-high-contrast": "{base.color.yellow.9}"
458
+ },
459
+ "org.primer.llm": {
460
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
461
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
433
462
  }
434
463
  },
435
464
  "key": "{bgColor.attention.emphasis}"
@@ -438,7 +467,8 @@
438
467
  "attributes": {},
439
468
  "path": ["bgColor", "attention", "emphasis"],
440
469
  "value": "#744500",
441
- "type": "color"
470
+ "type": "color",
471
+ "description": "Strong attention background for prominent warnings"
442
472
  },
443
473
  "bgColor-attention-muted": {
444
474
  "key": "{bgColor.attention.muted}",
@@ -459,6 +489,10 @@
459
489
  "isSource": true,
460
490
  "$type": "color"
461
491
  }
492
+ },
493
+ "org.primer.llm": {
494
+ "usage": ["warning-banner", "caution-message", "pending-state"],
495
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
462
496
  }
463
497
  },
464
498
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -466,6 +500,7 @@
466
500
  "original": {
467
501
  "$value": "{base.color.yellow.0}",
468
502
  "$type": "color",
503
+ "$description": "Subtle attention background for warnings and caution states",
469
504
  "$extensions": {
470
505
  "org.primer.figma": {
471
506
  "collection": "mode",
@@ -483,6 +518,10 @@
483
518
  "isSource": true,
484
519
  "$type": "color"
485
520
  }
521
+ },
522
+ "org.primer.llm": {
523
+ "usage": ["warning-banner", "caution-message", "pending-state"],
524
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
486
525
  }
487
526
  },
488
527
  "key": "{bgColor.attention.muted}"
@@ -491,7 +530,8 @@
491
530
  "attributes": {},
492
531
  "path": ["bgColor", "attention", "muted"],
493
532
  "value": "#fcf7be",
494
- "type": "color"
533
+ "type": "color",
534
+ "description": "Subtle attention background for warnings and caution states"
495
535
  },
496
536
  "bgColor-black": {
497
537
  "key": "{bgColor.black}",
@@ -503,6 +543,10 @@
503
543
  },
504
544
  "org.primer.overrides": {
505
545
  "dark": "#ffffff"
546
+ },
547
+ "org.primer.llm": {
548
+ "doNotUse": true,
549
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
506
550
  }
507
551
  },
508
552
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -510,6 +554,7 @@
510
554
  "original": {
511
555
  "$value": "{base.color.neutral.13}",
512
556
  "$type": "color",
557
+ "$description": "Pure black background",
513
558
  "$extensions": {
514
559
  "org.primer.figma": {
515
560
  "collection": "mode",
@@ -518,6 +563,10 @@
518
563
  },
519
564
  "org.primer.overrides": {
520
565
  "dark": "{base.color.neutral.0}"
566
+ },
567
+ "org.primer.llm": {
568
+ "doNotUse": true,
569
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
521
570
  }
522
571
  },
523
572
  "key": "{bgColor.black}"
@@ -526,7 +575,8 @@
526
575
  "attributes": {},
527
576
  "path": ["bgColor", "black"],
528
577
  "value": "#010409",
529
- "type": "color"
578
+ "type": "color",
579
+ "description": "Pure black background"
530
580
  },
531
581
  "bgColor-closed-emphasis": {
532
582
  "key": "{bgColor.closed.emphasis}",
@@ -548,6 +598,10 @@
548
598
  "light-protanopia-deuteranopia-high-contrast": "#454c54",
549
599
  "dark-protanopia-deuteranopia": "#454c54",
550
600
  "dark-protanopia-deuteranopia-high-contrast": "#454c54"
601
+ },
602
+ "org.primer.llm": {
603
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
604
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
551
605
  }
552
606
  },
553
607
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -555,6 +609,7 @@
555
609
  "original": {
556
610
  "$value": "{bgColor.danger.emphasis}",
557
611
  "$type": "color",
612
+ "$description": "Strong background for closed state badges and labels",
558
613
  "$extensions": {
559
614
  "org.primer.figma": {
560
615
  "collection": "mode",
@@ -573,6 +628,10 @@
573
628
  "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
574
629
  "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
575
630
  "dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
631
+ },
632
+ "org.primer.llm": {
633
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
634
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
576
635
  }
577
636
  },
578
637
  "key": "{bgColor.closed.emphasis}"
@@ -581,7 +640,8 @@
581
640
  "attributes": {},
582
641
  "path": ["bgColor", "closed", "emphasis"],
583
642
  "value": "#a0111f",
584
- "type": "color"
643
+ "type": "color",
644
+ "description": "Strong background for closed state badges and labels"
585
645
  },
586
646
  "bgColor-closed-muted": {
587
647
  "key": "{bgColor.closed.muted}",
@@ -620,6 +680,10 @@
620
680
  "isSource": true,
621
681
  "$type": "color"
622
682
  }
683
+ },
684
+ "org.primer.llm": {
685
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
686
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
623
687
  }
624
688
  },
625
689
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -627,6 +691,7 @@
627
691
  "original": {
628
692
  "$value": "{bgColor.danger.muted}",
629
693
  "$type": "color",
694
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
630
695
  "$extensions": {
631
696
  "org.primer.figma": {
632
697
  "collection": "mode",
@@ -662,6 +727,10 @@
662
727
  "isSource": true,
663
728
  "$type": "color"
664
729
  }
730
+ },
731
+ "org.primer.llm": {
732
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
733
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
665
734
  }
666
735
  },
667
736
  "key": "{bgColor.closed.muted}"
@@ -670,7 +739,8 @@
670
739
  "attributes": {},
671
740
  "path": ["bgColor", "closed", "muted"],
672
741
  "value": "#fff0ee",
673
- "type": "color"
742
+ "type": "color",
743
+ "description": "Subtle background for closed state indicators (issues, PRs)"
674
744
  },
675
745
  "bgColor-danger-emphasis": {
676
746
  "key": "{bgColor.danger.emphasis}",
@@ -691,6 +761,10 @@
691
761
  "dark-high-contrast": "#430011",
692
762
  "dark-dimmed-high-contrast": "#6e011a",
693
763
  "dark-tritanopia-high-contrast": "#430011"
764
+ },
765
+ "org.primer.llm": {
766
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
767
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
694
768
  }
695
769
  },
696
770
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -698,6 +772,7 @@
698
772
  "original": {
699
773
  "$value": "{base.color.red.5}",
700
774
  "$type": "color",
775
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
701
776
  "$extensions": {
702
777
  "org.primer.figma": {
703
778
  "collection": "mode",
@@ -715,6 +790,10 @@
715
790
  "dark-high-contrast": "{base.color.red.9}",
716
791
  "dark-dimmed-high-contrast": "{base.color.red.7}",
717
792
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
793
+ },
794
+ "org.primer.llm": {
795
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
796
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
718
797
  }
719
798
  },
720
799
  "key": "{bgColor.danger.emphasis}"
@@ -723,7 +802,8 @@
723
802
  "attributes": {},
724
803
  "path": ["bgColor", "danger", "emphasis"],
725
804
  "value": "#a0111f",
726
- "type": "color"
805
+ "type": "color",
806
+ "description": "Emphasized danger background for critical errors and delete confirmations"
727
807
  },
728
808
  "bgColor-danger-muted": {
729
809
  "key": "{bgColor.danger.muted}",
@@ -753,6 +833,10 @@
753
833
  "isSource": true,
754
834
  "$type": "color"
755
835
  }
836
+ },
837
+ "org.primer.llm": {
838
+ "usage": ["error-message", "destructive-action", "validation-error"],
839
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
756
840
  }
757
841
  },
758
842
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -760,6 +844,7 @@
760
844
  "original": {
761
845
  "$value": "{base.color.red.0}",
762
846
  "$type": "color",
847
+ "$description": "Muted danger background for error states and destructive action contexts",
763
848
  "$extensions": {
764
849
  "org.primer.figma": {
765
850
  "collection": "mode",
@@ -786,6 +871,10 @@
786
871
  "isSource": true,
787
872
  "$type": "color"
788
873
  }
874
+ },
875
+ "org.primer.llm": {
876
+ "usage": ["error-message", "destructive-action", "validation-error"],
877
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
789
878
  }
790
879
  },
791
880
  "key": "{bgColor.danger.muted}"
@@ -794,7 +883,8 @@
794
883
  "attributes": {},
795
884
  "path": ["bgColor", "danger", "muted"],
796
885
  "value": "#fff0ee",
797
- "type": "color"
886
+ "type": "color",
887
+ "description": "Muted danger background for error states and destructive action contexts"
798
888
  },
799
889
  "bgColor-default": {
800
890
  "key": "{bgColor.default}",
@@ -814,6 +904,10 @@
814
904
  "dark-high-contrast": "#ffffff",
815
905
  "dark-tritanopia-high-contrast": "#ffffff",
816
906
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff"
907
+ },
908
+ "org.primer.llm": {
909
+ "usage": ["page-background", "main-content", "card-background"],
910
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
817
911
  }
818
912
  },
819
913
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -821,6 +915,7 @@
821
915
  "original": {
822
916
  "$value": "{base.color.neutral.0}",
823
917
  "$type": "color",
918
+ "$description": "Default background color for pages and main content areas",
824
919
  "$extensions": {
825
920
  "org.primer.figma": {
826
921
  "collection": "mode",
@@ -837,6 +932,10 @@
837
932
  "dark-high-contrast": "{base.color.neutral.0}",
838
933
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
839
934
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
935
+ },
936
+ "org.primer.llm": {
937
+ "usage": ["page-background", "main-content", "card-background"],
938
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
840
939
  }
841
940
  },
842
941
  "key": "{bgColor.default}"
@@ -845,7 +944,8 @@
845
944
  "attributes": {},
846
945
  "path": ["bgColor", "default"],
847
946
  "value": "#ffffff",
848
- "type": "color"
947
+ "type": "color",
948
+ "description": "Default background color for pages and main content areas"
849
949
  },
850
950
  "bgColor-disabled": {
851
951
  "key": "{bgColor.disabled}",
@@ -865,6 +965,10 @@
865
965
  "dark-high-contrast": "#e0e6eb",
866
966
  "dark-tritanopia-high-contrast": "#e0e6eb",
867
967
  "dark-protanopia-deuteranopia-high-contrast": "#e0e6eb"
968
+ },
969
+ "org.primer.llm": {
970
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
971
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
868
972
  }
869
973
  },
870
974
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -872,6 +976,7 @@
872
976
  "original": {
873
977
  "$value": "{base.color.neutral.4}",
874
978
  "$type": "color",
979
+ "$description": "Background for disabled interactive elements",
875
980
  "$extensions": {
876
981
  "org.primer.figma": {
877
982
  "collection": "mode",
@@ -888,6 +993,10 @@
888
993
  "dark-high-contrast": "{base.color.neutral.4}",
889
994
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
890
995
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
996
+ },
997
+ "org.primer.llm": {
998
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
999
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
891
1000
  }
892
1001
  },
893
1002
  "key": "{bgColor.disabled}"
@@ -896,7 +1005,8 @@
896
1005
  "attributes": {},
897
1006
  "path": ["bgColor", "disabled"],
898
1007
  "value": "#e0e6eb",
899
- "type": "color"
1008
+ "type": "color",
1009
+ "description": "Background for disabled interactive elements"
900
1010
  },
901
1011
  "bgColor-done-emphasis": {
902
1012
  "key": "{bgColor.done.emphasis}",
@@ -914,6 +1024,10 @@
914
1024
  "dark-dimmed-high-contrast": "#411d7b",
915
1025
  "dark-tritanopia-high-contrast": "#260f49",
916
1026
  "dark-protanopia-deuteranopia-high-contrast": "#260f49"
1027
+ },
1028
+ "org.primer.llm": {
1029
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1030
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
917
1031
  }
918
1032
  },
919
1033
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -921,6 +1035,7 @@
921
1035
  "original": {
922
1036
  "$value": "{base.color.purple.5}",
923
1037
  "$type": "color",
1038
+ "$description": "Strong background for completed/done state badges and labels",
924
1039
  "$extensions": {
925
1040
  "org.primer.figma": {
926
1041
  "collection": "mode",
@@ -935,6 +1050,10 @@
935
1050
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
936
1051
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
937
1052
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1053
+ },
1054
+ "org.primer.llm": {
1055
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1056
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
938
1057
  }
939
1058
  },
940
1059
  "key": "{bgColor.done.emphasis}"
@@ -943,7 +1062,8 @@
943
1062
  "attributes": {},
944
1063
  "path": ["bgColor", "done", "emphasis"],
945
1064
  "value": "#622cbc",
946
- "type": "color"
1065
+ "type": "color",
1066
+ "description": "Strong background for completed/done state badges and labels"
947
1067
  },
948
1068
  "bgColor-done-muted": {
949
1069
  "key": "{bgColor.done.muted}",
@@ -964,6 +1084,10 @@
964
1084
  "isSource": true,
965
1085
  "$type": "color"
966
1086
  }
1087
+ },
1088
+ "org.primer.llm": {
1089
+ "usage": ["completed-task", "merged-pr", "done-state"],
1090
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
967
1091
  }
968
1092
  },
969
1093
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -971,6 +1095,7 @@
971
1095
  "original": {
972
1096
  "$value": "{base.color.purple.0}",
973
1097
  "$type": "color",
1098
+ "$description": "Subtle background for completed/done state indicators",
974
1099
  "$extensions": {
975
1100
  "org.primer.figma": {
976
1101
  "collection": "mode",
@@ -988,6 +1113,10 @@
988
1113
  "isSource": true,
989
1114
  "$type": "color"
990
1115
  }
1116
+ },
1117
+ "org.primer.llm": {
1118
+ "usage": ["completed-task", "merged-pr", "done-state"],
1119
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
991
1120
  }
992
1121
  },
993
1122
  "key": "{bgColor.done.muted}"
@@ -996,7 +1125,8 @@
996
1125
  "attributes": {},
997
1126
  "path": ["bgColor", "done", "muted"],
998
1127
  "value": "#faf0fe",
999
- "type": "color"
1128
+ "type": "color",
1129
+ "description": "Subtle background for completed/done state indicators"
1000
1130
  },
1001
1131
  "bgColor-draft-emphasis": {
1002
1132
  "key": "{bgColor.draft.emphasis}",
@@ -1008,6 +1138,10 @@
1008
1138
  "codeSyntax": {
1009
1139
  "web": "var(--bgColor-draft-emphasis)"
1010
1140
  }
1141
+ },
1142
+ "org.primer.llm": {
1143
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1144
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1011
1145
  }
1012
1146
  },
1013
1147
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1015,6 +1149,7 @@
1015
1149
  "original": {
1016
1150
  "$value": "{bgColor.neutral.emphasis}",
1017
1151
  "$type": "color",
1152
+ "$description": "Strong background for draft state badges and labels",
1018
1153
  "$extensions": {
1019
1154
  "org.primer.figma": {
1020
1155
  "collection": "mode",
@@ -1023,6 +1158,10 @@
1023
1158
  "codeSyntax": {
1024
1159
  "web": "var(--bgColor-draft-emphasis)"
1025
1160
  }
1161
+ },
1162
+ "org.primer.llm": {
1163
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1164
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1026
1165
  }
1027
1166
  },
1028
1167
  "key": "{bgColor.draft.emphasis}"
@@ -1031,7 +1170,8 @@
1031
1170
  "attributes": {},
1032
1171
  "path": ["bgColor", "draft", "emphasis"],
1033
1172
  "value": "#454c54",
1034
- "type": "color"
1173
+ "type": "color",
1174
+ "description": "Strong background for draft state badges and labels"
1035
1175
  },
1036
1176
  "bgColor-draft-muted": {
1037
1177
  "key": "{bgColor.draft.muted}",
@@ -1070,6 +1210,10 @@
1070
1210
  "isSource": true,
1071
1211
  "$type": "color"
1072
1212
  }
1213
+ },
1214
+ "org.primer.llm": {
1215
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1216
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1073
1217
  }
1074
1218
  },
1075
1219
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1077,6 +1221,7 @@
1077
1221
  "original": {
1078
1222
  "$value": "{bgColor.neutral.muted}",
1079
1223
  "$type": "color",
1224
+ "$description": "Subtle background for draft state indicators",
1080
1225
  "$extensions": {
1081
1226
  "org.primer.figma": {
1082
1227
  "collection": "mode",
@@ -1112,6 +1257,10 @@
1112
1257
  "isSource": true,
1113
1258
  "$type": "color"
1114
1259
  }
1260
+ },
1261
+ "org.primer.llm": {
1262
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1263
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1115
1264
  }
1116
1265
  },
1117
1266
  "key": "{bgColor.draft.muted}"
@@ -1120,7 +1269,8 @@
1120
1269
  "attributes": {},
1121
1270
  "path": ["bgColor", "draft", "muted"],
1122
1271
  "value": "#e0e6eb",
1123
- "type": "color"
1272
+ "type": "color",
1273
+ "description": "Subtle background for draft state indicators"
1124
1274
  },
1125
1275
  "bgColor-emphasis": {
1126
1276
  "key": "{bgColor.emphasis}",
@@ -1135,6 +1285,10 @@
1135
1285
  },
1136
1286
  "org.primer.overrides": {
1137
1287
  "dark": "#c8d1da"
1288
+ },
1289
+ "org.primer.llm": {
1290
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1291
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1138
1292
  }
1139
1293
  },
1140
1294
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1142,6 +1296,7 @@
1142
1296
  "original": {
1143
1297
  "$value": "{base.color.neutral.12}",
1144
1298
  "$type": "color",
1299
+ "$description": "High-emphasis dark background for strong visual contrast",
1145
1300
  "$extensions": {
1146
1301
  "org.primer.figma": {
1147
1302
  "collection": "mode",
@@ -1153,6 +1308,10 @@
1153
1308
  },
1154
1309
  "org.primer.overrides": {
1155
1310
  "dark": "{base.color.neutral.7}"
1311
+ },
1312
+ "org.primer.llm": {
1313
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1314
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1156
1315
  }
1157
1316
  },
1158
1317
  "key": "{bgColor.emphasis}"
@@ -1161,7 +1320,8 @@
1161
1320
  "attributes": {},
1162
1321
  "path": ["bgColor", "emphasis"],
1163
1322
  "value": "#25292e",
1164
- "type": "color"
1323
+ "type": "color",
1324
+ "description": "High-emphasis dark background for strong visual contrast"
1165
1325
  },
1166
1326
  "bgColor-inset": {
1167
1327
  "key": "{bgColor.inset}",
@@ -1181,6 +1341,10 @@
1181
1341
  "light-high-contrast": "#eff2f5",
1182
1342
  "light-tritanopia-high-contrast": "#eff2f5",
1183
1343
  "light-protanopia-deuteranopia-high-contrast": "#eff2f5"
1344
+ },
1345
+ "org.primer.llm": {
1346
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1347
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1184
1348
  }
1185
1349
  },
1186
1350
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1188,6 +1352,7 @@
1188
1352
  "original": {
1189
1353
  "$value": "{base.color.neutral.2}",
1190
1354
  "$type": "color",
1355
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1191
1356
  "$extensions": {
1192
1357
  "org.primer.figma": {
1193
1358
  "collection": "mode",
@@ -1204,6 +1369,10 @@
1204
1369
  "light-high-contrast": "{base.color.neutral.2}",
1205
1370
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1206
1371
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1372
+ },
1373
+ "org.primer.llm": {
1374
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1375
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1207
1376
  }
1208
1377
  },
1209
1378
  "key": "{bgColor.inset}"
@@ -1212,7 +1381,8 @@
1212
1381
  "attributes": {},
1213
1382
  "path": ["bgColor", "inset"],
1214
1383
  "value": "#eff2f5",
1215
- "type": "color"
1384
+ "type": "color",
1385
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1216
1386
  },
1217
1387
  "bgColor-inverse": {
1218
1388
  "key": "{bgColor.inverse}",
@@ -1224,6 +1394,10 @@
1224
1394
  },
1225
1395
  "org.primer.overrides": {
1226
1396
  "dark": "#010409"
1397
+ },
1398
+ "org.primer.llm": {
1399
+ "usage": ["overlay-content", "inverse-theme-element"],
1400
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1227
1401
  }
1228
1402
  },
1229
1403
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1231,6 +1405,7 @@
1231
1405
  "original": {
1232
1406
  "$value": "{base.color.neutral.12}",
1233
1407
  "$type": "color",
1408
+ "$description": "Inverse background that flips between light and dark modes",
1234
1409
  "$extensions": {
1235
1410
  "org.primer.figma": {
1236
1411
  "collection": "mode",
@@ -1239,6 +1414,10 @@
1239
1414
  },
1240
1415
  "org.primer.overrides": {
1241
1416
  "dark": "{base.color.neutral.13}"
1417
+ },
1418
+ "org.primer.llm": {
1419
+ "usage": ["overlay-content", "inverse-theme-element"],
1420
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1242
1421
  }
1243
1422
  },
1244
1423
  "key": "{bgColor.inverse}"
@@ -1247,7 +1426,8 @@
1247
1426
  "attributes": {},
1248
1427
  "path": ["bgColor", "inverse"],
1249
1428
  "value": "#25292e",
1250
- "type": "color"
1429
+ "type": "color",
1430
+ "description": "Inverse background that flips between light and dark modes"
1251
1431
  },
1252
1432
  "bgColor-muted": {
1253
1433
  "key": "{bgColor.muted}",
@@ -1270,6 +1450,10 @@
1270
1450
  "dark-high-contrast": "#eff2f5",
1271
1451
  "dark-tritanopia-high-contrast": "#eff2f5",
1272
1452
  "dark-protanopia-deuteranopia-high-contrast": "#eff2f5"
1453
+ },
1454
+ "org.primer.llm": {
1455
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1456
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1273
1457
  }
1274
1458
  },
1275
1459
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1277,6 +1461,7 @@
1277
1461
  "original": {
1278
1462
  "$value": "{base.color.neutral.3}",
1279
1463
  "$type": "color",
1464
+ "$description": "Muted background for secondary content areas and subtle grouping",
1280
1465
  "$extensions": {
1281
1466
  "org.primer.figma": {
1282
1467
  "collection": "mode",
@@ -1296,6 +1481,10 @@
1296
1481
  "dark-high-contrast": "{base.color.neutral.2}",
1297
1482
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1298
1483
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1484
+ },
1485
+ "org.primer.llm": {
1486
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1487
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1299
1488
  }
1300
1489
  },
1301
1490
  "key": "{bgColor.muted}"
@@ -1304,7 +1493,8 @@
1304
1493
  "attributes": {},
1305
1494
  "path": ["bgColor", "muted"],
1306
1495
  "value": "#e6eaef",
1307
- "type": "color"
1496
+ "type": "color",
1497
+ "description": "Muted background for secondary content areas and subtle grouping"
1308
1498
  },
1309
1499
  "bgColor-neutral-emphasis": {
1310
1500
  "key": "{bgColor.neutral.emphasis}",
@@ -1324,6 +1514,10 @@
1324
1514
  "dark-high-contrast": "#c8d1da",
1325
1515
  "dark-tritanopia-high-contrast": "#c8d1da",
1326
1516
  "dark-protanopia-deuteranopia-high-contrast": "#c8d1da"
1517
+ },
1518
+ "org.primer.llm": {
1519
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1520
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1327
1521
  }
1328
1522
  },
1329
1523
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1331,6 +1525,7 @@
1331
1525
  "original": {
1332
1526
  "$value": "{base.color.neutral.10}",
1333
1527
  "$type": "color",
1528
+ "$description": "Strong neutral background for prominent neutral elements",
1334
1529
  "$extensions": {
1335
1530
  "org.primer.figma": {
1336
1531
  "collection": "mode",
@@ -1347,6 +1542,10 @@
1347
1542
  "dark-high-contrast": "{base.color.neutral.7}",
1348
1543
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1349
1544
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1545
+ },
1546
+ "org.primer.llm": {
1547
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1548
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1350
1549
  }
1351
1550
  },
1352
1551
  "key": "{bgColor.neutral.emphasis}"
@@ -1355,7 +1554,8 @@
1355
1554
  "attributes": {},
1356
1555
  "path": ["bgColor", "neutral", "emphasis"],
1357
1556
  "value": "#454c54",
1358
- "type": "color"
1557
+ "type": "color",
1558
+ "description": "Strong neutral background for prominent neutral elements"
1359
1559
  },
1360
1560
  "bgColor-neutral-muted": {
1361
1561
  "key": "{bgColor.neutral.muted}",
@@ -1386,6 +1586,10 @@
1386
1586
  "dark-high-contrast": "#e6eaef",
1387
1587
  "dark-tritanopia-high-contrast": "#e6eaef",
1388
1588
  "dark-protanopia-deuteranopia-high-contrast": "#e6eaef"
1589
+ },
1590
+ "org.primer.llm": {
1591
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1592
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1389
1593
  }
1390
1594
  },
1391
1595
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1393,6 +1597,7 @@
1393
1597
  "original": {
1394
1598
  "$value": "{base.color.neutral.4}",
1395
1599
  "$type": "color",
1600
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1396
1601
  "$extensions": {
1397
1602
  "org.primer.figma": {
1398
1603
  "collection": "mode",
@@ -1420,6 +1625,10 @@
1420
1625
  "dark-high-contrast": "{base.color.neutral.3}",
1421
1626
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1422
1627
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1628
+ },
1629
+ "org.primer.llm": {
1630
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1631
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1423
1632
  }
1424
1633
  },
1425
1634
  "key": "{bgColor.neutral.muted}"
@@ -1428,7 +1637,8 @@
1428
1637
  "attributes": {},
1429
1638
  "path": ["bgColor", "neutral", "muted"],
1430
1639
  "value": "#e0e6eb",
1431
- "type": "color"
1640
+ "type": "color",
1641
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1432
1642
  },
1433
1643
  "bgColor-open-emphasis": {
1434
1644
  "key": "{bgColor.open.emphasis}",
@@ -1450,6 +1660,10 @@
1450
1660
  "light-protanopia-deuteranopia-high-contrast": "#873800",
1451
1661
  "dark-protanopia-deuteranopia": "#873800",
1452
1662
  "dark-protanopia-deuteranopia-high-contrast": "#361200"
1663
+ },
1664
+ "org.primer.llm": {
1665
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1666
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1453
1667
  }
1454
1668
  },
1455
1669
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1457,6 +1671,7 @@
1457
1671
  "original": {
1458
1672
  "$value": "{bgColor.success.emphasis}",
1459
1673
  "$type": "color",
1674
+ "$description": "Strong background for open state badges and labels",
1460
1675
  "$extensions": {
1461
1676
  "org.primer.figma": {
1462
1677
  "collection": "mode",
@@ -1475,6 +1690,10 @@
1475
1690
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1476
1691
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1477
1692
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1693
+ },
1694
+ "org.primer.llm": {
1695
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1696
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1478
1697
  }
1479
1698
  },
1480
1699
  "key": "{bgColor.open.emphasis}"
@@ -1483,7 +1702,8 @@
1483
1702
  "attributes": {},
1484
1703
  "path": ["bgColor", "open", "emphasis"],
1485
1704
  "value": "#055d20",
1486
- "type": "color"
1705
+ "type": "color",
1706
+ "description": "Strong background for open state badges and labels"
1487
1707
  },
1488
1708
  "bgColor-open-muted": {
1489
1709
  "key": "{bgColor.open.muted}",
@@ -1529,6 +1749,10 @@
1529
1749
  "isSource": true,
1530
1750
  "$type": "color"
1531
1751
  }
1752
+ },
1753
+ "org.primer.llm": {
1754
+ "usage": ["open-issue", "open-pr", "active-status"],
1755
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1532
1756
  }
1533
1757
  },
1534
1758
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1536,6 +1760,7 @@
1536
1760
  "original": {
1537
1761
  "$value": "{bgColor.success.muted}",
1538
1762
  "$type": "color",
1763
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1539
1764
  "$extensions": {
1540
1765
  "org.primer.figma": {
1541
1766
  "collection": "mode",
@@ -1578,6 +1803,10 @@
1578
1803
  "isSource": true,
1579
1804
  "$type": "color"
1580
1805
  }
1806
+ },
1807
+ "org.primer.llm": {
1808
+ "usage": ["open-issue", "open-pr", "active-status"],
1809
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1581
1810
  }
1582
1811
  },
1583
1812
  "key": "{bgColor.open.muted}"
@@ -1586,7 +1815,8 @@
1586
1815
  "attributes": {},
1587
1816
  "path": ["bgColor", "open", "muted"],
1588
1817
  "value": "#d2fedb",
1589
- "type": "color"
1818
+ "type": "color",
1819
+ "description": "Subtle background for open state indicators (issues, PRs)"
1590
1820
  },
1591
1821
  "bgColor-severe-emphasis": {
1592
1822
  "key": "{bgColor.severe.emphasis}",
@@ -1607,6 +1837,10 @@
1607
1837
  "dark-high-contrast": "#361200",
1608
1838
  "dark-dimmed-high-contrast": "#5b2300",
1609
1839
  "dark-protanopia-deuteranopia-high-contrast": "#361200"
1840
+ },
1841
+ "org.primer.llm": {
1842
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1843
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1610
1844
  }
1611
1845
  },
1612
1846
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1614,6 +1848,7 @@
1614
1848
  "original": {
1615
1849
  "$value": "{base.color.orange.5}",
1616
1850
  "$type": "color",
1851
+ "$description": "Strong severe background for prominent high-priority warnings",
1617
1852
  "$extensions": {
1618
1853
  "org.primer.figma": {
1619
1854
  "collection": "mode",
@@ -1631,6 +1866,10 @@
1631
1866
  "dark-high-contrast": "{base.color.orange.9}",
1632
1867
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1633
1868
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1869
+ },
1870
+ "org.primer.llm": {
1871
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1872
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1634
1873
  }
1635
1874
  },
1636
1875
  "key": "{bgColor.severe.emphasis}"
@@ -1639,7 +1878,8 @@
1639
1878
  "attributes": {},
1640
1879
  "path": ["bgColor", "severe", "emphasis"],
1641
1880
  "value": "#873800",
1642
- "type": "color"
1881
+ "type": "color",
1882
+ "description": "Strong severe background for prominent high-priority warnings"
1643
1883
  },
1644
1884
  "bgColor-severe-muted": {
1645
1885
  "key": "{bgColor.severe.muted}",
@@ -1669,6 +1909,10 @@
1669
1909
  "isSource": true,
1670
1910
  "$type": "color"
1671
1911
  }
1912
+ },
1913
+ "org.primer.llm": {
1914
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1915
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1672
1916
  }
1673
1917
  },
1674
1918
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1676,6 +1920,7 @@
1676
1920
  "original": {
1677
1921
  "$value": "{base.color.orange.0}",
1678
1922
  "$type": "color",
1923
+ "$description": "Subtle severe background for high-priority warnings",
1679
1924
  "$extensions": {
1680
1925
  "org.primer.figma": {
1681
1926
  "collection": "mode",
@@ -1702,6 +1947,10 @@
1702
1947
  "isSource": true,
1703
1948
  "$type": "color"
1704
1949
  }
1950
+ },
1951
+ "org.primer.llm": {
1952
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1953
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1705
1954
  }
1706
1955
  },
1707
1956
  "key": "{bgColor.severe.muted}"
@@ -1710,7 +1959,8 @@
1710
1959
  "attributes": {},
1711
1960
  "path": ["bgColor", "severe", "muted"],
1712
1961
  "value": "#fff2d5",
1713
- "type": "color"
1962
+ "type": "color",
1963
+ "description": "Subtle severe background for high-priority warnings"
1714
1964
  },
1715
1965
  "bgColor-sponsors-emphasis": {
1716
1966
  "key": "{bgColor.sponsors.emphasis}",
@@ -1728,6 +1978,10 @@
1728
1978
  "dark-dimmed-high-contrast": "#660847",
1729
1979
  "dark-tritanopia-high-contrast": "#3e022b",
1730
1980
  "dark-protanopia-deuteranopia-high-contrast": "#3e022b"
1981
+ },
1982
+ "org.primer.llm": {
1983
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
1984
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1731
1985
  }
1732
1986
  },
1733
1987
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1735,6 +1989,7 @@
1735
1989
  "original": {
1736
1990
  "$value": "{base.color.pink.5}",
1737
1991
  "$type": "color",
1992
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1738
1993
  "$extensions": {
1739
1994
  "org.primer.figma": {
1740
1995
  "collection": "mode",
@@ -1749,6 +2004,10 @@
1749
2004
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1750
2005
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1751
2006
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2007
+ },
2008
+ "org.primer.llm": {
2009
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2010
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1752
2011
  }
1753
2012
  },
1754
2013
  "key": "{bgColor.sponsors.emphasis}"
@@ -1757,7 +2016,8 @@
1757
2016
  "attributes": {},
1758
2017
  "path": ["bgColor", "sponsors", "emphasis"],
1759
2018
  "value": "#971368",
1760
- "type": "color"
2019
+ "type": "color",
2020
+ "description": "Strong background for prominent GitHub Sponsors elements"
1761
2021
  },
1762
2022
  "bgColor-sponsors-muted": {
1763
2023
  "key": "{bgColor.sponsors.muted}",
@@ -1785,6 +2045,10 @@
1785
2045
  "isSource": true,
1786
2046
  "$type": "color"
1787
2047
  }
2048
+ },
2049
+ "org.primer.llm": {
2050
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2051
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1788
2052
  }
1789
2053
  },
1790
2054
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1792,6 +2056,7 @@
1792
2056
  "original": {
1793
2057
  "$value": "{base.color.pink.0}",
1794
2058
  "$type": "color",
2059
+ "$description": "Subtle background for GitHub Sponsors content",
1795
2060
  "$extensions": {
1796
2061
  "org.primer.figma": {
1797
2062
  "collection": "mode",
@@ -1816,6 +2081,10 @@
1816
2081
  "isSource": true,
1817
2082
  "$type": "color"
1818
2083
  }
2084
+ },
2085
+ "org.primer.llm": {
2086
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2087
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1819
2088
  }
1820
2089
  },
1821
2090
  "key": "{bgColor.sponsors.muted}"
@@ -1824,7 +2093,8 @@
1824
2093
  "attributes": {},
1825
2094
  "path": ["bgColor", "sponsors", "muted"],
1826
2095
  "value": "#feeff7",
1827
- "type": "color"
2096
+ "type": "color",
2097
+ "description": "Subtle background for GitHub Sponsors content"
1828
2098
  },
1829
2099
  "bgColor-success-emphasis": {
1830
2100
  "key": "{bgColor.success.emphasis}",
@@ -1850,6 +2120,10 @@
1850
2120
  "light-high-contrast": "#055d20",
1851
2121
  "dark-high-contrast": "#00230b",
1852
2122
  "dark-dimmed-high-contrast": "#013d14"
2123
+ },
2124
+ "org.primer.llm": {
2125
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2126
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1853
2127
  }
1854
2128
  },
1855
2129
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1857,6 +2131,7 @@
1857
2131
  "original": {
1858
2132
  "$value": "{base.color.green.5}",
1859
2133
  "$type": "color",
2134
+ "$description": "Strong success background for prominent positive actions",
1860
2135
  "$extensions": {
1861
2136
  "org.primer.figma": {
1862
2137
  "collection": "mode",
@@ -1879,6 +2154,10 @@
1879
2154
  "light-high-contrast": "{base.color.green.5}",
1880
2155
  "dark-high-contrast": "{base.color.green.9}",
1881
2156
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2157
+ },
2158
+ "org.primer.llm": {
2159
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2160
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1882
2161
  }
1883
2162
  },
1884
2163
  "key": "{bgColor.success.emphasis}"
@@ -1887,7 +2166,8 @@
1887
2166
  "attributes": {},
1888
2167
  "path": ["bgColor", "success", "emphasis"],
1889
2168
  "value": "#055d20",
1890
- "type": "color"
2169
+ "type": "color",
2170
+ "description": "Strong success background for prominent positive actions"
1891
2171
  },
1892
2172
  "bgColor-success-muted": {
1893
2173
  "key": "{bgColor.success.muted}",
@@ -1940,6 +2220,10 @@
1940
2220
  "isSource": true,
1941
2221
  "$type": "color"
1942
2222
  }
2223
+ },
2224
+ "org.primer.llm": {
2225
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2226
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1943
2227
  }
1944
2228
  },
1945
2229
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1947,6 +2231,7 @@
1947
2231
  "original": {
1948
2232
  "$value": "{base.color.green.0}",
1949
2233
  "$type": "color",
2234
+ "$description": "Subtle success background for positive feedback and completed states",
1950
2235
  "$extensions": {
1951
2236
  "org.primer.figma": {
1952
2237
  "collection": "mode",
@@ -1996,6 +2281,10 @@
1996
2281
  "isSource": true,
1997
2282
  "$type": "color"
1998
2283
  }
2284
+ },
2285
+ "org.primer.llm": {
2286
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2287
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1999
2288
  }
2000
2289
  },
2001
2290
  "key": "{bgColor.success.muted}"
@@ -2004,7 +2293,8 @@
2004
2293
  "attributes": {},
2005
2294
  "path": ["bgColor", "success", "muted"],
2006
2295
  "value": "#d2fedb",
2007
- "type": "color"
2296
+ "type": "color",
2297
+ "description": "Subtle success background for positive feedback and completed states"
2008
2298
  },
2009
2299
  "bgColor-transparent": {
2010
2300
  "key": "{bgColor.transparent}",
@@ -2016,6 +2306,10 @@
2016
2306
  "codeSyntax": {
2017
2307
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2018
2308
  }
2309
+ },
2310
+ "org.primer.llm": {
2311
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2312
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2019
2313
  }
2020
2314
  },
2021
2315
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2023,6 +2317,7 @@
2023
2317
  "original": {
2024
2318
  "$value": "{base.color.transparent}",
2025
2319
  "$type": "color",
2320
+ "$description": "Fully transparent background",
2026
2321
  "$extensions": {
2027
2322
  "org.primer.figma": {
2028
2323
  "collection": "mode",
@@ -2031,6 +2326,10 @@
2031
2326
  "codeSyntax": {
2032
2327
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2033
2328
  }
2329
+ },
2330
+ "org.primer.llm": {
2331
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2332
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2034
2333
  }
2035
2334
  },
2036
2335
  "key": "{bgColor.transparent}"
@@ -2039,7 +2338,8 @@
2039
2338
  "attributes": {},
2040
2339
  "path": ["bgColor", "transparent"],
2041
2340
  "value": "#ffffff00",
2042
- "type": "color"
2341
+ "type": "color",
2342
+ "description": "Fully transparent background"
2043
2343
  },
2044
2344
  "bgColor-upsell-emphasis": {
2045
2345
  "key": "{bgColor.upsell.emphasis}",
@@ -2051,6 +2351,10 @@
2051
2351
  "codeSyntax": {
2052
2352
  "web": "var(--bgColor-upsell-emphasis)"
2053
2353
  }
2354
+ },
2355
+ "org.primer.llm": {
2356
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2357
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2054
2358
  }
2055
2359
  },
2056
2360
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2058,6 +2362,7 @@
2058
2362
  "original": {
2059
2363
  "$value": "{bgColor.done.emphasis}",
2060
2364
  "$type": "color",
2365
+ "$description": "Strong background for prominent upsell elements",
2061
2366
  "$extensions": {
2062
2367
  "org.primer.figma": {
2063
2368
  "collection": "mode",
@@ -2066,6 +2371,10 @@
2066
2371
  "codeSyntax": {
2067
2372
  "web": "var(--bgColor-upsell-emphasis)"
2068
2373
  }
2374
+ },
2375
+ "org.primer.llm": {
2376
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2377
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2069
2378
  }
2070
2379
  },
2071
2380
  "key": "{bgColor.upsell.emphasis}"
@@ -2074,7 +2383,8 @@
2074
2383
  "attributes": {},
2075
2384
  "path": ["bgColor", "upsell", "emphasis"],
2076
2385
  "value": "#622cbc",
2077
- "type": "color"
2386
+ "type": "color",
2387
+ "description": "Strong background for prominent upsell elements"
2078
2388
  },
2079
2389
  "bgColor-upsell-muted": {
2080
2390
  "key": "{bgColor.upsell.muted}",
@@ -2086,6 +2396,10 @@
2086
2396
  "codeSyntax": {
2087
2397
  "web": "var(--bgColor-upsell-muted)"
2088
2398
  }
2399
+ },
2400
+ "org.primer.llm": {
2401
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2402
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2089
2403
  }
2090
2404
  },
2091
2405
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2093,6 +2407,7 @@
2093
2407
  "original": {
2094
2408
  "$value": "{bgColor.done.muted}",
2095
2409
  "$type": "color",
2410
+ "$description": "Subtle background for upsell and promotional content",
2096
2411
  "$extensions": {
2097
2412
  "org.primer.figma": {
2098
2413
  "collection": "mode",
@@ -2101,6 +2416,10 @@
2101
2416
  "codeSyntax": {
2102
2417
  "web": "var(--bgColor-upsell-muted)"
2103
2418
  }
2419
+ },
2420
+ "org.primer.llm": {
2421
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2422
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2104
2423
  }
2105
2424
  },
2106
2425
  "key": "{bgColor.upsell.muted}"
@@ -2109,7 +2428,8 @@
2109
2428
  "attributes": {},
2110
2429
  "path": ["bgColor", "upsell", "muted"],
2111
2430
  "value": "#faf0fe",
2112
- "type": "color"
2431
+ "type": "color",
2432
+ "description": "Subtle background for upsell and promotional content"
2113
2433
  },
2114
2434
  "bgColor-white": {
2115
2435
  "key": "{bgColor.white}",
@@ -2121,6 +2441,10 @@
2121
2441
  },
2122
2442
  "org.primer.overrides": {
2123
2443
  "dark": "#010409"
2444
+ },
2445
+ "org.primer.llm": {
2446
+ "doNotUse": true,
2447
+ "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."
2124
2448
  }
2125
2449
  },
2126
2450
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2128,6 +2452,7 @@
2128
2452
  "original": {
2129
2453
  "$value": "{base.color.neutral.0}",
2130
2454
  "$type": "color",
2455
+ "$description": "Pure white background",
2131
2456
  "$extensions": {
2132
2457
  "org.primer.figma": {
2133
2458
  "collection": "mode",
@@ -2136,6 +2461,10 @@
2136
2461
  },
2137
2462
  "org.primer.overrides": {
2138
2463
  "dark": "{base.color.neutral.13}"
2464
+ },
2465
+ "org.primer.llm": {
2466
+ "doNotUse": true,
2467
+ "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."
2139
2468
  }
2140
2469
  },
2141
2470
  "key": "{bgColor.white}"
@@ -2144,7 +2473,8 @@
2144
2473
  "attributes": {},
2145
2474
  "path": ["bgColor", "white"],
2146
2475
  "value": "#ffffff",
2147
- "type": "color"
2476
+ "type": "color",
2477
+ "description": "Pure white background"
2148
2478
  },
2149
2479
  "border-accent-emphasis": {
2150
2480
  "key": "{border.accent.emphasis}",
@@ -2656,6 +2986,10 @@
2656
2986
  },
2657
2987
  "org.primer.overrides": {
2658
2988
  "dark-dimmed-high-contrast": "#67b3fd"
2989
+ },
2990
+ "org.primer.llm": {
2991
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
2992
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2659
2993
  }
2660
2994
  },
2661
2995
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2663,6 +2997,7 @@
2663
2997
  "original": {
2664
2998
  "$value": "{base.color.blue.5}",
2665
2999
  "$type": "color",
3000
+ "$description": "Strong accent border for selected or focused elements",
2666
3001
  "$extensions": {
2667
3002
  "org.primer.figma": {
2668
3003
  "collection": "mode",
@@ -2674,6 +3009,10 @@
2674
3009
  },
2675
3010
  "org.primer.overrides": {
2676
3011
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3012
+ },
3013
+ "org.primer.llm": {
3014
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3015
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2677
3016
  }
2678
3017
  },
2679
3018
  "key": "{borderColor.accent.emphasis}"
@@ -2682,7 +3021,8 @@
2682
3021
  "attributes": {},
2683
3022
  "path": ["borderColor", "accent", "emphasis"],
2684
3023
  "value": "#0349b4",
2685
- "type": "color"
3024
+ "type": "color",
3025
+ "description": "Strong accent border for selected or focused elements"
2686
3026
  },
2687
3027
  "borderColor-accent-muted": {
2688
3028
  "key": "{borderColor.accent.muted}",
@@ -2746,6 +3086,10 @@
2746
3086
  "isSource": true,
2747
3087
  "$type": "color"
2748
3088
  }
3089
+ },
3090
+ "org.primer.llm": {
3091
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3092
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2749
3093
  }
2750
3094
  },
2751
3095
  "alpha": 1,
@@ -2754,6 +3098,7 @@
2754
3098
  "original": {
2755
3099
  "$value": "{base.color.blue.3}",
2756
3100
  "$type": "color",
3101
+ "$description": "Subtle accent border for selected or focused elements",
2757
3102
  "$extensions": {
2758
3103
  "org.primer.figma": {
2759
3104
  "collection": "mode",
@@ -2814,6 +3159,10 @@
2814
3159
  "isSource": true,
2815
3160
  "$type": "color"
2816
3161
  }
3162
+ },
3163
+ "org.primer.llm": {
3164
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3165
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2817
3166
  }
2818
3167
  },
2819
3168
  "alpha": 1,
@@ -2823,7 +3172,8 @@
2823
3172
  "attributes": {},
2824
3173
  "path": ["borderColor", "accent", "muted"],
2825
3174
  "value": "#368cf9",
2826
- "type": "color"
3175
+ "type": "color",
3176
+ "description": "Subtle accent border for selected or focused elements"
2827
3177
  },
2828
3178
  "borderColor-attention-emphasis": {
2829
3179
  "key": "{borderColor.attention.emphasis}",
@@ -2838,6 +3188,10 @@
2838
3188
  },
2839
3189
  "org.primer.overrides": {
2840
3190
  "dark-dimmed-high-contrast": "#d5a824"
3191
+ },
3192
+ "org.primer.llm": {
3193
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3194
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2841
3195
  }
2842
3196
  },
2843
3197
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2845,6 +3199,7 @@
2845
3199
  "original": {
2846
3200
  "$value": "{base.color.yellow.5}",
2847
3201
  "$type": "color",
3202
+ "$description": "Strong attention border for prominent warnings",
2848
3203
  "$extensions": {
2849
3204
  "org.primer.figma": {
2850
3205
  "collection": "mode",
@@ -2856,6 +3211,10 @@
2856
3211
  },
2857
3212
  "org.primer.overrides": {
2858
3213
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3214
+ },
3215
+ "org.primer.llm": {
3216
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3217
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2859
3218
  }
2860
3219
  },
2861
3220
  "key": "{borderColor.attention.emphasis}"
@@ -2864,7 +3223,8 @@
2864
3223
  "attributes": {},
2865
3224
  "path": ["borderColor", "attention", "emphasis"],
2866
3225
  "value": "#744500",
2867
- "type": "color"
3226
+ "type": "color",
3227
+ "description": "Strong attention border for prominent warnings"
2868
3228
  },
2869
3229
  "borderColor-attention-muted": {
2870
3230
  "key": "{borderColor.attention.muted}",
@@ -2928,6 +3288,10 @@
2928
3288
  "isSource": true,
2929
3289
  "$type": "color"
2930
3290
  }
3291
+ },
3292
+ "org.primer.llm": {
3293
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3294
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2931
3295
  }
2932
3296
  },
2933
3297
  "alpha": 1,
@@ -2936,6 +3300,7 @@
2936
3300
  "original": {
2937
3301
  "$value": "{base.color.yellow.3}",
2938
3302
  "$type": "color",
3303
+ "$description": "Subtle attention border for warnings and caution states",
2939
3304
  "$extensions": {
2940
3305
  "org.primer.figma": {
2941
3306
  "collection": "mode",
@@ -2996,6 +3361,10 @@
2996
3361
  "isSource": true,
2997
3362
  "$type": "color"
2998
3363
  }
3364
+ },
3365
+ "org.primer.llm": {
3366
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3367
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2999
3368
  }
3000
3369
  },
3001
3370
  "alpha": 1,
@@ -3005,7 +3374,8 @@
3005
3374
  "attributes": {},
3006
3375
  "path": ["borderColor", "attention", "muted"],
3007
3376
  "value": "#b58407",
3008
- "type": "color"
3377
+ "type": "color",
3378
+ "description": "Subtle attention border for warnings and caution states"
3009
3379
  },
3010
3380
  "borderColor-closed-emphasis": {
3011
3381
  "key": "{borderColor.closed.emphasis}",
@@ -3027,6 +3397,10 @@
3027
3397
  "dark-tritanopia-high-contrast": "#454c54",
3028
3398
  "light-tritanopia": "#454c54",
3029
3399
  "light-tritanopia-high-contrast": "#454c54"
3400
+ },
3401
+ "org.primer.llm": {
3402
+ "usage": ["closed-emphasis", "closed-status"],
3403
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3030
3404
  }
3031
3405
  },
3032
3406
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3034,6 +3408,7 @@
3034
3408
  "original": {
3035
3409
  "$value": "{borderColor.danger.emphasis}",
3036
3410
  "$type": "color",
3411
+ "$description": "Strong border for closed state badges",
3037
3412
  "$extensions": {
3038
3413
  "org.primer.figma": {
3039
3414
  "collection": "mode",
@@ -3052,6 +3427,10 @@
3052
3427
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3053
3428
  "light-tritanopia": "{borderColor.emphasis}",
3054
3429
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3430
+ },
3431
+ "org.primer.llm": {
3432
+ "usage": ["closed-emphasis", "closed-status"],
3433
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3055
3434
  }
3056
3435
  },
3057
3436
  "key": "{borderColor.closed.emphasis}"
@@ -3060,7 +3439,8 @@
3060
3439
  "attributes": {},
3061
3440
  "path": ["borderColor", "closed", "emphasis"],
3062
3441
  "value": "#a0111f",
3063
- "type": "color"
3442
+ "type": "color",
3443
+ "description": "Strong border for closed state badges"
3064
3444
  },
3065
3445
  "borderColor-closed-muted": {
3066
3446
  "key": "{borderColor.closed.muted}",
@@ -3130,6 +3510,10 @@
3130
3510
  "isSource": true,
3131
3511
  "$type": "color"
3132
3512
  }
3513
+ },
3514
+ "org.primer.llm": {
3515
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3516
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3133
3517
  }
3134
3518
  },
3135
3519
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3137,6 +3521,7 @@
3137
3521
  "original": {
3138
3522
  "$value": "{borderColor.danger.muted}",
3139
3523
  "$type": "color",
3524
+ "$description": "Subtle border for closed state indicators",
3140
3525
  "$extensions": {
3141
3526
  "org.primer.figma": {
3142
3527
  "collection": "mode",
@@ -3203,6 +3588,10 @@
3203
3588
  "isSource": true,
3204
3589
  "$type": "color"
3205
3590
  }
3591
+ },
3592
+ "org.primer.llm": {
3593
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3594
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3206
3595
  }
3207
3596
  },
3208
3597
  "key": "{borderColor.closed.muted}"
@@ -3211,7 +3600,8 @@
3211
3600
  "attributes": {},
3212
3601
  "path": ["borderColor", "closed", "muted"],
3213
3602
  "value": "#ee5a5d",
3214
- "type": "color"
3603
+ "type": "color",
3604
+ "description": "Subtle border for closed state indicators"
3215
3605
  },
3216
3606
  "borderColor-danger-emphasis": {
3217
3607
  "key": "{borderColor.danger.emphasis}",
@@ -3250,6 +3640,10 @@
3250
3640
  "$type": "color"
3251
3641
  },
3252
3642
  "dark-dimmed-high-contrast": "#ff8e8a"
3643
+ },
3644
+ "org.primer.llm": {
3645
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3646
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3253
3647
  }
3254
3648
  },
3255
3649
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3257,6 +3651,7 @@
3257
3651
  "original": {
3258
3652
  "$value": "{base.color.red.5}",
3259
3653
  "$type": "color",
3654
+ "$description": "Strong danger border for destructive actions and errors",
3260
3655
  "$extensions": {
3261
3656
  "org.primer.figma": {
3262
3657
  "collection": "mode",
@@ -3292,6 +3687,10 @@
3292
3687
  "$type": "color"
3293
3688
  },
3294
3689
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3690
+ },
3691
+ "org.primer.llm": {
3692
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3693
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3295
3694
  }
3296
3695
  },
3297
3696
  "key": "{borderColor.danger.emphasis}"
@@ -3300,7 +3699,8 @@
3300
3699
  "attributes": {},
3301
3700
  "path": ["borderColor", "danger", "emphasis"],
3302
3701
  "value": "#a0111f",
3303
- "type": "color"
3702
+ "type": "color",
3703
+ "description": "Strong danger border for destructive actions and errors"
3304
3704
  },
3305
3705
  "borderColor-danger-muted": {
3306
3706
  "key": "{borderColor.danger.muted}",
@@ -3377,6 +3777,10 @@
3377
3777
  "isSource": true,
3378
3778
  "$type": "color"
3379
3779
  }
3780
+ },
3781
+ "org.primer.llm": {
3782
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3783
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3380
3784
  }
3381
3785
  },
3382
3786
  "alpha": 1,
@@ -3385,6 +3789,7 @@
3385
3789
  "original": {
3386
3790
  "$value": "{base.color.red.3}",
3387
3791
  "$type": "color",
3792
+ "$description": "Subtle danger border for errors and destructive contexts",
3388
3793
  "$extensions": {
3389
3794
  "org.primer.figma": {
3390
3795
  "collection": "mode",
@@ -3458,6 +3863,10 @@
3458
3863
  "isSource": true,
3459
3864
  "$type": "color"
3460
3865
  }
3866
+ },
3867
+ "org.primer.llm": {
3868
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3869
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3461
3870
  }
3462
3871
  },
3463
3872
  "alpha": 1,
@@ -3467,7 +3876,8 @@
3467
3876
  "attributes": {},
3468
3877
  "path": ["borderColor", "danger", "muted"],
3469
3878
  "value": "#ee5a5d",
3470
- "type": "color"
3879
+ "type": "color",
3880
+ "description": "Subtle danger border for errors and destructive contexts"
3471
3881
  },
3472
3882
  "borderColor-default": {
3473
3883
  "key": "{borderColor.default}",
@@ -3490,6 +3900,10 @@
3490
3900
  "codeSyntax": {
3491
3901
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3492
3902
  }
3903
+ },
3904
+ "org.primer.llm": {
3905
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3906
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3493
3907
  }
3494
3908
  },
3495
3909
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3497,6 +3911,7 @@
3497
3911
  "original": {
3498
3912
  "$value": "{base.color.neutral.10}",
3499
3913
  "$type": "color",
3914
+ "$description": "Default border color for most UI elements",
3500
3915
  "$extensions": {
3501
3916
  "org.primer.overrides": {
3502
3917
  "dark": "{base.color.neutral.7}",
@@ -3516,6 +3931,10 @@
3516
3931
  "codeSyntax": {
3517
3932
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3518
3933
  }
3934
+ },
3935
+ "org.primer.llm": {
3936
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3937
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3519
3938
  }
3520
3939
  },
3521
3940
  "key": "{borderColor.default}"
@@ -3524,7 +3943,8 @@
3524
3943
  "attributes": {},
3525
3944
  "path": ["borderColor", "default"],
3526
3945
  "value": "#454c54",
3527
- "type": "color"
3946
+ "type": "color",
3947
+ "description": "Default border color for most UI elements"
3528
3948
  },
3529
3949
  "borderColor-disabled": {
3530
3950
  "key": "{borderColor.disabled}",
@@ -3570,6 +3990,10 @@
3570
3990
  "isSource": true,
3571
3991
  "$type": "color"
3572
3992
  }
3993
+ },
3994
+ "org.primer.llm": {
3995
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
3996
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3573
3997
  }
3574
3998
  },
3575
3999
  "alpha": 0.12,
@@ -3578,6 +4002,7 @@
3578
4002
  "original": {
3579
4003
  "$value": "{base.color.neutral.9}",
3580
4004
  "$type": "color",
4005
+ "$description": "Border color for disabled interactive elements",
3581
4006
  "$extensions": {
3582
4007
  "org.primer.figma": {
3583
4008
  "collection": "mode",
@@ -3620,6 +4045,10 @@
3620
4045
  "isSource": true,
3621
4046
  "$type": "color"
3622
4047
  }
4048
+ },
4049
+ "org.primer.llm": {
4050
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4051
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3623
4052
  }
3624
4053
  },
3625
4054
  "alpha": 0.12,
@@ -3629,7 +4058,8 @@
3629
4058
  "attributes": {},
3630
4059
  "path": ["borderColor", "disabled"],
3631
4060
  "value": "#59636e1f",
3632
- "type": "color"
4061
+ "type": "color",
4062
+ "description": "Border color for disabled interactive elements"
3633
4063
  },
3634
4064
  "borderColor-done-emphasis": {
3635
4065
  "key": "{borderColor.done.emphasis}",
@@ -3644,6 +4074,10 @@
3644
4074
  },
3645
4075
  "org.primer.overrides": {
3646
4076
  "dark-dimmed-high-contrast": "#c49bff"
4077
+ },
4078
+ "org.primer.llm": {
4079
+ "usage": ["done-emphasis", "merged-status"],
4080
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3647
4081
  }
3648
4082
  },
3649
4083
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3651,6 +4085,7 @@
3651
4085
  "original": {
3652
4086
  "$value": "{base.color.purple.5}",
3653
4087
  "$type": "color",
4088
+ "$description": "Strong border for completed/done state badges",
3654
4089
  "$extensions": {
3655
4090
  "org.primer.figma": {
3656
4091
  "collection": "mode",
@@ -3662,6 +4097,10 @@
3662
4097
  },
3663
4098
  "org.primer.overrides": {
3664
4099
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4100
+ },
4101
+ "org.primer.llm": {
4102
+ "usage": ["done-emphasis", "merged-status"],
4103
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3665
4104
  }
3666
4105
  },
3667
4106
  "key": "{borderColor.done.emphasis}"
@@ -3670,7 +4109,8 @@
3670
4109
  "attributes": {},
3671
4110
  "path": ["borderColor", "done", "emphasis"],
3672
4111
  "value": "#622cbc",
3673
- "type": "color"
4112
+ "type": "color",
4113
+ "description": "Strong border for completed/done state badges"
3674
4114
  },
3675
4115
  "borderColor-done-muted": {
3676
4116
  "key": "{borderColor.done.muted}",
@@ -3734,6 +4174,10 @@
3734
4174
  "isSource": true,
3735
4175
  "$type": "color"
3736
4176
  }
4177
+ },
4178
+ "org.primer.llm": {
4179
+ "usage": ["done-muted", "merged", "completed"],
4180
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3737
4181
  }
3738
4182
  },
3739
4183
  "alpha": 1,
@@ -3742,6 +4186,7 @@
3742
4186
  "original": {
3743
4187
  "$value": "{base.color.purple.3}",
3744
4188
  "$type": "color",
4189
+ "$description": "Subtle border for completed/done state indicators",
3745
4190
  "$extensions": {
3746
4191
  "org.primer.figma": {
3747
4192
  "collection": "mode",
@@ -3802,6 +4247,10 @@
3802
4247
  "isSource": true,
3803
4248
  "$type": "color"
3804
4249
  }
4250
+ },
4251
+ "org.primer.llm": {
4252
+ "usage": ["done-muted", "merged", "completed"],
4253
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3805
4254
  }
3806
4255
  },
3807
4256
  "alpha": 1,
@@ -3811,7 +4260,8 @@
3811
4260
  "attributes": {},
3812
4261
  "path": ["borderColor", "done", "muted"],
3813
4262
  "value": "#a371f7",
3814
- "type": "color"
4263
+ "type": "color",
4264
+ "description": "Subtle border for completed/done state indicators"
3815
4265
  },
3816
4266
  "borderColor-draft-emphasis": {
3817
4267
  "key": "{borderColor.draft.emphasis}",
@@ -3823,6 +4273,10 @@
3823
4273
  "codeSyntax": {
3824
4274
  "web": "var(--borderColor-draft-emphasis)"
3825
4275
  }
4276
+ },
4277
+ "org.primer.llm": {
4278
+ "usage": ["draft-emphasis", "draft-status"],
4279
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3826
4280
  }
3827
4281
  },
3828
4282
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3830,6 +4284,7 @@
3830
4284
  "original": {
3831
4285
  "$value": "{borderColor.neutral.emphasis}",
3832
4286
  "$type": "color",
4287
+ "$description": "Strong border for draft state badges",
3833
4288
  "$extensions": {
3834
4289
  "org.primer.figma": {
3835
4290
  "collection": "mode",
@@ -3838,6 +4293,10 @@
3838
4293
  "codeSyntax": {
3839
4294
  "web": "var(--borderColor-draft-emphasis)"
3840
4295
  }
4296
+ },
4297
+ "org.primer.llm": {
4298
+ "usage": ["draft-emphasis", "draft-status"],
4299
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3841
4300
  }
3842
4301
  },
3843
4302
  "key": "{borderColor.draft.emphasis}"
@@ -3846,7 +4305,8 @@
3846
4305
  "attributes": {},
3847
4306
  "path": ["borderColor", "draft", "emphasis"],
3848
4307
  "value": "#59636e",
3849
- "type": "color"
4308
+ "type": "color",
4309
+ "description": "Strong border for draft state badges"
3850
4310
  },
3851
4311
  "borderColor-draft-muted": {
3852
4312
  "key": "{borderColor.draft.muted}",
@@ -3916,6 +4376,10 @@
3916
4376
  "isSource": true,
3917
4377
  "$type": "color"
3918
4378
  }
4379
+ },
4380
+ "org.primer.llm": {
4381
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4382
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3919
4383
  }
3920
4384
  },
3921
4385
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3923,6 +4387,7 @@
3923
4387
  "original": {
3924
4388
  "$value": "{borderColor.neutral.muted}",
3925
4389
  "$type": "color",
4390
+ "$description": "Subtle border for draft state indicators",
3926
4391
  "$extensions": {
3927
4392
  "org.primer.figma": {
3928
4393
  "collection": "mode",
@@ -3989,6 +4454,10 @@
3989
4454
  "isSource": true,
3990
4455
  "$type": "color"
3991
4456
  }
4457
+ },
4458
+ "org.primer.llm": {
4459
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4460
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3992
4461
  }
3993
4462
  },
3994
4463
  "key": "{borderColor.draft.muted}"
@@ -3997,7 +4466,8 @@
3997
4466
  "attributes": {},
3998
4467
  "path": ["borderColor", "draft", "muted"],
3999
4468
  "value": "#454c54",
4000
- "type": "color"
4469
+ "type": "color",
4470
+ "description": "Subtle border for draft state indicators"
4001
4471
  },
4002
4472
  "borderColor-emphasis": {
4003
4473
  "key": "{borderColor.emphasis}",
@@ -4015,6 +4485,10 @@
4015
4485
  "dark-dimmed-high-contrast": "#454c54",
4016
4486
  "dark-tritanopia-high-contrast": "#454c54",
4017
4487
  "dark-protanopia-deuteranopia-high-contrast": "#454c54"
4488
+ },
4489
+ "org.primer.llm": {
4490
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4491
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4018
4492
  }
4019
4493
  },
4020
4494
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4022,6 +4496,7 @@
4022
4496
  "original": {
4023
4497
  "$value": "{borderColor.default}",
4024
4498
  "$type": "color",
4499
+ "$description": "Strong border for emphasis and visual weight",
4025
4500
  "$extensions": {
4026
4501
  "org.primer.figma": {
4027
4502
  "collection": "mode",
@@ -4036,6 +4511,10 @@
4036
4511
  "dark-dimmed-high-contrast": "{borderColor.default}",
4037
4512
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4038
4513
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
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."
4039
4518
  }
4040
4519
  },
4041
4520
  "key": "{borderColor.emphasis}"
@@ -4044,7 +4523,8 @@
4044
4523
  "attributes": {},
4045
4524
  "path": ["borderColor", "emphasis"],
4046
4525
  "value": "#454c54",
4047
- "type": "color"
4526
+ "type": "color",
4527
+ "description": "Strong border for emphasis and visual weight"
4048
4528
  },
4049
4529
  "borderColor-muted": {
4050
4530
  "key": "{borderColor.muted}",
@@ -4114,6 +4594,10 @@
4114
4594
  "isSource": true,
4115
4595
  "$type": "color"
4116
4596
  }
4597
+ },
4598
+ "org.primer.llm": {
4599
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4600
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4117
4601
  }
4118
4602
  },
4119
4603
  "alpha": 1,
@@ -4122,6 +4606,7 @@
4122
4606
  "original": {
4123
4607
  "$value": "{borderColor.default}",
4124
4608
  "$type": "color",
4609
+ "$description": "Subtle border for secondary elements and light separators",
4125
4610
  "$extensions": {
4126
4611
  "org.primer.figma": {
4127
4612
  "collection": "mode",
@@ -4188,6 +4673,10 @@
4188
4673
  "isSource": true,
4189
4674
  "$type": "color"
4190
4675
  }
4676
+ },
4677
+ "org.primer.llm": {
4678
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4679
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4191
4680
  }
4192
4681
  },
4193
4682
  "alpha": 1,
@@ -4197,7 +4686,8 @@
4197
4686
  "attributes": {},
4198
4687
  "path": ["borderColor", "muted"],
4199
4688
  "value": "#454c54",
4200
- "type": "color"
4689
+ "type": "color",
4690
+ "description": "Subtle border for secondary elements and light separators"
4201
4691
  },
4202
4692
  "borderColor-neutral-emphasis": {
4203
4693
  "key": "{borderColor.neutral.emphasis}",
@@ -4209,6 +4699,10 @@
4209
4699
  },
4210
4700
  "org.primer.overrides": {
4211
4701
  "dark": "#454c54"
4702
+ },
4703
+ "org.primer.llm": {
4704
+ "usage": ["neutral-emphasis", "neutral-strong"],
4705
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4212
4706
  }
4213
4707
  },
4214
4708
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4216,6 +4710,7 @@
4216
4710
  "original": {
4217
4711
  "$value": "{base.color.neutral.9}",
4218
4712
  "$type": "color",
4713
+ "$description": "Strong neutral semantic border",
4219
4714
  "$extensions": {
4220
4715
  "org.primer.figma": {
4221
4716
  "collection": "mode",
@@ -4224,6 +4719,10 @@
4224
4719
  },
4225
4720
  "org.primer.overrides": {
4226
4721
  "dark": "{borderColor.emphasis}"
4722
+ },
4723
+ "org.primer.llm": {
4724
+ "usage": ["neutral-emphasis", "neutral-strong"],
4725
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4227
4726
  }
4228
4727
  },
4229
4728
  "key": "{borderColor.neutral.emphasis}"
@@ -4232,7 +4731,8 @@
4232
4731
  "attributes": {},
4233
4732
  "path": ["borderColor", "neutral", "emphasis"],
4234
4733
  "value": "#59636e",
4235
- "type": "color"
4734
+ "type": "color",
4735
+ "description": "Strong neutral semantic border"
4236
4736
  },
4237
4737
  "borderColor-neutral-muted": {
4238
4738
  "key": "{borderColor.neutral.muted}",
@@ -4257,6 +4757,10 @@
4257
4757
  "isSource": true,
4258
4758
  "$type": "color"
4259
4759
  }
4760
+ },
4761
+ "org.primer.llm": {
4762
+ "usage": ["neutral-muted", "neutral-secondary"],
4763
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4260
4764
  }
4261
4765
  },
4262
4766
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4264,6 +4768,7 @@
4264
4768
  "original": {
4265
4769
  "$value": "{borderColor.muted}",
4266
4770
  "$type": "color",
4771
+ "$description": "Subtle neutral semantic border",
4267
4772
  "$extensions": {
4268
4773
  "org.primer.figma": {
4269
4774
  "collection": "mode",
@@ -4285,6 +4790,10 @@
4285
4790
  "isSource": true,
4286
4791
  "$type": "color"
4287
4792
  }
4793
+ },
4794
+ "org.primer.llm": {
4795
+ "usage": ["neutral-muted", "neutral-secondary"],
4796
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4288
4797
  }
4289
4798
  },
4290
4799
  "key": "{borderColor.neutral.muted}"
@@ -4293,7 +4802,8 @@
4293
4802
  "attributes": {},
4294
4803
  "path": ["borderColor", "neutral", "muted"],
4295
4804
  "value": "#454c54",
4296
- "type": "color"
4805
+ "type": "color",
4806
+ "description": "Subtle neutral semantic border"
4297
4807
  },
4298
4808
  "borderColor-open-emphasis": {
4299
4809
  "key": "{borderColor.open.emphasis}",
@@ -4315,6 +4825,10 @@
4315
4825
  "dark-protanopia-deuteranopia-high-contrast": "#873800",
4316
4826
  "light-protanopia-deuteranopia": "#873800",
4317
4827
  "light-protanopia-deuteranopia-high-contrast": "#873800"
4828
+ },
4829
+ "org.primer.llm": {
4830
+ "usage": ["open-emphasis", "open-status"],
4831
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4318
4832
  }
4319
4833
  },
4320
4834
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4322,6 +4836,7 @@
4322
4836
  "original": {
4323
4837
  "$value": "{borderColor.success.emphasis}",
4324
4838
  "$type": "color",
4839
+ "$description": "Strong border for open state badges",
4325
4840
  "$extensions": {
4326
4841
  "org.primer.figma": {
4327
4842
  "collection": "mode",
@@ -4340,6 +4855,10 @@
4340
4855
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4341
4856
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4342
4857
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4858
+ },
4859
+ "org.primer.llm": {
4860
+ "usage": ["open-emphasis", "open-status"],
4861
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4343
4862
  }
4344
4863
  },
4345
4864
  "key": "{borderColor.open.emphasis}"
@@ -4348,7 +4867,8 @@
4348
4867
  "attributes": {},
4349
4868
  "path": ["borderColor", "open", "emphasis"],
4350
4869
  "value": "#055d20",
4351
- "type": "color"
4870
+ "type": "color",
4871
+ "description": "Strong border for open state badges"
4352
4872
  },
4353
4873
  "borderColor-open-muted": {
4354
4874
  "key": "{borderColor.open.muted}",
@@ -4418,6 +4938,10 @@
4418
4938
  "isSource": true,
4419
4939
  "$type": "color"
4420
4940
  }
4941
+ },
4942
+ "org.primer.llm": {
4943
+ "usage": ["open-muted", "open-issue", "open-pr"],
4944
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4421
4945
  }
4422
4946
  },
4423
4947
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4425,6 +4949,7 @@
4425
4949
  "original": {
4426
4950
  "$value": "{borderColor.success.muted}",
4427
4951
  "$type": "color",
4952
+ "$description": "Subtle border for open state indicators",
4428
4953
  "$extensions": {
4429
4954
  "org.primer.figma": {
4430
4955
  "collection": "mode",
@@ -4491,6 +5016,10 @@
4491
5016
  "isSource": true,
4492
5017
  "$type": "color"
4493
5018
  }
5019
+ },
5020
+ "org.primer.llm": {
5021
+ "usage": ["open-muted", "open-issue", "open-pr"],
5022
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4494
5023
  }
4495
5024
  },
4496
5025
  "key": "{borderColor.open.muted}"
@@ -4499,7 +5028,8 @@
4499
5028
  "attributes": {},
4500
5029
  "path": ["borderColor", "open", "muted"],
4501
5030
  "value": "#26a148",
4502
- "type": "color"
5031
+ "type": "color",
5032
+ "description": "Subtle border for open state indicators"
4503
5033
  },
4504
5034
  "borderColor-severe-emphasis": {
4505
5035
  "key": "{borderColor.severe.emphasis}",
@@ -4517,6 +5047,10 @@
4517
5047
  "light-tritanopia": "#a0111f",
4518
5048
  "light-tritanopia-high-contrast": "#a0111f",
4519
5049
  "dark-dimmed-high-contrast": "#f99636"
5050
+ },
5051
+ "org.primer.llm": {
5052
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5053
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4520
5054
  }
4521
5055
  },
4522
5056
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4524,6 +5058,7 @@
4524
5058
  "original": {
4525
5059
  "$value": "{base.color.orange.5}",
4526
5060
  "$type": "color",
5061
+ "$description": "Strong severe border for prominent high-priority warnings",
4527
5062
  "$extensions": {
4528
5063
  "org.primer.figma": {
4529
5064
  "collection": "mode",
@@ -4538,6 +5073,10 @@
4538
5073
  "light-tritanopia": "{base.color.red.5}",
4539
5074
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4540
5075
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5076
+ },
5077
+ "org.primer.llm": {
5078
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5079
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4541
5080
  }
4542
5081
  },
4543
5082
  "key": "{borderColor.severe.emphasis}"
@@ -4546,7 +5085,8 @@
4546
5085
  "attributes": {},
4547
5086
  "path": ["borderColor", "severe", "emphasis"],
4548
5087
  "value": "#873800",
4549
- "type": "color"
5088
+ "type": "color",
5089
+ "description": "Strong severe border for prominent high-priority warnings"
4550
5090
  },
4551
5091
  "borderColor-severe-muted": {
4552
5092
  "key": "{borderColor.severe.muted}",
@@ -4605,6 +5145,10 @@
4605
5145
  "isSource": true,
4606
5146
  "$type": "color"
4607
5147
  }
5148
+ },
5149
+ "org.primer.llm": {
5150
+ "usage": ["severe-muted", "urgent-muted"],
5151
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4608
5152
  }
4609
5153
  },
4610
5154
  "alpha": 1,
@@ -4613,6 +5157,7 @@
4613
5157
  "original": {
4614
5158
  "$value": "{base.color.orange.3}",
4615
5159
  "$type": "color",
5160
+ "$description": "Subtle severe border for high-priority warnings",
4616
5161
  "$extensions": {
4617
5162
  "org.primer.figma": {
4618
5163
  "collection": "mode",
@@ -4668,6 +5213,10 @@
4668
5213
  "isSource": true,
4669
5214
  "$type": "color"
4670
5215
  }
5216
+ },
5217
+ "org.primer.llm": {
5218
+ "usage": ["severe-muted", "urgent-muted"],
5219
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4671
5220
  }
4672
5221
  },
4673
5222
  "alpha": 1,
@@ -4677,7 +5226,8 @@
4677
5226
  "attributes": {},
4678
5227
  "path": ["borderColor", "severe", "muted"],
4679
5228
  "value": "#dc6d1a",
4680
- "type": "color"
5229
+ "type": "color",
5230
+ "description": "Subtle severe border for high-priority warnings"
4681
5231
  },
4682
5232
  "borderColor-sponsors-emphasis": {
4683
5233
  "key": "{borderColor.sponsors.emphasis}",
@@ -4692,6 +5242,10 @@
4692
5242
  },
4693
5243
  "org.primer.overrides": {
4694
5244
  "dark-dimmed-high-contrast": "#ed4baf"
5245
+ },
5246
+ "org.primer.llm": {
5247
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5248
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4695
5249
  }
4696
5250
  },
4697
5251
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4699,6 +5253,7 @@
4699
5253
  "original": {
4700
5254
  "$value": "{base.color.pink.5}",
4701
5255
  "$type": "color",
5256
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4702
5257
  "$extensions": {
4703
5258
  "org.primer.figma": {
4704
5259
  "collection": "mode",
@@ -4710,6 +5265,10 @@
4710
5265
  },
4711
5266
  "org.primer.overrides": {
4712
5267
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5268
+ },
5269
+ "org.primer.llm": {
5270
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5271
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4713
5272
  }
4714
5273
  },
4715
5274
  "key": "{borderColor.sponsors.emphasis}"
@@ -4718,7 +5277,8 @@
4718
5277
  "attributes": {},
4719
5278
  "path": ["borderColor", "sponsors", "emphasis"],
4720
5279
  "value": "#971368",
4721
- "type": "color"
5280
+ "type": "color",
5281
+ "description": "Strong border for prominent GitHub Sponsors elements"
4722
5282
  },
4723
5283
  "borderColor-sponsors-muted": {
4724
5284
  "key": "{borderColor.sponsors.muted}",
@@ -4782,6 +5342,10 @@
4782
5342
  "isSource": true,
4783
5343
  "$type": "color"
4784
5344
  }
5345
+ },
5346
+ "org.primer.llm": {
5347
+ "usage": ["sponsors-muted", "funding-muted"],
5348
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4785
5349
  }
4786
5350
  },
4787
5351
  "alpha": 1,
@@ -4790,6 +5354,7 @@
4790
5354
  "original": {
4791
5355
  "$value": "{base.color.pink.3}",
4792
5356
  "$type": "color",
5357
+ "$description": "Subtle border for GitHub Sponsors content",
4793
5358
  "$extensions": {
4794
5359
  "org.primer.figma": {
4795
5360
  "collection": "mode",
@@ -4850,6 +5415,10 @@
4850
5415
  "isSource": true,
4851
5416
  "$type": "color"
4852
5417
  }
5418
+ },
5419
+ "org.primer.llm": {
5420
+ "usage": ["sponsors-muted", "funding-muted"],
5421
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4853
5422
  }
4854
5423
  },
4855
5424
  "alpha": 1,
@@ -4859,7 +5428,8 @@
4859
5428
  "attributes": {},
4860
5429
  "path": ["borderColor", "sponsors", "muted"],
4861
5430
  "value": "#ed4baf",
4862
- "type": "color"
5431
+ "type": "color",
5432
+ "description": "Subtle border for GitHub Sponsors content"
4863
5433
  },
4864
5434
  "borderColor-success-emphasis": {
4865
5435
  "key": "{borderColor.success.emphasis}",
@@ -4882,6 +5452,10 @@
4882
5452
  "light-protanopia-deuteranopia": "#0349b4",
4883
5453
  "light-protanopia-deuteranopia-high-contrast": "#0349b4",
4884
5454
  "dark-dimmed-high-contrast": "#43c663"
5455
+ },
5456
+ "org.primer.llm": {
5457
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5458
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4885
5459
  }
4886
5460
  },
4887
5461
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4889,6 +5463,7 @@
4889
5463
  "original": {
4890
5464
  "$value": "{base.color.green.5}",
4891
5465
  "$type": "color",
5466
+ "$description": "Strong success border for prominent positive elements",
4892
5467
  "$extensions": {
4893
5468
  "org.primer.figma": {
4894
5469
  "collection": "mode",
@@ -4908,6 +5483,10 @@
4908
5483
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4909
5484
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4910
5485
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5486
+ },
5487
+ "org.primer.llm": {
5488
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5489
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4911
5490
  }
4912
5491
  },
4913
5492
  "key": "{borderColor.success.emphasis}"
@@ -4916,7 +5495,8 @@
4916
5495
  "attributes": {},
4917
5496
  "path": ["borderColor", "success", "emphasis"],
4918
5497
  "value": "#055d20",
4919
- "type": "color"
5498
+ "type": "color",
5499
+ "description": "Strong success border for prominent positive elements"
4920
5500
  },
4921
5501
  "borderColor-success-muted": {
4922
5502
  "key": "{borderColor.success.muted}",
@@ -5007,6 +5587,10 @@
5007
5587
  "isSource": true,
5008
5588
  "$type": "color"
5009
5589
  }
5590
+ },
5591
+ "org.primer.llm": {
5592
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5593
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5010
5594
  }
5011
5595
  },
5012
5596
  "alpha": 1,
@@ -5015,6 +5599,7 @@
5015
5599
  "original": {
5016
5600
  "$value": "{base.color.green.3}",
5017
5601
  "$type": "color",
5602
+ "$description": "Subtle success border for positive feedback elements",
5018
5603
  "$extensions": {
5019
5604
  "org.primer.figma": {
5020
5605
  "collection": "mode",
@@ -5102,6 +5687,10 @@
5102
5687
  "isSource": true,
5103
5688
  "$type": "color"
5104
5689
  }
5690
+ },
5691
+ "org.primer.llm": {
5692
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5693
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5105
5694
  }
5106
5695
  },
5107
5696
  "alpha": 1,
@@ -5111,7 +5700,8 @@
5111
5700
  "attributes": {},
5112
5701
  "path": ["borderColor", "success", "muted"],
5113
5702
  "value": "#26a148",
5114
- "type": "color"
5703
+ "type": "color",
5704
+ "description": "Subtle success border for positive feedback elements"
5115
5705
  },
5116
5706
  "borderColor-translucent": {
5117
5707
  "key": "{borderColor.translucent}",
@@ -5171,6 +5761,10 @@
5171
5761
  "isSource": true,
5172
5762
  "$type": "color"
5173
5763
  }
5764
+ },
5765
+ "org.primer.llm": {
5766
+ "usage": ["overlay-border", "translucent-border"],
5767
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5174
5768
  }
5175
5769
  },
5176
5770
  "alpha": 1,
@@ -5179,6 +5773,7 @@
5179
5773
  "original": {
5180
5774
  "$value": "{base.color.neutral.9}",
5181
5775
  "$type": "color",
5776
+ "$description": "Semi-transparent border for overlays and layered elements",
5182
5777
  "$extensions": {
5183
5778
  "org.primer.figma": {
5184
5779
  "collection": "mode",
@@ -5235,6 +5830,10 @@
5235
5830
  "isSource": true,
5236
5831
  "$type": "color"
5237
5832
  }
5833
+ },
5834
+ "org.primer.llm": {
5835
+ "usage": ["overlay-border", "translucent-border"],
5836
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5238
5837
  }
5239
5838
  },
5240
5839
  "alpha": 1,
@@ -5244,7 +5843,8 @@
5244
5843
  "attributes": {},
5245
5844
  "path": ["borderColor", "translucent"],
5246
5845
  "value": "#59636e",
5247
- "type": "color"
5846
+ "type": "color",
5847
+ "description": "Semi-transparent border for overlays and layered elements"
5248
5848
  },
5249
5849
  "borderColor-transparent": {
5250
5850
  "key": "{borderColor.transparent}",
@@ -5260,6 +5860,7 @@
5260
5860
  "original": {
5261
5861
  "$value": "{base.color.transparent}",
5262
5862
  "$type": "color",
5863
+ "$description": "Fully transparent border",
5263
5864
  "$extensions": {
5264
5865
  "org.primer.figma": {
5265
5866
  "collection": "mode",
@@ -5273,7 +5874,8 @@
5273
5874
  "attributes": {},
5274
5875
  "path": ["borderColor", "transparent"],
5275
5876
  "value": "#ffffff00",
5276
- "type": "color"
5877
+ "type": "color",
5878
+ "description": "Fully transparent border"
5277
5879
  },
5278
5880
  "borderColor-upsell-emphasis": {
5279
5881
  "key": "{borderColor.upsell.emphasis}",
@@ -5285,6 +5887,10 @@
5285
5887
  "codeSyntax": {
5286
5888
  "web": "var(--borderColor-upsell-emphasis)"
5287
5889
  }
5890
+ },
5891
+ "org.primer.llm": {
5892
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5893
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5288
5894
  }
5289
5895
  },
5290
5896
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5292,6 +5898,7 @@
5292
5898
  "original": {
5293
5899
  "$value": "{borderColor.done.emphasis}",
5294
5900
  "$type": "color",
5901
+ "$description": "Strong border for prominent upsell elements",
5295
5902
  "$extensions": {
5296
5903
  "org.primer.figma": {
5297
5904
  "collection": "mode",
@@ -5300,6 +5907,10 @@
5300
5907
  "codeSyntax": {
5301
5908
  "web": "var(--borderColor-upsell-emphasis)"
5302
5909
  }
5910
+ },
5911
+ "org.primer.llm": {
5912
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5913
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5303
5914
  }
5304
5915
  },
5305
5916
  "key": "{borderColor.upsell.emphasis}"
@@ -5308,7 +5919,8 @@
5308
5919
  "attributes": {},
5309
5920
  "path": ["borderColor", "upsell", "emphasis"],
5310
5921
  "value": "#622cbc",
5311
- "type": "color"
5922
+ "type": "color",
5923
+ "description": "Strong border for prominent upsell elements"
5312
5924
  },
5313
5925
  "borderColor-upsell-muted": {
5314
5926
  "key": "{borderColor.upsell.muted}",
@@ -5320,6 +5932,10 @@
5320
5932
  "codeSyntax": {
5321
5933
  "web": "var(--borderColor-upsell-muted)"
5322
5934
  }
5935
+ },
5936
+ "org.primer.llm": {
5937
+ "usage": ["upsell-muted", "premium-muted"],
5938
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5323
5939
  }
5324
5940
  },
5325
5941
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5327,6 +5943,7 @@
5327
5943
  "original": {
5328
5944
  "$value": "{borderColor.done.muted}",
5329
5945
  "$type": "color",
5946
+ "$description": "Subtle border for upsell and promotional content",
5330
5947
  "$extensions": {
5331
5948
  "org.primer.figma": {
5332
5949
  "collection": "mode",
@@ -5335,6 +5952,10 @@
5335
5952
  "codeSyntax": {
5336
5953
  "web": "var(--borderColor-upsell-muted)"
5337
5954
  }
5955
+ },
5956
+ "org.primer.llm": {
5957
+ "usage": ["upsell-muted", "premium-muted"],
5958
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5338
5959
  }
5339
5960
  },
5340
5961
  "key": "{borderColor.upsell.muted}"
@@ -5343,7 +5964,8 @@
5343
5964
  "attributes": {},
5344
5965
  "path": ["borderColor", "upsell", "muted"],
5345
5966
  "value": "#a371f7",
5346
- "type": "color"
5967
+ "type": "color",
5968
+ "description": "Subtle border for upsell and promotional content"
5347
5969
  },
5348
5970
  "button-danger-bgColor-active": {
5349
5971
  "key": "{button.danger.bgColor.active}",
@@ -36492,6 +37114,10 @@
36492
37114
  "light-high-contrast": "#023b95",
36493
37115
  "light-tritanopia-high-contrast": "#023b95",
36494
37116
  "light-protanopia-deuteranopia-high-contrast": "#023b95"
37117
+ },
37118
+ "org.primer.llm": {
37119
+ "usage": ["accent-text", "info-text", "accent-icon"],
37120
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36495
37121
  }
36496
37122
  },
36497
37123
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36499,6 +37125,7 @@
36499
37125
  "original": {
36500
37126
  "$value": "{base.color.blue.6}",
36501
37127
  "$type": "color",
37128
+ "$description": "Accent text for links and interactive elements",
36502
37129
  "$extensions": {
36503
37130
  "org.primer.figma": {
36504
37131
  "collection": "mode",
@@ -36518,6 +37145,10 @@
36518
37145
  "light-high-contrast": "{base.color.blue.6}",
36519
37146
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36520
37147
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37148
+ },
37149
+ "org.primer.llm": {
37150
+ "usage": ["accent-text", "info-text", "accent-icon"],
37151
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36521
37152
  }
36522
37153
  },
36523
37154
  "key": "{fgColor.accent}"
@@ -36526,7 +37157,8 @@
36526
37157
  "attributes": {},
36527
37158
  "path": ["fgColor", "accent"],
36528
37159
  "value": "#023b95",
36529
- "type": "color"
37160
+ "type": "color",
37161
+ "description": "Accent text for links and interactive elements"
36530
37162
  },
36531
37163
  "fgColor-attention": {
36532
37164
  "key": "{fgColor.attention}",
@@ -36545,6 +37177,10 @@
36545
37177
  "light-protanopia-deuteranopia-high-contrast": "#603700",
36546
37178
  "light-tritanopia-high-contrast": "#603700",
36547
37179
  "dark-dimmed-high-contrast": "#f0ce53"
37180
+ },
37181
+ "org.primer.llm": {
37182
+ "usage": ["attention-text", "warning-text", "caution-text"],
37183
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36548
37184
  }
36549
37185
  },
36550
37186
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36552,6 +37188,7 @@
36552
37188
  "original": {
36553
37189
  "$value": "{base.color.yellow.6}",
36554
37190
  "$type": "color",
37191
+ "$description": "Attention text for warnings and caution states",
36555
37192
  "$extensions": {
36556
37193
  "org.primer.figma": {
36557
37194
  "collection": "mode",
@@ -36567,6 +37204,10 @@
36567
37204
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36568
37205
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36569
37206
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37207
+ },
37208
+ "org.primer.llm": {
37209
+ "usage": ["attention-text", "warning-text", "caution-text"],
37210
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36570
37211
  }
36571
37212
  },
36572
37213
  "key": "{fgColor.attention}"
@@ -36575,7 +37216,8 @@
36575
37216
  "attributes": {},
36576
37217
  "path": ["fgColor", "attention"],
36577
37218
  "value": "#603700",
36578
- "type": "color"
37219
+ "type": "color",
37220
+ "description": "Attention text for warnings and caution states"
36579
37221
  },
36580
37222
  "fgColor-black": {
36581
37223
  "key": "{fgColor.black}",
@@ -36587,6 +37229,10 @@
36587
37229
  },
36588
37230
  "org.primer.overrides": {
36589
37231
  "dark": "#ffffff"
37232
+ },
37233
+ "org.primer.llm": {
37234
+ "doNotUse": true,
37235
+ "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."
36590
37236
  }
36591
37237
  },
36592
37238
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36594,6 +37240,7 @@
36594
37240
  "original": {
36595
37241
  "$value": "{base.color.neutral.13}",
36596
37242
  "$type": "color",
37243
+ "$description": "Pure black text",
36597
37244
  "$extensions": {
36598
37245
  "org.primer.figma": {
36599
37246
  "collection": "mode",
@@ -36602,6 +37249,10 @@
36602
37249
  },
36603
37250
  "org.primer.overrides": {
36604
37251
  "dark": "{base.color.neutral.0}"
37252
+ },
37253
+ "org.primer.llm": {
37254
+ "doNotUse": true,
37255
+ "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."
36605
37256
  }
36606
37257
  },
36607
37258
  "key": "{fgColor.black}"
@@ -36610,7 +37261,8 @@
36610
37261
  "attributes": {},
36611
37262
  "path": ["fgColor", "black"],
36612
37263
  "value": "#010409",
36613
- "type": "color"
37264
+ "type": "color",
37265
+ "description": "Pure black text"
36614
37266
  },
36615
37267
  "fgColor-closed": {
36616
37268
  "key": "{fgColor.closed}",
@@ -36632,6 +37284,10 @@
36632
37284
  "dark-tritanopia-high-contrast": "#454c54",
36633
37285
  "light-tritanopia": "#454c54",
36634
37286
  "light-tritanopia-high-contrast": "#454c54"
37287
+ },
37288
+ "org.primer.llm": {
37289
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37290
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36635
37291
  }
36636
37292
  },
36637
37293
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36639,6 +37295,7 @@
36639
37295
  "original": {
36640
37296
  "$value": "{fgColor.danger}",
36641
37297
  "$type": "color",
37298
+ "$description": "Text color for closed state indicators (issues, PRs)",
36642
37299
  "$extensions": {
36643
37300
  "org.primer.figma": {
36644
37301
  "collection": "mode",
@@ -36657,6 +37314,10 @@
36657
37314
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36658
37315
  "light-tritanopia": "{fgColor.muted}",
36659
37316
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37317
+ },
37318
+ "org.primer.llm": {
37319
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37320
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36660
37321
  }
36661
37322
  },
36662
37323
  "key": "{fgColor.closed}"
@@ -36665,7 +37326,8 @@
36665
37326
  "attributes": {},
36666
37327
  "path": ["fgColor", "closed"],
36667
37328
  "value": "#86061d",
36668
- "type": "color"
37329
+ "type": "color",
37330
+ "description": "Text color for closed state indicators (issues, PRs)"
36669
37331
  },
36670
37332
  "fgColor-danger": {
36671
37333
  "key": "{fgColor.danger}",
@@ -36689,6 +37351,10 @@
36689
37351
  "dark-tritanopia-high-contrast": "#ee5a5d",
36690
37352
  "light-high-contrast": "#86061d",
36691
37353
  "light-tritanopia-high-contrast": "#86061d"
37354
+ },
37355
+ "org.primer.llm": {
37356
+ "usage": ["danger-text", "error-text", "destructive-text"],
37357
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36692
37358
  }
36693
37359
  },
36694
37360
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36696,6 +37362,7 @@
36696
37362
  "original": {
36697
37363
  "$value": "{base.color.red.6}",
36698
37364
  "$type": "color",
37365
+ "$description": "Danger text for errors and destructive actions",
36699
37366
  "$extensions": {
36700
37367
  "org.primer.figma": {
36701
37368
  "collection": "mode",
@@ -36716,6 +37383,10 @@
36716
37383
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36717
37384
  "light-high-contrast": "{base.color.red.6}",
36718
37385
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37386
+ },
37387
+ "org.primer.llm": {
37388
+ "usage": ["danger-text", "error-text", "destructive-text"],
37389
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36719
37390
  }
36720
37391
  },
36721
37392
  "key": "{fgColor.danger}"
@@ -36724,7 +37395,8 @@
36724
37395
  "attributes": {},
36725
37396
  "path": ["fgColor", "danger"],
36726
37397
  "value": "#86061d",
36727
- "type": "color"
37398
+ "type": "color",
37399
+ "description": "Danger text for errors and destructive actions"
36728
37400
  },
36729
37401
  "fgColor-default": {
36730
37402
  "key": "{fgColor.default}",
@@ -36742,8 +37414,12 @@
36742
37414
  "dark-high-contrast": "#010409",
36743
37415
  "dark-tritanopia-high-contrast": "#010409",
36744
37416
  "dark-protanopia-deuteranopia-high-contrast": "#010409",
36745
- "dark-dimmed": "#393f46",
37417
+ "dark-dimmed": "#25292e",
36746
37418
  "dark-dimmed-high-contrast": "#25292e"
37419
+ },
37420
+ "org.primer.llm": {
37421
+ "usage": ["default-text", "heading", "body-text"],
37422
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36747
37423
  }
36748
37424
  },
36749
37425
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36751,6 +37427,7 @@
36751
37427
  "original": {
36752
37428
  "$value": "{base.color.neutral.13}",
36753
37429
  "$type": "color",
37430
+ "$description": "Default text color for primary content and headings",
36754
37431
  "$extensions": {
36755
37432
  "org.primer.figma": {
36756
37433
  "collection": "mode",
@@ -36765,8 +37442,12 @@
36765
37442
  "dark-high-contrast": "{base.color.neutral.13}",
36766
37443
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36767
37444
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36768
- "dark-dimmed": "{base.color.neutral.11}",
37445
+ "dark-dimmed": "{base.color.neutral.12}",
36769
37446
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37447
+ },
37448
+ "org.primer.llm": {
37449
+ "usage": ["default-text", "heading", "body-text"],
37450
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36770
37451
  }
36771
37452
  },
36772
37453
  "key": "{fgColor.default}"
@@ -36775,7 +37456,8 @@
36775
37456
  "attributes": {},
36776
37457
  "path": ["fgColor", "default"],
36777
37458
  "value": "#010409",
36778
- "type": "color"
37459
+ "type": "color",
37460
+ "description": "Default text color for primary content and headings"
36779
37461
  },
36780
37462
  "fgColor-disabled": {
36781
37463
  "key": "{fgColor.disabled}",
@@ -36800,6 +37482,10 @@
36800
37482
  "dark-high-contrast": "#818b98",
36801
37483
  "dark-tritanopia-high-contrast": "#818b98",
36802
37484
  "dark-protanopia-deuteranopia-high-contrast": "#818b98"
37485
+ },
37486
+ "org.primer.llm": {
37487
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37488
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36803
37489
  }
36804
37490
  },
36805
37491
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36807,6 +37493,7 @@
36807
37493
  "original": {
36808
37494
  "$value": "{base.color.neutral.9}",
36809
37495
  "$type": "color",
37496
+ "$description": "Text color for disabled interactive elements",
36810
37497
  "$extensions": {
36811
37498
  "org.primer.figma": {
36812
37499
  "collection": "mode",
@@ -36828,6 +37515,10 @@
36828
37515
  "dark-high-contrast": "{base.color.neutral.8}",
36829
37516
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36830
37517
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37518
+ },
37519
+ "org.primer.llm": {
37520
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37521
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36831
37522
  }
36832
37523
  },
36833
37524
  "key": "{fgColor.disabled}"
@@ -36836,7 +37527,8 @@
36836
37527
  "attributes": {},
36837
37528
  "path": ["fgColor", "disabled"],
36838
37529
  "value": "#59636e",
36839
- "type": "color"
37530
+ "type": "color",
37531
+ "description": "Text color for disabled interactive elements"
36840
37532
  },
36841
37533
  "fgColor-done": {
36842
37534
  "key": "{fgColor.done}",
@@ -36858,6 +37550,10 @@
36858
37550
  "light-high-contrast": "#512598",
36859
37551
  "light-protanopia-deuteranopia-high-contrast": "#512598",
36860
37552
  "light-tritanopia-high-contrast": "#512598"
37553
+ },
37554
+ "org.primer.llm": {
37555
+ "usage": ["done-text", "merged", "completed"],
37556
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36861
37557
  }
36862
37558
  },
36863
37559
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36865,6 +37561,7 @@
36865
37561
  "original": {
36866
37562
  "$value": "{base.color.purple.6}",
36867
37563
  "$type": "color",
37564
+ "$description": "Text color for completed/done state indicators",
36868
37565
  "$extensions": {
36869
37566
  "org.primer.figma": {
36870
37567
  "collection": "mode",
@@ -36883,6 +37580,10 @@
36883
37580
  "light-high-contrast": "{base.color.purple.6}",
36884
37581
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36885
37582
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37583
+ },
37584
+ "org.primer.llm": {
37585
+ "usage": ["done-text", "merged", "completed"],
37586
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36886
37587
  }
36887
37588
  },
36888
37589
  "key": "{fgColor.done}"
@@ -36891,7 +37592,8 @@
36891
37592
  "attributes": {},
36892
37593
  "path": ["fgColor", "done"],
36893
37594
  "value": "#512598",
36894
- "type": "color"
37595
+ "type": "color",
37596
+ "description": "Text color for completed/done state indicators"
36895
37597
  },
36896
37598
  "fgColor-draft": {
36897
37599
  "key": "{fgColor.draft}",
@@ -36903,6 +37605,10 @@
36903
37605
  "codeSyntax": {
36904
37606
  "web": "var(--fgColor-draft)"
36905
37607
  }
37608
+ },
37609
+ "org.primer.llm": {
37610
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37611
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36906
37612
  }
36907
37613
  },
36908
37614
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36910,6 +37616,7 @@
36910
37616
  "original": {
36911
37617
  "$value": "{fgColor.neutral}",
36912
37618
  "$type": "color",
37619
+ "$description": "Text color for draft state indicators",
36913
37620
  "$extensions": {
36914
37621
  "org.primer.figma": {
36915
37622
  "collection": "mode",
@@ -36918,6 +37625,10 @@
36918
37625
  "codeSyntax": {
36919
37626
  "web": "var(--fgColor-draft)"
36920
37627
  }
37628
+ },
37629
+ "org.primer.llm": {
37630
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37631
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36921
37632
  }
36922
37633
  },
36923
37634
  "key": "{fgColor.draft}"
@@ -36926,7 +37637,8 @@
36926
37637
  "attributes": {},
36927
37638
  "path": ["fgColor", "draft"],
36928
37639
  "value": "#393f46",
36929
- "type": "color"
37640
+ "type": "color",
37641
+ "description": "Text color for draft state indicators"
36930
37642
  },
36931
37643
  "fgColor-link": {
36932
37644
  "key": "{fgColor.link}",
@@ -36938,6 +37650,10 @@
36938
37650
  "codeSyntax": {
36939
37651
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36940
37652
  }
37653
+ },
37654
+ "org.primer.llm": {
37655
+ "usage": ["link-text", "hyperlink"],
37656
+ "rules": "MUST use for all text links. Provides expected link affordance."
36941
37657
  }
36942
37658
  },
36943
37659
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36945,6 +37661,7 @@
36945
37661
  "original": {
36946
37662
  "$value": "{fgColor.accent}",
36947
37663
  "$type": "color",
37664
+ "$description": "Text color for hyperlinks",
36948
37665
  "$extensions": {
36949
37666
  "org.primer.figma": {
36950
37667
  "collection": "mode",
@@ -36953,6 +37670,10 @@
36953
37670
  "codeSyntax": {
36954
37671
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36955
37672
  }
37673
+ },
37674
+ "org.primer.llm": {
37675
+ "usage": ["link-text", "hyperlink"],
37676
+ "rules": "MUST use for all text links. Provides expected link affordance."
36956
37677
  }
36957
37678
  },
36958
37679
  "key": "{fgColor.link}"
@@ -36961,7 +37682,8 @@
36961
37682
  "attributes": {},
36962
37683
  "path": ["fgColor", "link"],
36963
37684
  "value": "#023b95",
36964
- "type": "color"
37685
+ "type": "color",
37686
+ "description": "Text color for hyperlinks"
36965
37687
  },
36966
37688
  "fgColor-muted": {
36967
37689
  "key": "{fgColor.muted}",
@@ -36982,6 +37704,10 @@
36982
37704
  "dark-dimmed-high-contrast": "#454c54",
36983
37705
  "dark-tritanopia-high-contrast": "#454c54",
36984
37706
  "dark-protanopia-deuteranopia-high-contrast": "#454c54"
37707
+ },
37708
+ "org.primer.llm": {
37709
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37710
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
36985
37711
  }
36986
37712
  },
36987
37713
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36989,6 +37715,7 @@
36989
37715
  "original": {
36990
37716
  "$value": "{base.color.neutral.10}",
36991
37717
  "$type": "color",
37718
+ "$description": "Muted text for secondary content and less important information",
36992
37719
  "$extensions": {
36993
37720
  "org.primer.figma": {
36994
37721
  "collection": "mode",
@@ -37006,6 +37733,10 @@
37006
37733
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37007
37734
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37008
37735
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37736
+ },
37737
+ "org.primer.llm": {
37738
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37739
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37009
37740
  }
37010
37741
  },
37011
37742
  "key": "{fgColor.muted}"
@@ -37014,7 +37745,8 @@
37014
37745
  "attributes": {},
37015
37746
  "path": ["fgColor", "muted"],
37016
37747
  "value": "#454c54",
37017
- "type": "color"
37748
+ "type": "color",
37749
+ "description": "Muted text for secondary content and less important information"
37018
37750
  },
37019
37751
  "fgColor-neutral": {
37020
37752
  "key": "{fgColor.neutral}",
@@ -37032,6 +37764,10 @@
37032
37764
  "dark-dimmed-high-contrast": "#393f46",
37033
37765
  "dark-tritanopia-high-contrast": "#393f46",
37034
37766
  "dark-protanopia-deuteranopia-high-contrast": "#393f46"
37767
+ },
37768
+ "org.primer.llm": {
37769
+ "usage": ["neutral-icon", "neutral-text"],
37770
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37035
37771
  }
37036
37772
  },
37037
37773
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37039,6 +37775,7 @@
37039
37775
  "original": {
37040
37776
  "$value": "{base.color.neutral.11}",
37041
37777
  "$type": "color",
37778
+ "$description": "Neutral semantic text for icons and secondary elements",
37042
37779
  "$extensions": {
37043
37780
  "org.primer.figma": {
37044
37781
  "collection": "mode",
@@ -37053,6 +37790,10 @@
37053
37790
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37054
37791
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37055
37792
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37793
+ },
37794
+ "org.primer.llm": {
37795
+ "usage": ["neutral-icon", "neutral-text"],
37796
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37056
37797
  }
37057
37798
  },
37058
37799
  "key": "{fgColor.neutral}"
@@ -37061,7 +37802,8 @@
37061
37802
  "attributes": {},
37062
37803
  "path": ["fgColor", "neutral"],
37063
37804
  "value": "#393f46",
37064
- "type": "color"
37805
+ "type": "color",
37806
+ "description": "Neutral semantic text for icons and secondary elements"
37065
37807
  },
37066
37808
  "fgColor-onEmphasis": {
37067
37809
  "key": "{fgColor.onEmphasis}",
@@ -37078,6 +37820,10 @@
37078
37820
  "dark": "#010409",
37079
37821
  "dark-dimmed": "#25292e",
37080
37822
  "dark-dimmed-high-contrast": "#ffffff"
37823
+ },
37824
+ "org.primer.llm": {
37825
+ "usage": ["text-on-emphasis", "contrast-text"],
37826
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37081
37827
  }
37082
37828
  },
37083
37829
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37085,6 +37831,7 @@
37085
37831
  "original": {
37086
37832
  "$value": "{base.color.neutral.0}",
37087
37833
  "$type": "color",
37834
+ "$description": "Text color for use on emphasis backgrounds",
37088
37835
  "$extensions": {
37089
37836
  "org.primer.figma": {
37090
37837
  "collection": "mode",
@@ -37098,6 +37845,10 @@
37098
37845
  "dark": "{base.color.neutral.13}",
37099
37846
  "dark-dimmed": "{base.color.neutral.12}",
37100
37847
  "dark-dimmed-high-contrast": "#ffffff"
37848
+ },
37849
+ "org.primer.llm": {
37850
+ "usage": ["text-on-emphasis", "contrast-text"],
37851
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37101
37852
  }
37102
37853
  },
37103
37854
  "key": "{fgColor.onEmphasis}"
@@ -37106,7 +37857,8 @@
37106
37857
  "attributes": {},
37107
37858
  "path": ["fgColor", "onEmphasis"],
37108
37859
  "value": "#ffffff",
37109
- "type": "color"
37860
+ "type": "color",
37861
+ "description": "Text color for use on emphasis backgrounds"
37110
37862
  },
37111
37863
  "fgColor-onInverse": {
37112
37864
  "key": "{fgColor.onInverse}",
@@ -37115,6 +37867,10 @@
37115
37867
  "collection": "mode",
37116
37868
  "group": "semantic",
37117
37869
  "scopes": ["fgColor"]
37870
+ },
37871
+ "org.primer.llm": {
37872
+ "usage": ["text-on-inverse", "inverse-text"],
37873
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37118
37874
  }
37119
37875
  },
37120
37876
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37122,11 +37878,16 @@
37122
37878
  "original": {
37123
37879
  "$value": "{base.color.neutral.0}",
37124
37880
  "$type": "color",
37881
+ "$description": "Text color for use on inverse backgrounds",
37125
37882
  "$extensions": {
37126
37883
  "org.primer.figma": {
37127
37884
  "collection": "mode",
37128
37885
  "group": "semantic",
37129
37886
  "scopes": ["fgColor"]
37887
+ },
37888
+ "org.primer.llm": {
37889
+ "usage": ["text-on-inverse", "inverse-text"],
37890
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37130
37891
  }
37131
37892
  },
37132
37893
  "key": "{fgColor.onInverse}"
@@ -37135,7 +37896,8 @@
37135
37896
  "attributes": {},
37136
37897
  "path": ["fgColor", "onInverse"],
37137
37898
  "value": "#ffffff",
37138
- "type": "color"
37899
+ "type": "color",
37900
+ "description": "Text color for use on inverse backgrounds"
37139
37901
  },
37140
37902
  "fgColor-open": {
37141
37903
  "key": "{fgColor.open}",
@@ -37157,6 +37919,10 @@
37157
37919
  "dark-tritanopia-high-contrast": "#ff8e8a",
37158
37920
  "light-tritanopia": "#a0111f",
37159
37921
  "light-tritanopia-high-contrast": "#86061d"
37922
+ },
37923
+ "org.primer.llm": {
37924
+ "usage": ["open-text", "open-issue", "open-pr"],
37925
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37160
37926
  }
37161
37927
  },
37162
37928
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37164,6 +37930,7 @@
37164
37930
  "original": {
37165
37931
  "$value": "{fgColor.success}",
37166
37932
  "$type": "color",
37933
+ "$description": "Text color for open state indicators (issues, PRs)",
37167
37934
  "$extensions": {
37168
37935
  "org.primer.figma": {
37169
37936
  "collection": "mode",
@@ -37182,6 +37949,10 @@
37182
37949
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37183
37950
  "light-tritanopia": "{base.color.red.5}",
37184
37951
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37952
+ },
37953
+ "org.primer.llm": {
37954
+ "usage": ["open-text", "open-issue", "open-pr"],
37955
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37185
37956
  }
37186
37957
  },
37187
37958
  "key": "{fgColor.open}"
@@ -37190,7 +37961,8 @@
37190
37961
  "attributes": {},
37191
37962
  "path": ["fgColor", "open"],
37192
37963
  "value": "#024c1a",
37193
- "type": "color"
37964
+ "type": "color",
37965
+ "description": "Text color for open state indicators (issues, PRs)"
37194
37966
  },
37195
37967
  "fgColor-severe": {
37196
37968
  "key": "{fgColor.severe}",
@@ -37214,6 +37986,10 @@
37214
37986
  "light-tritanopia": "#a0111f",
37215
37987
  "light-tritanopia-high-contrast": "#86061d",
37216
37988
  "light-protanopia-deuteranopia-high-contrast": "#702c00"
37989
+ },
37990
+ "org.primer.llm": {
37991
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
37992
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37217
37993
  }
37218
37994
  },
37219
37995
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37221,6 +37997,7 @@
37221
37997
  "original": {
37222
37998
  "$value": "{base.color.orange.6}",
37223
37999
  "$type": "color",
38000
+ "$description": "Severe text for high-priority warnings",
37224
38001
  "$extensions": {
37225
38002
  "org.primer.figma": {
37226
38003
  "collection": "mode",
@@ -37241,6 +38018,10 @@
37241
38018
  "light-tritanopia": "{base.color.red.5}",
37242
38019
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37243
38020
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
38021
+ },
38022
+ "org.primer.llm": {
38023
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38024
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37244
38025
  }
37245
38026
  },
37246
38027
  "key": "{fgColor.severe}"
@@ -37249,7 +38030,8 @@
37249
38030
  "attributes": {},
37250
38031
  "path": ["fgColor", "severe"],
37251
38032
  "value": "#702c00",
37252
- "type": "color"
38033
+ "type": "color",
38034
+ "description": "Severe text for high-priority warnings"
37253
38035
  },
37254
38036
  "fgColor-sponsors": {
37255
38037
  "key": "{fgColor.sponsors}",
@@ -37271,6 +38053,10 @@
37271
38053
  "light-high-contrast": "#7d0c57",
37272
38054
  "light-protanopia-deuteranopia-high-contrast": "#7d0c57",
37273
38055
  "light-tritanopia-high-contrast": "#7d0c57"
38056
+ },
38057
+ "org.primer.llm": {
38058
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38059
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37274
38060
  }
37275
38061
  },
37276
38062
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37278,6 +38064,7 @@
37278
38064
  "original": {
37279
38065
  "$value": "{base.color.pink.6}",
37280
38066
  "$type": "color",
38067
+ "$description": "Text color for GitHub Sponsors content",
37281
38068
  "$extensions": {
37282
38069
  "org.primer.figma": {
37283
38070
  "collection": "mode",
@@ -37296,6 +38083,10 @@
37296
38083
  "light-high-contrast": "{base.color.pink.6}",
37297
38084
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37298
38085
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38086
+ },
38087
+ "org.primer.llm": {
38088
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38089
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37299
38090
  }
37300
38091
  },
37301
38092
  "key": "{fgColor.sponsors}"
@@ -37304,7 +38095,8 @@
37304
38095
  "attributes": {},
37305
38096
  "path": ["fgColor", "sponsors"],
37306
38097
  "value": "#7d0c57",
37307
- "type": "color"
38098
+ "type": "color",
38099
+ "description": "Text color for GitHub Sponsors content"
37308
38100
  },
37309
38101
  "fgColor-success": {
37310
38102
  "key": "{fgColor.success}",
@@ -37330,6 +38122,10 @@
37330
38122
  "dark-tritanopia-high-contrast": "#67b3fd",
37331
38123
  "light-tritanopia": "#0349b4",
37332
38124
  "light-tritanopia-high-contrast": "#023b95"
38125
+ },
38126
+ "org.primer.llm": {
38127
+ "usage": ["success-text", "positive-text", "success-icon"],
38128
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37333
38129
  }
37334
38130
  },
37335
38131
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37337,6 +38133,7 @@
37337
38133
  "original": {
37338
38134
  "$value": "{base.color.green.6}",
37339
38135
  "$type": "color",
38136
+ "$description": "Success text for positive feedback and completed states",
37340
38137
  "$extensions": {
37341
38138
  "org.primer.figma": {
37342
38139
  "collection": "mode",
@@ -37359,6 +38156,10 @@
37359
38156
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37360
38157
  "light-tritanopia": "{base.color.blue.5}",
37361
38158
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38159
+ },
38160
+ "org.primer.llm": {
38161
+ "usage": ["success-text", "positive-text", "success-icon"],
38162
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37362
38163
  }
37363
38164
  },
37364
38165
  "key": "{fgColor.success}"
@@ -37367,7 +38168,8 @@
37367
38168
  "attributes": {},
37368
38169
  "path": ["fgColor", "success"],
37369
38170
  "value": "#024c1a",
37370
- "type": "color"
38171
+ "type": "color",
38172
+ "description": "Success text for positive feedback and completed states"
37371
38173
  },
37372
38174
  "fgColor-upsell": {
37373
38175
  "key": "{fgColor.upsell}",
@@ -37379,6 +38181,10 @@
37379
38181
  "codeSyntax": {
37380
38182
  "web": "var(--fgColor-upsell)"
37381
38183
  }
38184
+ },
38185
+ "org.primer.llm": {
38186
+ "usage": ["upsell-text", "premium-text", "promotional"],
38187
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37382
38188
  }
37383
38189
  },
37384
38190
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37386,6 +38192,7 @@
37386
38192
  "original": {
37387
38193
  "$value": "{fgColor.done}",
37388
38194
  "$type": "color",
38195
+ "$description": "Text color for upsell and promotional content",
37389
38196
  "$extensions": {
37390
38197
  "org.primer.figma": {
37391
38198
  "collection": "mode",
@@ -37394,6 +38201,10 @@
37394
38201
  "codeSyntax": {
37395
38202
  "web": "var(--fgColor-upsell)"
37396
38203
  }
38204
+ },
38205
+ "org.primer.llm": {
38206
+ "usage": ["upsell-text", "premium-text", "promotional"],
38207
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37397
38208
  }
37398
38209
  },
37399
38210
  "key": "{fgColor.upsell}"
@@ -37402,7 +38213,8 @@
37402
38213
  "attributes": {},
37403
38214
  "path": ["fgColor", "upsell"],
37404
38215
  "value": "#512598",
37405
- "type": "color"
38216
+ "type": "color",
38217
+ "description": "Text color for upsell and promotional content"
37406
38218
  },
37407
38219
  "fgColor-white": {
37408
38220
  "key": "{fgColor.white}",
@@ -37414,6 +38226,10 @@
37414
38226
  },
37415
38227
  "org.primer.overrides": {
37416
38228
  "dark": "#010409"
38229
+ },
38230
+ "org.primer.llm": {
38231
+ "doNotUse": true,
38232
+ "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."
37417
38233
  }
37418
38234
  },
37419
38235
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37421,6 +38237,7 @@
37421
38237
  "original": {
37422
38238
  "$value": "{base.color.neutral.0}",
37423
38239
  "$type": "color",
38240
+ "$description": "Pure white text",
37424
38241
  "$extensions": {
37425
38242
  "org.primer.figma": {
37426
38243
  "collection": "mode",
@@ -37429,6 +38246,10 @@
37429
38246
  },
37430
38247
  "org.primer.overrides": {
37431
38248
  "dark": "{base.color.neutral.13}"
38249
+ },
38250
+ "org.primer.llm": {
38251
+ "doNotUse": true,
38252
+ "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."
37432
38253
  }
37433
38254
  },
37434
38255
  "key": "{fgColor.white}"
@@ -37437,10 +38258,17 @@
37437
38258
  "attributes": {},
37438
38259
  "path": ["fgColor", "white"],
37439
38260
  "value": "#ffffff",
37440
- "type": "color"
38261
+ "type": "color",
38262
+ "description": "Pure white text"
37441
38263
  },
37442
38264
  "focus-outline": {
37443
38265
  "key": "{focus.outline}",
38266
+ "$extensions": {
38267
+ "org.primer.llm": {
38268
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38269
+ "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."
38270
+ }
38271
+ },
37444
38272
  "filePath": "src/tokens/functional/border/border.json5",
37445
38273
  "isSource": true,
37446
38274
  "original": {
@@ -37450,13 +38278,21 @@
37450
38278
  "width": "2px"
37451
38279
  },
37452
38280
  "$type": "border",
38281
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38282
+ "$extensions": {
38283
+ "org.primer.llm": {
38284
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38285
+ "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."
38286
+ }
38287
+ },
37453
38288
  "key": "{focus.outline}"
37454
38289
  },
37455
38290
  "name": "focus-outline",
37456
38291
  "attributes": {},
37457
38292
  "path": ["focus", "outline"],
37458
38293
  "value": "2px solid #0349b4",
37459
- "type": "border"
38294
+ "type": "border",
38295
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37460
38296
  },
37461
38297
  "focus-outlineColor": {
37462
38298
  "key": "{focus.outlineColor}",
@@ -37465,6 +38301,10 @@
37465
38301
  "collection": "mode",
37466
38302
  "group": "component (internal)",
37467
38303
  "scopes": ["borderColor", "effectColor"]
38304
+ },
38305
+ "org.primer.llm": {
38306
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38307
+ "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."
37468
38308
  }
37469
38309
  },
37470
38310
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37472,11 +38312,16 @@
37472
38312
  "original": {
37473
38313
  "$value": "{borderColor.accent.emphasis}",
37474
38314
  "$type": "color",
38315
+ "$description": "Outline color for focus states on interactive elements",
37475
38316
  "$extensions": {
37476
38317
  "org.primer.figma": {
37477
38318
  "collection": "mode",
37478
38319
  "group": "component (internal)",
37479
38320
  "scopes": ["borderColor", "effectColor"]
38321
+ },
38322
+ "org.primer.llm": {
38323
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38324
+ "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."
37480
38325
  }
37481
38326
  },
37482
38327
  "key": "{focus.outlineColor}"
@@ -37485,7 +38330,8 @@
37485
38330
  "attributes": {},
37486
38331
  "path": ["focus", "outlineColor"],
37487
38332
  "value": "#0349b4",
37488
- "type": "color"
38333
+ "type": "color",
38334
+ "description": "Outline color for focus states on interactive elements"
37489
38335
  },
37490
38336
  "header-bgColor": {
37491
38337
  "key": "{header.bgColor}",
@@ -46538,6 +47384,10 @@
46538
47384
  "isSource": true,
46539
47385
  "$type": "color"
46540
47386
  }
47387
+ },
47388
+ "org.primer.llm": {
47389
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47390
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46541
47391
  }
46542
47392
  },
46543
47393
  "alpha": 0.2,
@@ -46546,6 +47396,7 @@
46546
47396
  "original": {
46547
47397
  "$value": "{bgColor.accent.emphasis}",
46548
47398
  "$type": "color",
47399
+ "$description": "Background color for text selection highlights",
46549
47400
  "$extensions": {
46550
47401
  "org.primer.figma": {
46551
47402
  "collection": "mode",
@@ -46560,6 +47411,10 @@
46560
47411
  "isSource": true,
46561
47412
  "$type": "color"
46562
47413
  }
47414
+ },
47415
+ "org.primer.llm": {
47416
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47417
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46563
47418
  }
46564
47419
  },
46565
47420
  "alpha": 0.2,
@@ -46569,7 +47424,8 @@
46569
47424
  "attributes": {},
46570
47425
  "path": ["selection", "bgColor"],
46571
47426
  "value": "#0349b433",
46572
- "type": "color"
47427
+ "type": "color",
47428
+ "description": "Background color for text selection highlights"
46573
47429
  },
46574
47430
  "shadow-floating-large": {
46575
47431
  "key": "{shadow.floating.large}",
@@ -46602,6 +47458,10 @@
46602
47458
  "isSource": true,
46603
47459
  "$type": "shadow"
46604
47460
  }
47461
+ },
47462
+ "org.primer.llm": {
47463
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47464
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46605
47465
  }
46606
47466
  },
46607
47467
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46626,6 +47486,7 @@
46626
47486
  }
46627
47487
  ],
46628
47488
  "$type": "shadow",
47489
+ "$description": "Large floating shadow for modals and dialogs",
46629
47490
  "$extensions": {
46630
47491
  "org.primer.figma": {
46631
47492
  "collection": "mode",
@@ -46655,6 +47516,10 @@
46655
47516
  "isSource": true,
46656
47517
  "$type": "shadow"
46657
47518
  }
47519
+ },
47520
+ "org.primer.llm": {
47521
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47522
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46658
47523
  }
46659
47524
  },
46660
47525
  "key": "{shadow.floating.large}"
@@ -46663,7 +47528,8 @@
46663
47528
  "attributes": {},
46664
47529
  "path": ["shadow", "floating", "large"],
46665
47530
  "value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
46666
- "type": "shadow"
47531
+ "type": "shadow",
47532
+ "description": "Large floating shadow for modals and dialogs"
46667
47533
  },
46668
47534
  "shadow-floating-legacy": {
46669
47535
  "key": "{shadow.floating.legacy}",
@@ -46693,6 +47559,10 @@
46693
47559
  "isSource": true,
46694
47560
  "$type": "shadow"
46695
47561
  }
47562
+ },
47563
+ "org.primer.llm": {
47564
+ "usage": ["legacy-component", "backward-compatibility"],
47565
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46696
47566
  }
46697
47567
  },
46698
47568
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46717,6 +47587,7 @@
46717
47587
  }
46718
47588
  ],
46719
47589
  "$type": "shadow",
47590
+ "$description": "Legacy floating shadow for backward compatibility",
46720
47591
  "$extensions": {
46721
47592
  "org.primer.figma": {},
46722
47593
  "org.primer.overrides": {
@@ -46743,6 +47614,10 @@
46743
47614
  "isSource": true,
46744
47615
  "$type": "shadow"
46745
47616
  }
47617
+ },
47618
+ "org.primer.llm": {
47619
+ "usage": ["legacy-component", "backward-compatibility"],
47620
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46746
47621
  }
46747
47622
  },
46748
47623
  "key": "{shadow.floating.legacy}"
@@ -46751,7 +47626,8 @@
46751
47626
  "attributes": {},
46752
47627
  "path": ["shadow", "floating", "legacy"],
46753
47628
  "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
46754
- "type": "shadow"
47629
+ "type": "shadow",
47630
+ "description": "Legacy floating shadow for backward compatibility"
46755
47631
  },
46756
47632
  "shadow-floating-medium": {
46757
47633
  "key": "{shadow.floating.medium}",
@@ -46808,6 +47684,10 @@
46808
47684
  "isSource": true,
46809
47685
  "$type": "shadow"
46810
47686
  }
47687
+ },
47688
+ "org.primer.llm": {
47689
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47690
+ "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."
46811
47691
  }
46812
47692
  },
46813
47693
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46856,6 +47736,7 @@
46856
47736
  }
46857
47737
  ],
46858
47738
  "$type": "shadow",
47739
+ "$description": "Medium floating shadow for popovers and action menus",
46859
47740
  "$extensions": {
46860
47741
  "org.primer.figma": {
46861
47742
  "collection": "mode",
@@ -46909,6 +47790,10 @@
46909
47790
  "isSource": true,
46910
47791
  "$type": "shadow"
46911
47792
  }
47793
+ },
47794
+ "org.primer.llm": {
47795
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47796
+ "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."
46912
47797
  }
46913
47798
  },
46914
47799
  "key": "{shadow.floating.medium}"
@@ -46917,7 +47802,8 @@
46917
47802
  "attributes": {},
46918
47803
  "path": ["shadow", "floating", "medium"],
46919
47804
  "value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
46920
- "type": "shadow"
47805
+ "type": "shadow",
47806
+ "description": "Medium floating shadow for popovers and action menus"
46921
47807
  },
46922
47808
  "shadow-floating-small": {
46923
47809
  "key": "{shadow.floating.small}",
@@ -46958,6 +47844,10 @@
46958
47844
  "isSource": true,
46959
47845
  "$type": "shadow"
46960
47846
  }
47847
+ },
47848
+ "org.primer.llm": {
47849
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47850
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
46961
47851
  }
46962
47852
  },
46963
47853
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46990,6 +47880,7 @@
46990
47880
  }
46991
47881
  ],
46992
47882
  "$type": "shadow",
47883
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
46993
47884
  "$extensions": {
46994
47885
  "org.primer.figma": {
46995
47886
  "collection": "mode",
@@ -47027,6 +47918,10 @@
47027
47918
  "isSource": true,
47028
47919
  "$type": "shadow"
47029
47920
  }
47921
+ },
47922
+ "org.primer.llm": {
47923
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47924
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47030
47925
  }
47031
47926
  },
47032
47927
  "key": "{shadow.floating.small}"
@@ -47035,7 +47930,8 @@
47035
47930
  "attributes": {},
47036
47931
  "path": ["shadow", "floating", "small"],
47037
47932
  "value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47038
- "type": "shadow"
47933
+ "type": "shadow",
47934
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47039
47935
  },
47040
47936
  "shadow-floating-xlarge": {
47041
47937
  "key": "{shadow.floating.xlarge}",
@@ -47068,6 +47964,10 @@
47068
47964
  "isSource": true,
47069
47965
  "$type": "shadow"
47070
47966
  }
47967
+ },
47968
+ "org.primer.llm": {
47969
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
47970
+ "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."
47071
47971
  }
47072
47972
  },
47073
47973
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47092,6 +47992,7 @@
47092
47992
  }
47093
47993
  ],
47094
47994
  "$type": "shadow",
47995
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47095
47996
  "$extensions": {
47096
47997
  "org.primer.figma": {
47097
47998
  "collection": "mode",
@@ -47121,6 +48022,10 @@
47121
48022
  "isSource": true,
47122
48023
  "$type": "shadow"
47123
48024
  }
48025
+ },
48026
+ "org.primer.llm": {
48027
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48028
+ "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."
47124
48029
  }
47125
48030
  },
47126
48031
  "key": "{shadow.floating.xlarge}"
@@ -47129,7 +48034,8 @@
47129
48034
  "attributes": {},
47130
48035
  "path": ["shadow", "floating", "xlarge"],
47131
48036
  "value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
47132
- "type": "shadow"
48037
+ "type": "shadow",
48038
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47133
48039
  },
47134
48040
  "shadow-inset": {
47135
48041
  "key": "{shadow.inset}",
@@ -47153,6 +48059,10 @@
47153
48059
  "isSource": true,
47154
48060
  "$type": "shadow"
47155
48061
  }
48062
+ },
48063
+ "org.primer.llm": {
48064
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48065
+ "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."
47156
48066
  }
47157
48067
  },
47158
48068
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47168,6 +48078,7 @@
47168
48078
  "inset": true
47169
48079
  },
47170
48080
  "$type": "shadow",
48081
+ "$description": "Inset shadow for recessed elements",
47171
48082
  "$extensions": {
47172
48083
  "org.primer.figma": {
47173
48084
  "collection": "mode",
@@ -47188,6 +48099,10 @@
47188
48099
  "isSource": true,
47189
48100
  "$type": "shadow"
47190
48101
  }
48102
+ },
48103
+ "org.primer.llm": {
48104
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48105
+ "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."
47191
48106
  }
47192
48107
  },
47193
48108
  "key": "{shadow.inset}"
@@ -47196,7 +48111,8 @@
47196
48111
  "attributes": {},
47197
48112
  "path": ["shadow", "inset"],
47198
48113
  "value": "inset 0px 1px 0px 0px #0104090a",
47199
- "type": "shadow"
48114
+ "type": "shadow",
48115
+ "description": "Inset shadow for recessed elements"
47200
48116
  },
47201
48117
  "shadow-resting-medium": {
47202
48118
  "key": "{shadow.resting.medium}",
@@ -47229,6 +48145,10 @@
47229
48145
  "isSource": true,
47230
48146
  "$type": "shadow"
47231
48147
  }
48148
+ },
48149
+ "org.primer.llm": {
48150
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48151
+ "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."
47232
48152
  }
47233
48153
  },
47234
48154
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47253,6 +48173,7 @@
47253
48173
  }
47254
48174
  ],
47255
48175
  "$type": "shadow",
48176
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47256
48177
  "$extensions": {
47257
48178
  "org.primer.figma": {
47258
48179
  "collection": "mode",
@@ -47282,6 +48203,10 @@
47282
48203
  "isSource": true,
47283
48204
  "$type": "shadow"
47284
48205
  }
48206
+ },
48207
+ "org.primer.llm": {
48208
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48209
+ "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."
47285
48210
  }
47286
48211
  },
47287
48212
  "key": "{shadow.resting.medium}"
@@ -47290,7 +48215,8 @@
47290
48215
  "attributes": {},
47291
48216
  "path": ["shadow", "resting", "medium"],
47292
48217
  "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
47293
- "type": "shadow"
48218
+ "type": "shadow",
48219
+ "description": "Medium resting shadow for cards and elevated surfaces"
47294
48220
  },
47295
48221
  "shadow-resting-small": {
47296
48222
  "key": "{shadow.resting.small}",
@@ -47325,6 +48251,10 @@
47325
48251
  "isSource": true,
47326
48252
  "$type": "shadow"
47327
48253
  }
48254
+ },
48255
+ "org.primer.llm": {
48256
+ "usage": ["button", "interactive-card", "clickable-element"],
48257
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47328
48258
  }
47329
48259
  },
47330
48260
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47333,7 +48263,7 @@
47333
48263
  "$value": [
47334
48264
  {
47335
48265
  "color": "{base.color.neutral.13}",
47336
- "alpha": 0.06,
48266
+ "alpha": 0.04,
47337
48267
  "offsetX": "0px",
47338
48268
  "offsetY": "1px",
47339
48269
  "blur": "1px",
@@ -47342,15 +48272,16 @@
47342
48272
  },
47343
48273
  {
47344
48274
  "color": "{base.color.neutral.13}",
47345
- "alpha": 0.06,
48275
+ "alpha": 0.03,
47346
48276
  "offsetX": "0px",
47347
48277
  "offsetY": "1px",
47348
- "blur": "3px",
48278
+ "blur": "2px",
47349
48279
  "spread": "0px",
47350
48280
  "inset": false
47351
48281
  }
47352
48282
  ],
47353
48283
  "$type": "shadow",
48284
+ "$description": "Small resting shadow for buttons and interactive elements",
47354
48285
  "$extensions": {
47355
48286
  "org.primer.figma": {
47356
48287
  "collection": "mode",
@@ -47382,6 +48313,10 @@
47382
48313
  "isSource": true,
47383
48314
  "$type": "shadow"
47384
48315
  }
48316
+ },
48317
+ "org.primer.llm": {
48318
+ "usage": ["button", "interactive-card", "clickable-element"],
48319
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47385
48320
  }
47386
48321
  },
47387
48322
  "key": "{shadow.resting.small}"
@@ -47389,8 +48324,9 @@
47389
48324
  "name": "shadow-resting-small",
47390
48325
  "attributes": {},
47391
48326
  "path": ["shadow", "resting", "small"],
47392
- "value": "0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f",
47393
- "type": "shadow"
48327
+ "value": "0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908",
48328
+ "type": "shadow",
48329
+ "description": "Small resting shadow for buttons and interactive elements"
47394
48330
  },
47395
48331
  "shadow-resting-xsmall": {
47396
48332
  "key": "{shadow.resting.xsmall}",
@@ -47414,6 +48350,10 @@
47414
48350
  "isSource": true,
47415
48351
  "$type": "shadow"
47416
48352
  }
48353
+ },
48354
+ "org.primer.llm": {
48355
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48356
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47417
48357
  }
47418
48358
  },
47419
48359
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47421,7 +48361,7 @@
47421
48361
  "original": {
47422
48362
  "$value": {
47423
48363
  "color": "{base.color.neutral.13}",
47424
- "alpha": 0.06,
48364
+ "alpha": 0.05,
47425
48365
  "offsetX": "0px",
47426
48366
  "offsetY": "1px",
47427
48367
  "blur": "1px",
@@ -47429,6 +48369,7 @@
47429
48369
  "inset": false
47430
48370
  },
47431
48371
  "$type": "shadow",
48372
+ "$description": "Extra small resting shadow for minimal elevation",
47432
48373
  "$extensions": {
47433
48374
  "org.primer.figma": {
47434
48375
  "collection": "mode",
@@ -47449,6 +48390,10 @@
47449
48390
  "isSource": true,
47450
48391
  "$type": "shadow"
47451
48392
  }
48393
+ },
48394
+ "org.primer.llm": {
48395
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48396
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47452
48397
  }
47453
48398
  },
47454
48399
  "key": "{shadow.resting.xsmall}"
@@ -47456,8 +48401,9 @@
47456
48401
  "name": "shadow-resting-xsmall",
47457
48402
  "attributes": {},
47458
48403
  "path": ["shadow", "resting", "xsmall"],
47459
- "value": "0px 1px 1px 0px #0104090f",
47460
- "type": "shadow"
48404
+ "value": "0px 1px 1px 0px #0104090d",
48405
+ "type": "shadow",
48406
+ "description": "Extra small resting shadow for minimal elevation"
47461
48407
  },
47462
48408
  "sideNav-bgColor-selected": {
47463
48409
  "key": "{sideNav.bgColor.selected}",