@sdaia-ds/mcp 0.0.0-stage → 3.1.1

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 (151) hide show
  1. package/README.md +212 -2
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +291 -0
  4. package/dist/index.js.map +1 -0
  5. package/knowledge/actions/breadcrumb.md +50 -0
  6. package/knowledge/actions/button-menu.md +82 -0
  7. package/knowledge/actions/button-split.md +69 -0
  8. package/knowledge/actions/button.md +101 -0
  9. package/knowledge/actions/content-switcher.md +66 -0
  10. package/knowledge/actions/date-picker.md +115 -0
  11. package/knowledge/actions/floating-button.md +100 -0
  12. package/knowledge/actions/horizontal-tabs.md +52 -0
  13. package/knowledge/actions/link.md +76 -0
  14. package/knowledge/actions/modal.md +103 -0
  15. package/knowledge/actions/pagination.md +69 -0
  16. package/knowledge/actions/radio-button.md +88 -0
  17. package/knowledge/actions/switch.md +87 -0
  18. package/knowledge/actions/tag.md +69 -0
  19. package/knowledge/ai/agent-activity.md +65 -0
  20. package/knowledge/ai/agent-card.md +65 -0
  21. package/knowledge/ai/agent-handoff.md +65 -0
  22. package/knowledge/ai/ai-citation.md +78 -0
  23. package/knowledge/ai/ai-code-block.md +86 -0
  24. package/knowledge/ai/ai-disclaimer.md +84 -0
  25. package/knowledge/ai/ai-message-bubble.md +81 -0
  26. package/knowledge/ai/ai-message.md +118 -0
  27. package/knowledge/ai/ai-prompt-input.md +93 -0
  28. package/knowledge/ai/ai-states.md +107 -0
  29. package/knowledge/ai/ai-status-indicator.md +81 -0
  30. package/knowledge/ai/ai-suggested-prompts.md +62 -0
  31. package/knowledge/ai/ai-thinking-indicator.md +94 -0
  32. package/knowledge/ai/artifact-viewer.md +105 -0
  33. package/knowledge/ai/citation.md +61 -0
  34. package/knowledge/ai/context-manager.md +111 -0
  35. package/knowledge/ai/prompt-context.md +72 -0
  36. package/knowledge/ai/prompt-suggestion.md +68 -0
  37. package/knowledge/ai/prompt-template.md +71 -0
  38. package/knowledge/ai/prompt-variable.md +61 -0
  39. package/knowledge/ai/reasoning-trace.md +106 -0
  40. package/knowledge/ai/source-explorer.md +117 -0
  41. package/knowledge/ai/source-group.md +59 -0
  42. package/knowledge/ai/source-reference.md +70 -0
  43. package/knowledge/ai/thinking-panel.md +77 -0
  44. package/knowledge/ai/tool-activity-feed.md +67 -0
  45. package/knowledge/ai/tool-call-card.md +66 -0
  46. package/knowledge/ai/tool-status-row.md +72 -0
  47. package/knowledge/ai/tool-timeline-item.md +71 -0
  48. package/knowledge/ai/voice-session.md +93 -0
  49. package/knowledge/feedback/alert.md +106 -0
  50. package/knowledge/feedback/badge.md +86 -0
  51. package/knowledge/feedback/card.md +54 -0
  52. package/knowledge/feedback/feedback-overview.md +37 -0
  53. package/knowledge/feedback/feedback.md +46 -0
  54. package/knowledge/feedback/help-icon.md +57 -0
  55. package/knowledge/feedback/loading-indicator.md +76 -0
  56. package/knowledge/feedback/notification-banner.md +73 -0
  57. package/knowledge/feedback/notification-popup.md +87 -0
  58. package/knowledge/feedback/notifications.md +158 -0
  59. package/knowledge/feedback/progress-bar.md +69 -0
  60. package/knowledge/feedback/rating-overview.md +58 -0
  61. package/knowledge/feedback/rating.md +64 -0
  62. package/knowledge/feedback/skeleton-avatar.md +48 -0
  63. package/knowledge/feedback/skeleton.md +53 -0
  64. package/knowledge/feedback/toast.md +74 -0
  65. package/knowledge/feedback/tooltip.md +72 -0
  66. package/knowledge/form/autocomplete.md +100 -0
  67. package/knowledge/form/checkbox.md +95 -0
  68. package/knowledge/form/date-time-field.md +63 -0
  69. package/knowledge/form/error-summary.md +56 -0
  70. package/knowledge/form/field-group.md +57 -0
  71. package/knowledge/form/file-uploader.md +60 -0
  72. package/knowledge/form/form-section.md +58 -0
  73. package/knowledge/form/number-input.md +92 -0
  74. package/knowledge/form/otp-input.md +83 -0
  75. package/knowledge/form/password-input.md +49 -0
  76. package/knowledge/form/range-slider.md +71 -0
  77. package/knowledge/form/rich-text-editor.md +106 -0
  78. package/knowledge/form/select.md +113 -0
  79. package/knowledge/form/signature.md +83 -0
  80. package/knowledge/form/slider.md +66 -0
  81. package/knowledge/form/text-area.md +90 -0
  82. package/knowledge/form/text-input.md +132 -0
  83. package/knowledge/form/time-input.md +44 -0
  84. package/knowledge/form/time-picker.md +73 -0
  85. package/knowledge/foundations/accessibility.md +97 -0
  86. package/knowledge/foundations/colors.md +1117 -0
  87. package/knowledge/foundations/figma.md +30 -0
  88. package/knowledge/foundations/icon-usage.md +114 -0
  89. package/knowledge/foundations/icons.md +16 -0
  90. package/knowledge/foundations/motion.md +39 -0
  91. package/knowledge/foundations/radius.md +17 -0
  92. package/knowledge/foundations/responsive.md +64 -0
  93. package/knowledge/foundations/rtl.md +106 -0
  94. package/knowledge/foundations/spacing.md +27 -0
  95. package/knowledge/foundations/theme.md +115 -0
  96. package/knowledge/foundations/tokens.json +12124 -0
  97. package/knowledge/foundations/typography.md +45 -0
  98. package/knowledge/general/accordion.md +79 -0
  99. package/knowledge/general/activity.md +44 -0
  100. package/knowledge/general/app-shell.md +64 -0
  101. package/knowledge/general/area-chart.md +89 -0
  102. package/knowledge/general/audio-player.md +85 -0
  103. package/knowledge/general/avatar-group.md +50 -0
  104. package/knowledge/general/avatar.md +61 -0
  105. package/knowledge/general/carousel-image.md +103 -0
  106. package/knowledge/general/chart.md +25 -0
  107. package/knowledge/general/chip.md +90 -0
  108. package/knowledge/general/code-snippet.md +80 -0
  109. package/knowledge/general/column-chart.md +84 -0
  110. package/knowledge/general/context-menu.md +55 -0
  111. package/knowledge/general/digital-stamp.md +77 -0
  112. package/knowledge/general/divider.md +65 -0
  113. package/knowledge/general/donut-chart.md +75 -0
  114. package/knowledge/general/draggable-list.md +43 -0
  115. package/knowledge/general/dropdown.md +90 -0
  116. package/knowledge/general/empty-state.md +60 -0
  117. package/knowledge/general/filtration.md +85 -0
  118. package/knowledge/general/footer.md +59 -0
  119. package/knowledge/general/line-chart.md +95 -0
  120. package/knowledge/general/list.md +91 -0
  121. package/knowledge/general/media-gallery.md +85 -0
  122. package/knowledge/general/media-viewer.md +78 -0
  123. package/knowledge/general/menu.md +66 -0
  124. package/knowledge/general/metric.md +92 -0
  125. package/knowledge/general/nav-bar.md +62 -0
  126. package/knowledge/general/nav-header.md +125 -0
  127. package/knowledge/general/number.md +72 -0
  128. package/knowledge/general/page-template.md +80 -0
  129. package/knowledge/general/pdf-viewer.md +91 -0
  130. package/knowledge/general/pie-chart-panel.md +86 -0
  131. package/knowledge/general/popover.md +115 -0
  132. package/knowledge/general/progress-circle.md +63 -0
  133. package/knowledge/general/quote.md +64 -0
  134. package/knowledge/general/radial-stepper.md +72 -0
  135. package/knowledge/general/scatter-chart.md +62 -0
  136. package/knowledge/general/second-nav-header.md +55 -0
  137. package/knowledge/general/slideout-menu.md +92 -0
  138. package/knowledge/general/stepper.md +42 -0
  139. package/knowledge/general/structured-list.md +52 -0
  140. package/knowledge/general/table-bulk-actions-bar.md +66 -0
  141. package/knowledge/general/table-of-content.md +49 -0
  142. package/knowledge/general/table.md +113 -0
  143. package/knowledge/general/tree-view.md +55 -0
  144. package/knowledge/general/vertical-tabs.md +48 -0
  145. package/knowledge/general/video-player.md +88 -0
  146. package/knowledge/manifest.json +919 -0
  147. package/knowledge/patterns/buttons-with-sdaia-touch.md +34 -0
  148. package/knowledge/patterns/sdaia-logo-animation.md +35 -0
  149. package/knowledge/patterns/switch-with-sdaia-touch.md +29 -0
  150. package/knowledge/setup.md +125 -0
  151. package/package.json +45 -4
package/knowledge/foundations/colors.md ADDED
@@ -0,0 +1,1117 @@
1
+ # Colors
2
+
3
+ Semantic color tokens (`color-bg-*`, `color-text-*`, `color-border-*`, `brand-*`, …) plus the underlying primitive palette. Always apply semantic tokens; dark values switch automatically under `.theme-dark`.
4
+
5
+ > Resolve any token live with the `get_tokens` tool.
6
+
7
+ ## Base
8
+
9
+ | Token | CSS variable | Light | Dark | Description |
10
+ | --- | --- | --- | --- | --- |
11
+ | `color-primitive-base-white` | `var(--ds-color-primitive-base-white)` | `#ffffff` | — | Pure white #FFFFFF. Universal base for default surfaces in Light mode. Used by Brand collection. |
12
+ | `color-primitive-base-black` | `var(--ds-color-primitive-base-black)` | `#161616` | — | Brand black #161616 (slightly warmer than #000). Used by Brand for max-contrast text and dark surfaces. |
13
+
14
+ ## Neutral
15
+
16
+ | Token | CSS variable | Light | Dark | Description |
17
+ | --- | --- | --- | --- | --- |
18
+ | `color-primitive-neutral-25` | `var(--ds-color-primitive-neutral-25)` | `#fcfcfd` | — | Universal neutral — almost-white tint. Subtle dividers, hover backgrounds on white surfaces. |
19
+ | `color-primitive-neutral-50` | `var(--ds-color-primitive-neutral-50)` | `#f9fafb` | — | Universal neutral — lightest gray. Page sections, alternating rows, soft backgrounds. |
20
+ | `color-primitive-neutral-100` | `var(--ds-color-primitive-neutral-100)` | `#f3f4f6` | — | Universal neutral — light gray. Subtle dividers, alternating rows. |
21
+ | `color-primitive-neutral-200` | `var(--ds-color-primitive-neutral-200)` | `#e5e7eb` | — | Universal neutral — light gray. Default borders, dividers. |
22
+ | `color-primitive-neutral-300` | `var(--ds-color-primitive-neutral-300)` | `#d2d6db` | — | Universal neutral — medium-light gray. Disabled controls, light borders. |
23
+ | `color-primitive-neutral-400` | `var(--ds-color-primitive-neutral-400)` | `#9da4ae` | — | Universal neutral — mid gray. Disabled text, secondary placeholders. |
24
+ | `color-primitive-neutral-500` | `var(--ds-color-primitive-neutral-500)` | `#6c737f` | — | Universal neutral — medium gray. Secondary icons, muted UI. |
25
+ | `color-primitive-neutral-600` | `var(--ds-color-primitive-neutral-600)` | `#4d5761` | — | Universal neutral — medium-dark gray. Body text on white, passes AA. |
26
+ | `color-primitive-neutral-700` | `var(--ds-color-primitive-neutral-700)` | `#384250` | — | Universal neutral — dark gray. Default body text, paragraphs. Passes AAA on white. |
27
+ | `color-primitive-neutral-800` | `var(--ds-color-primitive-neutral-800)` | `#1f2a37` | — | Universal neutral — very dark gray. Display text, headings. Passes AAA on white. |
28
+ | `color-primitive-neutral-900` | `var(--ds-color-primitive-neutral-900)` | `#111927` | — | Universal neutral — near-black. Strong emphasis text. |
29
+ | `color-primitive-neutral-950` | `var(--ds-color-primitive-neutral-950)` | `#0d121c` | — | Universal neutral — darkest gray. Max contrast surfaces and text. |
30
+
31
+ ## Red
32
+
33
+ | Token | CSS variable | Light | Dark | Description |
34
+ | --- | --- | --- | --- | --- |
35
+ | `color-primitive-red-25` | `var(--ds-color-primitive-red-25)` | `#fffbfa` | — | Lightest red tint — subtle danger backgrounds. |
36
+ | `color-primitive-red-50` | `var(--ds-color-primitive-red-50)` | `#fef3f2` | — | Very light red — alert/error backgrounds. |
37
+ | `color-primitive-red-100` | `var(--ds-color-primitive-red-100)` | `#fee4e2` | — | Light red — danger surface tint. |
38
+ | `color-primitive-red-200` | `var(--ds-color-primitive-red-200)` | `#fecdca` | — | Light red — danger borders, decorative accents. Below 3:1 on white. |
39
+ | `color-primitive-red-300` | `var(--ds-color-primitive-red-300)` | `#fda29b` | — | Mid-light red — danger icons on tinted backgrounds. |
40
+ | `color-primitive-red-400` | `var(--ds-color-primitive-red-400)` | `#f97066` | — | Mid red — danger emphasis, hover icons. |
41
+ | `color-primitive-red-500` | `var(--ds-color-primitive-red-500)` | `#f04438` | — | Medium red — danger primary state. |
42
+ | `color-primitive-red-600` | `var(--ds-color-primitive-red-600)` | `#d92d20` | — | Danger anchor red — main danger color. White text passes AA. |
43
+ | `color-primitive-red-700` | `var(--ds-color-primitive-red-700)` | `#b42318` | — | Dark red — danger hover state. White text passes AAA. |
44
+ | `color-primitive-red-800` | `var(--ds-color-primitive-red-800)` | `#912018` | — | Very dark red — danger pressed state. White text passes AAA. |
45
+ | `color-primitive-red-900` | `var(--ds-color-primitive-red-900)` | `#7a271a` | — | Near-darkest red — strong danger emphasis. |
46
+ | `color-primitive-red-950` | `var(--ds-color-primitive-red-950)` | `#55160c` | — | Darkest red — maximum danger emphasis. |
47
+
48
+ ## Yellow
49
+
50
+ | Token | CSS variable | Light | Dark | Description |
51
+ | --- | --- | --- | --- | --- |
52
+ | `color-primitive-yellow-25` | `var(--ds-color-primitive-yellow-25)` | `#fffcf5` | — | Lightest yellow tint — subtle warning backgrounds. |
53
+ | `color-primitive-yellow-50` | `var(--ds-color-primitive-yellow-50)` | `#fffaeb` | — | Very light yellow — warning alert backgrounds. |
54
+ | `color-primitive-yellow-100` | `var(--ds-color-primitive-yellow-100)` | `#fef0c7` | — | Light yellow — warning surface tint. |
55
+ | `color-primitive-yellow-200` | `var(--ds-color-primitive-yellow-200)` | `#fedf89` | — | Light yellow — warning borders, decorative. |
56
+ | `color-primitive-yellow-300` | `var(--ds-color-primitive-yellow-300)` | `#fec84b` | — | Mid-light yellow — warning icons on tinted backgrounds. |
57
+ | `color-primitive-yellow-400` | `var(--ds-color-primitive-yellow-400)` | `#fdb022` | — | Mid yellow — warning accent. |
58
+ | `color-primitive-yellow-500` | `var(--ds-color-primitive-yellow-500)` | `#f79009` | — | Medium yellow/amber — warning primary state. |
59
+ | `color-primitive-yellow-600` | `var(--ds-color-primitive-yellow-600)` | `#dc6803` | — | Warning anchor — main warning color. Use dark text on this — white text fails AA on yellow. |
60
+ | `color-primitive-yellow-700` | `var(--ds-color-primitive-yellow-700)` | `#b54708` | — | Dark yellow/orange — warning hover state. |
61
+ | `color-primitive-yellow-800` | `var(--ds-color-primitive-yellow-800)` | `#93370d` | — | Very dark yellow/orange — warning pressed state. |
62
+ | `color-primitive-yellow-900` | `var(--ds-color-primitive-yellow-900)` | `#7a2e0e` | — | Near-darkest warning — strong emphasis. |
63
+ | `color-primitive-yellow-950` | `var(--ds-color-primitive-yellow-950)` | `#4e1d09` | — | Darkest warning — maximum emphasis. |
64
+
65
+ ## Green
66
+
67
+ | Token | CSS variable | Light | Dark | Description |
68
+ | --- | --- | --- | --- | --- |
69
+ | `color-primitive-green-25` | `var(--ds-color-primitive-green-25)` | `#f6fef9` | — | Lightest green tint — subtle success backgrounds. |
70
+ | `color-primitive-green-50` | `var(--ds-color-primitive-green-50)` | `#ecfdf3` | — | Very light green — success alert backgrounds. |
71
+ | `color-primitive-green-100` | `var(--ds-color-primitive-green-100)` | `#dcfae6` | — | Light green — success surface tint. |
72
+ | `color-primitive-green-200` | `var(--ds-color-primitive-green-200)` | `#abefc6` | — | Light green — success borders, decorative. Below 3:1 on white. |
73
+ | `color-primitive-green-300` | `var(--ds-color-primitive-green-300)` | `#75e0a7` | — | Mid-light green — success icons on tinted backgrounds. |
74
+ | `color-primitive-green-400` | `var(--ds-color-primitive-green-400)` | `#47cd89` | — | Mid green — success emphasis. |
75
+ | `color-primitive-green-500` | `var(--ds-color-primitive-green-500)` | `#17b26a` | — | Medium green — success primary state. |
76
+ | `color-primitive-green-600` | `var(--ds-color-primitive-green-600)` | `#079455` | — | Success anchor green — main success color. White text passes AA. |
77
+ | `color-primitive-green-700` | `var(--ds-color-primitive-green-700)` | `#067647` | — | Dark green — success hover state. White text passes AAA. |
78
+ | `color-primitive-green-800` | `var(--ds-color-primitive-green-800)` | `#085d3a` | — | Very dark green — success pressed state. |
79
+ | `color-primitive-green-900` | `var(--ds-color-primitive-green-900)` | `#074d31` | — | Near-darkest green — strong success emphasis. |
80
+ | `color-primitive-green-950` | `var(--ds-color-primitive-green-950)` | `#053321` | — | Darkest green — maximum success emphasis. |
81
+
82
+ ## Blue
83
+
84
+ | Token | CSS variable | Light | Dark | Description |
85
+ | --- | --- | --- | --- | --- |
86
+ | `color-primitive-blue-25` | `var(--ds-color-primitive-blue-25)` | `#f5faff` | — | Lightest blue tint — subtle info backgrounds. |
87
+ | `color-primitive-blue-50` | `var(--ds-color-primitive-blue-50)` | `#eff8ff` | — | Very light blue — info alert backgrounds. |
88
+ | `color-primitive-blue-100` | `var(--ds-color-primitive-blue-100)` | `#d1e9ff` | — | Light blue — info surface tint. |
89
+ | `color-primitive-blue-200` | `var(--ds-color-primitive-blue-200)` | `#b2ddff` | — | Light blue — info borders, decorative. |
90
+ | `color-primitive-blue-300` | `var(--ds-color-primitive-blue-300)` | `#84caff` | — | Mid-light blue — info icons on tinted backgrounds. |
91
+ | `color-primitive-blue-400` | `var(--ds-color-primitive-blue-400)` | `#53b1fd` | — | Mid blue — info emphasis. |
92
+ | `color-primitive-blue-500` | `var(--ds-color-primitive-blue-500)` | `#2e90fa` | — | Medium blue — info primary state. |
93
+ | `color-primitive-blue-600` | `var(--ds-color-primitive-blue-600)` | `#1570ef` | — | Info anchor blue — main info color. White text passes AA. |
94
+ | `color-primitive-blue-700` | `var(--ds-color-primitive-blue-700)` | `#175cd3` | — | Dark blue — info hover state. White text passes AAA. |
95
+ | `color-primitive-blue-800` | `var(--ds-color-primitive-blue-800)` | `#1849a9` | — | Very dark blue — info pressed state. |
96
+ | `color-primitive-blue-900` | `var(--ds-color-primitive-blue-900)` | `#194185` | — | Near-darkest blue — strong info emphasis. |
97
+ | `color-primitive-blue-950` | `var(--ds-color-primitive-blue-950)` | `#102a56` | — | Darkest blue — maximum info emphasis. |
98
+
99
+ ## Alpha White
100
+
101
+ | Token | CSS variable | Light | Dark | Description |
102
+ | --- | --- | --- | --- | --- |
103
+ | `color-primitive-alpha-white-10` | `var(--ds-color-primitive-alpha-white-10)` | `#ffffff1a` | — | Universal white overlay at 10% opacity. Routed through Brand for tinted variants per active brand mode. |
104
+ | `color-primitive-alpha-white-20` | `var(--ds-color-primitive-alpha-white-20)` | `#ffffff33` | — | Universal white overlay at 20% opacity. Routed through Brand for tinted variants per active brand mode. |
105
+ | `color-primitive-alpha-white-30` | `var(--ds-color-primitive-alpha-white-30)` | `#ffffff4d` | — | Universal white overlay at 30% opacity. Routed through Brand for tinted variants per active brand mode. |
106
+ | `color-primitive-alpha-white-40` | `var(--ds-color-primitive-alpha-white-40)` | `#ffffff66` | — | Universal white overlay at 40% opacity. Routed through Brand for tinted variants per active brand mode. |
107
+ | `color-primitive-alpha-white-50` | `var(--ds-color-primitive-alpha-white-50)` | `#ffffff80` | — | Universal white overlay at 50% opacity. Routed through Brand for tinted variants per active brand mode. |
108
+ | `color-primitive-alpha-white-60` | `var(--ds-color-primitive-alpha-white-60)` | `#ffffff99` | — | Universal white overlay at 60% opacity. Routed through Brand for tinted variants per active brand mode. |
109
+ | `color-primitive-alpha-white-70` | `var(--ds-color-primitive-alpha-white-70)` | `#ffffffb3` | — | Universal white overlay at 70% opacity. Routed through Brand for tinted variants per active brand mode. |
110
+ | `color-primitive-alpha-white-80` | `var(--ds-color-primitive-alpha-white-80)` | `#ffffffcc` | — | Universal white overlay at 80% opacity. Routed through Brand for tinted variants per active brand mode. |
111
+ | `color-primitive-alpha-white-90` | `var(--ds-color-primitive-alpha-white-90)` | `#ffffffe6` | — | Universal white overlay at 90% opacity. Routed through Brand for tinted variants per active brand mode. |
112
+ | `color-primitive-alpha-white-100` | `var(--ds-color-primitive-alpha-white-100)` | `#ffffff` | — | Universal white overlay at 100% opacity. Routed through Brand for tinted variants per active brand mode. |
113
+ | `color-primitive-alpha-white-0` | `var(--ds-color-primitive-alpha-white-0)` | `#ffffff00` | — | Universal white overlay at 0% opacity. Routed through Brand for tinted variants per active brand mode. |
114
+
115
+ ## Alpha Black
116
+
117
+ | Token | CSS variable | Light | Dark | Description |
118
+ | --- | --- | --- | --- | --- |
119
+ | `color-primitive-alpha-black-10` | `var(--ds-color-primitive-alpha-black-10)` | `#1616161a` | — | Universal black overlay at 10% opacity. Routed through Brand for tinted variants per active brand mode. |
120
+ | `color-primitive-alpha-black-20` | `var(--ds-color-primitive-alpha-black-20)` | `#16161633` | — | Universal black overlay at 20% opacity. Routed through Brand for tinted variants per active brand mode. |
121
+ | `color-primitive-alpha-black-30` | `var(--ds-color-primitive-alpha-black-30)` | `#1616164d` | — | Universal black overlay at 30% opacity. Routed through Brand for tinted variants per active brand mode. |
122
+ | `color-primitive-alpha-black-40` | `var(--ds-color-primitive-alpha-black-40)` | `#16161666` | — | Universal black overlay at 40% opacity. Routed through Brand for tinted variants per active brand mode. |
123
+ | `color-primitive-alpha-black-50` | `var(--ds-color-primitive-alpha-black-50)` | `#16161680` | — | Universal black overlay at 50% opacity. Routed through Brand for tinted variants per active brand mode. |
124
+ | `color-primitive-alpha-black-60` | `var(--ds-color-primitive-alpha-black-60)` | `#16161699` | — | Universal black overlay at 60% opacity. Routed through Brand for tinted variants per active brand mode. |
125
+ | `color-primitive-alpha-black-70` | `var(--ds-color-primitive-alpha-black-70)` | `#161616b3` | — | Universal black overlay at 70% opacity. Routed through Brand for tinted variants per active brand mode. |
126
+ | `color-primitive-alpha-black-80` | `var(--ds-color-primitive-alpha-black-80)` | `#161616cc` | — | Universal black overlay at 80% opacity. Routed through Brand for tinted variants per active brand mode. |
127
+ | `color-primitive-alpha-black-90` | `var(--ds-color-primitive-alpha-black-90)` | `#161616e6` | — | Universal black overlay at 90% opacity. Routed through Brand for tinted variants per active brand mode. |
128
+ | `color-primitive-alpha-black-100` | `var(--ds-color-primitive-alpha-black-100)` | `#161616` | — | Universal black overlay at 100% opacity. Routed through Brand for tinted variants per active brand mode. |
129
+ | `color-primitive-alpha-black-0` | `var(--ds-color-primitive-alpha-black-0)` | `#16161600` | — | Universal black overlay at 0% opacity. Routed through Brand for tinted variants per active brand mode. |
130
+
131
+ ## Alpha Primary
132
+
133
+ | Token | CSS variable | Light | Dark | Description |
134
+ | --- | --- | --- | --- | --- |
135
+ | `color-primitive-alpha-600-primary-100` | `var(--ds-color-primitive-alpha-600-primary-100)` | `#1b8354` | — | Primary brand anchor (600) at 100% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
136
+ | `color-primitive-alpha-600-primary-90` | `var(--ds-color-primitive-alpha-600-primary-90)` | `#1b8354e6` | — | Primary brand anchor (600) at 90% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
137
+ | `color-primitive-alpha-600-primary-80` | `var(--ds-color-primitive-alpha-600-primary-80)` | `#1b8354cc` | — | Primary brand anchor (600) at 80% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
138
+ | `color-primitive-alpha-600-primary-70` | `var(--ds-color-primitive-alpha-600-primary-70)` | `#1b8354b3` | — | Primary brand anchor (600) at 70% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
139
+ | `color-primitive-alpha-600-primary-60` | `var(--ds-color-primitive-alpha-600-primary-60)` | `#1b835499` | — | Primary brand anchor (600) at 60% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
140
+ | `color-primitive-alpha-600-primary-50` | `var(--ds-color-primitive-alpha-600-primary-50)` | `#1b835480` | — | Primary brand anchor (600) at 50% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
141
+ | `color-primitive-alpha-600-primary-40` | `var(--ds-color-primitive-alpha-600-primary-40)` | `#1b835466` | — | Primary brand anchor (600) at 40% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
142
+ | `color-primitive-alpha-600-primary-30` | `var(--ds-color-primitive-alpha-600-primary-30)` | `#1b83544d` | — | Primary brand anchor (600) at 30% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
143
+ | `color-primitive-alpha-600-primary-20` | `var(--ds-color-primitive-alpha-600-primary-20)` | `#1b835433` | — | Primary brand anchor (600) at 20% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
144
+ | `color-primitive-alpha-600-primary-10` | `var(--ds-color-primitive-alpha-600-primary-10)` | `#1b83541a` | — | Primary brand anchor (600) at 10% opacity. Brand-tinted overlays for hover/pressed states on brand surfaces. |
145
+
146
+ ## Alpha Yellow
147
+
148
+ | Token | CSS variable | Light | Dark | Description |
149
+ | --- | --- | --- | --- | --- |
150
+ | `color-primitive-alpha-yellow-10` | `var(--ds-color-primitive-alpha-yellow-10)` | `#dc68031a` | — | Yellow overlay — subtle warning tint at 10% opacity. Glass effects, subtle hover states on semantic surfaces. |
151
+ | `color-primitive-alpha-yellow-20` | `var(--ds-color-primitive-alpha-yellow-20)` | `#dc680333` | — | Yellow overlay — subtle warning tint at 20% opacity. Hover/pressed tints on semantic surfaces. |
152
+
153
+ ## Alpha Red
154
+
155
+ | Token | CSS variable | Light | Dark | Description |
156
+ | --- | --- | --- | --- | --- |
157
+ | `color-primitive-alpha-red-10` | `var(--ds-color-primitive-alpha-red-10)` | `#d92d201a` | — | Red overlay — subtle danger tint at 10% opacity. Glass effects, subtle hover states on semantic surfaces. |
158
+ | `color-primitive-alpha-red-20` | `var(--ds-color-primitive-alpha-red-20)` | `#d92d2033` | — | Red overlay — subtle danger tint at 20% opacity. Hover/pressed tints on semantic surfaces. |
159
+
160
+ ## Alpha Blue
161
+
162
+ | Token | CSS variable | Light | Dark | Description |
163
+ | --- | --- | --- | --- | --- |
164
+ | `color-primitive-alpha-blue-10` | `var(--ds-color-primitive-alpha-blue-10)` | `#1570ef1a` | — | Blue overlay — subtle info tint at 10% opacity. Glass effects, subtle hover states on semantic surfaces. |
165
+ | `color-primitive-alpha-blue-20` | `var(--ds-color-primitive-alpha-blue-20)` | `#1570ef33` | — | Blue overlay — subtle info tint at 20% opacity. Hover/pressed tints on semantic surfaces. |
166
+
167
+ ## Alpha Green
168
+
169
+ | Token | CSS variable | Light | Dark | Description |
170
+ | --- | --- | --- | --- | --- |
171
+ | `color-primitive-alpha-green-10` | `var(--ds-color-primitive-alpha-green-10)` | `#0794551a` | — | Green overlay — subtle success tint at 10% opacity. Glass effects, subtle hover states on semantic surfaces. |
172
+ | `color-primitive-alpha-green-20` | `var(--ds-color-primitive-alpha-green-20)` | `#07945533` | — | Green overlay — subtle success tint at 20% opacity. Hover/pressed tints on semantic surfaces. |
173
+
174
+ ## Other
175
+
176
+ | Token | CSS variable | Light | Dark | Description |
177
+ | --- | --- | --- | --- | --- |
178
+ | `primitives-colors-universal-lavender-25` | `var(--ds-primitives-colors-universal-lavender-25)` | `#fefcff` | — | |
179
+ | `primitives-colors-universal-lavender-50` | `var(--ds-primitives-colors-universal-lavender-50)` | `#f9f5fa` | — | |
180
+ | `primitives-colors-universal-lavender-100` | `var(--ds-primitives-colors-universal-lavender-100)` | `#f2e9f5` | — | |
181
+ | `primitives-colors-universal-lavender-200` | `var(--ds-primitives-colors-universal-lavender-200)` | `#e1cce8` | — | |
182
+ | `primitives-colors-universal-lavender-300` | `var(--ds-primitives-colors-universal-lavender-300)` | `#ccadd9` | — | |
183
+ | `primitives-colors-universal-lavender-400` | `var(--ds-primitives-colors-universal-lavender-400)` | `#a57bba` | — | |
184
+ | `primitives-colors-universal-lavender-500` | `var(--ds-primitives-colors-universal-lavender-500)` | `#80519f` | — | |
185
+ | `primitives-colors-universal-lavender-600` | `var(--ds-primitives-colors-universal-lavender-600)` | `#6d428f` | — | |
186
+ | `primitives-colors-universal-lavender-700` | `var(--ds-primitives-colors-universal-lavender-700)` | `#532d75` | — | |
187
+ | `primitives-colors-universal-lavender-800` | `var(--ds-primitives-colors-universal-lavender-800)` | `#3d1d5e` | — | |
188
+ | `primitives-colors-universal-lavender-900` | `var(--ds-primitives-colors-universal-lavender-900)` | `#281047` | — | |
189
+ | `primitives-colors-universal-lavender-950` | `var(--ds-primitives-colors-universal-lavender-950)` | `#16072e` | — | |
190
+ | `primitives-colors-universal-gold-25` | `var(--ds-primitives-colors-universal-gold-25)` | `#fffef7` | — | |
191
+ | `primitives-colors-universal-gold-50` | `var(--ds-primitives-colors-universal-gold-50)` | `#fffef2` | — | |
192
+ | `primitives-colors-universal-gold-100` | `var(--ds-primitives-colors-universal-gold-100)` | `#fffce6` | — | |
193
+ | `primitives-colors-universal-gold-200` | `var(--ds-primitives-colors-universal-gold-200)` | `#fcf3bd` | — | |
194
+ | `primitives-colors-universal-gold-300` | `var(--ds-primitives-colors-universal-gold-300)` | `#fae996` | — | |
195
+ | `primitives-colors-universal-gold-400` | `var(--ds-primitives-colors-universal-gold-400)` | `#f7d54d` | — | |
196
+ | `primitives-colors-universal-gold-500` | `var(--ds-primitives-colors-universal-gold-500)` | `#f5bd02` | — | |
197
+ | `primitives-colors-universal-gold-600` | `var(--ds-primitives-colors-universal-gold-600)` | `#dba102` | — | |
198
+ | `primitives-colors-universal-gold-700` | `var(--ds-primitives-colors-universal-gold-700)` | `#b87b02` | — | |
199
+ | `primitives-colors-universal-gold-800` | `var(--ds-primitives-colors-universal-gold-800)` | `#945c01` | — | |
200
+ | `primitives-colors-universal-gold-900` | `var(--ds-primitives-colors-universal-gold-900)` | `#6e3c00` | — | |
201
+ | `primitives-colors-universal-gold-950` | `var(--ds-primitives-colors-universal-gold-950)` | `#472400` | — | |
202
+ | `color-primitive-public-lavender-25` | `var(--ds-color-primitive-public-lavender-25)` | `#fefcff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
203
+ | `color-primitive-public-lavender-50` | `var(--ds-color-primitive-public-lavender-50)` | `#f9f5fa` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
204
+ | `color-primitive-public-lavender-100` | `var(--ds-color-primitive-public-lavender-100)` | `#f2e9f5` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
205
+ | `color-primitive-public-lavender-200` | `var(--ds-color-primitive-public-lavender-200)` | `#e1cce8` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
206
+ | `color-primitive-public-lavender-300` | `var(--ds-color-primitive-public-lavender-300)` | `#ccadd9` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
207
+ | `color-primitive-public-lavender-400` | `var(--ds-color-primitive-public-lavender-400)` | `#a57bba` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
208
+ | `color-primitive-public-lavender-700` | `var(--ds-color-primitive-public-lavender-700)` | `#532d75` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
209
+ | `color-primitive-public-lavender-800` | `var(--ds-color-primitive-public-lavender-800)` | `#3d1d5e` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
210
+ | `color-primitive-public-lavender-900` | `var(--ds-color-primitive-public-lavender-900)` | `#281047` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
211
+ | `color-primitive-public-lavender-950` | `var(--ds-color-primitive-public-lavender-950)` | `#16072e` | — | Darkest variant. Used by Brand collection. |
212
+ | `color-primitive-public-lavender-500` | `var(--ds-color-primitive-public-lavender-500)` | `#80519f` | — | Tertiary brand anchor — main tertiary brand color value. Used by Brand collection — do not bind directly to components. |
213
+ | `color-primitive-public-lavender-600` | `var(--ds-color-primitive-public-lavender-600)` | `#6d428f` | — | Medium-dark shade. Passes AA on white. Used by Brand collection. |
214
+ | `color-primitive-private-blue-25` | `var(--ds-color-primitive-private-blue-25)` | `#f0f9ff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
215
+ | `color-primitive-private-blue-50` | `var(--ds-color-primitive-private-blue-50)` | `#e0f2fe` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
216
+ | `color-primitive-private-blue-100` | `var(--ds-color-primitive-private-blue-100)` | `#bae6fd` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
217
+ | `color-primitive-private-blue-200` | `var(--ds-color-primitive-private-blue-200)` | `#7dd3fc` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
218
+ | `color-primitive-private-blue-300` | `var(--ds-color-primitive-private-blue-300)` | `#38bdf8` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
219
+ | `color-primitive-private-blue-400` | `var(--ds-color-primitive-private-blue-400)` | `#0ea5e9` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
220
+ | `primitives-colors-brand-spectrum-blue-500` | `var(--ds-primitives-colors-brand-spectrum-blue-500)` | `#256bad` | — | |
221
+ | `color-primitive-private-blue-700` | `var(--ds-color-primitive-private-blue-700)` | `#075985` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
222
+ | `color-primitive-private-blue-800` | `var(--ds-color-primitive-private-blue-800)` | `#0c4a6e` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
223
+ | `color-primitive-private-blue-900` | `var(--ds-color-primitive-private-blue-900)` | `#082f49` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
224
+ | `color-primitive-private-blue-950` | `var(--ds-color-primitive-private-blue-950)` | `#051d2e` | — | Darkest variant. Used by Brand collection. |
225
+ | `color-primitive-private-blue-600` | `var(--ds-color-primitive-private-blue-600)` | `#233474` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
226
+ | `color-primitive-private-cyan-25` | `var(--ds-color-primitive-private-cyan-25)` | `#f0fdfa` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
227
+ | `color-primitive-private-cyan-50` | `var(--ds-color-primitive-private-cyan-50)` | `#ccfbf1` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
228
+ | `primitives-colors-brand-spectrum-cyan-100` | `var(--ds-primitives-colors-brand-spectrum-cyan-100)` | `#b8f1e6` | — | |
229
+ | `primitives-colors-brand-spectrum-cyan-200` | `var(--ds-primitives-colors-brand-spectrum-cyan-200)` | `#8eded0` | — | |
230
+ | `primitives-colors-brand-spectrum-cyan-300` | `var(--ds-primitives-colors-brand-spectrum-cyan-300)` | `#60cbbb` | — | |
231
+ | `color-primitive-private-cyan-400` | `var(--ds-color-primitive-private-cyan-400)` | `#14b8a6` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
232
+ | `primitives-colors-brand-spectrum-cyan-500` | `var(--ds-primitives-colors-brand-spectrum-cyan-500)` | `#16a293` | — | |
233
+ | `primitives-colors-brand-spectrum-cyan-600` | `var(--ds-primitives-colors-brand-spectrum-cyan-600)` | `#178c80` | — | |
234
+ | `primitives-colors-brand-spectrum-cyan-700` | `var(--ds-primitives-colors-brand-spectrum-cyan-700)` | `#17766d` | — | |
235
+ | `primitives-colors-brand-spectrum-cyan-800` | `var(--ds-primitives-colors-brand-spectrum-cyan-800)` | `#15625b` | — | |
236
+ | `color-primitive-private-cyan-900` | `var(--ds-color-primitive-private-cyan-900)` | `#134e4a` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
237
+ | `primitives-colors-brand-spectrum-cyan-950` | `var(--ds-primitives-colors-brand-spectrum-cyan-950)` | `#002f2b` | — | |
238
+ | `color-primitive-private-indigo-25` | `var(--ds-color-primitive-private-indigo-25)` | `#f5f3ff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
239
+ | `color-primitive-private-indigo-50` | `var(--ds-color-primitive-private-indigo-50)` | `#ede9fe` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
240
+ | `primitives-colors-brand-spectrum-indigo-100` | `var(--ds-primitives-colors-brand-spectrum-indigo-100)` | `#ddd6fe` | — | |
241
+ | `primitives-colors-brand-spectrum-indigo-200` | `var(--ds-primitives-colors-brand-spectrum-indigo-200)` | `#c4b5fd` | — | |
242
+ | `primitives-colors-brand-spectrum-indigo-300` | `var(--ds-primitives-colors-brand-spectrum-indigo-300)` | `#a78bfa` | — | |
243
+ | `primitives-colors-brand-spectrum-indigo-400` | `var(--ds-primitives-colors-brand-spectrum-indigo-400)` | `#8b5cf6` | — | |
244
+ | `primitives-colors-brand-spectrum-indigo-600` | `var(--ds-primitives-colors-brand-spectrum-indigo-600)` | `#6d28d9` | — | |
245
+ | `primitives-colors-brand-spectrum-indigo-700` | `var(--ds-primitives-colors-brand-spectrum-indigo-700)` | `#5b21b6` | — | |
246
+ | `primitives-colors-brand-spectrum-indigo-800` | `var(--ds-primitives-colors-brand-spectrum-indigo-800)` | `#4c1d95` | — | |
247
+ | `color-primitive-private-indigo-900` | `var(--ds-color-primitive-private-indigo-900)` | `#3b0764` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
248
+ | `primitives-colors-brand-spectrum-indigo-950` | `var(--ds-primitives-colors-brand-spectrum-indigo-950)` | `#1e0338` | — | |
249
+ | `color-primitive-private-indigo-500` | `var(--ds-color-primitive-private-indigo-500)` | `#7c3aed` | — | Tertiary brand anchor — main tertiary brand color value. Used by Brand collection — do not bind directly to components. |
250
+ | `primitives-colors-brand-spectrum-indigo-25-alt` | `var(--ds-primitives-colors-brand-spectrum-indigo-25-alt)` | `#f3f2fe` | — | |
251
+ | `primitives-colors-brand-spectrum-indigo-50-alt` | `var(--ds-primitives-colors-brand-spectrum-indigo-50-alt)` | `#eeecfd` | — | |
252
+ | `primitives-colors-brand-spectrum-indigo-900-alt` | `var(--ds-primitives-colors-brand-spectrum-indigo-900-alt)` | `#2d1a5e` | — | |
253
+ | `color-primitive-private-neutral-25` | `var(--ds-color-primitive-private-neutral-25)` | `#fafbfd` | — | Brand-tinted neutral (25) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
254
+ | `color-primitive-private-neutral-50` | `var(--ds-color-primitive-private-neutral-50)` | `#f8fafc` | — | Brand-tinted neutral (50) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
255
+ | `color-primitive-private-neutral-100` | `var(--ds-color-primitive-private-neutral-100)` | `#f1f5f9` | — | Brand-tinted neutral (100) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
256
+ | `color-primitive-private-neutral-200` | `var(--ds-color-primitive-private-neutral-200)` | `#e2e8f0` | — | Brand-tinted neutral (200) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
257
+ | `color-primitive-private-neutral-300` | `var(--ds-color-primitive-private-neutral-300)` | `#cbd5e1` | — | Brand-tinted neutral (300) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
258
+ | `color-primitive-private-neutral-400` | `var(--ds-color-primitive-private-neutral-400)` | `#94a3b8` | — | Brand-tinted neutral (400) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
259
+ | `color-primitive-private-neutral-700` | `var(--ds-color-primitive-private-neutral-700)` | `#334155` | — | Brand-tinted neutral (700) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
260
+ | `color-primitive-private-neutral-800` | `var(--ds-color-primitive-private-neutral-800)` | `#1e293b` | — | Brand-tinted neutral (800) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
261
+ | `color-primitive-private-neutral-900` | `var(--ds-color-primitive-private-neutral-900)` | `#0f172a` | — | Brand-tinted neutral (900) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
262
+ | `color-primitive-private-neutral-950` | `var(--ds-color-primitive-private-neutral-950)` | `#020617` | — | Brand-tinted neutral (950) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
263
+ | `color-primitive-private-neutral-500` | `var(--ds-color-primitive-private-neutral-500)` | `#64748b` | — | Brand-tinted neutral (500) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
264
+ | `color-primitive-private-neutral-600` | `var(--ds-color-primitive-private-neutral-600)` | `#475569` | — | Brand-tinted neutral (600) — neutral shade adjusted for the active brand mode (warm or cool). Used by Brand collection. |
265
+ | `color-primitive-private-base-white` | `var(--ds-color-primitive-private-base-white)` | `#f8fafc` | — | Brand-tinted base white. Default page surface in Light mode for this brand. Used by Brand collection. |
266
+ | `color-primitive-private-base-black` | `var(--ds-color-primitive-private-base-black)` | `#0c1e3a` | — | Brand-tinted base black. Default page surface in Dark mode for this brand. Used by Brand collection. |
267
+ | `color-primitive-private-alpha-white-0` | `var(--ds-color-primitive-private-alpha-white-0)` | `#f8fafc00` | — | Brand-tinted white overlay at 0% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
268
+ | `color-primitive-private-alpha-white-10` | `var(--ds-color-primitive-private-alpha-white-10)` | `#f8fafc1a` | — | Brand-tinted white overlay at 10% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
269
+ | `color-primitive-private-alpha-white-20` | `var(--ds-color-primitive-private-alpha-white-20)` | `#f8fafc33` | — | Brand-tinted white overlay at 20% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
270
+ | `color-primitive-private-alpha-white-30` | `var(--ds-color-primitive-private-alpha-white-30)` | `#f8fafc4d` | — | Brand-tinted white overlay at 30% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
271
+ | `color-primitive-private-alpha-white-40` | `var(--ds-color-primitive-private-alpha-white-40)` | `#f8fafc66` | — | Brand-tinted white overlay at 40% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
272
+ | `color-primitive-private-alpha-white-50` | `var(--ds-color-primitive-private-alpha-white-50)` | `#f8fafc80` | — | Brand-tinted white overlay at 50% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
273
+ | `color-primitive-private-alpha-white-60` | `var(--ds-color-primitive-private-alpha-white-60)` | `#f8fafc99` | — | Brand-tinted white overlay at 60% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
274
+ | `color-primitive-private-alpha-white-70` | `var(--ds-color-primitive-private-alpha-white-70)` | `#f8fafcb3` | — | Brand-tinted white overlay at 70% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
275
+ | `color-primitive-private-alpha-white-80` | `var(--ds-color-primitive-private-alpha-white-80)` | `#f8fafccc` | — | Brand-tinted white overlay at 80% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
276
+ | `color-primitive-private-alpha-white-90` | `var(--ds-color-primitive-private-alpha-white-90)` | `#f8fafce6` | — | Brand-tinted white overlay at 90% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
277
+ | `color-primitive-private-alpha-white-100` | `var(--ds-color-primitive-private-alpha-white-100)` | `#f8fafc` | — | Brand-tinted white overlay at 100% opacity. Hover/pressed tints on dark surfaces. Used by Brand collection. |
278
+ | `color-primitive-private-alpha-black-0` | `var(--ds-color-primitive-private-alpha-black-0)` | `#02061700` | — | Brand-tinted black overlay at 0% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
279
+ | `color-primitive-private-alpha-black-10` | `var(--ds-color-primitive-private-alpha-black-10)` | `#0206171a` | — | Brand-tinted black overlay at 10% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
280
+ | `color-primitive-private-alpha-black-20` | `var(--ds-color-primitive-private-alpha-black-20)` | `#02061733` | — | Brand-tinted black overlay at 20% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
281
+ | `color-primitive-private-alpha-black-30` | `var(--ds-color-primitive-private-alpha-black-30)` | `#0206174d` | — | Brand-tinted black overlay at 30% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
282
+ | `color-primitive-private-alpha-black-40` | `var(--ds-color-primitive-private-alpha-black-40)` | `#02061766` | — | Brand-tinted black overlay at 40% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
283
+ | `color-primitive-private-alpha-black-50` | `var(--ds-color-primitive-private-alpha-black-50)` | `#02061780` | — | Brand-tinted black overlay at 50% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
284
+ | `color-primitive-private-alpha-black-60` | `var(--ds-color-primitive-private-alpha-black-60)` | `#02061799` | — | Brand-tinted black overlay at 60% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
285
+ | `color-primitive-private-alpha-black-70` | `var(--ds-color-primitive-private-alpha-black-70)` | `#020617b3` | — | Brand-tinted black overlay at 70% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
286
+ | `color-primitive-private-alpha-black-80` | `var(--ds-color-primitive-private-alpha-black-80)` | `#020617cc` | — | Brand-tinted black overlay at 80% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
287
+ | `color-primitive-private-alpha-black-90` | `var(--ds-color-primitive-private-alpha-black-90)` | `#020617e6` | — | Brand-tinted black overlay at 90% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
288
+ | `color-primitive-private-alpha-black-100` | `var(--ds-color-primitive-private-alpha-black-100)` | `#020617` | — | Brand-tinted black overlay at 100% opacity. Scrim, hover tints on light surfaces. Used by Brand collection. |
289
+ | `primitives-colors-brand-spectrum-amber-25` | `var(--ds-primitives-colors-brand-spectrum-amber-25)` | `#fffbf5` | — | |
290
+ | `primitives-colors-brand-spectrum-amber-50` | `var(--ds-primitives-colors-brand-spectrum-amber-50)` | `#fff7eb` | — | |
291
+ | `primitives-colors-brand-spectrum-amber-100` | `var(--ds-primitives-colors-brand-spectrum-amber-100)` | `#ffeed8` | — | |
292
+ | `primitives-colors-brand-spectrum-amber-200` | `var(--ds-primitives-colors-brand-spectrum-amber-200)` | `#ffdbb1` | — | |
293
+ | `primitives-colors-brand-spectrum-amber-300` | `var(--ds-primitives-colors-brand-spectrum-amber-300)` | `#ffc988` | — | |
294
+ | `primitives-colors-brand-spectrum-amber-400` | `var(--ds-primitives-colors-brand-spectrum-amber-400)` | `#feb55a` | — | |
295
+ | `primitives-colors-brand-spectrum-amber-500` | `var(--ds-primitives-colors-brand-spectrum-amber-500)` | `#de9a49` | — | |
296
+ | `primitives-colors-brand-spectrum-amber-600` | `var(--ds-primitives-colors-brand-spectrum-amber-600)` | `#be8039` | — | |
297
+ | `primitives-colors-brand-spectrum-amber-700` | `var(--ds-primitives-colors-brand-spectrum-amber-700)` | `#a06729` | — | |
298
+ | `primitives-colors-brand-spectrum-amber-800` | `var(--ds-primitives-colors-brand-spectrum-amber-800)` | `#824f1a` | — | |
299
+ | `primitives-colors-brand-spectrum-amber-900` | `var(--ds-primitives-colors-brand-spectrum-amber-900)` | `#66380a` | — | |
300
+ | `primitives-colors-brand-spectrum-amber-950` | `var(--ds-primitives-colors-brand-spectrum-amber-950)` | `#431800` | — | |
301
+ | `primitives-colors-brand-spectrum-emerald-25` | `var(--ds-primitives-colors-brand-spectrum-emerald-25)` | `#f5fcf9` | — | |
302
+ | `primitives-colors-brand-spectrum-emerald-50` | `var(--ds-primitives-colors-brand-spectrum-emerald-50)` | `#ebfaf3` | — | |
303
+ | `primitives-colors-brand-spectrum-emerald-100` | `var(--ds-primitives-colors-brand-spectrum-emerald-100)` | `#dbf5e9` | — | |
304
+ | `primitives-colors-brand-spectrum-emerald-200` | `var(--ds-primitives-colors-brand-spectrum-emerald-200)` | `#b9ebd4` | — | |
305
+ | `primitives-colors-brand-spectrum-emerald-300` | `var(--ds-primitives-colors-brand-spectrum-emerald-300)` | `#96e1bf` | — | |
306
+ | `primitives-colors-brand-spectrum-emerald-400` | `var(--ds-primitives-colors-brand-spectrum-emerald-400)` | `#6dd7ab` | — | |
307
+ | `primitives-colors-brand-spectrum-emerald-600` | `var(--ds-primitives-colors-brand-spectrum-emerald-600)` | `#2ba980` | — | |
308
+ | `primitives-colors-brand-spectrum-emerald-700` | `var(--ds-primitives-colors-brand-spectrum-emerald-700)` | `#22876a` | — | |
309
+ | `primitives-colors-brand-spectrum-emerald-800` | `var(--ds-primitives-colors-brand-spectrum-emerald-800)` | `#196655` | — | |
310
+ | `primitives-colors-brand-spectrum-emerald-900` | `var(--ds-primitives-colors-brand-spectrum-emerald-900)` | `#104740` | — | |
311
+ | `primitives-colors-brand-spectrum-emerald-950` | `var(--ds-primitives-colors-brand-spectrum-emerald-950)` | `#002b25` | — | |
312
+ | `primitives-colors-brand-spectrum-emerald-500-primary` | `var(--ds-primitives-colors-brand-spectrum-emerald-500-primary)` | `#35cc97` | — | |
313
+ | `primitives-colors-brand-dessert-red-25` | `var(--ds-primitives-colors-brand-dessert-red-25)` | `#fff5f5` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
314
+ | `primitives-colors-brand-dessert-red-50` | `var(--ds-primitives-colors-brand-dessert-red-50)` | `#ffecec` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
315
+ | `primitives-colors-brand-dessert-red-100` | `var(--ds-primitives-colors-brand-dessert-red-100)` | `#ffd5d5` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
316
+ | `primitives-colors-brand-dessert-red-200` | `var(--ds-primitives-colors-brand-dessert-red-200)` | `#ffaaaa` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
317
+ | `primitives-colors-brand-dessert-red-300` | `var(--ds-primitives-colors-brand-dessert-red-300)` | `#ff8080` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
318
+ | `primitives-colors-brand-dessert-red-400` | `var(--ds-primitives-colors-brand-dessert-red-400)` | `#ff6b6b` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
319
+ | `primitives-colors-brand-dessert-red-700` | `var(--ds-primitives-colors-brand-dessert-red-700)` | `#e54545` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
320
+ | `primitives-colors-brand-dessert-red-800` | `var(--ds-primitives-colors-brand-dessert-red-800)` | `#cc2b2b` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
321
+ | `primitives-colors-brand-dessert-red-900` | `var(--ds-primitives-colors-brand-dessert-red-900)` | `#991515` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
322
+ | `primitives-colors-brand-dessert-red-950` | `var(--ds-primitives-colors-brand-dessert-red-950)` | `#660a0a` | — | Darkest variant. Used by Brand collection. |
323
+ | `primitives-colors-brand-dessert-red-600-primary` | `var(--ds-primitives-colors-brand-dessert-red-600-primary)` | `#ff5f5f` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
324
+ | `primitives-colors-brand-dessert-purple-25` | `var(--ds-primitives-colors-brand-dessert-purple-25)` | `#f9f5ff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
325
+ | `primitives-colors-brand-dessert-purple-50` | `var(--ds-primitives-colors-brand-dessert-purple-50)` | `#f0e8ff` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
326
+ | `primitives-colors-brand-dessert-purple-400` | `var(--ds-primitives-colors-brand-dessert-purple-400)` | `#b794f4` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
327
+ | `primitives-colors-brand-dessert-purple-800` | `var(--ds-primitives-colors-brand-dessert-purple-800)` | `#6b3fc4` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
328
+ | `primitives-colors-brand-dessert-purple-900` | `var(--ds-primitives-colors-brand-dessert-purple-900)` | `#4a2b8a` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
329
+ | `primitives-colors-brand-dessert-orange-25` | `var(--ds-primitives-colors-brand-dessert-orange-25)` | `#fff8f4` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
330
+ | `primitives-colors-brand-dessert-orange-50` | `var(--ds-primitives-colors-brand-dessert-orange-50)` | `#fff0e8` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
331
+ | `primitives-colors-brand-dessert-orange-700` | `var(--ds-primitives-colors-brand-dessert-orange-700)` | `#e85a3a` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
332
+ | `primitives-colors-brand-dessert-orange-900` | `var(--ds-primitives-colors-brand-dessert-orange-900)` | `#c03a20` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
333
+ | `primitives-colors-brand-dessert-orange-500-primary` | `var(--ds-primitives-colors-brand-dessert-orange-500-primary)` | `#ff7e5f` | — | Tertiary brand anchor — main tertiary brand color value. Used by Brand collection — do not bind directly to components. |
334
+ | `primitives-colors-brand-dessert-neutral-25` | `var(--ds-primitives-colors-brand-dessert-neutral-25)` | `#fefaf7` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
335
+ | `primitives-colors-brand-dessert-neutral-50` | `var(--ds-primitives-colors-brand-dessert-neutral-50)` | `#fdf3ec` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
336
+ | `primitives-colors-brand-dessert-neutral-100` | `var(--ds-primitives-colors-brand-dessert-neutral-100)` | `#f5e8da` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
337
+ | `primitives-colors-brand-dessert-neutral-200` | `var(--ds-primitives-colors-brand-dessert-neutral-200)` | `#ebd8c6` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
338
+ | `primitives-colors-brand-dessert-neutral-300` | `var(--ds-primitives-colors-brand-dessert-neutral-300)` | `#d4bfa8` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
339
+ | `primitives-colors-brand-dessert-neutral-400` | `var(--ds-primitives-colors-brand-dessert-neutral-400)` | `#b8a090` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
340
+ | `primitives-colors-brand-dessert-neutral-500` | `var(--ds-primitives-colors-brand-dessert-neutral-500)` | `#8c8c93` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
341
+ | `primitives-colors-brand-dessert-neutral-600` | `var(--ds-primitives-colors-brand-dessert-neutral-600)` | `#54545a` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
342
+ | `primitives-colors-brand-dessert-neutral-700` | `var(--ds-primitives-colors-brand-dessert-neutral-700)` | `#3a3a40` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
343
+ | `primitives-colors-brand-dessert-neutral-800` | `var(--ds-primitives-colors-brand-dessert-neutral-800)` | `#2a2a2f` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
344
+ | `primitives-colors-brand-dessert-neutral-900` | `var(--ds-primitives-colors-brand-dessert-neutral-900)` | `#1a1a1f` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
345
+ | `primitives-colors-brand-dessert-neutral-950` | `var(--ds-primitives-colors-brand-dessert-neutral-950)` | `#0d0d12` | — | Darkest variant. Used by Brand collection. |
346
+ | `primitives-colors-brand-dessert-base-white` | `var(--ds-primitives-colors-brand-dessert-base-white)` | `#ffffff` | — | Brand-tinted base white. Default page surface in Light mode for Dessert. Used by Brand collection. |
347
+ | `primitives-colors-brand-dessert-base-black` | `var(--ds-primitives-colors-brand-dessert-base-black)` | `#000000` | — | Brand-tinted base black. Default page surface in Dark mode for Dessert. Used by Brand collection. |
348
+ | `primitives-colors-brand-dessert-alpha-alpha-white-0` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-0)` | `#ffffff00` | — | Brand-tinted alpha-white-0 overlay. Used by Brand collection. |
349
+ | `primitives-colors-brand-dessert-alpha-alpha-white-10` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-10)` | `#ffffff1a` | — | Brand-tinted alpha-white-10 overlay. Used by Brand collection. |
350
+ | `primitives-colors-brand-dessert-alpha-alpha-white-20` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-20)` | `#ffffff33` | — | Brand-tinted alpha-white-20 overlay. Used by Brand collection. |
351
+ | `primitives-colors-brand-dessert-alpha-alpha-white-30` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-30)` | `#ffffff4d` | — | Brand-tinted alpha-white-30 overlay. Used by Brand collection. |
352
+ | `primitives-colors-brand-dessert-alpha-alpha-white-40` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-40)` | `#ffffff66` | — | Brand-tinted alpha-white-40 overlay. Used by Brand collection. |
353
+ | `primitives-colors-brand-dessert-alpha-alpha-white-50` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-50)` | `#ffffff80` | — | Brand-tinted alpha-white-50 overlay. Used by Brand collection. |
354
+ | `primitives-colors-brand-dessert-alpha-alpha-white-60` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-60)` | `#ffffff99` | — | Brand-tinted alpha-white-60 overlay. Used by Brand collection. |
355
+ | `primitives-colors-brand-dessert-alpha-alpha-white-70` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-70)` | `#ffffffb3` | — | Brand-tinted alpha-white-70 overlay. Used by Brand collection. |
356
+ | `primitives-colors-brand-dessert-alpha-alpha-white-80` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-80)` | `#ffffffcc` | — | Brand-tinted alpha-white-80 overlay. Used by Brand collection. |
357
+ | `primitives-colors-brand-dessert-alpha-alpha-white-90` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-90)` | `#ffffffe6` | — | Brand-tinted alpha-white-90 overlay. Used by Brand collection. |
358
+ | `primitives-colors-brand-dessert-alpha-alpha-white-100` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-white-100)` | `#ffffff` | — | Brand-tinted alpha-white-100 overlay. Used by Brand collection. |
359
+ | `primitives-colors-brand-dessert-alpha-alpha-black-0` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-0)` | `#00000000` | — | Brand-tinted alpha-black-0 overlay. Used by Brand collection. |
360
+ | `primitives-colors-brand-dessert-alpha-alpha-black-10` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-10)` | `#0000001a` | — | Brand-tinted alpha-black-10 overlay. Used by Brand collection. |
361
+ | `primitives-colors-brand-dessert-alpha-alpha-black-20` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-20)` | `#00000033` | — | Brand-tinted alpha-black-20 overlay. Used by Brand collection. |
362
+ | `primitives-colors-brand-dessert-alpha-alpha-black-30` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-30)` | `#0000004d` | — | Brand-tinted alpha-black-30 overlay. Used by Brand collection. |
363
+ | `primitives-colors-brand-dessert-alpha-alpha-black-40` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-40)` | `#00000066` | — | Brand-tinted alpha-black-40 overlay. Used by Brand collection. |
364
+ | `primitives-colors-brand-dessert-alpha-alpha-black-50` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-50)` | `#00000080` | — | Brand-tinted alpha-black-50 overlay. Used by Brand collection. |
365
+ | `primitives-colors-brand-dessert-alpha-alpha-black-60` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-60)` | `#00000099` | — | Brand-tinted alpha-black-60 overlay. Used by Brand collection. |
366
+ | `primitives-colors-brand-dessert-alpha-alpha-black-70` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-70)` | `#000000b3` | — | Brand-tinted alpha-black-70 overlay. Used by Brand collection. |
367
+ | `primitives-colors-brand-dessert-alpha-alpha-black-80` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-80)` | `#000000cc` | — | Brand-tinted alpha-black-80 overlay. Used by Brand collection. |
368
+ | `primitives-colors-brand-dessert-alpha-alpha-black-90` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-90)` | `#000000e6` | — | Brand-tinted alpha-black-90 overlay. Used by Brand collection. |
369
+ | `primitives-colors-brand-dessert-alpha-alpha-black-100` | `var(--ds-primitives-colors-brand-dessert-alpha-alpha-black-100)` | `#000000` | — | Brand-tinted alpha-black-100 overlay. Used by Brand collection. |
370
+ | `primitives-colors-brand-canvas-blue-25` | `var(--ds-primitives-colors-brand-canvas-blue-25)` | `#f0f7ff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
371
+ | `primitives-colors-brand-canvas-blue-50` | `var(--ds-primitives-colors-brand-canvas-blue-50)` | `#e5f1ff` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
372
+ | `primitives-colors-brand-canvas-blue-100` | `var(--ds-primitives-colors-brand-canvas-blue-100)` | `#cce3ff` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
373
+ | `primitives-colors-brand-canvas-blue-200` | `var(--ds-primitives-colors-brand-canvas-blue-200)` | `#99c7ff` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
374
+ | `primitives-colors-brand-canvas-blue-300` | `var(--ds-primitives-colors-brand-canvas-blue-300)` | `#66aaff` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
375
+ | `primitives-colors-brand-canvas-blue-400` | `var(--ds-primitives-colors-brand-canvas-blue-400)` | `#3d8eff` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
376
+ | `primitives-colors-brand-canvas-blue-700` | `var(--ds-primitives-colors-brand-canvas-blue-700)` | `#0066d6` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
377
+ | `primitives-colors-brand-canvas-blue-800` | `var(--ds-primitives-colors-brand-canvas-blue-800)` | `#0051ab` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
378
+ | `primitives-colors-brand-canvas-blue-900` | `var(--ds-primitives-colors-brand-canvas-blue-900)` | `#003d80` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
379
+ | `primitives-colors-brand-canvas-blue-950` | `var(--ds-primitives-colors-brand-canvas-blue-950)` | `#002855` | — | Darkest variant. Used by Brand collection. |
380
+ | `primitives-colors-brand-canvas-blue-600-primary` | `var(--ds-primitives-colors-brand-canvas-blue-600-primary)` | `#007aff` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
381
+ | `primitives-colors-brand-canvas-cyan-25` | `var(--ds-primitives-colors-brand-canvas-cyan-25)` | `#f0fafe` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
382
+ | `primitives-colors-brand-canvas-cyan-50` | `var(--ds-primitives-colors-brand-canvas-cyan-50)` | `#e0f5fd` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
383
+ | `primitives-colors-brand-canvas-cyan-400` | `var(--ds-primitives-colors-brand-canvas-cyan-400)` | `#5ac8fa` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
384
+ | `primitives-colors-brand-canvas-cyan-800` | `var(--ds-primitives-colors-brand-canvas-cyan-800)` | `#0a7a9e` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
385
+ | `primitives-colors-brand-canvas-cyan-900` | `var(--ds-primitives-colors-brand-canvas-cyan-900)` | `#065a75` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
386
+ | `primitives-colors-brand-canvas-purple-25` | `var(--ds-primitives-colors-brand-canvas-purple-25)` | `#f9f2fe` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
387
+ | `primitives-colors-brand-canvas-purple-50` | `var(--ds-primitives-colors-brand-canvas-purple-50)` | `#f2e5fd` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
388
+ | `primitives-colors-brand-canvas-purple-700` | `var(--ds-primitives-colors-brand-canvas-purple-700)` | `#8a3cad` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
389
+ | `primitives-colors-brand-canvas-purple-900` | `var(--ds-primitives-colors-brand-canvas-purple-900)` | `#3d1a50` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
390
+ | `primitives-colors-brand-canvas-purple-500-primary` | `var(--ds-primitives-colors-brand-canvas-purple-500-primary)` | `#af52de` | — | Tertiary brand anchor — main tertiary brand color value. Used by Brand collection — do not bind directly to components. |
391
+ | `primitives-colors-brand-canvas-neutral-25` | `var(--ds-primitives-colors-brand-canvas-neutral-25)` | `#fafafa` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
392
+ | `primitives-colors-brand-canvas-neutral-50` | `var(--ds-primitives-colors-brand-canvas-neutral-50)` | `#f2f2f7` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
393
+ | `primitives-colors-brand-canvas-neutral-100` | `var(--ds-primitives-colors-brand-canvas-neutral-100)` | `#e5e5ea` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
394
+ | `primitives-colors-brand-canvas-neutral-200` | `var(--ds-primitives-colors-brand-canvas-neutral-200)` | `#d1d1d6` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
395
+ | `primitives-colors-brand-canvas-neutral-300` | `var(--ds-primitives-colors-brand-canvas-neutral-300)` | `#c7c7cc` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
396
+ | `primitives-colors-brand-canvas-neutral-400` | `var(--ds-primitives-colors-brand-canvas-neutral-400)` | `#aeaeb2` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
397
+ | `primitives-colors-brand-canvas-neutral-500` | `var(--ds-primitives-colors-brand-canvas-neutral-500)` | `#8e8e93` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
398
+ | `primitives-colors-brand-canvas-neutral-600` | `var(--ds-primitives-colors-brand-canvas-neutral-600)` | `#636366` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
399
+ | `primitives-colors-brand-canvas-neutral-700` | `var(--ds-primitives-colors-brand-canvas-neutral-700)` | `#48484a` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
400
+ | `primitives-colors-brand-canvas-neutral-800` | `var(--ds-primitives-colors-brand-canvas-neutral-800)` | `#3a3a3c` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
401
+ | `primitives-colors-brand-canvas-neutral-900` | `var(--ds-primitives-colors-brand-canvas-neutral-900)` | `#2c2c2e` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
402
+ | `primitives-colors-brand-canvas-neutral-950` | `var(--ds-primitives-colors-brand-canvas-neutral-950)` | `#1c1c1e` | — | Darkest variant. Used by Brand collection. |
403
+ | `primitives-colors-brand-canvas-base-white` | `var(--ds-primitives-colors-brand-canvas-base-white)` | `#ffffff` | — | Brand-tinted base white. Default page surface in Light mode for Canvas. Used by Brand collection. |
404
+ | `primitives-colors-brand-canvas-base-black` | `var(--ds-primitives-colors-brand-canvas-base-black)` | `#000000` | — | Brand-tinted base black. Default page surface in Dark mode for Canvas. Used by Brand collection. |
405
+ | `primitives-colors-brand-canvas-alpha-alpha-white-0` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-0)` | `#ffffff00` | — | Brand-tinted alpha-white-0 overlay. Used by Brand collection. |
406
+ | `primitives-colors-brand-canvas-alpha-alpha-white-10` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-10)` | `#ffffff1a` | — | Brand-tinted alpha-white-10 overlay. Used by Brand collection. |
407
+ | `primitives-colors-brand-canvas-alpha-alpha-white-20` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-20)` | `#ffffff33` | — | Brand-tinted alpha-white-20 overlay. Used by Brand collection. |
408
+ | `primitives-colors-brand-canvas-alpha-alpha-white-30` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-30)` | `#ffffff4d` | — | Brand-tinted alpha-white-30 overlay. Used by Brand collection. |
409
+ | `primitives-colors-brand-canvas-alpha-alpha-white-40` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-40)` | `#ffffff66` | — | Brand-tinted alpha-white-40 overlay. Used by Brand collection. |
410
+ | `primitives-colors-brand-canvas-alpha-alpha-white-50` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-50)` | `#ffffff80` | — | Brand-tinted alpha-white-50 overlay. Used by Brand collection. |
411
+ | `primitives-colors-brand-canvas-alpha-alpha-white-60` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-60)` | `#ffffff99` | — | Brand-tinted alpha-white-60 overlay. Used by Brand collection. |
412
+ | `primitives-colors-brand-canvas-alpha-alpha-white-70` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-70)` | `#ffffffb3` | — | Brand-tinted alpha-white-70 overlay. Used by Brand collection. |
413
+ | `primitives-colors-brand-canvas-alpha-alpha-white-80` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-80)` | `#ffffffcc` | — | Brand-tinted alpha-white-80 overlay. Used by Brand collection. |
414
+ | `primitives-colors-brand-canvas-alpha-alpha-white-90` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-90)` | `#ffffffe6` | — | Brand-tinted alpha-white-90 overlay. Used by Brand collection. |
415
+ | `primitives-colors-brand-canvas-alpha-alpha-white-100` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-white-100)` | `#ffffff` | — | Brand-tinted alpha-white-100 overlay. Used by Brand collection. |
416
+ | `primitives-colors-brand-canvas-alpha-alpha-black-0` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-0)` | `#00000000` | — | Brand-tinted alpha-black-0 overlay. Used by Brand collection. |
417
+ | `primitives-colors-brand-canvas-alpha-alpha-black-10` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-10)` | `#0000001a` | — | Brand-tinted alpha-black-10 overlay. Used by Brand collection. |
418
+ | `primitives-colors-brand-canvas-alpha-alpha-black-20` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-20)` | `#00000033` | — | Brand-tinted alpha-black-20 overlay. Used by Brand collection. |
419
+ | `primitives-colors-brand-canvas-alpha-alpha-black-30` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-30)` | `#0000004d` | — | Brand-tinted alpha-black-30 overlay. Used by Brand collection. |
420
+ | `primitives-colors-brand-canvas-alpha-alpha-black-40` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-40)` | `#00000066` | — | Brand-tinted alpha-black-40 overlay. Used by Brand collection. |
421
+ | `primitives-colors-brand-canvas-alpha-alpha-black-50` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-50)` | `#00000080` | — | Brand-tinted alpha-black-50 overlay. Used by Brand collection. |
422
+ | `primitives-colors-brand-canvas-alpha-alpha-black-60` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-60)` | `#00000099` | — | Brand-tinted alpha-black-60 overlay. Used by Brand collection. |
423
+ | `primitives-colors-brand-canvas-alpha-alpha-black-70` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-70)` | `#000000b3` | — | Brand-tinted alpha-black-70 overlay. Used by Brand collection. |
424
+ | `primitives-colors-brand-canvas-alpha-alpha-black-80` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-80)` | `#000000cc` | — | Brand-tinted alpha-black-80 overlay. Used by Brand collection. |
425
+ | `primitives-colors-brand-canvas-alpha-alpha-black-90` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-90)` | `#000000e6` | — | Brand-tinted alpha-black-90 overlay. Used by Brand collection. |
426
+ | `primitives-colors-brand-canvas-alpha-alpha-black-100` | `var(--ds-primitives-colors-brand-canvas-alpha-alpha-black-100)` | `#000000` | — | Brand-tinted alpha-black-100 overlay. Used by Brand collection. |
427
+ | `primitives-colors-brand-dune-green-25` | `var(--ds-primitives-colors-brand-dune-green-25)` | `#f0fbf3` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
428
+ | `primitives-colors-brand-dune-green-50` | `var(--ds-primitives-colors-brand-dune-green-50)` | `#dbfae8` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
429
+ | `primitives-colors-brand-dune-green-100` | `var(--ds-primitives-colors-brand-dune-green-100)` | `#bbf5d3` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
430
+ | `primitives-colors-brand-dune-green-200` | `var(--ds-primitives-colors-brand-dune-green-200)` | `#85e8b0` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
431
+ | `primitives-colors-brand-dune-green-300` | `var(--ds-primitives-colors-brand-dune-green-300)` | `#4dd38a` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
432
+ | `primitives-colors-brand-dune-green-400` | `var(--ds-primitives-colors-brand-dune-green-400)` | `#26b867` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
433
+ | `primitives-colors-brand-dune-green-700` | `var(--ds-primitives-colors-brand-dune-green-700)` | `#115829` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
434
+ | `primitives-colors-brand-dune-green-800` | `var(--ds-primitives-colors-brand-dune-green-800)` | `#0d4520` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
435
+ | `primitives-colors-brand-dune-green-900` | `var(--ds-primitives-colors-brand-dune-green-900)` | `#093219` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
436
+ | `primitives-colors-brand-dune-green-950` | `var(--ds-primitives-colors-brand-dune-green-950)` | `#051d0e` | — | Darkest variant. Used by Brand collection. |
437
+ | `primitives-colors-brand-dune-green-600-primary` | `var(--ds-primitives-colors-brand-dune-green-600-primary)` | `#166f32` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
438
+ | `primitives-colors-brand-dune-stone-25` | `var(--ds-primitives-colors-brand-dune-stone-25)` | `#f8f8f7` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
439
+ | `primitives-colors-brand-dune-stone-50` | `var(--ds-primitives-colors-brand-dune-stone-50)` | `#f0f0ef` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
440
+ | `primitives-colors-brand-dune-stone-400` | `var(--ds-primitives-colors-brand-dune-stone-400)` | `#454745` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
441
+ | `primitives-colors-brand-dune-stone-800` | `var(--ds-primitives-colors-brand-dune-stone-800)` | `#1e1f1c` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
442
+ | `primitives-colors-brand-dune-stone-900` | `var(--ds-primitives-colors-brand-dune-stone-900)` | `#0e0f0c` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
443
+ | `primitives-colors-brand-dune-lime-25` | `var(--ds-primitives-colors-brand-dune-lime-25)` | `#f7fdf2` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
444
+ | `primitives-colors-brand-dune-lime-50` | `var(--ds-primitives-colors-brand-dune-lime-50)` | `#e2f6d5` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
445
+ | `primitives-colors-brand-dune-lime-700` | `var(--ds-primitives-colors-brand-dune-lime-700)` | `#9fe870` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
446
+ | `primitives-colors-brand-dune-lime-900` | `var(--ds-primitives-colors-brand-dune-lime-900)` | `#054d28` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
447
+ | `primitives-colors-brand-dune-lime-500-primary` | `var(--ds-primitives-colors-brand-dune-lime-500-primary)` | `#cdffad` | — | Tertiary brand anchor — main tertiary brand color value. Used by Brand collection — do not bind directly to components. |
448
+ | `primitives-colors-brand-dune-neutral-25` | `var(--ds-primitives-colors-brand-dune-neutral-25)` | `#fafafa` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
449
+ | `primitives-colors-brand-dune-neutral-50` | `var(--ds-primitives-colors-brand-dune-neutral-50)` | `#f5f5f4` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
450
+ | `primitives-colors-brand-dune-neutral-100` | `var(--ds-primitives-colors-brand-dune-neutral-100)` | `#ebebea` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
451
+ | `primitives-colors-brand-dune-neutral-200` | `var(--ds-primitives-colors-brand-dune-neutral-200)` | `#e8ebe6` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
452
+ | `primitives-colors-brand-dune-neutral-300` | `var(--ds-primitives-colors-brand-dune-neutral-300)` | `#d4d4d2` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
453
+ | `primitives-colors-brand-dune-neutral-400` | `var(--ds-primitives-colors-brand-dune-neutral-400)` | `#696969` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
454
+ | `primitives-colors-brand-dune-neutral-500` | `var(--ds-primitives-colors-brand-dune-neutral-500)` | `#737371` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
455
+ | `primitives-colors-brand-dune-neutral-600` | `var(--ds-primitives-colors-brand-dune-neutral-600)` | `#545452` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
456
+ | `primitives-colors-brand-dune-neutral-700` | `var(--ds-primitives-colors-brand-dune-neutral-700)` | `#454745` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
457
+ | `primitives-colors-brand-dune-neutral-800` | `var(--ds-primitives-colors-brand-dune-neutral-800)` | `#2a2b28` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
458
+ | `primitives-colors-brand-dune-neutral-900` | `var(--ds-primitives-colors-brand-dune-neutral-900)` | `#1a1b18` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
459
+ | `primitives-colors-brand-dune-neutral-950` | `var(--ds-primitives-colors-brand-dune-neutral-950)` | `#0e0f0c` | — | Darkest variant. Used by Brand collection. |
460
+ | `primitives-colors-brand-dune-base-white` | `var(--ds-primitives-colors-brand-dune-base-white)` | `#ffffff` | — | Brand-tinted base white. Default page surface in Light mode for Dune. Used by Brand collection. |
461
+ | `primitives-colors-brand-dune-base-black` | `var(--ds-primitives-colors-brand-dune-base-black)` | `#0e0f0c` | — | Brand-tinted base black. Default page surface in Dark mode for Dune. Used by Brand collection. |
462
+ | `primitives-colors-brand-dune-alpha-alpha-white-0` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-0)` | `#ffffff00` | — | Brand-tinted alpha-white-0 overlay. Used by Brand collection. |
463
+ | `primitives-colors-brand-dune-alpha-alpha-white-10` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-10)` | `#ffffff1a` | — | Brand-tinted alpha-white-10 overlay. Used by Brand collection. |
464
+ | `primitives-colors-brand-dune-alpha-alpha-white-20` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-20)` | `#ffffff33` | — | Brand-tinted alpha-white-20 overlay. Used by Brand collection. |
465
+ | `primitives-colors-brand-dune-alpha-alpha-white-30` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-30)` | `#ffffff4d` | — | Brand-tinted alpha-white-30 overlay. Used by Brand collection. |
466
+ | `primitives-colors-brand-dune-alpha-alpha-white-40` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-40)` | `#ffffff66` | — | Brand-tinted alpha-white-40 overlay. Used by Brand collection. |
467
+ | `primitives-colors-brand-dune-alpha-alpha-white-50` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-50)` | `#ffffff80` | — | Brand-tinted alpha-white-50 overlay. Used by Brand collection. |
468
+ | `primitives-colors-brand-dune-alpha-alpha-white-60` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-60)` | `#ffffff99` | — | Brand-tinted alpha-white-60 overlay. Used by Brand collection. |
469
+ | `primitives-colors-brand-dune-alpha-alpha-white-70` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-70)` | `#ffffffb3` | — | Brand-tinted alpha-white-70 overlay. Used by Brand collection. |
470
+ | `primitives-colors-brand-dune-alpha-alpha-white-80` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-80)` | `#ffffffcc` | — | Brand-tinted alpha-white-80 overlay. Used by Brand collection. |
471
+ | `primitives-colors-brand-dune-alpha-alpha-white-90` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-90)` | `#ffffffe6` | — | Brand-tinted alpha-white-90 overlay. Used by Brand collection. |
472
+ | `primitives-colors-brand-dune-alpha-alpha-white-100` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-white-100)` | `#ffffff` | — | Brand-tinted alpha-white-100 overlay. Used by Brand collection. |
473
+ | `primitives-colors-brand-dune-alpha-alpha-black-0` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-0)` | `#00000000` | — | Brand-tinted alpha-black-0 overlay. Used by Brand collection. |
474
+ | `primitives-colors-brand-dune-alpha-alpha-black-10` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-10)` | `#0000001a` | — | Brand-tinted alpha-black-10 overlay. Used by Brand collection. |
475
+ | `primitives-colors-brand-dune-alpha-alpha-black-20` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-20)` | `#00000033` | — | Brand-tinted alpha-black-20 overlay. Used by Brand collection. |
476
+ | `primitives-colors-brand-dune-alpha-alpha-black-30` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-30)` | `#0000004d` | — | Brand-tinted alpha-black-30 overlay. Used by Brand collection. |
477
+ | `primitives-colors-brand-dune-alpha-alpha-black-40` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-40)` | `#00000066` | — | Brand-tinted alpha-black-40 overlay. Used by Brand collection. |
478
+ | `primitives-colors-brand-dune-alpha-alpha-black-50` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-50)` | `#00000080` | — | Brand-tinted alpha-black-50 overlay. Used by Brand collection. |
479
+ | `primitives-colors-brand-dune-alpha-alpha-black-60` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-60)` | `#00000099` | — | Brand-tinted alpha-black-60 overlay. Used by Brand collection. |
480
+ | `primitives-colors-brand-dune-alpha-alpha-black-70` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-70)` | `#000000b3` | — | Brand-tinted alpha-black-70 overlay. Used by Brand collection. |
481
+ | `primitives-colors-brand-dune-alpha-alpha-black-80` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-80)` | `#000000cc` | — | Brand-tinted alpha-black-80 overlay. Used by Brand collection. |
482
+ | `primitives-colors-brand-dune-alpha-alpha-black-90` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-90)` | `#000000e6` | — | Brand-tinted alpha-black-90 overlay. Used by Brand collection. |
483
+ | `primitives-colors-brand-dune-alpha-alpha-black-100` | `var(--ds-primitives-colors-brand-dune-alpha-alpha-black-100)` | `#000000` | — | Brand-tinted alpha-black-100 overlay. Used by Brand collection. |
484
+ | `primitives-colors-brand-carbon-blue-25` | `var(--ds-primitives-colors-brand-carbon-blue-25)` | `#eff6ff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
485
+ | `primitives-colors-brand-carbon-blue-50` | `var(--ds-primitives-colors-brand-carbon-blue-50)` | `#dbeafe` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
486
+ | `primitives-colors-brand-carbon-blue-100` | `var(--ds-primitives-colors-brand-carbon-blue-100)` | `#bfdbfe` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
487
+ | `primitives-colors-brand-carbon-blue-200` | `var(--ds-primitives-colors-brand-carbon-blue-200)` | `#93c5fd` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
488
+ | `primitives-colors-brand-carbon-blue-300` | `var(--ds-primitives-colors-brand-carbon-blue-300)` | `#60a5fa` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
489
+ | `primitives-colors-brand-carbon-blue-400` | `var(--ds-primitives-colors-brand-carbon-blue-400)` | `#3b82f6` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
490
+ | `primitives-colors-brand-carbon-blue-700` | `var(--ds-primitives-colors-brand-carbon-blue-700)` | `#0550ae` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
491
+ | `primitives-colors-brand-carbon-blue-800` | `var(--ds-primitives-colors-brand-carbon-blue-800)` | `#033d8b` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
492
+ | `primitives-colors-brand-carbon-blue-900` | `var(--ds-primitives-colors-brand-carbon-blue-900)` | `#022a6a` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
493
+ | `primitives-colors-brand-carbon-blue-950` | `var(--ds-primitives-colors-brand-carbon-blue-950)` | `#011847` | — | Darkest variant. Used by Brand collection. |
494
+ | `primitives-colors-brand-carbon-blue-600-primary` | `var(--ds-primitives-colors-brand-carbon-blue-600-primary)` | `#0969da` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
495
+ | `primitives-colors-brand-carbon-green-25` | `var(--ds-primitives-colors-brand-carbon-green-25)` | `#f0fdf4` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
496
+ | `primitives-colors-brand-carbon-green-50` | `var(--ds-primitives-colors-brand-carbon-green-50)` | `#dafbe1` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
497
+ | `primitives-colors-brand-carbon-green-400` | `var(--ds-primitives-colors-brand-carbon-green-400)` | `#1a7f37` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
498
+ | `primitives-colors-brand-carbon-green-800` | `var(--ds-primitives-colors-brand-carbon-green-800)` | `#166534` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
499
+ | `primitives-colors-brand-carbon-green-900` | `var(--ds-primitives-colors-brand-carbon-green-900)` | `#0d3d20` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
500
+ | `primitives-colors-brand-carbon-violet-25` | `var(--ds-primitives-colors-brand-carbon-violet-25)` | `#faf5ff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
501
+ | `primitives-colors-brand-carbon-violet-50` | `var(--ds-primitives-colors-brand-carbon-violet-50)` | `#f3e8ff` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
502
+ | `primitives-colors-brand-carbon-violet-700` | `var(--ds-primitives-colors-brand-carbon-violet-700)` | `#6e40c9` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
503
+ | `primitives-colors-brand-carbon-violet-900` | `var(--ds-primitives-colors-brand-carbon-violet-900)` | `#4c2889` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
504
+ | `primitives-colors-brand-carbon-violet-500-primary` | `var(--ds-primitives-colors-brand-carbon-violet-500-primary)` | `#8250df` | — | Tertiary brand anchor — main tertiary brand color value. Used by Brand collection — do not bind directly to components. |
505
+ | `primitives-colors-brand-carbon-neutral-25` | `var(--ds-primitives-colors-brand-carbon-neutral-25)` | `#ffffff` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
506
+ | `primitives-colors-brand-carbon-neutral-50` | `var(--ds-primitives-colors-brand-carbon-neutral-50)` | `#f6f8fa` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
507
+ | `primitives-colors-brand-carbon-neutral-100` | `var(--ds-primitives-colors-brand-carbon-neutral-100)` | `#eaeef2` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
508
+ | `primitives-colors-brand-carbon-neutral-200` | `var(--ds-primitives-colors-brand-carbon-neutral-200)` | `#d8dee4` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
509
+ | `primitives-colors-brand-carbon-neutral-300` | `var(--ds-primitives-colors-brand-carbon-neutral-300)` | `#d0d7de` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
510
+ | `primitives-colors-brand-carbon-neutral-400` | `var(--ds-primitives-colors-brand-carbon-neutral-400)` | `#8c959f` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
511
+ | `primitives-colors-brand-carbon-neutral-500` | `var(--ds-primitives-colors-brand-carbon-neutral-500)` | `#656d76` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
512
+ | `primitives-colors-brand-carbon-neutral-600` | `var(--ds-primitives-colors-brand-carbon-neutral-600)` | `#3d444d` | — | Brand-tinted neutral — neutral shade adjusted for the active brand mode. Used by Brand collection. |
513
+ | `primitives-colors-brand-carbon-neutral-700` | `var(--ds-primitives-colors-brand-carbon-neutral-700)` | `#30363d` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
514
+ | `primitives-colors-brand-carbon-neutral-800` | `var(--ds-primitives-colors-brand-carbon-neutral-800)` | `#1f2328` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
515
+ | `primitives-colors-brand-carbon-neutral-900` | `var(--ds-primitives-colors-brand-carbon-neutral-900)` | `#161b22` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
516
+ | `primitives-colors-brand-carbon-neutral-950` | `var(--ds-primitives-colors-brand-carbon-neutral-950)` | `#0d1117` | — | Darkest variant. Used by Brand collection. |
517
+ | `primitives-colors-brand-carbon-base-white` | `var(--ds-primitives-colors-brand-carbon-base-white)` | `#ffffff` | — | Brand-tinted base white. Default page surface in Light mode for Carbon. Used by Brand collection. |
518
+ | `primitives-colors-brand-carbon-base-black` | `var(--ds-primitives-colors-brand-carbon-base-black)` | `#0d1117` | — | Brand-tinted base black. Default page surface in Dark mode for Carbon. Used by Brand collection. |
519
+ | `primitives-colors-brand-carbon-alpha-alpha-white-0` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-0)` | `#ffffff00` | — | Brand-tinted alpha-white-0 overlay. Used by Brand collection. |
520
+ | `primitives-colors-brand-carbon-alpha-alpha-white-10` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-10)` | `#ffffff1a` | — | Brand-tinted alpha-white-10 overlay. Used by Brand collection. |
521
+ | `primitives-colors-brand-carbon-alpha-alpha-white-20` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-20)` | `#ffffff33` | — | Brand-tinted alpha-white-20 overlay. Used by Brand collection. |
522
+ | `primitives-colors-brand-carbon-alpha-alpha-white-30` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-30)` | `#ffffff4d` | — | Brand-tinted alpha-white-30 overlay. Used by Brand collection. |
523
+ | `primitives-colors-brand-carbon-alpha-alpha-white-40` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-40)` | `#ffffff66` | — | Brand-tinted alpha-white-40 overlay. Used by Brand collection. |
524
+ | `primitives-colors-brand-carbon-alpha-alpha-white-50` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-50)` | `#ffffff80` | — | Brand-tinted alpha-white-50 overlay. Used by Brand collection. |
525
+ | `primitives-colors-brand-carbon-alpha-alpha-white-60` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-60)` | `#ffffff99` | — | Brand-tinted alpha-white-60 overlay. Used by Brand collection. |
526
+ | `primitives-colors-brand-carbon-alpha-alpha-white-70` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-70)` | `#ffffffb3` | — | Brand-tinted alpha-white-70 overlay. Used by Brand collection. |
527
+ | `primitives-colors-brand-carbon-alpha-alpha-white-80` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-80)` | `#ffffffcc` | — | Brand-tinted alpha-white-80 overlay. Used by Brand collection. |
528
+ | `primitives-colors-brand-carbon-alpha-alpha-white-90` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-90)` | `#ffffffe6` | — | Brand-tinted alpha-white-90 overlay. Used by Brand collection. |
529
+ | `primitives-colors-brand-carbon-alpha-alpha-white-100` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-white-100)` | `#ffffff` | — | Brand-tinted alpha-white-100 overlay. Used by Brand collection. |
530
+ | `primitives-colors-brand-carbon-alpha-alpha-black-0` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-0)` | `#00000000` | — | Brand-tinted alpha-black-0 overlay. Used by Brand collection. |
531
+ | `primitives-colors-brand-carbon-alpha-alpha-black-10` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-10)` | `#0000001a` | — | Brand-tinted alpha-black-10 overlay. Used by Brand collection. |
532
+ | `primitives-colors-brand-carbon-alpha-alpha-black-20` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-20)` | `#00000033` | — | Brand-tinted alpha-black-20 overlay. Used by Brand collection. |
533
+ | `primitives-colors-brand-carbon-alpha-alpha-black-30` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-30)` | `#0000004d` | — | Brand-tinted alpha-black-30 overlay. Used by Brand collection. |
534
+ | `primitives-colors-brand-carbon-alpha-alpha-black-40` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-40)` | `#00000066` | — | Brand-tinted alpha-black-40 overlay. Used by Brand collection. |
535
+ | `primitives-colors-brand-carbon-alpha-alpha-black-50` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-50)` | `#00000080` | — | Brand-tinted alpha-black-50 overlay. Used by Brand collection. |
536
+ | `primitives-colors-brand-carbon-alpha-alpha-black-60` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-60)` | `#00000099` | — | Brand-tinted alpha-black-60 overlay. Used by Brand collection. |
537
+ | `primitives-colors-brand-carbon-alpha-alpha-black-70` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-70)` | `#000000b3` | — | Brand-tinted alpha-black-70 overlay. Used by Brand collection. |
538
+ | `primitives-colors-brand-carbon-alpha-alpha-black-80` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-80)` | `#000000cc` | — | Brand-tinted alpha-black-80 overlay. Used by Brand collection. |
539
+ | `primitives-colors-brand-carbon-alpha-alpha-black-90` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-90)` | `#000000e6` | — | Brand-tinted alpha-black-90 overlay. Used by Brand collection. |
540
+ | `primitives-colors-brand-carbon-alpha-alpha-black-100` | `var(--ds-primitives-colors-brand-carbon-alpha-alpha-black-100)` | `#000000` | — | Brand-tinted alpha-black-100 overlay. Used by Brand collection. |
541
+ | `themes-text-text-brand-secondary` | `var(--ds-themes-text-text-brand-secondary)` | `#945c01` | `#f7d54d` | |
542
+ | `themes-text-text-brand-tertiary` | `var(--ds-themes-text-text-brand-tertiary)` | `#532d75` | `#e1cce8` | |
543
+ | `color-button-bg-primary-pressed` | `var(--ds-color-button-bg-primary-pressed)` | `#104631` | — | Primary button background when pressed/active. Darker emphasis. |
544
+ | `color-button-bg-primary-default` | `var(--ds-color-button-bg-primary-default)` | `#1b8354` | — | Primary button background, default state. Use Text/text-on-color for label. Switches per active brand mode. |
545
+ | `color-button-bg-primary-hovered` | `var(--ds-color-button-bg-primary-hovered)` | `#166a45` | — | Primary button background on hover. Slightly darker than default. |
546
+ | `color-button-bg-primary-selected` | `var(--ds-color-button-bg-primary-selected)` | `#14573a` | — | Primary button background in selected state. |
547
+ | `color-button-bg-primary-focused` | `var(--ds-color-button-bg-primary-focused)` | `#1b8354` | — | Primary button background with focus ring/state. |
548
+ | `color-button-bg-danger-primary-default` | `var(--ds-color-button-bg-danger-primary-default)` | `#d92d20` | — | Danger primary button — destructive action background. Pair with Text/text-on-color. Stays red across all brand modes. |
549
+ | `color-button-bg-danger-primary-hovered` | `var(--ds-color-button-bg-danger-primary-hovered)` | `#b42318` | — | Danger primary button hover state. |
550
+ | `color-button-bg-danger-primary-pressed` | `var(--ds-color-button-bg-danger-primary-pressed)` | `#7a271a` | — | Danger primary button pressed state. |
551
+ | `color-button-bg-danger-primary-selected` | `var(--ds-color-button-bg-danger-primary-selected)` | `#912018` | `#d92d20` | Danger primary button selected state. |
552
+ | `color-button-bg-danger-primary-focused` | `var(--ds-color-button-bg-danger-primary-focused)` | `#d92d20` | — | Danger primary button focus state. |
553
+ | `color-button-bg-neutral-default` | `var(--ds-color-button-bg-neutral-default)` | `#f3f4f6` | `#1f2a37` | Neutral/secondary button background, default state. Pair with Text/text-default for label. |
554
+ | `color-button-bg-neutral-hovered` | `var(--ds-color-button-bg-neutral-hovered)` | `#e5e7eb` | `#384250` | Neutral button background on hover. |
555
+ | `color-button-bg-neutral-pressed` | `var(--ds-color-button-bg-neutral-pressed)` | `#d2d6db` | `#4d5761` | Neutral button background when pressed. |
556
+ | `color-button-bg-neutral-selected` | `var(--ds-color-button-bg-neutral-selected)` | `#d2d6db` | `#384250` | Neutral button background in selected state. |
557
+ | `color-button-bg-neutral-focused` | `var(--ds-color-button-bg-neutral-focused)` | `#f3f4f6` | `#1f2a37` | Neutral button background with focus state. |
558
+ | `color-button-bg-black-default` | `var(--ds-color-button-bg-black-default)` | `#0d121c` | `#384250` | Black/inverse button — high-contrast button background. Used for prominent CTAs against light surfaces. |
559
+ | `color-button-bg-black-hovered` | `var(--ds-color-button-bg-black-hovered)` | `#1f2a37` | — | Black/inverse button hover state. |
560
+ | `color-button-bg-black-pressed` | `var(--ds-color-button-bg-black-pressed)` | `#4d5761` | `#111927` | Black/inverse button pressed state. |
561
+ | `color-button-bg-black-selected` | `var(--ds-color-button-bg-black-selected)` | `#384250` | — | Black/inverse button selected state. |
562
+ | `color-button-bg-black-focused` | `var(--ds-color-button-bg-black-focused)` | `#0d121c` | `#1f2a37` | Black/inverse button focus state. |
563
+ | `color-button-bg-danger-secondary-default` | `var(--ds-color-button-bg-danger-secondary-default)` | `#fef3f2` | `#7a271a` | Danger secondary button — softer destructive style. Tinted red background, dark text. |
564
+ | `color-button-bg-danger-secondary-hovered` | `var(--ds-color-button-bg-danger-secondary-hovered)` | `#fee4e2` | `#55160c` | Danger secondary button hover state. |
565
+ | `color-button-bg-danger-secondary-pressed` | `var(--ds-color-button-bg-danger-secondary-pressed)` | `#fecdca` | `#7a271a` | Danger secondary button pressed state. |
566
+ | `color-button-bg-danger-secondary-selected` | `var(--ds-color-button-bg-danger-secondary-selected)` | `#fef3f2` | `#7a271a` | Danger secondary button selected state. |
567
+ | `color-button-bg-danger-secondary-focused` | `var(--ds-color-button-bg-danger-secondary-focused)` | `#fef3f2` | `#7a271a` | Danger secondary button focus state. |
568
+ | `color-button-bg-disabled-oncolor` | `var(--ds-color-button-bg-disabled-oncolor)` | `#ffffff33` | — | Disabled button on colored surface. Use when the button sits inside a brand-colored panel. |
569
+ | `color-button-bg-oncolor-default` | `var(--ds-color-button-bg-oncolor-default)` | `#ffffff` | — | Button background sitting ON a colored brand surface (white). Pair with Text/text-default for label. |
570
+ | `color-button-bg-oncolor-hovered` | `var(--ds-color-button-bg-oncolor-hovered)` | `#ffffffcc` | — | On-color button hover state. |
571
+ | `color-button-bg-oncolor-pressed` | `var(--ds-color-button-bg-oncolor-pressed)` | `#ffffff99` | — | On-color button pressed state. |
572
+ | `color-button-bg-oncolor-selected` | `var(--ds-color-button-bg-oncolor-selected)` | `#ffffffb3` | — | On-color button selected state. |
573
+ | `color-button-bg-oncolor-focused` | `var(--ds-color-button-bg-oncolor-focused)` | `#ffffff` | — | On-color button focus state. |
574
+ | `color-button-bg-transparent-default` | `var(--ds-color-button-bg-transparent-default)` | `#ffffff00` | — | Transparent button — default invisible background. Pair with Text/text-default. |
575
+ | `color-button-bg-transparent-hovered` | `var(--ds-color-button-bg-transparent-hovered)` | `#ffffff1a` | `#ffffff33` | Transparent button hover — subtle tint appears. |
576
+ | `color-button-bg-transparent-pressed` | `var(--ds-color-button-bg-transparent-pressed)` | `#ffffff66` | — | Transparent button pressed — slightly darker tint. |
577
+ | `color-button-bg-transparent-selected` | `var(--ds-color-button-bg-transparent-selected)` | `#ffffff4d` | — | Transparent button selected — visible tint indicating selection. |
578
+ | `color-button-bg-transparent-focused` | `var(--ds-color-button-bg-transparent-focused)` | `#ffffff00` | — | Transparent button with focus state. |
579
+ | `color-button-label-transparent-hovered-oncolor` | `var(--ds-color-button-label-transparent-hovered-oncolor)` | `#54c08a` | `#88d8ad` | Transparent button label color on hover when sitting on colored surface. |
580
+ | `color-button-label-transparent-pressed-oncolor` | `var(--ds-color-button-label-transparent-pressed-oncolor)` | `#88d8ad` | — | Transparent button label color when pressed on colored surface. |
581
+ | `color-button-label-transparent-selected-oncolor` | `var(--ds-color-button-label-transparent-selected-oncolor)` | `#54c08a` | — | Transparent button label color when selected on colored surface. |
582
+ | `color-button-icon-transparent-hovered-oncolor` | `var(--ds-color-button-icon-transparent-hovered-oncolor)` | `#54c08a` | — | Transparent button icon color on hover when sitting on colored surface. |
583
+ | `color-button-icon-transparent-pressed-oncolor` | `var(--ds-color-button-icon-transparent-pressed-oncolor)` | `#88d8ad` | — | Transparent button icon color when pressed on colored surface. |
584
+ | `color-button-icon-transparent-selected-oncolor` | `var(--ds-color-button-icon-transparent-selected-oncolor)` | `#54c08a` | — | Transparent button icon color when selected on colored surface. |
585
+ | `color-button-label-danger-primary-default-oncolor` | `var(--ds-color-button-label-danger-primary-default-oncolor)` | `#fecdca` | `#b42318` | Danger primary button label on color (white). Default state. |
586
+ | `color-button-label-danger-primary-hovered-oncolor` | `var(--ds-color-button-label-danger-primary-hovered-oncolor)` | `#fda29b` | `#d92d20` | Danger primary button label on color, hover state. |
587
+ | `color-button-label-danger-primary-pressed-oncolor` | `var(--ds-color-button-label-danger-primary-pressed-oncolor)` | `#f97066` | `#f04438` | Danger primary button label on color, pressed state. |
588
+ | `color-link-primary` | `var(--ds-color-link-primary)` | `#1b8354` | `#54c08a` | Primary link color — default state. Brand-tinted, switches per active brand mode. |
589
+ | `color-link-primary-hovered` | `var(--ds-color-link-primary-hovered)` | `#166a45` | `#54c08a` | Primary link on hover. |
590
+ | `color-link-neutral` | `var(--ds-color-link-neutral)` | `#384250` | `#e5e7eb` | Neutral link — neutral-tone link for de-emphasized contexts. |
591
+ | `color-link-neutral-hovered` | `var(--ds-color-link-neutral-hovered)` | `#6c737f` | `#9da4ae` | Neutral link on hover. |
592
+ | `color-link-neutral-pressed` | `var(--ds-color-link-neutral-pressed)` | `#4d5761` | `#9da4ae` | Neutral link when pressed. |
593
+ | `color-link-neutral-visited` | `var(--ds-color-link-neutral-visited)` | `#4d5761` | `#d2d6db` | Neutral link visited state. |
594
+ | `color-link-oncolor` | `var(--ds-color-link-oncolor)` | `#ffffff` | — | Link sitting on colored brand surface (white). Stays white across themes. |
595
+ | `color-link-oncolor-hovered` | `var(--ds-color-link-oncolor-hovered)` | `#ffffffcc` | — | On-color link hover state. |
596
+ | `color-link-oncolor-pressed` | `var(--ds-color-link-oncolor-pressed)` | `#ffffff99` | — | On-color link pressed state. |
597
+ | `color-link-oncolor-visited` | `var(--ds-color-link-oncolor-visited)` | `#ffffffe6` | — | On-color link visited state. |
598
+ | `color-link-oncolor-disabled` | `var(--ds-color-link-oncolor-disabled)` | `#ffffff4d` | — | Disabled link on colored surface. |
599
+ | `color-link-primary-pressed` | `var(--ds-color-link-primary-pressed)` | `#14573a` | `#88d8ad` | Primary link when pressed. |
600
+ | `color-link-primary-visited` | `var(--ds-color-link-primary-visited)` | `#14573a` | `#54c08a` | Primary link in visited state. |
601
+ | `color-link-danger` | `var(--ds-color-link-danger)` | `#d92d20` | `#f97066` | Danger link — red link for destructive contexts. Stays red across brand modes. |
602
+ | `color-link-danger-hovered` | `var(--ds-color-link-danger-hovered)` | `#b42318` | `#f97066` | Danger link on hover. |
603
+ | `color-link-danger-pressed` | `var(--ds-color-link-danger-pressed)` | `#7a271a` | `#f97066` | Danger link when pressed. |
604
+ | `color-link-danger-visited` | `var(--ds-color-link-danger-visited)` | `#912018` | `#f97066` | Danger link visited state. |
605
+ | `color-link-primary-focused` | `var(--ds-color-link-primary-focused)` | `#1b8354` | `#54c08a` | Primary link with focus indicator. |
606
+ | `color-link-neutral-focused` | `var(--ds-color-link-neutral-focused)` | `#384250` | `#e5e7eb` | Neutral link with focus indicator. |
607
+ | `color-link-danger-focused` | `var(--ds-color-link-danger-focused)` | `#912018` | `#f97066` | Danger link with focus indicator. |
608
+ | `color-link-oncolor-focused` | `var(--ds-color-link-oncolor-focused)` | `#ffffff` | — | On-color link focus state. |
609
+ | `color-link-icon-primary-hovered` | `var(--ds-color-link-icon-primary-hovered)` | `#166a45` | `#54c08a` | Primary link icon on hover. |
610
+ | `color-link-icon-primary-pressed` | `var(--ds-color-link-icon-primary-pressed)` | `#14573a` | `#88d8ad` | Primary link icon when pressed. |
611
+ | `color-link-icon-primary-focused` | `var(--ds-color-link-icon-primary-focused)` | `#1b8354` | `#54c08a` | Primary link icon with focus. |
612
+ | `color-link-icon-primary-visited` | `var(--ds-color-link-icon-primary-visited)` | `#14573a` | `#54c08a` | Primary link icon visited state. |
613
+ | `color-link-icon-oncolor-hovered` | `var(--ds-color-link-icon-oncolor-hovered)` | `#ffffffcc` | `#ffffffe6` | On-color link icon on hover. |
614
+ | `color-link-icon-oncolor-pressed` | `var(--ds-color-link-icon-oncolor-pressed)` | `#ffffff99` | — | On-color link icon when pressed. |
615
+ | `color-link-icon-oncolor-visited` | `var(--ds-color-link-icon-oncolor-visited)` | `#ffffffe6` | — | On-color link icon visited state. |
616
+ | `color-link-icon-oncolor-disabled` | `var(--ds-color-link-icon-oncolor-disabled)` | `#ffffff4d` | — | Disabled on-color link icon. |
617
+ | `color-link-icon-neutral-hovered` | `var(--ds-color-link-icon-neutral-hovered)` | `#6c737f` | `#9da4ae` | Neutral link icon on hover. |
618
+ | `color-link-icon-neutral-pressed` | `var(--ds-color-link-icon-neutral-pressed)` | `#4d5761` | `#9da4ae` | Neutral link icon when pressed. |
619
+ | `color-link-icon-neutral-focused` | `var(--ds-color-link-icon-neutral-focused)` | `#384250` | `#e5e7eb` | Neutral link icon with focus. |
620
+ | `color-link-icon-neutral-visited` | `var(--ds-color-link-icon-neutral-visited)` | `#4d5761` | `#d2d6db` | Neutral link icon visited state. |
621
+ | `color-link-icon-danger-hovered` | `var(--ds-color-link-icon-danger-hovered)` | `#b42318` | `#f97066` | Danger link icon on hover. |
622
+ | `color-link-icon-danger-pressed` | `var(--ds-color-link-icon-danger-pressed)` | `#7a271a` | `#fda29b` | Danger link icon when pressed. |
623
+ | `color-link-icon-danger-focused` | `var(--ds-color-link-icon-danger-focused)` | `#d92d20` | — | Danger link icon with focus. |
624
+ | `color-link-icon-danger-visited` | `var(--ds-color-link-icon-danger-visited)` | `#912018` | — | Danger link icon visited state. |
625
+ | `themes-link-link-icon-primary-default` | `var(--ds-themes-link-link-icon-primary-default)` | `#1b8354` | `#54c08a` | |
626
+ | `themes-link-link-icon-neutral-default` | `var(--ds-themes-link-link-icon-neutral-default)` | `#384250` | `#e5e7eb` | |
627
+ | `color-icon-oncolor` | `var(--ds-color-icon-oncolor)` | `#ffffff` | — | Icon on colored brand surface (white). Stays white across themes. |
628
+ | `color-icon-default` | `var(--ds-color-icon-default)` | `#161616` | `#ffffff` | Default icon color — body-tone, neutral. Most common icon color. Pair with text-default. |
629
+ | `color-icon-brand-subtle` | `var(--ds-color-icon-brand-subtle)` | `#f3fcf6` | — | Subtle brand-tinted icon — softer brand color. |
630
+ | `color-icon-brand` | `var(--ds-color-icon-brand)` | `#1b8354` | `#54c08a` | Brand-colored icon — saturated brand fill. Switches per active brand mode. |
631
+ | `color-icon-brand-secondary-subtle` | `var(--ds-color-icon-brand-secondary-subtle)` | `#fffef2` | `#6e3c00` | Subtle secondary brand-tinted icon. |
632
+ | `color-icon-brand-tertiary-subtle` | `var(--ds-color-icon-brand-tertiary-subtle)` | `#f9f5fa` | `#281047` | Subtle tertiary brand-tinted icon. |
633
+ | `color-icon-neutral-subtle` | `var(--ds-color-icon-neutral-subtle)` | `#f9fafb` | `#0d121c` | Subtle neutral icon — softer gray. |
634
+ | `color-icon-neutral` | `var(--ds-color-icon-neutral)` | `#384250` | `#9da4ae` | Neutral icon color — gray. Pair with neutral or muted text. |
635
+ | `color-icon-success-subtle` | `var(--ds-color-icon-success-subtle)` | `#ecfdf3` | `#074d31` | Subtle success icon — softer green. |
636
+ | `color-icon-success` | `var(--ds-color-icon-success)` | `#067647` | `#47cd89` | Success icon — saturated green. Stays green across brand modes. |
637
+ | `color-icon-info-subtle` | `var(--ds-color-icon-info-subtle)` | `#eff8ff` | `#194185` | Subtle info icon — softer blue. |
638
+ | `color-icon-info` | `var(--ds-color-icon-info)` | `#175cd3` | `#53b1fd` | Info icon — saturated blue. Stays blue across brand modes. |
639
+ | `color-icon-warning-subtle` | `var(--ds-color-icon-warning-subtle)` | `#fffaeb` | — | Subtle warning icon — softer yellow. |
640
+ | `color-icon-warning` | `var(--ds-color-icon-warning)` | `#b54708` | `#fdb022` | Warning icon — saturated yellow. Stays yellow across brand modes. |
641
+ | `color-icon-danger-subtle` | `var(--ds-color-icon-danger-subtle)` | `#fef3f2` | — | Subtle danger icon — softer red. |
642
+ | `color-icon-danger` | `var(--ds-color-icon-danger)` | `#b42318` | `#f97066` | Danger icon — saturated red. Stays red across brand modes. |
643
+ | `color-icon-default-disabled` | `var(--ds-color-icon-default-disabled)` | `#6c737f` | `#9da4ae` | Disabled icon — desaturated gray. |
644
+ | `color-icon-default-oncolor-disabled` | `var(--ds-color-icon-default-oncolor-disabled)` | `#ffffff66` | — | Disabled icon on colored brand surface. |
645
+ | `color-icon-default-400` | `var(--ds-color-icon-default-400)` | `#6c737f` | `#d2d6db` | Default icon mid-tone variant. |
646
+ | `color-icon-default-500` | `var(--ds-color-icon-default-500)` | `#6c737f` | `#e5e7eb` | Default icon alt mid-tone variant. |
647
+ | `color-icon-brand-accent` | `var(--ds-color-icon-brand-accent)` | `#54c08a` | `#b8eacb` | Brand-accent icon (mid-shade). Static — does not flip per theme. |
648
+ | `color-icon-bg-warning-subtle` | `var(--ds-color-icon-bg-warning-subtle)` | `#fffaeb` | `#dc68031a` | Icon background for warning icon containers — subtle yellow tint. |
649
+ | `color-icon-bg-danger-subtle` | `var(--ds-color-icon-bg-danger-subtle)` | `#fef3f2` | `#d92d201a` | Icon background for danger icon containers — subtle red tint. |
650
+ | `color-icon-bg-brand-subtle` | `var(--ds-color-icon-bg-brand-subtle)` | `#f3fcf6` | `#1b83541a` | Icon background for brand-colored icon containers — subtle brand tint. |
651
+ | `color-icon-bg-info-subtle` | `var(--ds-color-icon-bg-info-subtle)` | `#eff8ff` | `#1570ef1a` | Icon background for info icon containers — subtle blue tint. |
652
+ | `color-icon-bg-success-subtle` | `var(--ds-color-icon-bg-success-subtle)` | `#ecfdf3` | `#0794551a` | Icon background for success icon containers — subtle green tint. |
653
+ | `color-icon-unselected-tab` | `var(--ds-color-icon-unselected-tab)` | `#384250` | `#f3f4f6` | Tab icon color in unselected state. |
654
+ | `color-icon-warning-ring` | `var(--ds-color-icon-warning-ring)` | `#fef0c7` | `#dc68031a` | Warning icon ring outline color. |
655
+ | `color-icon-danger-ring` | `var(--ds-color-icon-danger-ring)` | `#fee4e2` | `#d92d201a` | Danger icon ring outline color. |
656
+ | `color-icon-info-ring` | `var(--ds-color-icon-info-ring)` | `#d1e9ff` | `#1570ef1a` | Info icon ring outline color. |
657
+ | `color-icon-success-ring` | `var(--ds-color-icon-success-ring)` | `#dff6e7` | `#0794551a` | Success icon ring outline color. |
658
+ | `color-icon-neutral-ring` | `var(--ds-color-icon-neutral-ring)` | `#f3f4f6` | `#111927` | Neutral icon ring — outline color for ring-style icons. |
659
+ | `color-icon-on-warning` | `var(--ds-color-icon-on-warning)` | `#111927` | — | Dark icon used on warning surfaces (yellow). Always dark — yellow + white icon fails WCAG AA contrast in any theme. Pair with text-on-warning when icons appear on background-warning-strong or warning surfaces. |
660
+ | `themes-icon-icon-brand-secondary` | `var(--ds-themes-icon-icon-brand-secondary)` | `#945c01` | `#f7d54d` | |
661
+ | `themes-icon-icon-brand-tertiary` | `var(--ds-themes-icon-icon-brand-tertiary)` | `#532d75` | `#e1cce8` | |
662
+ | `themes-icon-icon-bg-warning-solid` | `var(--ds-themes-icon-icon-bg-warning-solid)` | `#93370d` | `#dc6803` | |
663
+ | `themes-icon-icon-bg-danger-solid` | `var(--ds-themes-icon-icon-bg-danger-solid)` | `#b42318` | `#f04438` | |
664
+ | `themes-icon-icon-bg-info-solid` | `var(--ds-themes-icon-icon-bg-info-solid)` | `#175cd3` | — | |
665
+ | `themes-icon-icon-bg-success-solid` | `var(--ds-themes-icon-icon-bg-success-solid)` | `#1b8354` | — | |
666
+ | `themes-icon-icon-bg-gray-solid` | `var(--ds-themes-icon-icon-bg-gray-solid)` | `#4d5761` | `#384250` | |
667
+ | `color-control-primary` | `var(--ds-color-control-primary)` | `#ffffff00` | — | Primary control fill — checked checkboxes, active radios, on-state switches. Switches per active brand mode. |
668
+ | `color-control-primary-hovered` | `var(--ds-color-control-primary-hovered)` | `#14573a` | `#88d8ad` | Primary control on hover. |
669
+ | `color-control-primary-pressed` | `var(--ds-color-control-primary-pressed)` | `#104631` | `#54c08a` | Primary control when pressed. |
670
+ | `color-control-primary-focused` | `var(--ds-color-control-primary-focused)` | `#1b8354` | — | Primary control with focus ring. |
671
+ | `color-control-primary-readonly` | `var(--ds-color-control-primary-readonly)` | `#ffffff00` | — | Primary control in read-only state. |
672
+ | `color-control-primary-checked` | `var(--ds-color-control-primary-checked)` | `#1b8354` | — | Primary control in checked/on state — saturated brand color. |
673
+ | `color-control-border` | `var(--ds-color-control-border)` | `#6c737f` | `#9da4ae` | Default outline color for unchecked controls (checkboxes, radios, switches). |
674
+ | `color-control-neutral-checked` | `var(--ds-color-control-neutral-checked)` | `#0d121c` | `#6c737f` | Neutral control in checked state — for non-brand-colored controls. |
675
+ | `color-control-neutral-hovered` | `var(--ds-color-control-neutral-hovered)` | `#4d5761` | `#9da4ae` | Neutral control on hover. |
676
+ | `color-control-neutral-pressed` | `var(--ds-color-control-neutral-pressed)` | `#6c737f` | `#9da4ae` | Neutral control when pressed. |
677
+ | `color-control-neutral-focused` | `var(--ds-color-control-neutral-focused)` | `#0d121c` | `#4d5761` | Neutral control with focus state. |
678
+ | `color-control-pressed` | `var(--ds-color-control-pressed)` | `#d2d6db` | `#4d5761` | Pressed state for controls (universal). |
679
+ | `color-control-ripple-effect` | `var(--ds-color-control-ripple-effect)` | `#f3f4f6` | `#111927` | Ripple/feedback effect color when interacting with controls. |
680
+ | `color-control-disabled-global` | `var(--ds-color-control-disabled-global)` | `#9da4ae` | `#ffffff4d` | Alternative disabled control state — slightly different shade for outline-style disabled controls. |
681
+ | `color-control-icon-pressed` | `var(--ds-color-control-icon-pressed)` | `#ffffff` | `#14573a` | Icon color for pressed controls. |
682
+ | `color-control-icon-hovered` | `var(--ds-color-control-icon-hovered)` | `#ffffff` | `#14573a` | Icon color for hovered controls. |
683
+ | `color-control-icon-disabled` | `var(--ds-color-control-icon-disabled)` | `#ffffff` | `#9da4ae` | Icon color for disabled controls. |
684
+ | `color-control-border-disabled` | `var(--ds-color-control-border-disabled)` | `#9da4ae` | `#ffffff4d` | Outline color for disabled controls. |
685
+ | `color-control-disabled` | `var(--ds-color-control-disabled)` | `#d2d6db` | — | Fill color for disabled controls — desaturated gray. |
686
+ | `color-table-cell-border` | `var(--ds-color-table-cell-border)` | `#d2d6db` | `#4d5761` | Default table cell border — between rows and columns. |
687
+ | `color-table-cell-border-inverse` | `var(--ds-color-table-cell-border-inverse)` | `#161616` | `#ffffff` | Inverse table cell border — for dark table contexts. |
688
+ | `color-table-text-head` | `var(--ds-color-table-text-head)` | `#384250` | `#d2d6db` | Table header text — column titles. |
689
+ | `color-table-text-body` | `var(--ds-color-table-text-body)` | `#161616` | `#ffffff` | Table body text — cell content. |
690
+ | `color-table-bg-disabled` | `var(--ds-color-table-bg-disabled)` | `#e5e7eb` | `#384250` | Table cell background in disabled rows. |
691
+ | `color-table-bg-hover-selected` | `var(--ds-color-table-bg-hover-selected)` | `#f9fafb` | `#111927` | Table row hover state when row is selected. |
692
+ | `color-table-bg-header` | `var(--ds-color-table-bg-header)` | `#f3f4f6` | `#111927` | Table header row background — slightly emphasized vs body rows. |
693
+ | `color-table-bg-row` | `var(--ds-color-table-bg-row)` | `#f9fafb` | `#111927` | Default table row background. |
694
+ | `color-table-bg-row-selected-hovered` | `var(--ds-color-table-bg-row-selected-hovered)` | `#f3fcf6` | `#104631` | Table row background when selected AND hovered. |
695
+ | `color-table-border-row-selected-hovered` | `var(--ds-color-table-border-row-selected-hovered)` | `#f3f4f6` | — | Table border for selected-and-hovered rows. |
696
+ | `color-table-bg-row-select` | `var(--ds-color-table-bg-row-select)` | `#f3fcf6` | `#092a1e` | Table row background when checkbox is selected. |
697
+ | `color-table-bg-row-hovered` | `var(--ds-color-table-bg-row-hovered)` | `#f3f4f6` | `#384250` | Table row background on hover. |
698
+ | `color-table-bg-row-alt` | `var(--ds-color-table-bg-row-alt)` | `#f9fafb` | `#ffffff` | Alternating table row background — for striped rows. |
699
+ | `color-stepper-button-completed` | `var(--ds-color-stepper-button-completed)` | `#1b8354` | `#079455` | Stepper completed step button — saturated brand color indicating done state. |
700
+ | `color-stepper-button-completed-hovered` | `var(--ds-color-stepper-button-completed-hovered)` | `#166a45` | — | Completed stepper button on hover. |
701
+ | `color-stepper-button-current` | `var(--ds-color-stepper-button-current)` | `#1b8354` | `#079455` | Stepper current step button — emphasized current state. |
702
+ | `color-stepper-button-current-hovered` | `var(--ds-color-stepper-button-current-hovered)` | `#166a45` | — | Current stepper button on hover. |
703
+ | `color-stepper-button-upcoming` | `var(--ds-color-stepper-button-upcoming)` | `#d2d6db` | `#4d5761` | Stepper upcoming step button — neutral/muted style. |
704
+ | `color-stepper-button-upcoming-hovered` | `var(--ds-color-stepper-button-upcoming-hovered)` | `#9da4ae` | `#4d5761` | Upcoming stepper button on hover. |
705
+ | `color-stepper-button-background` | `var(--ds-color-stepper-button-background)` | `#ffffff` | — | Stepper button background — outer ring/circle background. |
706
+ | `color-stepper-text-primary` | `var(--ds-color-stepper-text-primary)` | `#1f2a37` | `#ffffff` | Stepper primary text — main step label. |
707
+ | `color-stepper-text-secondary` | `var(--ds-color-stepper-text-secondary)` | `#384250` | `#f3f4f6` | Stepper secondary text — supporting step description. |
708
+ | `color-stepper-text-tertiary` | `var(--ds-color-stepper-text-tertiary)` | `#4d5761` | `#e5e7eb` | Stepper tertiary text — additional metadata. |
709
+ | `color-stepper-line-completed` | `var(--ds-color-stepper-line-completed)` | `#1b8354` | — | Stepper connector line for completed steps. |
710
+ | `color-stepper-line-completed-hovered` | `var(--ds-color-stepper-line-completed-hovered)` | `#166a45` | — | Completed stepper line on hover. |
711
+ | `color-stepper-line-upcoming` | `var(--ds-color-stepper-line-upcoming)` | `#d2d6db` | `#384250` | Stepper connector line for upcoming steps — muted. |
712
+ | `color-stepper-line-upcoming-hovered` | `var(--ds-color-stepper-line-upcoming-hovered)` | `#9da4ae` | `#384250` | Upcoming stepper line on hover. |
713
+ | `color-stepper-line-current` | `var(--ds-color-stepper-line-current)` | `#d2d6db` | `#384250` | Stepper connector line for current step. |
714
+ | `color-tag-bg-neutral` | `var(--ds-color-tag-bg-neutral)` | `#4d5761` | — | Neutral tag background — saturated. Pair with tag-text-neutral. |
715
+ | `color-tag-bg-neutral-subtle` | `var(--ds-color-tag-bg-neutral-subtle)` | `#f9fafb` | `#1f2a37` | Subtle neutral tag background — softer tint version. |
716
+ | `color-tag-bg-success` | `var(--ds-color-tag-bg-success)` | `#067647` | — | Success tag background — saturated green. Stays green across brand modes. |
717
+ | `color-tag-bg-success-subtle` | `var(--ds-color-tag-bg-success-subtle)` | `#ecfdf3` | `#053321` | Subtle success tag — softer green tint. |
718
+ | `color-tag-bg-info` | `var(--ds-color-tag-bg-info)` | `#1570ef` | — | Info tag background — saturated blue. Stays blue across brand modes. |
719
+ | `color-tag-bg-info-subtle` | `var(--ds-color-tag-bg-info-subtle)` | `#eff8ff` | `#102a56` | Subtle info tag — softer blue tint. |
720
+ | `color-tag-bg-warning` | `var(--ds-color-tag-bg-warning)` | `#b54708` | — | Warning tag background — saturated yellow. Stays yellow across brand modes. |
721
+ | `color-tag-bg-warning-subtle` | `var(--ds-color-tag-bg-warning-subtle)` | `#fffaeb` | `#4e1d09` | Subtle warning tag — softer yellow tint. |
722
+ | `color-tag-bg-danger` | `var(--ds-color-tag-bg-danger)` | `#d92d20` | — | Danger tag background — saturated red. Stays red across brand modes. |
723
+ | `color-tag-bg-danger-subtle` | `var(--ds-color-tag-bg-danger-subtle)` | `#fef3f2` | `#55160c` | Subtle danger tag — softer red tint. |
724
+ | `color-tag-dot` | `var(--ds-color-tag-dot)` | `#ffffff99` | — | Tag indicator dot — small status dot inside tags. |
725
+ | `color-tag-border-success` | `var(--ds-color-tag-border-success)` | `#067647` | `#75e0a7` | Success tag border — green. |
726
+ | `color-tag-border-success-subtle` | `var(--ds-color-tag-border-success-subtle)` | `#abefc6` | — | Subtle success tag border. |
727
+ | `color-tag-border-info` | `var(--ds-color-tag-border-info)` | `#175cd3` | `#84caff` | Info tag border — blue. |
728
+ | `color-tag-border-info-subtle` | `var(--ds-color-tag-border-info-subtle)` | `#b2ddff` | — | Subtle info tag border. |
729
+ | `color-tag-border-warning` | `var(--ds-color-tag-border-warning)` | `#b54708` | `#fec84b` | Warning tag border — yellow. |
730
+ | `color-tag-border-warning-subtle` | `var(--ds-color-tag-border-warning-subtle)` | `#fedf89` | — | Subtle warning tag border. |
731
+ | `color-tag-border-danger` | `var(--ds-color-tag-border-danger)` | `#b42318` | `#fda29b` | Danger tag border — red. |
732
+ | `color-tag-border-danger-subtle` | `var(--ds-color-tag-border-danger-subtle)` | `#fecdca` | — | Subtle danger tag border. |
733
+ | `color-tag-border-neutral` | `var(--ds-color-tag-border-neutral)` | `#4d5761` | `#d2d6db` | Neutral tag border — pairs with tag-background-neutral. |
734
+ | `color-tag-border-neutral-subtle` | `var(--ds-color-tag-border-neutral-subtle)` | `#f9fafb` | `#1f2a37` | Subtle neutral tag border. |
735
+ | `color-tag-bg-oncolor` | `var(--ds-color-tag-bg-oncolor)` | `#ffffff33` | — | Tag background sitting on colored surfaces — semi-transparent for layering on brand panels. |
736
+ | `color-tag-border-oncolor` | `var(--ds-color-tag-border-oncolor)` | `#ffffff99` | — | Tag border on colored surfaces. |
737
+ | `color-tag-text-success` | `var(--ds-color-tag-text-success)` | `#085d3a` | `#47cd89` | Success tag text — dark green for readability on tag-background-success-subtle. |
738
+ | `color-tag-text-info` | `var(--ds-color-tag-text-info)` | `#1849a9` | `#84caff` | Info tag text — dark blue. |
739
+ | `color-tag-text-warning` | `var(--ds-color-tag-text-warning)` | `#93370d` | `#fdb022` | Warning tag text — dark yellow/orange. |
740
+ | `color-tag-text-danger` | `var(--ds-color-tag-text-danger)` | `#912018` | `#fda29b` | Danger tag text — dark red. |
741
+ | `color-tag-icon-success` | `var(--ds-color-tag-icon-success)` | `#085d3a` | `#47cd89` | Success tag icon — green. |
742
+ | `color-tag-icon-info` | `var(--ds-color-tag-icon-info)` | `#1849a9` | `#53b1fd` | Info tag icon — blue. |
743
+ | `color-tag-icon-warning` | `var(--ds-color-tag-icon-warning)` | `#93370d` | `#fdb022` | Warning tag icon — yellow. |
744
+ | `color-tag-icon-danger` | `var(--ds-color-tag-icon-danger)` | `#912018` | `#f97066` | Danger tag icon — red. |
745
+ | `color-tag-text-neutral` | `var(--ds-color-tag-text-neutral)` | `#1f2a37` | `#f3f4f6` | Neutral tag text — dark on light tag backgrounds. |
746
+ | `color-tag-icon-neutral` | `var(--ds-color-tag-icon-neutral)` | `#1f2a37` | `#f3f4f6` | Neutral tag icon color. |
747
+ | `color-tooltip-bg-on-dark` | `var(--ds-color-tooltip-bg-on-dark)` | `#ffffff` | `#1f2a37` | Tooltip background designed to sit on dark surfaces — light fill for contrast. Inverse tooltip style. |
748
+ | `color-tooltip-bg-on-light` | `var(--ds-color-tooltip-bg-on-light)` | `#1f2a37` | `#ffffff` | Tooltip background designed to sit on light surfaces — dark fill for contrast. Default tooltip style. |
749
+ | `color-tooltip-text-heading-on-dark` | `var(--ds-color-tooltip-text-heading-on-dark)` | `#1f2a37` | `#f9fafb` | Tooltip heading text on dark-context tooltips (dark on light fill). |
750
+ | `color-tooltip-text-heading-on-light` | `var(--ds-color-tooltip-text-heading-on-light)` | `#f9fafb` | `#1f2a37` | Tooltip heading text on light-context tooltips (white on dark fill). |
751
+ | `color-tooltip-text-paragraph-on-dark` | `var(--ds-color-tooltip-text-paragraph-on-dark)` | `#384250` | `#f3f4f6` | Tooltip body text on dark-context tooltips. |
752
+ | `color-tooltip-text-paragraph-on-light` | `var(--ds-color-tooltip-text-paragraph-on-light)` | `#f3f4f6` | `#384250` | Tooltip body text on light-context tooltips. |
753
+ | `themes-tooltip-tooltip-text-on-color-muted` | `var(--ds-themes-tooltip-tooltip-text-on-color-muted)` | `#ffffff` | — | |
754
+ | `color-chip-bg-neutral-default` | `var(--ds-color-chip-bg-neutral-default)` | `#f3f4f6` | `#1f2a37` | Neutral chip background, default state. Subtle tag-like background. Pair with text-default. |
755
+ | `color-chip-bg-neutral-focused` | `var(--ds-color-chip-bg-neutral-focused)` | `#f3f4f6` | `#1f2a37` | Neutral chip background, focus state. |
756
+ | `color-chip-bg-primary-focused` | `var(--ds-color-chip-bg-primary-focused)` | `#dff6e7` | `#88d8ad` | Brand-colored chip background, focused state. Switches per active brand mode. |
757
+ | `color-chip-bg-oncolor-default` | `var(--ds-color-chip-bg-oncolor-default)` | `#ffffff` | `#161616` | Chip background sitting on a colored surface (default). |
758
+ | `color-chip-bg-neutral-hovered` | `var(--ds-color-chip-bg-neutral-hovered)` | `#e5e7eb` | `#4d5761` | Neutral chip background, hover state. |
759
+ | `color-chip-bg-neutral-selected` | `var(--ds-color-chip-bg-neutral-selected)` | `#384250` | — | Neutral chip background, selected state. |
760
+ | `color-chip-bg-oncolor-hovered` | `var(--ds-color-chip-bg-oncolor-hovered)` | `#ffffffcc` | — | Chip on colored surface, hover state. |
761
+ | `color-chip-bg-oncolor-pressed` | `var(--ds-color-chip-bg-oncolor-pressed)` | `#ffffff99` | — | Chip on colored surface, pressed state. |
762
+ | `color-chip-bg-oncolor-selected` | `var(--ds-color-chip-bg-oncolor-selected)` | `#ffffffb3` | — | Chip on colored surface, selected state. |
763
+ | `color-chip-bg-oncolor-focused` | `var(--ds-color-chip-bg-oncolor-focused)` | `#ffffff` | — | Chip on colored surface, focus state. |
764
+ | `color-chip-bg-oncolor-disabled` | `var(--ds-color-chip-bg-oncolor-disabled)` | `#ffffff33` | — | Chip on colored surface, disabled state. |
765
+ | `themes-chip-chip-bg-soft-default` | `var(--ds-themes-chip-chip-bg-soft-default)` | `#f3fcf6` | `#092a1e` | |
766
+ | `themes-chip-chip-bg-soft-hovered` | `var(--ds-themes-chip-chip-bg-soft-hovered)` | `#dff6e7` | `#104631` | |
767
+ | `themes-chip-chip-bg-soft-pressed` | `var(--ds-themes-chip-chip-bg-soft-pressed)` | `#b8eacb` | `#14573a` | |
768
+ | `themes-chip-chip-bg-soft-selected` | `var(--ds-themes-chip-chip-bg-soft-selected)` | `#166a45` | — | |
769
+ | `themes-chip-chip-text-soft` | `var(--ds-themes-chip-chip-text-soft)` | `#166a45` | `#b8eacb` | |
770
+ | `themes-chip-chip-bg-solid-default` | `var(--ds-themes-chip-chip-bg-solid-default)` | `#166a45` | — | |
771
+ | `themes-chip-chip-bg-solid-hovered` | `var(--ds-themes-chip-chip-bg-solid-hovered)` | `#14573a` | — | |
772
+ | `themes-chip-chip-bg-solid-pressed` | `var(--ds-themes-chip-chip-bg-solid-pressed)` | `#104631` | — | |
773
+ | `themes-chip-chip-bg-solid-selected` | `var(--ds-themes-chip-chip-bg-solid-selected)` | `#14573a` | — | |
774
+ | `themes-chip-chip-bg-neutral-pressed` | `var(--ds-themes-chip-chip-bg-neutral-pressed)` | `#6c737f` | — | |
775
+ | `color-chart-blue` | `var(--ds-color-chart-blue)` | `#53b1fd` | — | Chart categorical color — blue. For categorical data palettes. |
776
+ | `color-chart-lavender` | `var(--ds-color-chart-lavender)` | `#80519f` | — | Chart categorical color — lavender/purple. For categorical data palettes. |
777
+ | `color-chart-green` | `var(--ds-color-chart-green)` | `#88d8ad` | — | Chart categorical color — green. For categorical data palettes. |
778
+ | `color-chart-gold` | `var(--ds-color-chart-gold)` | `#f7d54d` | — | Chart categorical color — gold/yellow. For categorical data palettes. |
779
+ | `color-chart-red` | `var(--ds-color-chart-red)` | `#f97066` | — | Chart categorical color — red. For categorical data palettes. |
780
+ | `color-chart-yellow` | `var(--ds-color-chart-yellow)` | `#fdb022` | — | Chart categorical color — yellow. For categorical data palettes. |
781
+ | `color-chart-green-primary-200` | `var(--ds-color-chart-green-primary-200)` | `#b8eacb` | — | Chart primary green tint — used for highlighted data series. |
782
+ | `color-progress-neutral` | `var(--ds-color-progress-neutral)` | `#384250` | — | Neutral progress bar fill — for indeterminate or non-branded progress contexts. |
783
+ | `color-rating-star-filled` | `var(--ds-color-rating-star-filled)` | `#dc6803` | `#fdb022` | Filled rating star color — typically warm yellow. |
784
+ | `color-chart-series-1` | `var(--ds-color-chart-series-1)` | `#067647` | `#47cd89` | Chart sequential color — first series. For line/bar/pie charts with sequential data. |
785
+ | `color-chart-series-2` | `var(--ds-color-chart-series-2)` | `#80519f` | `#ccadd9` | Chart sequential color — second series. |
786
+ | `color-chart-series-3` | `var(--ds-color-chart-series-3)` | `#b87b02` | `#f7d54d` | Chart sequential color — third series. |
787
+ | `themes-chart-chart-series-4` | `var(--ds-themes-chart-chart-series-4)` | `#2e90fa` | `#84caff` | |
788
+ | `themes-chart-chart-series-5` | `var(--ds-themes-chart-chart-series-5)` | `#dc6803` | `#fec84b` | |
789
+ | `themes-chart-chart-series-6` | `var(--ds-themes-chart-chart-series-6)` | `#d92d20` | `#f97066` | |
790
+ | `themes-badge-badge-background-brand-tertiary-soft` | `var(--ds-themes-badge-badge-background-brand-tertiary-soft)` | `#f9f5fa` | `#16072e` | |
791
+ | `themes-badge-badge-border-brand-tertiary-soft` | `var(--ds-themes-badge-badge-border-brand-tertiary-soft)` | `#ccadd9` | `#6d428f` | |
792
+ | `themes-badge-badge-background-brand-tertiary-solid` | `var(--ds-themes-badge-badge-background-brand-tertiary-solid)` | `#6d428f` | — | |
793
+ | `themes-badge-badge-background-gold-soft` | `var(--ds-themes-badge-badge-background-gold-soft)` | `#fffef2` | `#472400` | |
794
+ | `themes-badge-badge-border-gold-soft` | `var(--ds-themes-badge-badge-border-gold-soft)` | `#f7d54d` | `#945c01` | |
795
+ | `themes-badge-badge-background-gold-solid` | `var(--ds-themes-badge-badge-background-gold-solid)` | `#945c01` | — | |
796
+ | `themes-badge-badge-background-purple-solid` | `var(--ds-themes-badge-badge-background-purple-solid)` | `#6d428f` | `#ccadd9` | |
797
+ | `themes-alert-alert-background-standard-neutral` | `var(--ds-themes-alert-alert-background-standard-neutral)` | `#fcfcfd` | `#384250` | |
798
+ | `themes-alert-alert-background-outline` | `var(--ds-themes-alert-alert-background-outline)` | `#ffffff` | `#1f2a37` | |
799
+ | `themes-alert-alert-background-neutral-solid` | `var(--ds-themes-alert-alert-background-neutral-solid)` | `#384250` | `#4d5761` | |
800
+ | `themes-alert-alert-border-info` | `var(--ds-themes-alert-alert-border-info)` | `#b2ddff` | `#1849a9` | Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode. |
801
+ | `themes-alert-alert-border-error` | `var(--ds-themes-alert-alert-border-error)` | `#fecdca` | `#912018` | Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode. |
802
+ | `themes-alert-alert-border-warning` | `var(--ds-themes-alert-alert-border-warning)` | `#fedf89` | `#93370d` | Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode. |
803
+ | `themes-alert-alert-border-success` | `var(--ds-themes-alert-alert-border-success)` | `#abefc6` | `#085d3a` | Adaptive Outline-alert border: pale tint (light) / deep tint (dark). Dimmed for dark mode. |
804
+ | `themes-media-media-background-transparent` | `var(--ds-themes-media-media-background-transparent)` | `#16161680` | `#ffffff4d` | |
805
+ | `themes-media-media-background-play-neutral` | `var(--ds-themes-media-media-background-play-neutral)` | `#384250` | `#e5e7eb` | |
806
+ | `themes-media-media-track-bg` | `var(--ds-themes-media-media-track-bg)` | `#e5e7eb` | `#384250` | |
807
+ | `internal-navbar-item` | `var(--ds-internal-navbar-item)` | `true` | — | Internal — Navbar responsive switcher. Uses Spacing modes (Desktop/Tablet/Mobile) to toggle navbar item visibility. Do not bind from other components. |
808
+ | `internal-navbar-search` | `var(--ds-internal-navbar-search)` | `true` | — | Internal — Navbar responsive switcher. Uses Spacing modes (Desktop/Tablet/Mobile) to toggle search visibility. Do not bind from other components. |
809
+ | `internal-navbar-buttons` | `var(--ds-internal-navbar-buttons)` | `true` | — | Internal — Navbar responsive switcher. Uses Spacing modes (Desktop/Tablet/Mobile) to toggle action button visibility. Do not bind from other components. |
810
+ | `internal-navbar-menuicon` | `var(--ds-internal-navbar-menuicon)` | `false` | — | Internal — Navbar responsive switcher. Uses Spacing modes (Desktop/Tablet/Mobile) to toggle menu icon visibility. Do not bind from other components. |
811
+ | `internal-navbar-h` | `var(--ds-internal-navbar-h)` | `80px` | — | Internal — Navbar responsive switcher. Uses Spacing modes (Desktop/Tablet/Mobile) to toggle navbar height. Do not bind from other components. |
812
+ | `internal-datepicker-show-first-month` | `var(--ds-internal-datepicker-show-first-month)` | `true` | — | Internal — Datepicker responsive switcher (boolean). Uses Spacing modes (Desktop/Tablet/Mobile) to toggle first-month visibility. Do not bind from other components. |
813
+ | `internal-datepicker-show-tabs` | `var(--ds-internal-datepicker-show-tabs)` | `true` | — | Internal — Datepicker responsive switcher (boolean). Uses Spacing modes (Desktop/Tablet/Mobile) to toggle tab visibility. Do not bind from other components. |
814
+ | `internal-devices-size` | `var(--ds-internal-devices-size)` | `1440px` | — | Internal — device viewport reference value used by responsive utilities. Do not bind from other components. |
815
+
816
+ ## Public Green
817
+
818
+ | Token | CSS variable | Light | Dark | Description |
819
+ | --- | --- | --- | --- | --- |
820
+ | `color-primitive-public-green-25` | `var(--ds-color-primitive-public-green-25)` | `#f7fdf9` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
821
+ | `color-primitive-public-green-50` | `var(--ds-color-primitive-public-green-50)` | `#f3fcf6` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
822
+ | `color-primitive-public-green-100` | `var(--ds-color-primitive-public-green-100)` | `#dff6e7` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
823
+ | `color-primitive-public-green-200` | `var(--ds-color-primitive-public-green-200)` | `#b8eacb` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
824
+ | `color-primitive-public-green-300` | `var(--ds-color-primitive-public-green-300)` | `#88d8ad` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
825
+ | `color-primitive-public-green-400` | `var(--ds-color-primitive-public-green-400)` | `#54c08a` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
826
+ | `color-primitive-public-green-700` | `var(--ds-color-primitive-public-green-700)` | `#166a45` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
827
+ | `color-primitive-public-green-800` | `var(--ds-color-primitive-public-green-800)` | `#14573a` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
828
+ | `color-primitive-public-green-900` | `var(--ds-color-primitive-public-green-900)` | `#104631` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
829
+ | `color-primitive-public-green-950` | `var(--ds-color-primitive-public-green-950)` | `#092a1e` | — | Darkest variant. Used by Brand collection. |
830
+ | `color-primitive-public-green-500` | `var(--ds-color-primitive-public-green-500)` | `#25935f` | — | Medium shade. Secondary emphasis. Used by Brand collection. |
831
+ | `color-primitive-public-green-600` | `var(--ds-color-primitive-public-green-600)` | `#1b8354` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
832
+
833
+ ## Public Gold
834
+
835
+ | Token | CSS variable | Light | Dark | Description |
836
+ | --- | --- | --- | --- | --- |
837
+ | `color-primitive-public-gold-25` | `var(--ds-color-primitive-public-gold-25)` | `#fffef7` | — | Lightest tint of this brand role. Subtle backgrounds, hover surfaces. Used by Brand collection — do not bind directly to components. |
838
+ | `color-primitive-public-gold-50` | `var(--ds-color-primitive-public-gold-50)` | `#fffef2` | — | Very light tint of this brand role. Soft backgrounds, gentle hover. Used by Brand collection. |
839
+ | `color-primitive-public-gold-100` | `var(--ds-color-primitive-public-gold-100)` | `#fffce6` | — | Light shade. Tinted backgrounds, subtle accents. Used by Brand collection. Below 3:1 on white. |
840
+ | `color-primitive-public-gold-200` | `var(--ds-color-primitive-public-gold-200)` | `#fcf3bd` | — | Light shade. Borders, decorative accents. Used by Brand collection. Below 3:1 on white. |
841
+ | `color-primitive-public-gold-300` | `var(--ds-color-primitive-public-gold-300)` | `#fae996` | — | Mid-light shade. Disabled states, secondary icons. Used by Brand collection. |
842
+ | `color-primitive-public-gold-400` | `var(--ds-color-primitive-public-gold-400)` | `#f7d54d` | — | Mid shade. Used for text/icons in Dark mode contexts. Used by Brand collection. Fails AA on white. |
843
+ | `color-primitive-public-gold-700` | `var(--ds-color-primitive-public-gold-700)` | `#b87b02` | — | Dark shade — hover/emphasis state. Used by Brand collection. White text passes AAA. |
844
+ | `color-primitive-public-gold-800` | `var(--ds-color-primitive-public-gold-800)` | `#945c01` | — | Very dark shade — selected/pressed emphasis. Used by Brand collection. |
845
+ | `color-primitive-public-gold-900` | `var(--ds-color-primitive-public-gold-900)` | `#6e3c00` | — | Near-darkest shade — strong emphasis. Used by Brand collection. |
846
+ | `color-primitive-public-gold-950` | `var(--ds-color-primitive-public-gold-950)` | `#472400` | — | Darkest variant. Used by Brand collection. |
847
+ | `color-primitive-public-gold-500` | `var(--ds-color-primitive-public-gold-500)` | `#f5bd02` | — | Medium shade. Secondary emphasis. Used by Brand collection. |
848
+ | `color-primitive-public-gold-600` | `var(--ds-color-primitive-public-gold-600)` | `#dba102` | — | Primary brand anchor — main primary brand color value. Used by Brand collection — do not bind directly to components. White text passes AA. |
849
+
850
+ ## Background
851
+
852
+ | Token | CSS variable | Light | Dark | Description |
853
+ | --- | --- | --- | --- | --- |
854
+ | `color-bg-default` | `var(--ds-color-bg-default)` | `#ffffff` | `#0d121c` | Default page surface. Light: white. Dark: deep neutral. Brand-tinted in active brand mode. Pair text with text-default. |
855
+ | `color-bg-muted` | `var(--ds-color-bg-muted)` | `#f9fafb` | `#111927` | Muted neutral surface — slightly recessed sections, soft separators. |
856
+ | `color-bg-brand-muted` | `var(--ds-color-bg-brand-muted)` | `#f3fcf6` | `#1b83541a` | Moderate brand-colored tint. Brand callouts, accented sections. Switches per active brand mode. |
857
+ | `color-bg-brand` | `var(--ds-color-bg-brand)` | `#1b8354` | — | Saturated brand fill. Hero panels, prominent brand surfaces. Switches per active brand mode. Pair text with text-on-color. |
858
+ | `color-bg-brand-secondary-muted` | `var(--ds-color-bg-brand-secondary-muted)` | `#fffef2` | `#1f2a37` | Moderate secondary brand tint. Secondary accent panels. |
859
+ | `color-bg-brand-tertiary-muted` | `var(--ds-color-bg-brand-tertiary-muted)` | `#f9f5fa` | `#1f2a37` | Moderate tertiary brand tint. Tertiary accent panels. |
860
+ | `color-bg-success-muted` | `var(--ds-color-bg-success-muted)` | `#ecfdf3` | `#074d31` | Moderate success surface — medium green tint. Success banners. Stays green across all brand modes. |
861
+ | `color-bg-info-muted` | `var(--ds-color-bg-info-muted)` | `#eff8ff` | `#194185` | Moderate info surface — medium blue tint. Info banners. Stays blue across all brand modes. |
862
+ | `color-bg-warning-muted` | `var(--ds-color-bg-warning-muted)` | `#fffaeb` | `#7a2e0e` | Moderate warning surface — medium yellow tint. Warning banners. Stays yellow across all brand modes. |
863
+ | `color-bg-danger-muted` | `var(--ds-color-bg-danger-muted)` | `#fef3f2` | `#7a271a` | Moderate danger surface — medium red tint. Error banners. Stays red across all brand modes. |
864
+ | `color-bg-inverse` | `var(--ds-color-bg-inverse)` | `#161616` | `#ffffff` | Inverse surface — opposite of default. Light: near-black. Dark: white. Use for high-contrast inverse panels. |
865
+ | `color-bg-success-strong` | `var(--ds-color-bg-success-strong)` | `#067647` | — | Saturated success fill. Solid success badges, status pills. Stays green across all brand modes. Pair text with text-on-color. |
866
+ | `color-bg-info-strong` | `var(--ds-color-bg-info-strong)` | `#1570ef` | — | Saturated info fill. Solid info badges, status pills. Stays blue across all brand modes. Pair text with text-on-color. |
867
+ | `color-bg-warning-strong` | `var(--ds-color-bg-warning-strong)` | `#b54708` | — | Saturated warning fill. Solid warning badges, status pills. Stays yellow across all brand modes. Pair text with text-default (dark) — yellow fails contrast with white. |
868
+ | `color-bg-danger-strong` | `var(--ds-color-bg-danger-strong)` | `#d92d20` | — | Saturated danger fill. Solid error badges, destructive action backgrounds. Stays red across all brand modes. Pair text with text-on-color. |
869
+ | `color-bg-neutral-strong` | `var(--ds-color-bg-neutral-strong)` | `#9da4ae` | — | Static mid-gray (does not flip per theme). Decorative dividers, fixed accents independent of theme. |
870
+ | `color-bg-emphasis-low` | `var(--ds-color-bg-emphasis-low)` | `#f9fafb` | `#1f2a37` | Low-emphasis neutral surface — subtle elevation, callout strips. |
871
+ | `color-bg-sa-flag` | `var(--ds-color-bg-sa-flag)` | `#074d31` | `#1b8354` | Specific anchored brand surface — always uses the same saturated green regardless of active brand mode. Use sparingly for specific contextual emphasis. |
872
+ | `color-bg-sa-flag-muted` | `var(--ds-color-bg-sa-flag-muted)` | `#ecfdf3` | `#1f2a37` | Specific anchored brand surface — moderate tint. Always uses the same green regardless of active brand mode. |
873
+ | `color-bg-emphasis-strong` | `var(--ds-color-bg-emphasis-strong)` | `#1f2a37` | — | Strongest emphasis neutral surface — heavy contrast against default. Use sparingly. |
874
+ | `color-bg-emphasis-high` | `var(--ds-color-bg-emphasis-high)` | `#6c737f` | — | High-emphasis neutral surface — strong recessed sections, hover on interactive panels. |
875
+ | `color-bg-emphasis-medium` | `var(--ds-color-bg-emphasis-medium)` | `#e5e7eb` | `#384250` | Medium-emphasis neutral surface — recessed groups, sidebar panels. |
876
+ | `color-bg-subtle` | `var(--ds-color-bg-subtle)` | `#fcfcfd` | `#0d121c` | Subtle neutral surface — softest tint above default. Alternating rows, hover surfaces. |
877
+ | `color-bg-disabled` | `var(--ds-color-bg-disabled)` | `#e5e7eb` | `#384250` | Disabled surface — gray fill for disabled controls and surfaces. Pair with text-disabled. |
878
+ | `color-bg-canvas` | `var(--ds-color-bg-canvas)` | `#f9fafb` | `#111927` | Page canvas — backdrop behind cards/content. Slightly darker than default. Light: light gray. Dark: dark navy. |
879
+ | `color-bg-brand-subtle` | `var(--ds-color-bg-brand-subtle)` | `#f7fdf9` | `#092a1e` | Softest brand-colored tint. Subtle brand callouts, gentle accent backgrounds. Switches per active brand mode. |
880
+ | `color-bg-brand-secondary-subtle` | `var(--ds-color-bg-brand-secondary-subtle)` | `#fffef7` | `#111927` | Softest secondary brand tint. Subtle secondary accent surfaces. |
881
+ | `color-bg-brand-tertiary-subtle` | `var(--ds-color-bg-brand-tertiary-subtle)` | `#fefcff` | `#111927` | Softest tertiary brand tint. Subtle tertiary accent surfaces. |
882
+ | `color-bg-success-subtle` | `var(--ds-color-bg-success-subtle)` | `#f6fef9` | `#053321` | Subtle success surface — soft green tint. Success alert backgrounds. Stays green across all brand modes. |
883
+ | `color-bg-info-subtle` | `var(--ds-color-bg-info-subtle)` | `#f5faff` | `#102a56` | Subtle info surface — soft blue tint. Info alert backgrounds. Stays blue across all brand modes. |
884
+ | `color-bg-warning-subtle` | `var(--ds-color-bg-warning-subtle)` | `#fffcf5` | `#4e1d09` | Subtle warning surface — soft yellow tint. Warning alert backgrounds. Stays yellow across all brand modes. |
885
+ | `color-bg-danger-subtle` | `var(--ds-color-bg-danger-subtle)` | `#fffbfa` | `#55160c` | Subtle danger surface — soft red tint. Error alert backgrounds. Stays red across all brand modes. |
886
+ | `color-bg-sa-flag-subtle` | `var(--ds-color-bg-sa-flag-subtle)` | `#f6fef9` | `#111927` | Specific anchored brand surface — subtle tint. Always uses the same green regardless of active brand mode. |
887
+ | `color-bg-overlay` | `var(--ds-color-bg-overlay)` | `#ffffff` | `#1f2a37` | Overlay surface — menus, dropdowns, tooltips. Sits above page content. Same value as raised in most themes. |
888
+ | `color-bg-disabled-inverse` | `var(--ds-color-bg-disabled-inverse)` | `#f3f4f6` | `#384250` | Disabled surface on inverse contexts. Disabled state for elements on inverse backgrounds. |
889
+ | `color-bg-disabled-brand` | `var(--ds-color-bg-disabled-brand)` | `#b8eacb` | `#166a45` | Disabled brand surface — desaturated brand color for disabled brand-colored elements. |
890
+ | `color-bg-raised` | `var(--ds-color-bg-raised)` | `#ffffff` | `#1f2a37` | Raised surface — cards, popovers, content blocks. Sits above default surface. Pair text with text-default. |
891
+ | `color-bg-on-color` | `var(--ds-color-bg-on-color)` | `#ffffff` | — | White surface that sits ON a colored brand background. Stays white in both Light and Dark. Used inside primary buttons or hero sections. |
892
+ | `color-bg-brand-accent` | `var(--ds-color-bg-brand-accent)` | `#54c08a` | — | Static brand accent (mid-shade). Decorative brand element that does not flip per theme. |
893
+ | `color-bg-notification` | `var(--ds-color-bg-notification)` | `#ffffff` | `#111927` | Notification surface — toasts, snackbars, in-app alerts. Theme-aware; pair text with text-default. |
894
+ | `color-bg-brand-emphasis` | `var(--ds-color-bg-brand-emphasis)` | `#b8eacb` | `#384250` | Stronger brand presence. Prominent brand sections without full saturation. Switches per active brand mode. |
895
+ | `color-bg-nav-header` | `var(--ds-color-bg-nav-header)` | `#14573a` | — | Navigation header surface — specific deep brand color used in app nav header. Static across themes. |
896
+
897
+ ## Text
898
+
899
+ | Token | CSS variable | Light | Dark | Description |
900
+ | --- | --- | --- | --- | --- |
901
+ | `color-text-brand` | `var(--ds-color-text-brand)` | `#166a45` | `#88d8ad` | Brand-colored text — for brand callouts, active state labels, brand emphasis. Switches per active brand mode. Use sparingly. |
902
+ | `color-text-display` | `var(--ds-color-text-display)` | `#1f2a37` | `#f9fafb` | Display heading text — for large prominent headings (H1, H2). Slightly different weight/contrast than body. |
903
+ | `color-text-paragraph` | `var(--ds-color-text-paragraph)` | `#384250` | `#f3f4f6` | Long-form paragraph text — body content in articles, descriptions. Slightly muted vs text-default. |
904
+ | `color-text-paragraph-muted` | `var(--ds-color-text-paragraph-muted)` | `#4d5761` | `#e5e7eb` | Muted paragraph text — secondary descriptions, less prominent paragraphs. |
905
+ | `color-text-success` | `var(--ds-color-text-success)` | `#067647` | `#47cd89` | Success message text — green. Confirmation messages, success states. Stays green across all brand modes. |
906
+ | `color-text-info` | `var(--ds-color-text-info)` | `#175cd3` | `#84caff` | Info message text — blue. Informational labels, hints. Stays blue across all brand modes. |
907
+ | `color-text-warning` | `var(--ds-color-text-warning)` | `#b54708` | `#fdb022` | Warning message text — orange/yellow. Caution messages, warning states. Stays warm across all brand modes. |
908
+ | `color-text-danger` | `var(--ds-color-text-danger)` | `#b42318` | `#fda29b` | Danger/error message text — red. Error labels, validation feedback. Stays red across all brand modes. |
909
+ | `color-text-on-color` | `var(--ds-color-text-on-color)` | `#ffffff` | — | Default text on colored brand surfaces (white). Stays white across themes. Use on primary buttons, brand-colored hero panels. |
910
+ | `color-text-default` | `var(--ds-color-text-default)` | `#161616` | `#ffffff` | Default body text. Light: near-black. Dark: near-white. Most common text token — start here for any body content. |
911
+ | `color-text-disabled` | `var(--ds-color-text-disabled)` | `#6c737f` | `#9da4ae` | Disabled text — desaturated gray for disabled labels, controls. |
912
+ | `color-text-on-color-disabled` | `var(--ds-color-text-on-color-disabled)` | `#ffffff66` | — | Disabled text on colored surfaces. Pair with background-brand or button-background-primary-default. |
913
+ | `color-text-brand-subtle` | `var(--ds-color-text-brand-subtle)` | `#88d8ad` | `#54c08a` | Subtle brand-tinted text — softer than text-brand. Decorative brand text accents. |
914
+ | `color-text-sa-flag` | `var(--ds-color-text-sa-flag)` | `#14573a` | `#dff6e7` | Specific anchored brand text — always uses the same dark green regardless of active brand mode. Use for specific contextual brand emphasis. |
915
+ | `color-text-on-color-muted` | `var(--ds-color-text-on-color-muted)` | `#ffffff` | — | Muted text on colored surfaces. Slightly less prominent than text-on-color. |
916
+ | `color-text-on-color-subtle` | `var(--ds-color-text-on-color-subtle)` | `#ffffffb3` | — | Subtle text on colored surfaces. Tertiary text on brand backgrounds. |
917
+ | `color-text-on-warning` | `var(--ds-color-text-on-warning)` | `#111927` | — | Dark text used on warning surfaces (yellow). Always dark — yellow + white text fails WCAG AA contrast in any theme. Use this for labels and icons that sit on background-warning-strong, button-warning-* (if any), or warni |
918
+
919
+ ## Form
920
+
921
+ | Token | CSS variable | Light | Dark | Description |
922
+ | --- | --- | --- | --- | --- |
923
+ | `color-form-field-text-placeholder` | `var(--ds-color-form-field-text-placeholder)` | `#4d5761` | `#e5e7eb` | Form field placeholder text — disappears on input. |
924
+ | `color-form-field-text-focused` | `var(--ds-color-form-field-text-focused)` | `#384250` | `#f3f4f6` | Form field text in focused state. |
925
+ | `color-form-field-text-filled` | `var(--ds-color-form-field-text-filled)` | `#161616` | `#ffffff` | Form field text when user has entered a value. |
926
+ | `color-form-field-text-helper` | `var(--ds-color-form-field-text-helper)` | `#4d5761` | `#e5e7eb` | Form field helper text — supplementary instruction below the field. |
927
+ | `color-form-field-text-label` | `var(--ds-color-form-field-text-label)` | `#161616` | `#ffffff` | Form field label text — describes the field. |
928
+ | `color-form-text-form-title` | `var(--ds-color-form-text-form-title)` | `#161616` | `#ffffff` | Form section title text. |
929
+ | `color-form-text-form-paragraph` | `var(--ds-color-form-text-form-paragraph)` | `#4d5761` | `#e5e7eb` | Form supporting paragraph text. |
930
+ | `color-form-field-bg-default` | `var(--ds-color-form-field-bg-default)` | `#ffffff` | `#1f2a37` | Default form field background — input fill in default state. |
931
+ | `color-form-field-bg-lighter` | `var(--ds-color-form-field-bg-lighter)` | `#fcfcfd` | `#4d5761` | Lighter form field background — for nested or de-emphasized fields. |
932
+ | `color-form-field-bg-darker` | `var(--ds-color-form-field-bg-darker)` | `#f3f4f6` | `#1f2a37` | Darker form field background — for emphasized input contexts. |
933
+ | `color-form-field-bg-pressed` | `var(--ds-color-form-field-bg-pressed)` | `#f3f4f6` | `#4d5761` | Form field background when pressed/active. |
934
+ | `color-form-field-border-default` | `var(--ds-color-form-field-border-default)` | `#6c737f` | — | Default form field border — outline of input fields. |
935
+ | `color-form-field-border-hovered` | `var(--ds-color-form-field-border-hovered)` | `#384250` | `#e5e7eb` | Form field border on hover. |
936
+ | `color-form-field-border-pressed` | `var(--ds-color-form-field-border-pressed)` | `#0d121c` | `#fcfcfd` | Form field border when pressed/focused. |
937
+ | `color-form-field-border-danger` | `var(--ds-color-form-field-border-danger)` | `#b42318` | `#f97066` | Form field border for error/validation-failed state. Stays red across brand modes. |
938
+ | `color-form-field-text-readonly` | `var(--ds-color-form-field-text-readonly)` | `#161616` | `#ffffff` | Form field text in read-only state. |
939
+ | `color-form-field-text-hovered` | `var(--ds-color-form-field-text-hovered)` | `#161616` | `#ffffff` | Form field text on hover state. |
940
+ | `color-form-field-text-pressed` | `var(--ds-color-form-field-text-pressed)` | `#384250` | `#f3f4f6` | Form field text when pressed/focused. |
941
+ | `color-form-option-bg-hover` | `var(--ds-color-form-option-bg-hover)` | `#f3f4f6` | `#6c737f` | Select/dropdown option background on hover. |
942
+ | `color-form-option-bg-pressed` | `var(--ds-color-form-option-bg-pressed)` | `#e5e7eb` | `#384250` | Select/dropdown option background when pressed. |
943
+ | `color-form-datecell-bg-default` | `var(--ds-color-form-datecell-bg-default)` | `#1b8354` | — | Date cell default background — calendar grid cell. |
944
+ | `color-form-datecell-bg-hovered` | `var(--ds-color-form-datecell-bg-hovered)` | `#166a45` | — | Date cell on hover. |
945
+ | `color-form-datecell-bg-pressed` | `var(--ds-color-form-datecell-bg-pressed)` | `#104631` | — | Date cell when pressed. |
946
+ | `color-form-datecell-bg-focused` | `var(--ds-color-form-datecell-bg-focused)` | `#1b8354` | — | Date cell in focus state. |
947
+ | `color-form-datecell-today-bg-default` | `var(--ds-color-form-datecell-today-bg-default)` | `#ffffff00` | — | Date cell for "today" — default state with subtle indicator. |
948
+ | `color-form-datecell-today-bg-hovered` | `var(--ds-color-form-datecell-today-bg-hovered)` | `#e5e7eb` | `#384250` | Today cell on hover. |
949
+ | `color-form-datecell-today-bg-pressed` | `var(--ds-color-form-datecell-today-bg-pressed)` | `#d2d6db` | `#4d5761` | Today cell when pressed. |
950
+ | `color-form-datecell-today-bg-focused` | `var(--ds-color-form-datecell-today-bg-focused)` | `#ffffff00` | — | Today cell in focus state. |
951
+ | `color-form-datecell-bg-300` | `var(--ds-color-form-datecell-bg-300)` | `#88d8ad` | — | Date cell range background, medium fill. |
952
+ | `color-form-datecell-bg-600` | `var(--ds-color-form-datecell-bg-600)` | `#1b8354` | — | Date cell range background, saturated fill (selected). |
953
+ | `color-form-datecell-bg-100` | `var(--ds-color-form-datecell-bg-100)` | `#f3fcf6` | `#092a1e` | Date cell range background, lightest fill (start/end date). |
954
+ | `color-form-datecell-bg-200` | `var(--ds-color-form-datecell-bg-200)` | `#f3fcf6` | `#104631` | Date cell range background, light fill. |
955
+ | `color-form-datecell-bg-disabled` | `var(--ds-color-form-datecell-bg-disabled)` | `#ffffff` | — | Date cell disabled state — past dates, blocked dates. |
956
+ | `color-form-textarea-scrollbar-bar` | `var(--ds-color-form-textarea-scrollbar-bar)` | `#6c737f` | `#4d5761` | Textarea scrollbar thumb color. |
957
+ | `color-form-switch-track-off-default` | `var(--ds-color-form-switch-track-off-default)` | `#6c737f` | — | Switch track, off, default. |
958
+ | `color-form-switch-track-off-hovered` | `var(--ds-color-form-switch-track-off-hovered)` | `#384250` | `#e5e7eb` | Switch track, off, hovered. |
959
+ | `color-form-switch-track-off-pressed` | `var(--ds-color-form-switch-track-off-pressed)` | `#0d121c` | `#fcfcfd` | Switch track, off, pressed. |
960
+
961
+ ## Border
962
+
963
+ | Token | CSS variable | Light | Dark | Description |
964
+ | --- | --- | --- | --- | --- |
965
+ | `color-border-disabled-strong` | `var(--ds-color-border-disabled-strong)` | `#9da4ae` | — | Stronger disabled border — higher contrast disabled state. |
966
+ | `color-border-default` | `var(--ds-color-border-default)` | `#d2d6db` | `#4d5761` | Default border — most common divider/border. Used for cards, inputs, generic separators. Theme-aware. |
967
+ | `color-border-muted` | `var(--ds-color-border-muted)` | `#e5e7eb` | `#384250` | Muted border — softer than default. Subtle separators between related sections. |
968
+ | `color-border-subtle` | `var(--ds-color-border-subtle)` | `#f3f4f6` | `#1f2a37` | Softest border — minimal contrast. Internal dividers within content groups. |
969
+ | `color-border-inverse` | `var(--ds-color-border-inverse)` | `#ffffff` | `#161616` | Inverse border — opposite of default. Light: white. Dark: dark. Use on inverse surfaces. |
970
+ | `color-border-strong` | `var(--ds-color-border-strong)` | `#161616` | `#ffffff` | High-contrast border — emphasized dividers, focus states. Light: near-black. Dark: white. |
971
+ | `color-border-success-strong` | `var(--ds-color-border-success-strong)` | `#067647` | `#47cd89` | Saturated success border. Solid success indicators. Stays green across all brand modes. |
972
+ | `color-border-info-strong` | `var(--ds-color-border-info-strong)` | `#175cd3` | `#53b1fd` | Saturated info border. Solid info indicators. Stays blue across all brand modes. |
973
+ | `color-border-warning-strong` | `var(--ds-color-border-warning-strong)` | `#b54708` | `#fdb022` | Saturated warning border. Solid warning indicators. Stays yellow across all brand modes. |
974
+ | `color-border-danger-strong` | `var(--ds-color-border-danger-strong)` | `#b42318` | `#f97066` | Saturated danger border — error states, destructive action borders. Stays red across all brand modes. |
975
+ | `color-border-on-default` | `var(--ds-color-border-on-default)` | `#f3f4f6` | `#4d5761` | Border that matches default surface tone — used for subtle separation against the default background. |
976
+ | `color-border-default-strong` | `var(--ds-color-border-default-strong)` | `#d2d6db` | `#6c737f` | Stronger default border — slightly more contrast than border-default. Use when default is too subtle. |
977
+ | `color-border-brand-subtle` | `var(--ds-color-border-brand-subtle)` | `#b8eacb` | `#abefc6` | Subtle brand-tinted border. Soft brand-accent borders. Switches per active brand mode. |
978
+ | `color-border-brand` | `var(--ds-color-border-brand)` | `#1b8354` | `#88d8ad` | Brand-colored border — focus rings, brand-accented dividers. Switches per active brand mode. |
979
+ | `color-border-success-subtle` | `var(--ds-color-border-success-subtle)` | `#abefc6` | `#47cd89` | Subtle success border. Light success accents. Stays green across all brand modes. |
980
+ | `color-border-info-subtle` | `var(--ds-color-border-info-subtle)` | `#b2ddff` | `#53b1fd` | Subtle info border. Light info accents. Stays blue across all brand modes. |
981
+ | `color-border-warning-subtle` | `var(--ds-color-border-warning-subtle)` | `#fedf89` | `#fdb022` | Subtle warning border. Light warning accents. Stays yellow across all brand modes. |
982
+ | `color-border-danger-subtle` | `var(--ds-color-border-danger-subtle)` | `#fecdca` | `#f97066` | Subtle danger border. Soft error indicators. Stays red across all brand modes. |
983
+ | `color-border-on-dark-40` | `var(--ds-color-border-on-dark-40)` | `#ffffff66` | — | Border on dark surfaces at 40% opacity. Subtle separator on dark backgrounds. |
984
+ | `color-border-on-default-10` | `var(--ds-color-border-on-default-10)` | `#ffffff1a` | — | Border on default surface at 10% opacity. Very subtle internal divider. |
985
+ | `color-border-on-color-30` | `var(--ds-color-border-on-color-30)` | `#ffffff4d` | — | Border on a colored/brand surface at 30% opacity. Used inside primary buttons or brand panels. |
986
+ | `color-border-disabled` | `var(--ds-color-border-disabled)` | `#d2d6db` | `#6c737f` | Disabled border — desaturated gray for disabled controls. Pair with background-disabled and text-disabled. |
987
+ | `color-border-focus` | `var(--ds-color-border-focus)` | `#111927` | `#f9fafb` | Focus ring, outer (Button focus). |
988
+
989
+ ## Alpha
990
+
991
+ | Token | CSS variable | Light | Dark | Description |
992
+ | --- | --- | --- | --- | --- |
993
+ | `color-alpha-white-10` | `var(--ds-color-alpha-white-10)` | `#ffffff1a` | `#1616161a` | White overlay at 10% — subtle hover tint on dark surfaces. Theme-aware. |
994
+ | `color-alpha-white-20` | `var(--ds-color-alpha-white-20)` | `#ffffff33` | `#16161633` | White overlay at 20% — hover/pressed tints on dark surfaces. Theme-aware. |
995
+ | `color-alpha-white-30` | `var(--ds-color-alpha-white-30)` | `#ffffff4d` | `#1616164d` | White overlay at 30% — pressed tints on dark surfaces. Theme-aware. |
996
+ | `color-alpha-white-40` | `var(--ds-color-alpha-white-40)` | `#ffffff66` | `#16161666` | White overlay at 40% — disabled overlays on dark surfaces. Theme-aware. |
997
+ | `color-alpha-white-50` | `var(--ds-color-alpha-white-50)` | `#ffffff80` | `#16161680` | White overlay at 50% — semi-transparent white surfaces. Theme-aware. |
998
+ | `color-alpha-white-60` | `var(--ds-color-alpha-white-60)` | `#ffffff99` | `#16161699` | White overlay at 60% — heavier translucent white. Theme-aware. |
999
+ | `color-alpha-white-70` | `var(--ds-color-alpha-white-70)` | `#ffffffb3` | `#161616b3` | White overlay at 70% — heavy translucent white. Theme-aware. |
1000
+ | `color-alpha-white-80` | `var(--ds-color-alpha-white-80)` | `#ffffffcc` | `#161616cc` | White overlay at 80% — near-opaque white with subtle transparency. Theme-aware. |
1001
+ | `color-alpha-white-90` | `var(--ds-color-alpha-white-90)` | `#ffffffe6` | `#161616e6` | White overlay at 90% — almost-solid white surface. Theme-aware. |
1002
+ | `color-alpha-white-100` | `var(--ds-color-alpha-white-100)` | `#ffffff` | `#161616` | White overlay at 100% — fully opaque white. Theme-aware. |
1003
+ | `color-alpha-black-10` | `var(--ds-color-alpha-black-10)` | `#1616161a` | `#ffffff1a` | Black overlay at 10% — subtle scrim, hover tint on light surfaces. Theme-aware. |
1004
+ | `color-alpha-black-20` | `var(--ds-color-alpha-black-20)` | `#16161633` | `#ffffff33` | Black overlay at 20% — light scrim. Theme-aware. |
1005
+ | `color-alpha-black-30` | `var(--ds-color-alpha-black-30)` | `#1616164d` | `#ffffff4d` | Black overlay at 30% — moderate scrim, pressed tints. Theme-aware. |
1006
+ | `color-alpha-black-40` | `var(--ds-color-alpha-black-40)` | `#16161666` | `#ffffff66` | Black overlay at 40% — disabled overlays. Theme-aware. |
1007
+ | `color-alpha-black-50` | `var(--ds-color-alpha-black-50)` | `#16161680` | `#ffffff80` | Black overlay at 50% — modal scrim, dialog backdrop. Most common scrim opacity. Theme-aware. |
1008
+ | `color-alpha-black-60` | `var(--ds-color-alpha-black-60)` | `#16161699` | `#ffffff99` | Black overlay at 60% — heavier modal scrim. Theme-aware. |
1009
+ | `color-alpha-black-70` | `var(--ds-color-alpha-black-70)` | `#161616b3` | `#ffffffb3` | Black overlay at 70% — strong scrim. Theme-aware. |
1010
+ | `color-alpha-black-80` | `var(--ds-color-alpha-black-80)` | `#161616cc` | `#ffffffcc` | Black overlay at 80% — very dark scrim. Theme-aware. |
1011
+ | `color-alpha-black-90` | `var(--ds-color-alpha-black-90)` | `#161616e6` | `#ffffffe6` | Black overlay at 90% — near-opaque dark surface. Theme-aware. |
1012
+ | `color-alpha-black-100` | `var(--ds-color-alpha-black-100)` | `#161616` | `#ffffff` | Black overlay at 100% — fully opaque black. Theme-aware. |
1013
+ | `color-alpha-white-0` | `var(--ds-color-alpha-white-0)` | `#ffffff00` | `#1616161a` | White overlay at 0% opacity (fully transparent placeholder). Theme-aware. |
1014
+ | `color-alpha-black-0` | `var(--ds-color-alpha-black-0)` | `#16161600` | `#ffffff1a` | Black overlay at 0% opacity (fully transparent placeholder). Theme-aware. |
1015
+ | `color-alpha-primary-10` | `var(--ds-color-alpha-primary-10)` | `#1b83541a` | — | Brand primary overlay at 10% — subtle brand tint. Switches per active brand mode. |
1016
+ | `color-alpha-primary-20` | `var(--ds-color-alpha-primary-20)` | `#1b835433` | — | Brand primary overlay at 20% — moderate brand tint. Switches per active brand mode. |
1017
+ | `color-alpha-warning-10` | `var(--ds-color-alpha-warning-10)` | `#dc68031a` | — | Yellow overlay at 10% — subtle warning tint. Stays yellow across brand modes. |
1018
+ | `color-alpha-warning-20` | `var(--ds-color-alpha-warning-20)` | `#dc680333` | — | Yellow overlay at 20% — moderate warning tint. |
1019
+ | `color-alpha-danger-10` | `var(--ds-color-alpha-danger-10)` | `#d92d201a` | — | Red overlay at 10% — subtle danger tint. Stays red across brand modes. |
1020
+ | `color-alpha-danger-20` | `var(--ds-color-alpha-danger-20)` | `#d92d2033` | — | Red overlay at 20% — moderate danger tint. |
1021
+ | `color-alpha-info-10` | `var(--ds-color-alpha-info-10)` | `#1570ef1a` | — | Blue overlay at 10% — subtle info tint. Stays blue across brand modes. |
1022
+ | `color-alpha-info-20` | `var(--ds-color-alpha-info-20)` | `#1570ef33` | — | Blue overlay at 20% — moderate info tint. |
1023
+ | `color-alpha-success-10` | `var(--ds-color-alpha-success-10)` | `#0794551a` | — | Green overlay at 10% — subtle success tint. Stays green across brand modes. |
1024
+ | `color-alpha-success-20` | `var(--ds-color-alpha-success-20)` | `#07945533` | — | Green overlay at 20% — moderate success tint. |
1025
+
1026
+ ## Brand
1027
+
1028
+ | Token | CSS variable | Light | Dark | Description |
1029
+ | --- | --- | --- | --- | --- |
1030
+ | `brand-primary-25` | `var(--ds-brand-primary-25)` | `#f7fdf9` | — | Primary brand scale — softest tint. Subtle backgrounds, hover surfaces. Used by Themes/* tokens. Switches per active brand mode. |
1031
+ | `brand-primary-50` | `var(--ds-brand-primary-50)` | `#f3fcf6` | — | Primary brand scale — very light tint. Soft backgrounds, gentle hover states. Used by Themes/* tokens. |
1032
+ | `brand-primary-100` | `var(--ds-brand-primary-100)` | `#dff6e7` | — | Primary brand scale — light shade for tinted backgrounds, subtle dividers. Below 3:1 on white — UI/decorative only. |
1033
+ | `brand-primary-200` | `var(--ds-brand-primary-200)` | `#b8eacb` | — | Primary brand scale — light shade for borders, dividers, decorative accents. Below 3:1 on white. |
1034
+ | `brand-primary-300` | `var(--ds-brand-primary-300)` | `#88d8ad` | — | Primary brand scale — mid-light shade for icons on tinted backgrounds, subtle accents. |
1035
+ | `brand-primary-400` | `var(--ds-brand-primary-400)` | `#54c08a` | — | Primary brand scale — mid-light shade. Used for primary text/icons in Dark mode only. Fails AA on white. |
1036
+ | `brand-primary-700` | `var(--ds-brand-primary-700)` | `#166a45` | — | Primary brand scale — hover/emphasis state. Darker than anchor. White text passes AAA contrast. |
1037
+ | `brand-primary-800` | `var(--ds-brand-primary-800)` | `#14573a` | — | Primary brand scale — selected/pressed emphasis. Deep shade. White text passes AAA. |
1038
+ | `brand-primary-900` | `var(--ds-brand-primary-900)` | `#104631` | — | Primary brand scale — pressed state, deepest emphasis. White text passes AAA. |
1039
+ | `brand-primary-950` | `var(--ds-brand-primary-950)` | `#092a1e` | — | Primary brand scale — darkest variant. Rarely needed; prefer Neutral/950 for max-contrast surfaces. |
1040
+ | `brand-primary-600` | `var(--ds-brand-primary-600)` | `#1b8354` | — | Greeen brand hero green — #166F32. Passes AA with white text/icons (6.26:1). Use as bg for CTAs, badges, highlights. |
1041
+ | `brand-secondary-25` | `var(--ds-brand-secondary-25)` | `#fffef7` | — | Secondary brand accent — softest tint. Subtle accent backgrounds, decorative tints. Used by Themes/* tokens. |
1042
+ | `brand-secondary-50` | `var(--ds-brand-secondary-50)` | `#fffef2` | — | Secondary brand accent — very light tint. Accent backgrounds, soft callouts. |
1043
+ | `brand-secondary-400` | `var(--ds-brand-secondary-400)` | `#f7d54d` | — | Secondary brand accent — mid shade for secondary highlights, decorative icons. Limited contrast — UI/decorative use. |
1044
+ | `brand-secondary-800` | `var(--ds-brand-secondary-800)` | `#945c01` | — | |
1045
+ | `brand-secondary-900` | `var(--ds-brand-secondary-900)` | `#6e3c00` | — | Secondary brand accent — darkest shade. Strong secondary emphasis. |
1046
+ | `brand-tertiary-25` | `var(--ds-brand-tertiary-25)` | `#fefcff` | — | Tertiary brand accent — softest tint. Tertiary brand surfaces, subtle accent. |
1047
+ | `brand-tertiary-50` | `var(--ds-brand-tertiary-50)` | `#f9f5fa` | — | Tertiary brand accent — very light tint. Tertiary backgrounds, soft accent surfaces. |
1048
+ | `brand-tertiary-700` | `var(--ds-brand-tertiary-700)` | `#532d75` | — | |
1049
+ | `brand-tertiary-900` | `var(--ds-brand-tertiary-900)` | `#281047` | — | Tertiary brand accent — darkest shade. Strong tertiary emphasis. |
1050
+ | `brand-tertiary-500` | `var(--ds-brand-tertiary-500)` | `#80519f` | — | ⚠ SURFACE ONLY in Greeen brand — #CDFFAD = 1.13:1 as text on white (FAIL). Text ON this surface must use Primary/900 #163300 → 12.3:1 AAA ✓ |
1051
+ | `brand-neutral-25` | `var(--ds-brand-neutral-25)` | `#fcfcfd` | — | Brand neutral — softest tint of the active brand mode. Subtle dividers, hover backgrounds on default surfaces. |
1052
+ | `brand-neutral-50` | `var(--ds-brand-neutral-50)` | `#f9fafb` | — | Brand neutral — light tint. Page sections, alternating rows, subtle elevation. |
1053
+ | `brand-neutral-100` | `var(--ds-brand-neutral-100)` | `#f3f4f6` | — | Brand neutral — light gray. Alternating rows, subtle dividers, soft backgrounds. |
1054
+ | `brand-neutral-200` | `var(--ds-brand-neutral-200)` | `#e5e7eb` | — | Brand neutral — light gray. Default borders, dividers, recessed surfaces. |
1055
+ | `brand-neutral-300` | `var(--ds-brand-neutral-300)` | `#d2d6db` | — | Brand neutral — medium-light gray. Disabled controls, light borders. |
1056
+ | `brand-neutral-400` | `var(--ds-brand-neutral-400)` | `#9da4ae` | — | Muted/tertiary text. Wise: darkened to #696969 for WCAG AA compliance on both white and Light Mint surfaces. |
1057
+ | `brand-neutral-500` | `var(--ds-brand-neutral-500)` | `#6c737f` | — | Brand neutral — medium gray. Secondary icons, muted UI elements. |
1058
+ | `brand-neutral-600` | `var(--ds-brand-neutral-600)` | `#4d5761` | — | Brand neutral — medium-dark gray. Body text on light backgrounds. Passes AA on white. |
1059
+ | `brand-neutral-700` | `var(--ds-brand-neutral-700)` | `#384250` | — | Brand neutral — dark gray. Default body text, paragraph content. Passes AAA on white. |
1060
+ | `brand-neutral-800` | `var(--ds-brand-neutral-800)` | `#1f2a37` | — | Brand neutral — very dark gray. Display text, prominent headings. Passes AAA on white. |
1061
+ | `brand-neutral-900` | `var(--ds-brand-neutral-900)` | `#111927` | — | Brand neutral — near-black. Strong emphasis, primary headings. |
1062
+ | `brand-neutral-950` | `var(--ds-brand-neutral-950)` | `#0d121c` | — | Brand neutral — darkest. Maximum contrast text on light surfaces. |
1063
+ | `brand-base-white` | `var(--ds-brand-base-white)` | `#ffffff` | — | Brand base white. Default page surface in Light mode. Tinted per active brand (warm/cool). |
1064
+ | `brand-base-black` | `var(--ds-brand-base-black)` | `#161616` | — | Brand base black. Default page surface in Dark mode. Tinted per active brand. |
1065
+ | `brand-alpha-white-0` | `var(--ds-brand-alpha-white-0)` | `#ffffff00` | — | White overlay at 0% opacity (fully transparent). Placeholder / disabled state. |
1066
+ | `brand-alpha-white-10` | `var(--ds-brand-alpha-white-10)` | `#ffffff1a` | — | White overlay at 10% — subtle hover tint on dark surfaces. |
1067
+ | `brand-alpha-white-20` | `var(--ds-brand-alpha-white-20)` | `#ffffff33` | — | White overlay at 20% — hover tint on dark surfaces, glass effects. |
1068
+ | `brand-alpha-white-30` | `var(--ds-brand-alpha-white-30)` | `#ffffff4d` | — | White overlay at 30% — pressed tint on dark surfaces. |
1069
+ | `brand-alpha-white-40` | `var(--ds-brand-alpha-white-40)` | `#ffffff66` | — | White overlay at 40% — selected tint on dark surfaces. |
1070
+ | `brand-alpha-white-50` | `var(--ds-brand-alpha-white-50)` | `#ffffff80` | — | White overlay at 50% — semi-transparent white. Glass surfaces, disabled overlays. |
1071
+ | `brand-alpha-white-60` | `var(--ds-brand-alpha-white-60)` | `#ffffff99` | — | White overlay at 60% — translucent white surfaces. |
1072
+ | `brand-alpha-white-70` | `var(--ds-brand-alpha-white-70)` | `#ffffffb3` | — | White overlay at 70% — heavy translucent white. |
1073
+ | `brand-alpha-white-80` | `var(--ds-brand-alpha-white-80)` | `#ffffffcc` | — | White overlay at 80% — near-opaque white with slight transparency. |
1074
+ | `brand-alpha-white-90` | `var(--ds-brand-alpha-white-90)` | `#ffffffe6` | — | White overlay at 90% — almost-solid white surface. |
1075
+ | `brand-alpha-white-100` | `var(--ds-brand-alpha-white-100)` | `#ffffff` | — | White overlay at 100% — fully opaque white. |
1076
+ | `brand-alpha-black-0` | `var(--ds-brand-alpha-black-0)` | `#16161600` | — | Black overlay at 0% opacity (fully transparent). |
1077
+ | `brand-alpha-black-10` | `var(--ds-brand-alpha-black-10)` | `#1616161a` | — | Black overlay at 10% — subtle scrim, hover tint on light surfaces. |
1078
+ | `brand-alpha-black-20` | `var(--ds-brand-alpha-black-20)` | `#16161633` | — | Black overlay at 20% — light scrim, hover tint. |
1079
+ | `brand-alpha-black-30` | `var(--ds-brand-alpha-black-30)` | `#1616164d` | — | Black overlay at 30% — moderate scrim, pressed tint on light surfaces. |
1080
+ | `brand-alpha-black-40` | `var(--ds-brand-alpha-black-40)` | `#16161666` | — | Black overlay at 40% — moderate scrim, disabled overlays. |
1081
+ | `brand-alpha-black-50` | `var(--ds-brand-alpha-black-50)` | `#16161680` | — | Black overlay at 50% — modal scrim, dialog backdrop. Most common scrim opacity. |
1082
+ | `brand-alpha-black-60` | `var(--ds-brand-alpha-black-60)` | `#16161699` | — | Black overlay at 60% — heavier modal scrim, full-screen overlays. |
1083
+ | `brand-alpha-black-70` | `var(--ds-brand-alpha-black-70)` | `#161616b3` | — | Black overlay at 70% — strong scrim, dark overlays. |
1084
+ | `brand-alpha-black-80` | `var(--ds-brand-alpha-black-80)` | `#161616cc` | — | Black overlay at 80% — very dark scrim. |
1085
+ | `brand-alpha-black-90` | `var(--ds-brand-alpha-black-90)` | `#161616e6` | — | Black overlay at 90% — near-opaque dark surface. |
1086
+ | `brand-alpha-black-100` | `var(--ds-brand-alpha-black-100)` | `#161616` | — | Black overlay at 100% — fully opaque black. |
1087
+ | `brand-button-color-bg` | `var(--ds-brand-button-color-bg)` | `#007aff` | — | Primary button background. Wise: Lime Green #9FE870 (contrast 9.6:1 against #163300 → AAA ✓) |
1088
+ | `brand-button-color-text` | `var(--ds-brand-button-color-text)` | `#ffffff` | — | Greeen: #FFFFFF on #166F32 → 6.26:1 AA ✓ (previously lime+dark green; now rich green+white for bolder feel) |
1089
+ | `brand-button-color-bg-hover` | `var(--ds-brand-button-color-bg-hover)` | `#0066d6` | — | Button hover bg. Wise: Pastel Green #CDFFAD — still 7.2:1 with #163300 (AA ✓) |
1090
+ | `brand-button-padding-vertical` | `var(--ds-brand-button-padding-vertical)` | `10px` | — | Button top/bottom padding. Wise=13px ensures 44px min-height (WCAG AA touch target). |
1091
+ | `brand-button-padding-horizontal` | `var(--ds-brand-button-padding-horizontal)` | `20px` | — | Button left/right padding. Wise uses wider horizontal padding for pill shape. |
1092
+ | `brand-button-min-height` | `var(--ds-brand-button-min-height)` | `44px` | — | Minimum button height — 44px across all brands (WCAG 2.1 AA minimum touch target). |
1093
+ | `brand-button-font-size` | `var(--ds-brand-button-font-size)` | `15px` | — | Button label font size. Wise=18px per DESIGN.md. Minimum 14px for readability. |
1094
+ | `brand-button-font-weight` | `var(--ds-brand-button-font-weight)` | `600` | — | Button label weight. 600 minimum across all brands for legibility on small targets. |
1095
+ | `brand-button-letter-spacing` | `var(--ds-brand-button-letter-spacing)` | `0px` | — | Button letter-spacing in px. Wise=-0.108px per DESIGN.md spec. |
1096
+ | `brand-font-display` | `var(--ds-brand-font-display)` | `IBM Plex Sans Arabic` | — | Display font family — used for headings, hero text, large display sizes. Switches per active brand mode. Pair with Typography/Size/Display/* tokens. |
1097
+ | `brand-font-text` | `var(--ds-brand-font-text)` | `IBM Plex Sans Arabic` | — | Body text font family — used for paragraphs, UI labels, captions. Switches per active brand mode. Pair with Typography/Size/Text/* tokens. |
1098
+ | `brand-font-size-display` | `var(--ds-brand-font-size-display)` | `48px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1099
+ | `brand-font-size-heading` | `var(--ds-brand-font-size-heading)` | `32px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1100
+ | `brand-font-size-subheading` | `var(--ds-brand-font-size-subheading)` | `22px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1101
+ | `brand-font-size-body` | `var(--ds-brand-font-size-body)` | `16px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1102
+ | `brand-font-size-caption` | `var(--ds-brand-font-size-caption)` | `12px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1103
+ | `brand-font-weight-display` | `var(--ds-brand-font-weight-display)` | `700` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1104
+ | `brand-font-weight-heading` | `var(--ds-brand-font-weight-heading)` | `700` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1105
+ | `brand-font-weight-body` | `var(--ds-brand-font-weight-body)` | `400` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1106
+ | `brand-font-weight-caption` | `var(--ds-brand-font-weight-caption)` | `400` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1107
+ | `brand-font-line-height-display` | `var(--ds-brand-font-line-height-display)` | `1.2px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1108
+ | `brand-font-line-height-heading` | `var(--ds-brand-font-line-height-heading)` | `1.25px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1109
+ | `brand-font-line-height-body` | `var(--ds-brand-font-line-height-body)` | `1.5px` | — | Brand font token — switches with Brand mode. Wise uses DESIGN.md values (900 weight, 0.85 line-height for display). |
1110
+ | `brand-spacing-space-1` | `var(--ds-brand-spacing-space-1)` | `4px` | — | Base spacing unit |
1111
+ | `brand-spacing-space-2` | `var(--ds-brand-spacing-space-2)` | `8px` | — | 2× base |
1112
+ | `brand-spacing-space-3` | `var(--ds-brand-spacing-space-3)` | `12px` | — | 3× base |
1113
+ | `brand-spacing-space-4` | `var(--ds-brand-spacing-space-4)` | `16px` | — | 4× base |
1114
+ | `brand-spacing-space-5` | `var(--ds-brand-spacing-space-5)` | `20px` | — | 5× base |
1115
+ | `brand-spacing-space-6` | `var(--ds-brand-spacing-space-6)` | `24px` | — | 6× base — pane padding |
1116
+ | `brand-spacing-space-8` | `var(--ds-brand-spacing-space-8)` | `32px` | — | 8× base — section gap |
1117
+ | `brand-spacing-space-12` | `var(--ds-brand-spacing-space-12)` | `48px` | — | 12× base — large section |