@atlaskit/tokens 13.2.0 → 13.3.1

package/dist/es2019/entry-points/token-metadata.codegen.js

@@ -3,7 +3,7 @@
  *
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::620de1bdd9882e214dcc9ae141009ae7>>
+ * @codegen <<SignedSource::b26e4203c4b2d7818ff4ff30fb0f40cf>>
  * @codegenCommand yarn build tokens
  */
 
@@ -440,2767 +440,2740 @@ export const tokens = [{
     cssProperties: []
   }
 }, {
-  name: 'color.text',
-  path: ['color', 'text', '[default]'],
-  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
-  exampleValue: '#292A2E',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.lime',
-  path: ['color', 'text', 'accent', 'lime', '[default]'],
-  description: 'Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#4C6B1F',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.lime.bolder',
-  path: ['color', 'text', 'accent', 'lime', 'bolder'],
-  description: 'Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#37471F',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.red',
-  path: ['color', 'text', 'accent', 'red', '[default]'],
-  description: 'Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#AE2E24',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.red.bolder',
-  path: ['color', 'text', 'accent', 'red', 'bolder'],
-  description: 'Use for red text on subtle red accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#5D1F1A',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.orange',
-  path: ['color', 'text', 'accent', 'orange', '[default]'],
-  description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#9E4C00',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.orange.bolder',
-  path: ['color', 'text', 'accent', 'orange', 'bolder'],
-  description: 'Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#693200',
-  usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
-  }
-}, {
-  name: 'color.text.accent.yellow',
-  path: ['color', 'text', 'accent', 'yellow', '[default]'],
-  description: 'Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#7F5F01',
+  name: 'color.background.accent.lime.subtlest',
+  path: ['color', 'background', 'accent', 'lime', 'subtlest', '[default]'],
+  description: 'Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#EFFFD6',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.yellow.bolder',
-  path: ['color', 'text', 'accent', 'yellow', 'bolder'],
-  description: 'Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#533F04',
+  name: 'color.background.accent.lime.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'lime', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.lime.subtlest.',
+  exampleValue: '#D3F1A7',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.green',
-  path: ['color', 'text', 'accent', 'green', '[default]'],
-  description: 'Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#216E4E',
+  name: 'color.background.accent.lime.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'lime', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.lime.subtlest.',
+  exampleValue: '#BDE97C',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.green.bolder',
-  path: ['color', 'text', 'accent', 'green', 'bolder'],
-  description: 'Use for green text on subtle green accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#164B35',
+  name: 'color.background.accent.lime.subtler',
+  path: ['color', 'background', 'accent', 'lime', 'subtler', '[default]'],
+  description: 'Use for for backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#D3F1A7',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.teal',
-  path: ['color', 'text', 'accent', 'teal', '[default]'],
-  description: 'Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#206A83',
+  name: 'color.background.accent.lime.subtler.hovered',
+  path: ['color', 'background', 'accent', 'lime', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.lime.subtler.',
+  exampleValue: '#BDE97C',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.teal.bolder',
-  path: ['color', 'text', 'accent', 'teal', 'bolder'],
-  description: 'Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#164555',
+  name: 'color.background.accent.lime.subtler.pressed',
+  path: ['color', 'background', 'accent', 'lime', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.lime.subtler.',
+  exampleValue: '#B3DF72',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.blue',
-  path: ['color', 'text', 'accent', 'blue', '[default]'],
-  description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#1558BC',
+  name: 'color.background.accent.lime.subtle',
+  path: ['color', 'background', 'accent', 'lime', 'subtle', '[default]'],
+  description: 'Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#94C748',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.blue.bolder',
-  path: ['color', 'text', 'accent', 'blue', 'bolder'],
-  description: 'Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#123263',
+  name: 'color.background.accent.lime.subtle.hovered',
+  path: ['color', 'background', 'accent', 'lime', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.lime.subtle.',
+  exampleValue: '#B3DF72',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.purple',
-  path: ['color', 'text', 'accent', 'purple', '[default]'],
-  description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#803FA5',
+  name: 'color.background.accent.lime.subtle.pressed',
+  path: ['color', 'background', 'accent', 'lime', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.lime.subtle.',
+  exampleValue: '#BDE97C',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.purple.bolder',
-  path: ['color', 'text', 'accent', 'purple', 'bolder'],
-  description: 'Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#48245D',
+  name: 'color.background.accent.lime.bolder',
+  path: ['color', 'background', 'accent', 'lime', 'bolder', '[default]'],
+  description: 'Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#5B7F24',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.magenta',
-  path: ['color', 'text', 'accent', 'magenta', '[default]'],
-  description: 'Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#943D73',
+  name: 'color.background.accent.lime.bolder.hovered',
+  path: ['color', 'background', 'accent', 'lime', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.lime.bolder.',
+  exampleValue: '#4C6B1F',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.magenta.bolder',
-  path: ['color', 'text', 'accent', 'magenta', 'bolder'],
-  description: 'Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#50253F',
+  name: 'color.background.accent.lime.bolder.pressed',
+  path: ['color', 'background', 'accent', 'lime', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.lime.bolder.',
+  exampleValue: '#3F5224',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.gray',
-  path: ['color', 'text', 'accent', 'gray', '[default]'],
-  description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
-  exampleValue: '#505258',
+  name: 'color.background.accent.red.subtlest',
+  path: ['color', 'background', 'accent', 'red', 'subtlest', '[default]'],
+  description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#FFECEB',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.accent.gray.bolder',
-  path: ['color', 'text', 'accent', 'gray', 'bolder'],
-  description: 'Use for text and icons on gray subtle accent backgrounds.',
-  exampleValue: '#1E1F21',
+  name: 'color.background.accent.red.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'red', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.red.subtlest.',
+  exampleValue: '#FFD5D2',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.disabled',
-  path: ['color', 'text', 'disabled'],
-  description: 'Use for text in a disabled state.',
-  exampleValue: '#080F214A',
+  name: 'color.background.accent.red.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'red', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.red.subtlest.',
+  exampleValue: '#FFB8B2',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.inverse',
-  path: ['color', 'text', 'inverse'],
-  description: 'Use for text on bold backgrounds.',
-  exampleValue: '#FFFFFF',
+  name: 'color.background.accent.red.subtler',
+  path: ['color', 'background', 'accent', 'red', 'subtler', '[default]'],
+  description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FFD5D2',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.selected',
-  path: ['color', 'text', 'selected'],
-  description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.red.subtler.hovered',
+  path: ['color', 'background', 'accent', 'red', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.red.subtler.',
+  exampleValue: '#FFB8B2',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.brand',
-  path: ['color', 'text', 'brand'],
-  description: 'Use for text that reinforces our brand.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.red.subtler.pressed',
+  path: ['color', 'background', 'accent', 'red', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.red.subtler.',
+  exampleValue: '#FD9891',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.danger',
-  path: ['color', 'text', 'danger', '[default]'],
-  description: 'Use for critical text, such as input field error messaging.',
-  exampleValue: '#AE2E24',
+  name: 'color.background.accent.red.subtle',
+  path: ['color', 'background', 'accent', 'red', 'subtle', '[default]'],
+  description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#F87168',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.danger.bolder',
-  path: ['color', 'text', 'danger', 'bolder'],
-  description: 'Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#5D1F1A',
+  name: 'color.background.accent.red.subtle.hovered',
+  path: ['color', 'background', 'accent', 'red', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.red.subtle.',
+  exampleValue: '#FD9891',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.warning',
-  path: ['color', 'text', 'warning', '[default]'],
-  description: 'Use for text to emphasize caution, such as in moved lozenges.',
-  exampleValue: '#9E4C00',
+  name: 'color.background.accent.red.subtle.pressed',
+  path: ['color', 'background', 'accent', 'red', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.red.subtle.',
+  exampleValue: '#FFB8B2',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.warning.inverse',
-  path: ['color', 'text', 'warning', 'inverse'],
-  description: 'Use for text when on bold warning backgrounds.',
-  exampleValue: '#292A2E',
+  name: 'color.background.accent.red.bolder',
+  path: ['color', 'background', 'accent', 'red', 'bolder', '[default]'],
+  description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#C9372C',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.warning.bolder',
-  path: ['color', 'text', 'warning', 'bolder'],
-  description: 'Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#693200',
+  name: 'color.background.accent.red.bolder.hovered',
+  path: ['color', 'background', 'accent', 'red', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.red.bolder.',
+  exampleValue: '#AE2E24',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.success',
-  path: ['color', 'text', 'success', '[default]'],
-  description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
-  exampleValue: '#4C6B1F',
+  name: 'color.background.accent.red.bolder.pressed',
+  path: ['color', 'background', 'accent', 'red', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.red.bolder.',
+  exampleValue: '#872821',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.success.bolder',
-  path: ['color', 'text', 'success', 'bolder'],
-  description: 'Use for text on top of success semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#37471F',
+  name: 'color.background.accent.orange.subtlest',
+  path: ['color', 'background', 'accent', 'orange', 'subtlest', '[default]'],
+  description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#FFF5DB',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.discovery',
-  path: ['color', 'text', 'discovery', '[default]'],
-  description: 'Use for text to emphasize change or something new, such as in new lozenges.',
-  exampleValue: '#803FA5',
+  name: 'color.background.accent.orange.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'orange', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.orange.subtlest.',
+  exampleValue: '#FCE4A6',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.discovery.bolder',
-  path: ['color', 'text', 'discovery', 'bolder'],
-  description: 'Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#48245D',
+  name: 'color.background.accent.orange.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'orange', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.orange.subtlest.',
+  exampleValue: '#FBD779',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.information',
-  path: ['color', 'text', 'information', '[default]'],
-  description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
-  exampleValue: '#1558BC',
+  name: 'color.background.accent.orange.subtler',
+  path: ['color', 'background', 'accent', 'orange', 'subtler', '[default]'],
+  description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FCE4A6',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.information.bolder',
-  path: ['color', 'text', 'information', 'bolder'],
-  description: 'Use for text on top of information semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#123263',
+  name: 'color.background.accent.orange.subtler.hovered',
+  path: ['color', 'background', 'accent', 'orange', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.orange.subtler.',
+  exampleValue: '#FBD779',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.subtlest',
-  path: ['color', 'text', 'subtlest'],
-  description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
-  exampleValue: '#6B6E76',
+  name: 'color.background.accent.orange.subtler.pressed',
+  path: ['color', 'background', 'accent', 'orange', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.orange.subtler.',
+  exampleValue: '#FBC828',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.text.subtle',
-  path: ['color', 'text', 'subtle'],
-  description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
-  exampleValue: '#505258',
+  name: 'color.background.accent.orange.subtle',
+  path: ['color', 'background', 'accent', 'orange', 'subtle', '[default]'],
+  description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FCA700',
   usageGuidelines: {
-    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.link',
-  path: ['color', 'link', '[default]'],
-  description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.orange.subtle.hovered',
+  path: ['color', 'background', 'accent', 'orange', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.orange.subtle.',
+  exampleValue: '#FBC828',
   usageGuidelines: {
-    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.link.pressed',
-  path: ['color', 'link', 'pressed'],
-  description: 'Use for links in a pressed state.',
-  exampleValue: '#1558BC',
+  name: 'color.background.accent.orange.subtle.pressed',
+  path: ['color', 'background', 'accent', 'orange', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.orange.subtle.',
+  exampleValue: '#FBD779',
   usageGuidelines: {
-    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.link.visited',
-  path: ['color', 'link', 'visited', '[default]'],
-  description: 'Use for visited links.',
-  exampleValue: '#803FA5',
+  name: 'color.background.accent.orange.bolder',
+  path: ['color', 'background', 'accent', 'orange', 'bolder', '[default]'],
+  description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#BD5B00',
   usageGuidelines: {
-    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.link.visited.pressed',
-  path: ['color', 'link', 'visited', 'pressed'],
-  description: 'Use for visited links in a pressed state.',
-  exampleValue: '#48245D',
+  name: 'color.background.accent.orange.bolder.hovered',
+  path: ['color', 'background', 'accent', 'orange', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.orange.bolder.',
+  exampleValue: '#9E4C00',
   usageGuidelines: {
-    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
-    cssProperties: ['color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon',
-  path: ['color', 'icon', '[default]'],
-  description: 'Use for icon-only buttons, or icons paired with color.text',
-  exampleValue: '#292A2E',
+  name: 'color.background.accent.orange.bolder.pressed',
+  path: ['color', 'background', 'accent', 'orange', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.orange.bolder.',
+  exampleValue: '#7A3B00',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.lime',
-  path: ['color', 'icon', 'accent', 'lime'],
-  description: 'Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#6A9A23',
+  name: 'color.background.accent.yellow.subtlest',
+  path: ['color', 'background', 'accent', 'yellow', 'subtlest', '[default]'],
+  description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#FEF7C8',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.red',
-  path: ['color', 'icon', 'accent', 'red'],
-  description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#C9372C',
+  name: 'color.background.accent.yellow.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.yellow.subtlest.',
+  exampleValue: '#F5E989',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.orange',
-  path: ['color', 'icon', 'accent', 'orange'],
-  description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#E06C00',
+  name: 'color.background.accent.yellow.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.yellow.subtlest.',
+  exampleValue: '#EFDD4E',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.yellow',
-  path: ['color', 'icon', 'accent', 'yellow'],
-  description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#B38600',
+  name: 'color.background.accent.yellow.subtler',
+  path: ['color', 'background', 'accent', 'yellow', 'subtler', '[default]'],
+  description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#F5E989',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
+}, {
+  name: 'color.background.accent.yellow.subtler.hovered',
+  path: ['color', 'background', 'accent', 'yellow', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.yellow.subtler.',
+  exampleValue: '#EFDD4E',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.green',
-  path: ['color', 'icon', 'accent', 'green'],
-  description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#22A06B',
+  name: 'color.background.accent.yellow.subtler.pressed',
+  path: ['color', 'background', 'accent', 'yellow', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.yellow.subtler.',
+  exampleValue: '#EED12B',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.teal',
-  path: ['color', 'icon', 'accent', 'teal'],
-  description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#2898BD',
+  name: 'color.background.accent.yellow.subtle',
+  path: ['color', 'background', 'accent', 'yellow', 'subtle', '[default]'],
+  description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#EED12B',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.blue',
-  path: ['color', 'icon', 'accent', 'blue'],
-  description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#357DE8',
+  name: 'color.background.accent.yellow.subtle.hovered',
+  path: ['color', 'background', 'accent', 'yellow', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.yellow.subtle.',
+  exampleValue: '#DDB30E',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.purple',
-  path: ['color', 'icon', 'accent', 'purple'],
-  description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#AF59E1',
+  name: 'color.background.accent.yellow.subtle.pressed',
+  path: ['color', 'background', 'accent', 'yellow', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.yellow.subtle.',
+  exampleValue: '#EFDD4E',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.magenta',
-  path: ['color', 'icon', 'accent', 'magenta'],
-  description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#CD519D',
+  name: 'color.background.accent.yellow.bolder',
+  path: ['color', 'background', 'accent', 'yellow', 'bolder', '[default]'],
+  description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#946F00',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.accent.gray',
-  path: ['color', 'icon', 'accent', 'gray'],
-  description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.',
-  exampleValue: '#7D818A',
+  name: 'color.background.accent.yellow.bolder.hovered',
+  path: ['color', 'background', 'accent', 'yellow', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.yellow.bolder.',
+  exampleValue: '#7F5F01',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.disabled',
-  path: ['color', 'icon', 'disabled'],
-  description: 'Use for icons in a disabled state.',
-  exampleValue: '#080F214A',
+  name: 'color.background.accent.yellow.bolder.pressed',
+  path: ['color', 'background', 'accent', 'yellow', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.yellow.bolder.',
+  exampleValue: '#614A05',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.inverse',
-  path: ['color', 'icon', 'inverse'],
-  description: 'Use for icons on bold backgrounds.',
-  exampleValue: '#FFFFFF',
+  name: 'color.background.accent.green.subtlest',
+  path: ['color', 'background', 'accent', 'green', 'subtlest', '[default]'],
+  description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#DCFFF1',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.selected',
-  path: ['color', 'icon', 'selected'],
-  description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.green.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'green', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.green.subtlest.',
+  exampleValue: '#BAF3DB',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.brand',
-  path: ['color', 'icon', 'brand'],
-  description: 'Use for icons that reinforce our brand.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.green.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'green', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.green.subtlest.',
+  exampleValue: '#97EDC9',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.danger',
-  path: ['color', 'icon', 'danger'],
-  description: 'Use for icons communicating critical information, such as those used in error handing.',
-  exampleValue: '#C9372C',
+  name: 'color.background.accent.green.subtler',
+  path: ['color', 'background', 'accent', 'green', 'subtler', '[default]'],
+  description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#BAF3DB',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.warning',
-  path: ['color', 'icon', 'warning', '[default]'],
-  description: 'Use for icons communicating caution, such as those used in warning section messages.',
-  exampleValue: '#E06C00',
+  name: 'color.background.accent.green.subtler.hovered',
+  path: ['color', 'background', 'accent', 'green', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.green.subtler.',
+  exampleValue: '#97EDC9',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.warning.inverse',
-  path: ['color', 'icon', 'warning', 'inverse'],
-  description: 'Use for icons when on bold warning backgrounds.',
-  exampleValue: '#292A2E',
+  name: 'color.background.accent.green.subtler.pressed',
+  path: ['color', 'background', 'accent', 'green', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.green.subtler.',
+  exampleValue: '#7EE2B8',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.success',
-  path: ['color', 'icon', 'success'],
-  description: 'Use for icons communicating a favorable outcome, such as those used in success section messaged.',
-  exampleValue: '#6A9A23',
+  name: 'color.background.accent.green.subtle',
+  path: ['color', 'background', 'accent', 'green', 'subtle', '[default]'],
+  description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#4BCE97',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.discovery',
-  path: ['color', 'icon', 'discovery'],
-  description: 'Use for icons communicating change or something new, such as discovery section messages.',
-  exampleValue: '#AF59E1',
+  name: 'color.background.accent.green.subtle.hovered',
+  path: ['color', 'background', 'accent', 'green', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.green.subtle.',
+  exampleValue: '#7EE2B8',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.information',
-  path: ['color', 'icon', 'information'],
-  description: 'Use for icons communicating information or something in-progress, such as information section messages.',
-  exampleValue: '#357DE8',
+  name: 'color.background.accent.green.subtle.pressed',
+  path: ['color', 'background', 'accent', 'green', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.green.subtle.',
+  exampleValue: '#97EDC9',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.subtlest',
-  path: ['color', 'icon', 'subtlest'],
-  description: 'Use for icons paired with color.text.subtlest',
-  exampleValue: '#6B6E76',
+  name: 'color.background.accent.green.bolder',
+  path: ['color', 'background', 'accent', 'green', 'bolder', '[default]'],
+  description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#1F845A',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.icon.subtle',
-  path: ['color', 'icon', 'subtle'],
-  description: 'Use for icons paired with color.text.subtle',
-  exampleValue: '#505258',
+  name: 'color.background.accent.green.bolder.hovered',
+  path: ['color', 'background', 'accent', 'green', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.green.bolder.',
+  exampleValue: '#216E4E',
   usageGuidelines: {
-    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
-    cssProperties: ['color', 'fill', 'stroke']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border',
-  path: ['color', 'border', '[default]'],
-  description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.',
-  exampleValue: '#0B120E24',
+  name: 'color.background.accent.green.bolder.pressed',
+  path: ['color', 'background', 'accent', 'green', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.green.bolder.',
+  exampleValue: '#19573D',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.lime',
-  path: ['color', 'border', 'accent', 'lime', '[default]'],
-  description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#6A9A23',
+  name: 'color.background.accent.teal.subtlest',
+  path: ['color', 'background', 'accent', 'teal', 'subtlest', '[default]'],
+  description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#E7F9FF',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.lime.subtle',
-  path: ['color', 'border', 'accent', 'lime', 'subtle'],
-  description: 'Use for decorative lime borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#B3DF72',
+  name: 'color.background.accent.teal.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'teal', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.teal.subtlest.',
+  exampleValue: '#C6EDFB',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.red',
-  path: ['color', 'border', 'accent', 'red', '[default]'],
-  description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E2483D',
+  name: 'color.background.accent.teal.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'teal', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.teal.subtlest.',
+  exampleValue: '#B1E4F7',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.red.subtle',
-  path: ['color', 'border', 'accent', 'red', 'subtle'],
-  description: 'Use for decorative red borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#FD9891',
+  name: 'color.background.accent.teal.subtler',
+  path: ['color', 'background', 'accent', 'teal', 'subtler', '[default]'],
+  description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#C6EDFB',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.orange',
-  path: ['color', 'border', 'accent', 'orange', '[default]'],
-  description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E06C00',
+  name: 'color.background.accent.teal.subtler.hovered',
+  path: ['color', 'background', 'accent', 'teal', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.teal.subtler.',
+  exampleValue: '#B1E4F7',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.orange.subtle',
-  path: ['color', 'border', 'accent', 'orange', 'subtle'],
-  description: 'Use for decorative orange borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#FBC828',
+  name: 'color.background.accent.teal.subtler.pressed',
+  path: ['color', 'background', 'accent', 'teal', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.teal.subtler.',
+  exampleValue: '#9DD9EE',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.yellow',
-  path: ['color', 'border', 'accent', 'yellow', '[default]'],
-  description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#B38600',
+  name: 'color.background.accent.teal.subtle',
+  path: ['color', 'background', 'accent', 'teal', 'subtle', '[default]'],
+  description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#6CC3E0',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.yellow.subtle',
-  path: ['color', 'border', 'accent', 'yellow', 'subtle'],
-  description: 'Use for decorative yellow borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#EED12B',
+  name: 'color.background.accent.teal.subtle.hovered',
+  path: ['color', 'background', 'accent', 'teal', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.teal.subtle.',
+  exampleValue: '#9DD9EE',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.green',
-  path: ['color', 'border', 'accent', 'green', '[default]'],
-  description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#22A06B',
+  name: 'color.background.accent.teal.subtle.pressed',
+  path: ['color', 'background', 'accent', 'teal', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.teal.subtle.',
+  exampleValue: '#B1E4F7',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.green.subtle',
-  path: ['color', 'border', 'accent', 'green', 'subtle'],
-  description: 'Use for decorative green borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#7EE2B8',
+  name: 'color.background.accent.teal.bolder',
+  path: ['color', 'background', 'accent', 'teal', 'bolder', '[default]'],
+  description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#227D9B',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.teal',
-  path: ['color', 'border', 'accent', 'teal', '[default]'],
-  description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#2898BD',
+  name: 'color.background.accent.teal.bolder.hovered',
+  path: ['color', 'background', 'accent', 'teal', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.teal.bolder.',
+  exampleValue: '#206A83',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.teal.subtle',
-  path: ['color', 'border', 'accent', 'teal', 'subtle'],
-  description: 'Use for decorative teal borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#9DD9EE',
+  name: 'color.background.accent.teal.bolder.pressed',
+  path: ['color', 'background', 'accent', 'teal', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.teal.bolder.',
+  exampleValue: '#1A5265',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.blue',
-  path: ['color', 'border', 'accent', 'blue', '[default]'],
-  description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#357DE8',
+  name: 'color.background.accent.blue.subtlest',
+  path: ['color', 'background', 'accent', 'blue', 'subtlest', '[default]'],
+  description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#E9F2FE',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.blue.subtle',
-  path: ['color', 'border', 'accent', 'blue', 'subtle'],
-  description: 'Use for decorative blue borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#8FB8F6',
+  name: 'color.background.accent.blue.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'blue', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.blue.subtlest.',
+  exampleValue: '#CFE1FD',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.purple',
-  path: ['color', 'border', 'accent', 'purple', '[default]'],
-  description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#AF59E1',
+  name: 'color.background.accent.blue.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'blue', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.blue.subtlest.',
+  exampleValue: '#ADCBFB',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.purple.subtle',
-  path: ['color', 'border', 'accent', 'purple', 'subtle'],
-  description: 'Use for decorative purple borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#D8A0F7',
+  name: 'color.background.accent.blue.subtler',
+  path: ['color', 'background', 'accent', 'blue', 'subtler', '[default]'],
+  description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#CFE1FD',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.magenta',
-  path: ['color', 'border', 'accent', 'magenta', '[default]'],
-  description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#CD519D',
+  name: 'color.background.accent.blue.subtler.hovered',
+  path: ['color', 'background', 'accent', 'blue', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.blue.subtler.',
+  exampleValue: '#ADCBFB',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.magenta.subtle',
-  path: ['color', 'border', 'accent', 'magenta', 'subtle'],
-  description: 'Use for decorative magenta borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#F797D2',
+  name: 'color.background.accent.blue.subtler.pressed',
+  path: ['color', 'background', 'accent', 'blue', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.blue.subtler.',
+  exampleValue: '#8FB8F6',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.gray',
-  path: ['color', 'border', 'accent', 'gray', '[default]'],
-  description: 'Use for borders on non-bold gray accent backgrounds.',
-  exampleValue: '#7D818A',
+  name: 'color.background.accent.blue.subtle',
+  path: ['color', 'background', 'accent', 'blue', 'subtle', '[default]'],
+  description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#669DF1',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.accent.gray.subtle',
-  path: ['color', 'border', 'accent', 'gray', 'subtle'],
-  description: 'Use for decorative gray borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#DDDEE1',
+  name: 'color.background.accent.blue.subtle.hovered',
+  path: ['color', 'background', 'accent', 'blue', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.blue.subtle.',
+  exampleValue: '#8FB8F6',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.disabled',
-  path: ['color', 'border', 'disabled'],
-  description: 'Use for borders of elements in a disabled state.',
-  exampleValue: '#0515240F',
+  name: 'color.background.accent.blue.subtle.pressed',
+  path: ['color', 'background', 'accent', 'blue', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.blue.subtle.',
+  exampleValue: '#ADCBFB',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.focused',
-  path: ['color', 'border', 'focused'],
-  description: 'Use for focus rings of elements in a focus state.',
-  exampleValue: '#4688EC',
+  name: 'color.background.accent.blue.bolder',
+  path: ['color', 'background', 'accent', 'blue', 'bolder', '[default]'],
+  description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.input',
-  path: ['color', 'border', 'input'],
-  description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#8C8F97',
+  name: 'color.background.accent.blue.bolder.hovered',
+  path: ['color', 'background', 'accent', 'blue', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.blue.bolder.',
+  exampleValue: '#1558BC',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.inverse',
-  path: ['color', 'border', 'inverse'],
-  description: 'Use for borders on bold backgrounds.',
-  exampleValue: '#FFFFFF',
+  name: 'color.background.accent.blue.bolder.pressed',
+  path: ['color', 'background', 'accent', 'blue', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.blue.bolder.',
+  exampleValue: '#144794',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.selected',
-  path: ['color', 'border', 'selected'],
-  description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.purple.subtlest',
+  path: ['color', 'background', 'accent', 'purple', 'subtlest', '[default]'],
+  description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#F8EEFE',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.brand',
-  path: ['color', 'border', 'brand'],
-  description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.',
-  exampleValue: '#1868DB',
+  name: 'color.background.accent.purple.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'purple', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.purple.subtlest.',
+  exampleValue: '#EED7FC',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.danger',
-  path: ['color', 'border', 'danger', '[default]'],
-  description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
-  exampleValue: '#E2483D',
+  name: 'color.background.accent.purple.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'purple', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.purple.subtlest.',
+  exampleValue: '#E3BDFA',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.danger.subtle',
-  path: ['color', 'border', 'danger', 'subtle'],
-  description: 'Use for decorative danger borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#FD9891',
+  name: 'color.background.accent.purple.subtler',
+  path: ['color', 'background', 'accent', 'purple', 'subtler', '[default]'],
+  description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#EED7FC',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.warning',
-  path: ['color', 'border', 'warning', '[default]'],
-  description: 'Use for borders communicating caution.',
-  exampleValue: '#E06C00',
+  name: 'color.background.accent.purple.subtler.hovered',
+  path: ['color', 'background', 'accent', 'purple', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.purple.subtler.',
+  exampleValue: '#E3BDFA',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.warning.subtle',
-  path: ['color', 'border', 'warning', 'subtle'],
-  description: 'Use for decorative warning borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#FBC828',
+  name: 'color.background.accent.purple.subtler.pressed',
+  path: ['color', 'background', 'accent', 'purple', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.purple.subtler.',
+  exampleValue: '#D8A0F7',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.success',
-  path: ['color', 'border', 'success', '[default]'],
-  description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
-  exampleValue: '#6A9A23',
+  name: 'color.background.accent.purple.subtle',
+  path: ['color', 'background', 'accent', 'purple', 'subtle', '[default]'],
+  description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#C97CF4',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.success.subtle',
-  path: ['color', 'border', 'success', 'subtle'],
-  description: 'Use for decorative success borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#B3DF72',
+  name: 'color.background.accent.purple.subtle.hovered',
+  path: ['color', 'background', 'accent', 'purple', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.purple.subtle.',
+  exampleValue: '#D8A0F7',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.discovery',
-  path: ['color', 'border', 'discovery', '[default]'],
-  description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
-  exampleValue: '#AF59E1',
+  name: 'color.background.accent.purple.subtle.pressed',
+  path: ['color', 'background', 'accent', 'purple', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.purple.subtle.',
+  exampleValue: '#E3BDFA',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.discovery.subtle',
-  path: ['color', 'border', 'discovery', 'subtle'],
-  description: 'Use for decorative discovery borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#D8A0F7',
+  name: 'color.background.accent.purple.bolder',
+  path: ['color', 'background', 'accent', 'purple', 'bolder', '[default]'],
+  description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#964AC0',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.information',
-  path: ['color', 'border', 'information', '[default]'],
-  description: 'Use for borders communicating information or something in-progress.',
-  exampleValue: '#357DE8',
+  name: 'color.background.accent.purple.bolder.hovered',
+  path: ['color', 'background', 'accent', 'purple', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.purple.bolder.',
+  exampleValue: '#803FA5',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.information.subtle',
-  path: ['color', 'border', 'information', 'subtle'],
-  description: 'Use for decorative information borders that do not need to meet 3:1 contrast requirements.',
-  exampleValue: '#8FB8F6',
+  name: 'color.background.accent.purple.bolder.pressed',
+  path: ['color', 'background', 'accent', 'purple', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.purple.bolder.',
+  exampleValue: '#673286',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.border.bold',
-  path: ['color', 'border', 'bold'],
-  description: 'A neutral border option that passes min 3:1 contrast ratios.',
-  exampleValue: '#7D818A',
+  name: 'color.background.accent.magenta.subtlest',
+  path: ['color', 'background', 'accent', 'magenta', 'subtlest', '[default]'],
+  description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#FFECF8',
   usageGuidelines: {
-    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
-    cssProperties: ['border-color', 'outline-color']
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtlest',
-  path: ['color', 'background', 'accent', 'lime', 'subtlest', '[default]'],
-  description: 'Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#EFFFD6',
+  name: 'color.background.accent.magenta.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'magenta', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.magenta.subtlest.',
+  exampleValue: '#FDD0EC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'lime', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.lime.subtlest.',
-  exampleValue: '#D3F1A7',
+  name: 'color.background.accent.magenta.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'magenta', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.magenta.subtlest.',
+  exampleValue: '#FCB6E1',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'lime', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.lime.subtlest.',
-  exampleValue: '#BDE97C',
+  name: 'color.background.accent.magenta.subtler',
+  path: ['color', 'background', 'accent', 'magenta', 'subtler', '[default]'],
+  description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FDD0EC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtler',
-  path: ['color', 'background', 'accent', 'lime', 'subtler', '[default]'],
-  description: 'Use for for backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#D3F1A7',
+  name: 'color.background.accent.magenta.subtler.hovered',
+  path: ['color', 'background', 'accent', 'magenta', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.magenta.subtler.',
+  exampleValue: '#FCB6E1',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtler.hovered',
-  path: ['color', 'background', 'accent', 'lime', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.lime.subtler.',
-  exampleValue: '#BDE97C',
+  name: 'color.background.accent.magenta.subtler.pressed',
+  path: ['color', 'background', 'accent', 'magenta', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.magenta.subtler.',
+  exampleValue: '#F797D2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtler.pressed',
-  path: ['color', 'background', 'accent', 'lime', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.lime.subtler.',
-  exampleValue: '#B3DF72',
+  name: 'color.background.accent.magenta.subtle',
+  path: ['color', 'background', 'accent', 'magenta', 'subtle', '[default]'],
+  description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#E774BB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtle',
-  path: ['color', 'background', 'accent', 'lime', 'subtle', '[default]'],
-  description: 'Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#94C748',
+  name: 'color.background.accent.magenta.subtle.hovered',
+  path: ['color', 'background', 'accent', 'magenta', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.magenta.subtle.',
+  exampleValue: '#F797D2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtle.hovered',
-  path: ['color', 'background', 'accent', 'lime', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.lime.subtle.',
-  exampleValue: '#B3DF72',
+  name: 'color.background.accent.magenta.subtle.pressed',
+  path: ['color', 'background', 'accent', 'magenta', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.magenta.subtle.',
+  exampleValue: '#FCB6E1',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.subtle.pressed',
-  path: ['color', 'background', 'accent', 'lime', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.lime.subtle.',
-  exampleValue: '#BDE97C',
+  name: 'color.background.accent.magenta.bolder',
+  path: ['color', 'background', 'accent', 'magenta', 'bolder', '[default]'],
+  description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#AE4787',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.bolder',
-  path: ['color', 'background', 'accent', 'lime', 'bolder', '[default]'],
-  description: 'Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#5B7F24',
+  name: 'color.background.accent.magenta.bolder.hovered',
+  path: ['color', 'background', 'accent', 'magenta', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.magenta.bolder.',
+  exampleValue: '#943D73',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.bolder.hovered',
-  path: ['color', 'background', 'accent', 'lime', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.lime.bolder.',
-  exampleValue: '#4C6B1F',
+  name: 'color.background.accent.magenta.bolder.pressed',
+  path: ['color', 'background', 'accent', 'magenta', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.magenta.bolder.',
+  exampleValue: '#77325B',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.lime.bolder.pressed',
-  path: ['color', 'background', 'accent', 'lime', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.lime.bolder.',
-  exampleValue: '#3F5224',
+  name: 'color.background.accent.gray.subtlest',
+  path: ['color', 'background', 'accent', 'gray', 'subtlest', '[default]'],
+  description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  exampleValue: '#F0F1F2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtlest',
-  path: ['color', 'background', 'accent', 'red', 'subtlest', '[default]'],
-  description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FFECEB',
+  name: 'color.background.accent.gray.subtlest.hovered',
+  path: ['color', 'background', 'accent', 'gray', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.accent.gray.subtlest.',
+  exampleValue: '#DDDEE1',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'red', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.red.subtlest.',
-  exampleValue: '#FFD5D2',
+  name: 'color.background.accent.gray.subtlest.pressed',
+  path: ['color', 'background', 'accent', 'gray', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.accent.gray.subtlest.',
+  exampleValue: '#B7B9BE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'red', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.red.subtlest.',
-  exampleValue: '#FFB8B2',
+  name: 'color.background.accent.gray.subtler',
+  path: ['color', 'background', 'accent', 'gray', 'subtler', '[default]'],
+  description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#DDDEE1',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtler',
-  path: ['color', 'background', 'accent', 'red', 'subtler', '[default]'],
-  description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FFD5D2',
+  name: 'color.background.accent.gray.subtler.hovered',
+  path: ['color', 'background', 'accent', 'gray', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.accent.gray.subtler.',
+  exampleValue: '#B7B9BE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtler.hovered',
-  path: ['color', 'background', 'accent', 'red', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.red.subtler.',
-  exampleValue: '#FFB8B2',
+  name: 'color.background.accent.gray.subtler.pressed',
+  path: ['color', 'background', 'accent', 'gray', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.accent.gray.subtler.',
+  exampleValue: '#8C8F97',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtler.pressed',
-  path: ['color', 'background', 'accent', 'red', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.red.subtler.',
-  exampleValue: '#FD9891',
+  name: 'color.background.accent.gray.subtle',
+  path: ['color', 'background', 'accent', 'gray', 'subtle', '[default]'],
+  description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#8C8F97',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtle',
-  path: ['color', 'background', 'accent', 'red', 'subtle', '[default]'],
-  description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#F87168',
+  name: 'color.background.accent.gray.subtle.hovered',
+  path: ['color', 'background', 'accent', 'gray', 'subtle', 'hovered'],
+  description: 'Hovered state of color.background.accent.gray.subtle.',
+  exampleValue: '#B7B9BE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtle.hovered',
-  path: ['color', 'background', 'accent', 'red', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.red.subtle.',
-  exampleValue: '#FD9891',
+  name: 'color.background.accent.gray.subtle.pressed',
+  path: ['color', 'background', 'accent', 'gray', 'subtle', 'pressed'],
+  description: 'Pressed state of color.background.accent.gray.subtle.',
+  exampleValue: '#DDDEE1',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.subtle.pressed',
-  path: ['color', 'background', 'accent', 'red', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.red.subtle.',
-  exampleValue: '#FFB8B2',
+  name: 'color.background.accent.gray.bolder',
+  path: ['color', 'background', 'accent', 'gray', 'bolder', '[default]'],
+  description: 'Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
+  exampleValue: '#6B6E76',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.bolder',
-  path: ['color', 'background', 'accent', 'red', 'bolder', '[default]'],
-  description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#C9372C',
+  name: 'color.background.accent.gray.bolder.hovered',
+  path: ['color', 'background', 'accent', 'gray', 'bolder', 'hovered'],
+  description: 'Hovered state of color.background.accent.gray.bolder.',
+  exampleValue: '#505258',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.bolder.hovered',
-  path: ['color', 'background', 'accent', 'red', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.red.bolder.',
-  exampleValue: '#AE2E24',
+  name: 'color.background.accent.gray.bolder.pressed',
+  path: ['color', 'background', 'accent', 'gray', 'bolder', 'pressed'],
+  description: 'Pressed state of color.background.accent.gray.subtlest.',
+  exampleValue: '#3B3D42',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.red.bolder.pressed',
-  path: ['color', 'background', 'accent', 'red', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.red.bolder.',
-  exampleValue: '#872821',
+  name: 'color.background.disabled',
+  path: ['color', 'background', 'disabled'],
+  description: 'Use for backgrounds of elements in a disabled state.',
+  exampleValue: '#0515240F',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtlest',
-  path: ['color', 'background', 'accent', 'orange', 'subtlest', '[default]'],
-  description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FFF5DB',
+  name: 'color.background.input',
+  path: ['color', 'background', 'input', '[default]'],
+  description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.',
+  exampleValue: '#FFFFFF',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'orange', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FCE4A6',
+  name: 'color.background.input.hovered',
+  path: ['color', 'background', 'input', 'hovered'],
+  description: 'Hovered state for color.background.input',
+  exampleValue: '#F8F8F8',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'orange', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FBD779',
+  name: 'color.background.input.pressed',
+  path: ['color', 'background', 'input', 'pressed'],
+  description: 'Pressed state for color.background.input',
+  exampleValue: '#FFFFFF',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtler',
-  path: ['color', 'background', 'accent', 'orange', 'subtler', '[default]'],
-  description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FCE4A6',
+  name: 'color.background.inverse.subtle',
+  path: ['color', 'background', 'inverse', 'subtle', '[default]'],
+  description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.',
+  exampleValue: '#00000029',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtler.hovered',
-  path: ['color', 'background', 'accent', 'orange', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.orange.subtler.',
-  exampleValue: '#FBD779',
+  name: 'color.background.inverse.subtle.hovered',
+  path: ['color', 'background', 'inverse', 'subtle', 'hovered'],
+  description: 'Use for the hovered state of color.background.inverse.subtle',
+  exampleValue: '#0000003D',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtler.pressed',
-  path: ['color', 'background', 'accent', 'orange', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.orange.subtler.',
-  exampleValue: '#FBC828',
+  name: 'color.background.inverse.subtle.pressed',
+  path: ['color', 'background', 'inverse', 'subtle', 'pressed'],
+  description: 'Use for the pressed state of color.background.inverse.subtle',
+  exampleValue: '#00000052',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtle',
-  path: ['color', 'background', 'accent', 'orange', 'subtle', '[default]'],
-  description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FCA700',
+  name: 'color.background.neutral',
+  path: ['color', 'background', 'neutral', '[default]', '[default]'],
+  description: 'The default background for neutral elements, such as default buttons.',
+  exampleValue: '#0515240F',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtle.hovered',
-  path: ['color', 'background', 'accent', 'orange', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.orange.subtle.',
-  exampleValue: '#FBC828',
+  name: 'color.background.neutral.hovered',
+  path: ['color', 'background', 'neutral', '[default]', 'hovered'],
+  description: 'Hovered state for color.background.neutral',
+  exampleValue: '#0B120E24',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.subtle.pressed',
-  path: ['color', 'background', 'accent', 'orange', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.orange.subtle.',
-  exampleValue: '#FBD779',
+  name: 'color.background.neutral.pressed',
+  path: ['color', 'background', 'neutral', '[default]', 'pressed'],
+  description: 'Pressed state for color.background.neutral',
+  exampleValue: '#080F214A',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.bolder',
-  path: ['color', 'background', 'accent', 'orange', 'bolder', '[default]'],
-  description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#BD5B00',
+  name: 'color.background.neutral.subtle',
+  path: ['color', 'background', 'neutral', 'subtle', '[default]'],
+  description: 'Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.',
+  exampleValue: '#00000000',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.bolder.hovered',
-  path: ['color', 'background', 'accent', 'orange', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.orange.bolder.',
-  exampleValue: '#9E4C00',
+  name: 'color.background.neutral.subtle.hovered',
+  path: ['color', 'background', 'neutral', 'subtle', 'hovered'],
+  description: 'Hovered state for color.background.neutral.subtle',
+  exampleValue: '#0515240F',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.orange.bolder.pressed',
-  path: ['color', 'background', 'accent', 'orange', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.orange.bolder.',
-  exampleValue: '#7A3B00',
+  name: 'color.background.neutral.subtle.pressed',
+  path: ['color', 'background', 'neutral', 'subtle', 'pressed'],
+  description: 'Pressed state for color.background.neutral.subtle',
+  exampleValue: '#0B120E24',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtlest',
-  path: ['color', 'background', 'accent', 'yellow', 'subtlest', '[default]'],
-  description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FEF7C8',
+  name: 'color.background.neutral.bold',
+  path: ['color', 'background', 'neutral', 'bold', '[default]'],
+  description: 'A vibrant background option for neutral UI elements, such as announcement banners.',
+  exampleValue: '#292A2E',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#F5E989',
+  name: 'color.background.neutral.bold.hovered',
+  path: ['color', 'background', 'neutral', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.neutral.bold',
+  exampleValue: '#3B3D42',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#EFDD4E',
+  name: 'color.background.neutral.bold.pressed',
+  path: ['color', 'background', 'neutral', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.neutral.bold',
+  exampleValue: '#505258',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtler',
-  path: ['color', 'background', 'accent', 'yellow', 'subtler', '[default]'],
-  description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#F5E989',
+  name: 'color.background.selected',
+  path: ['color', 'background', 'selected', '[default]', '[default]'],
+  description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.',
+  exampleValue: '#E9F2FE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtler.hovered',
-  path: ['color', 'background', 'accent', 'yellow', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.yellow.subtler.',
-  exampleValue: '#EFDD4E',
+  name: 'color.background.selected.hovered',
+  path: ['color', 'background', 'selected', '[default]', 'hovered'],
+  description: 'Hovered state for color.background.selected',
+  exampleValue: '#CFE1FD',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtler.pressed',
-  path: ['color', 'background', 'accent', 'yellow', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.yellow.subtler.',
-  exampleValue: '#EED12B',
+  name: 'color.background.selected.pressed',
+  path: ['color', 'background', 'selected', '[default]', 'pressed'],
+  description: 'Pressed state for color.background.selected',
+  exampleValue: '#8FB8F6',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtle',
-  path: ['color', 'background', 'accent', 'yellow', 'subtle', '[default]'],
-  description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#EED12B',
+  name: 'color.background.selected.bold',
+  path: ['color', 'background', 'selected', 'bold', '[default]'],
+  description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtle.hovered',
-  path: ['color', 'background', 'accent', 'yellow', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.yellow.subtle.',
-  exampleValue: '#DDB30E',
+  name: 'color.background.selected.bold.hovered',
+  path: ['color', 'background', 'selected', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.selected.bold',
+  exampleValue: '#1558BC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.subtle.pressed',
-  path: ['color', 'background', 'accent', 'yellow', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.yellow.subtle.',
-  exampleValue: '#EFDD4E',
+  name: 'color.background.selected.bold.pressed',
+  path: ['color', 'background', 'selected', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.selected.bold',
+  exampleValue: '#123263',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.bolder',
-  path: ['color', 'background', 'accent', 'yellow', 'bolder', '[default]'],
-  description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#946F00',
+  name: 'color.background.brand.subtlest',
+  path: ['color', 'background', 'brand', 'subtlest', '[default]'],
+  description: 'Use for the background of elements used to reinforce our brand, but with less emphasis.',
+  exampleValue: '#E9F2FE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.bolder.hovered',
-  path: ['color', 'background', 'accent', 'yellow', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.yellow.bolder.',
-  exampleValue: '#7F5F01',
+  name: 'color.background.brand.subtlest.hovered',
+  path: ['color', 'background', 'brand', 'subtlest', 'hovered'],
+  description: 'Hovered state of color.background.brand.subtlest.',
+  exampleValue: '#CFE1FD',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.yellow.bolder.pressed',
-  path: ['color', 'background', 'accent', 'yellow', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.yellow.bolder.',
-  exampleValue: '#614A05',
+  name: 'color.background.brand.subtlest.pressed',
+  path: ['color', 'background', 'brand', 'subtlest', 'pressed'],
+  description: 'Pressed state of color.background.brand.subtlest',
+  exampleValue: '#ADCBFB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtlest',
-  path: ['color', 'background', 'accent', 'green', 'subtlest', '[default]'],
-  description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#DCFFF1',
+  name: 'color.background.brand.bold',
+  path: ['color', 'background', 'brand', 'bold', '[default]'],
+  description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'green', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.green.subtlest.',
-  exampleValue: '#BAF3DB',
+  name: 'color.background.brand.bold.hovered',
+  path: ['color', 'background', 'brand', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.brand.bold.',
+  exampleValue: '#1558BC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'green', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.green.subtlest.',
-  exampleValue: '#97EDC9',
+  name: 'color.background.brand.bold.pressed',
+  path: ['color', 'background', 'brand', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.brand.bold.',
+  exampleValue: '#144794',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtler',
-  path: ['color', 'background', 'accent', 'green', 'subtler', '[default]'],
-  description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#BAF3DB',
+  name: 'color.background.brand.boldest',
+  path: ['color', 'background', 'brand', 'boldest', '[default]'],
+  description: 'Use for the background of elements used to reinforce our brand, that need to stand out a lot.',
+  exampleValue: '#1C2B42',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtler.hovered',
-  path: ['color', 'background', 'accent', 'green', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.green.subtler.',
-  exampleValue: '#97EDC9',
+  name: 'color.background.brand.boldest.hovered',
+  path: ['color', 'background', 'brand', 'boldest', 'hovered'],
+  description: 'Hovered state of color.background.brand.boldest.',
+  exampleValue: '#123263',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtler.pressed',
-  path: ['color', 'background', 'accent', 'green', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.green.subtler.',
-  exampleValue: '#7EE2B8',
+  name: 'color.background.brand.boldest.pressed',
+  path: ['color', 'background', 'brand', 'boldest', 'pressed'],
+  description: 'Pressed state of color.background.brand.boldest.',
+  exampleValue: '#144794',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtle',
-  path: ['color', 'background', 'accent', 'green', 'subtle', '[default]'],
-  description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#4BCE97',
+  name: 'color.background.danger',
+  path: ['color', 'background', 'danger', '[default]', '[default]'],
+  description: 'Use for backgrounds communicating critical information, such in error section messages.',
+  exampleValue: '#FFECEB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtle.hovered',
-  path: ['color', 'background', 'accent', 'green', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.green.subtle.',
-  exampleValue: '#7EE2B8',
+  name: 'color.background.danger.hovered',
+  path: ['color', 'background', 'danger', '[default]', 'hovered'],
+  description: 'Hovered state for color.background.danger',
+  exampleValue: '#FFD5D2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.subtle.pressed',
-  path: ['color', 'background', 'accent', 'green', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.green.subtle.',
-  exampleValue: '#97EDC9',
+  name: 'color.background.danger.pressed',
+  path: ['color', 'background', 'danger', '[default]', 'pressed'],
+  description: 'Pressed state for color.background.danger',
+  exampleValue: '#FFB8B2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.bolder',
-  path: ['color', 'background', 'accent', 'green', 'bolder', '[default]'],
-  description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#1F845A',
+  name: 'color.background.danger.subtler',
+  path: ['color', 'background', 'danger', 'subtler', '[default]'],
+  description: 'Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#FFD5D2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.bolder.hovered',
-  path: ['color', 'background', 'accent', 'green', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.green.bolder.',
-  exampleValue: '#216E4E',
+  name: 'color.background.danger.subtler.hovered',
+  path: ['color', 'background', 'danger', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.danger.subtler',
+  exampleValue: '#FFB8B2',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.green.bolder.pressed',
-  path: ['color', 'background', 'accent', 'green', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.green.bolder.',
-  exampleValue: '#19573D',
+  name: 'color.background.danger.subtler.pressed',
+  path: ['color', 'background', 'danger', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.danger.subtler',
+  exampleValue: '#FD9891',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtlest',
-  path: ['color', 'background', 'accent', 'teal', 'subtlest', '[default]'],
-  description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#E7F9FF',
+  name: 'color.background.danger.subtle',
+  path: ['color', 'background', 'danger', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states.',
+  exampleValue: '#FD9891',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'teal', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.teal.subtlest.',
-  exampleValue: '#C6EDFB',
+  name: 'color.background.danger.bold',
+  path: ['color', 'background', 'danger', 'bold', '[default]'],
+  description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.',
+  exampleValue: '#C9372C',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'teal', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.teal.subtlest.',
-  exampleValue: '#B1E4F7',
+  name: 'color.background.danger.bold.hovered',
+  path: ['color', 'background', 'danger', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.danger.bold',
+  exampleValue: '#AE2E24',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtler',
-  path: ['color', 'background', 'accent', 'teal', 'subtler', '[default]'],
-  description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#C6EDFB',
+  name: 'color.background.danger.bold.pressed',
+  path: ['color', 'background', 'danger', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.danger.bold',
+  exampleValue: '#872821',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtler.hovered',
-  path: ['color', 'background', 'accent', 'teal', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.teal.subtler.',
-  exampleValue: '#B1E4F7',
+  name: 'color.background.warning',
+  path: ['color', 'background', 'warning', '[default]', '[default]'],
+  description: 'Use for backgrounds communicating caution, such as in warning section messages.',
+  exampleValue: '#FFF5DB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtler.pressed',
-  path: ['color', 'background', 'accent', 'teal', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.teal.subtler.',
-  exampleValue: '#9DD9EE',
+  name: 'color.background.warning.hovered',
+  path: ['color', 'background', 'warning', '[default]', 'hovered'],
+  description: 'Hovered state for color.background.warning',
+  exampleValue: '#FCE4A6',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtle',
-  path: ['color', 'background', 'accent', 'teal', 'subtle', '[default]'],
-  description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#6CC3E0',
+  name: 'color.background.warning.pressed',
+  path: ['color', 'background', 'warning', '[default]', 'pressed'],
+  description: 'Pressed state for color.background.warning',
+  exampleValue: '#FBD779',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtle.hovered',
-  path: ['color', 'background', 'accent', 'teal', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.teal.subtle.',
-  exampleValue: '#9DD9EE',
+  name: 'color.background.warning.subtler',
+  path: ['color', 'background', 'warning', 'subtler', '[default]'],
+  description: 'Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#FCE4A6',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.subtle.pressed',
-  path: ['color', 'background', 'accent', 'teal', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.teal.subtle.',
-  exampleValue: '#B1E4F7',
+  name: 'color.background.warning.subtler.hovered',
+  path: ['color', 'background', 'warning', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.warning.subtler',
+  exampleValue: '#FBD779',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.bolder',
-  path: ['color', 'background', 'accent', 'teal', 'bolder', '[default]'],
-  description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#227D9B',
+  name: 'color.background.warning.subtler.pressed',
+  path: ['color', 'background', 'warning', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.warning.subtler',
+  exampleValue: '#FBC828',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.bolder.hovered',
-  path: ['color', 'background', 'accent', 'teal', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.teal.bolder.',
-  exampleValue: '#206A83',
+  name: 'color.background.warning.subtle',
+  path: ['color', 'background', 'warning', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating caution (e.g. status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states.',
+  exampleValue: '#FBD779',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.teal.bolder.pressed',
-  path: ['color', 'background', 'accent', 'teal', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.teal.bolder.',
-  exampleValue: '#1A5265',
+  name: 'color.background.warning.bold',
+  path: ['color', 'background', 'warning', 'bold', '[default]'],
+  description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.',
+  exampleValue: '#FBC828',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtlest',
-  path: ['color', 'background', 'accent', 'blue', 'subtlest', '[default]'],
-  description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#E9F2FE',
+  name: 'color.background.warning.bold.hovered',
+  path: ['color', 'background', 'warning', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.warning.bold',
+  exampleValue: '#FCA700',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'blue', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.blue.subtlest.',
-  exampleValue: '#CFE1FD',
+  name: 'color.background.warning.bold.pressed',
+  path: ['color', 'background', 'warning', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.warning.bold',
+  exampleValue: '#F68909',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'blue', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.blue.subtlest.',
-  exampleValue: '#ADCBFB',
+  name: 'color.background.success',
+  path: ['color', 'background', 'success', '[default]', '[default]'],
+  description: 'Use for backgrounds communicating a favorable outcome, such as in success section messages.',
+  exampleValue: '#EFFFD6',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtler',
-  path: ['color', 'background', 'accent', 'blue', 'subtler', '[default]'],
-  description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#CFE1FD',
+  name: 'color.background.success.hovered',
+  path: ['color', 'background', 'success', '[default]', 'hovered'],
+  description: 'Hovered state for color.background.success',
+  exampleValue: '#D3F1A7',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtler.hovered',
-  path: ['color', 'background', 'accent', 'blue', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.blue.subtler.',
-  exampleValue: '#ADCBFB',
+  name: 'color.background.success.pressed',
+  path: ['color', 'background', 'success', '[default]', 'pressed'],
+  description: 'Pressed state for color.background.success',
+  exampleValue: '#BDE97C',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtler.pressed',
-  path: ['color', 'background', 'accent', 'blue', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.blue.subtler.',
-  exampleValue: '#8FB8F6',
+  name: 'color.background.success.subtler',
+  path: ['color', 'background', 'success', 'subtler', '[default]'],
+  description: 'Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#D3F1A7',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtle',
-  path: ['color', 'background', 'accent', 'blue', 'subtle', '[default]'],
-  description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#669DF1',
+  name: 'color.background.success.subtler.hovered',
+  path: ['color', 'background', 'success', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.success.subtler',
+  exampleValue: '#BDE97C',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtle.hovered',
-  path: ['color', 'background', 'accent', 'blue', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.blue.subtle.',
-  exampleValue: '#8FB8F6',
+  name: 'color.background.success.subtler.pressed',
+  path: ['color', 'background', 'success', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.success.subtler',
+  exampleValue: '#B3DF72',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.subtle.pressed',
-  path: ['color', 'background', 'accent', 'blue', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.blue.subtle.',
-  exampleValue: '#ADCBFB',
+  name: 'color.background.success.subtle',
+  path: ['color', 'background', 'success', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states.',
+  exampleValue: '#B3DF72',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.bolder',
-  path: ['color', 'background', 'accent', 'blue', 'bolder', '[default]'],
-  description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#1868DB',
+  name: 'color.background.success.bold',
+  path: ['color', 'background', 'success', 'bold', '[default]'],
+  description: 'A vibrant background option for communicating a favorable outcome, such as in checked toggles.',
+  exampleValue: '#5B7F24',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.bolder.hovered',
-  path: ['color', 'background', 'accent', 'blue', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.blue.bolder.',
-  exampleValue: '#1558BC',
+  name: 'color.background.success.bold.hovered',
+  path: ['color', 'background', 'success', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.success.bold',
+  exampleValue: '#4C6B1F',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.blue.bolder.pressed',
-  path: ['color', 'background', 'accent', 'blue', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.blue.bolder.',
-  exampleValue: '#144794',
+  name: 'color.background.success.bold.pressed',
+  path: ['color', 'background', 'success', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.success.bold',
+  exampleValue: '#3F5224',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtlest',
-  path: ['color', 'background', 'accent', 'purple', 'subtlest', '[default]'],
-  description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
+  name: 'color.background.discovery',
+  path: ['color', 'background', 'discovery', '[default]', '[default]'],
+  description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.',
   exampleValue: '#F8EEFE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'purple', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.purple.subtlest.',
+  name: 'color.background.discovery.hovered',
+  path: ['color', 'background', 'discovery', '[default]', 'hovered'],
+  description: 'Hover state for color.background.discovery',
   exampleValue: '#EED7FC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'purple', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.purple.subtlest.',
+  name: 'color.background.discovery.pressed',
+  path: ['color', 'background', 'discovery', '[default]', 'pressed'],
+  description: 'Pressed state for color.background.discovery',
   exampleValue: '#E3BDFA',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtler',
-  path: ['color', 'background', 'accent', 'purple', 'subtler', '[default]'],
-  description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.',
+  name: 'color.background.discovery.subtler',
+  path: ['color', 'background', 'discovery', 'subtler', '[default]'],
+  description: 'Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance.',
   exampleValue: '#EED7FC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtler.hovered',
-  path: ['color', 'background', 'accent', 'purple', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.purple.subtler.',
+  name: 'color.background.discovery.subtler.hovered',
+  path: ['color', 'background', 'discovery', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.discovery.subtler',
   exampleValue: '#E3BDFA',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtler.pressed',
-  path: ['color', 'background', 'accent', 'purple', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.purple.subtler.',
+  name: 'color.background.discovery.subtler.pressed',
+  path: ['color', 'background', 'discovery', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.discovery.subtler',
   exampleValue: '#D8A0F7',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtle',
-  path: ['color', 'background', 'accent', 'purple', 'subtle', '[default]'],
-  description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#C97CF4',
+  name: 'color.background.discovery.subtle',
+  path: ['color', 'background', 'discovery', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states.',
+  exampleValue: '#D8A0F7',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtle.hovered',
-  path: ['color', 'background', 'accent', 'purple', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.purple.subtle.',
-  exampleValue: '#D8A0F7',
+  name: 'color.background.discovery.bold',
+  path: ['color', 'background', 'discovery', 'bold', '[default]'],
+  description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.',
+  exampleValue: '#964AC0',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.subtle.pressed',
-  path: ['color', 'background', 'accent', 'purple', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.purple.subtle.',
-  exampleValue: '#E3BDFA',
+  name: 'color.background.discovery.bold.hovered',
+  path: ['color', 'background', 'discovery', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.discovery.bold',
+  exampleValue: '#803FA5',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.bolder',
-  path: ['color', 'background', 'accent', 'purple', 'bolder', '[default]'],
-  description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#964AC0',
+  name: 'color.background.discovery.bold.pressed',
+  path: ['color', 'background', 'discovery', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.discovery.bold',
+  exampleValue: '#673286',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.bolder.hovered',
-  path: ['color', 'background', 'accent', 'purple', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.purple.bolder.',
-  exampleValue: '#803FA5',
+  name: 'color.background.information',
+  path: ['color', 'background', 'information', '[default]', '[default]'],
+  description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.',
+  exampleValue: '#E9F2FE',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.purple.bolder.pressed',
-  path: ['color', 'background', 'accent', 'purple', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.purple.bolder.',
-  exampleValue: '#673286',
+  name: 'color.background.information.hovered',
+  path: ['color', 'background', 'information', '[default]', 'hovered'],
+  description: 'Hovered state of color.background.information',
+  exampleValue: '#CFE1FD',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtlest',
-  path: ['color', 'background', 'accent', 'magenta', 'subtlest', '[default]'],
-  description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FFECF8',
+  name: 'color.background.information.pressed',
+  path: ['color', 'background', 'information', '[default]', 'pressed'],
+  description: 'Pressed state of color.background.information',
+  exampleValue: '#ADCBFB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'magenta', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.magenta.subtlest.',
-  exampleValue: '#FDD0EC',
+  name: 'color.background.information.subtler',
+  path: ['color', 'background', 'information', 'subtler', '[default]'],
+  description: 'Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#CFE1FD',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'magenta', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.magenta.subtlest.',
-  exampleValue: '#FCB6E1',
+  name: 'color.background.information.subtler.hovered',
+  path: ['color', 'background', 'information', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.information.subtler',
+  exampleValue: '#ADCBFB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtler',
-  path: ['color', 'background', 'accent', 'magenta', 'subtler', '[default]'],
-  description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FDD0EC',
+  name: 'color.background.information.subtler.pressed',
+  path: ['color', 'background', 'information', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.information.subtler',
+  exampleValue: '#8FB8F6',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtler.hovered',
-  path: ['color', 'background', 'accent', 'magenta', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.magenta.subtler.',
-  exampleValue: '#FCB6E1',
+  name: 'color.background.information.subtle',
+  path: ['color', 'background', 'information', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states.',
+  exampleValue: '#8FB8F6',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtler.pressed',
-  path: ['color', 'background', 'accent', 'magenta', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.magenta.subtler.',
-  exampleValue: '#F797D2',
+  name: 'color.background.information.bold',
+  path: ['color', 'background', 'information', 'bold', '[default]'],
+  description: 'A vibrant background option for communicating information or something in-progress.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtle',
-  path: ['color', 'background', 'accent', 'magenta', 'subtle', '[default]'],
-  description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#E774BB',
+  name: 'color.background.information.bold.hovered',
+  path: ['color', 'background', 'information', 'bold', 'hovered'],
+  description: 'Hovered state of color.background.information.bold',
+  exampleValue: '#1558BC',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtle.hovered',
-  path: ['color', 'background', 'accent', 'magenta', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.magenta.subtle.',
-  exampleValue: '#F797D2',
+  name: 'color.background.information.bold.pressed',
+  path: ['color', 'background', 'information', 'bold', 'pressed'],
+  description: 'Pressed state of color.background.information.bold',
+  exampleValue: '#144794',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
 }, {
-  name: 'color.background.accent.magenta.subtle.pressed',
-  path: ['color', 'background', 'accent', 'magenta', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.magenta.subtle.',
-  exampleValue: '#FCB6E1',
+  name: 'color.border',
+  path: ['color', 'border', '[default]'],
+  description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.',
+  exampleValue: '#0B120E24',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.magenta.bolder',
-  path: ['color', 'background', 'accent', 'magenta', 'bolder', '[default]'],
-  description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#AE4787',
+  name: 'color.border.accent.lime',
+  path: ['color', 'border', 'accent', 'lime', '[default]'],
+  description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
+}, {
+  name: 'color.border.accent.lime.subtle',
+  path: ['color', 'border', 'accent', 'lime', 'subtle'],
+  description: 'Use for decorative lime borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
+}, {
+  name: 'color.border.accent.red',
+  path: ['color', 'border', 'accent', 'red', '[default]'],
+  description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#E2483D',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.magenta.bolder.hovered',
-  path: ['color', 'background', 'accent', 'magenta', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.magenta.bolder.',
-  exampleValue: '#943D73',
+  name: 'color.border.accent.red.subtle',
+  path: ['color', 'border', 'accent', 'red', 'subtle'],
+  description: 'Use for decorative red borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FD9891',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.magenta.bolder.pressed',
-  path: ['color', 'background', 'accent', 'magenta', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.magenta.bolder.',
-  exampleValue: '#77325B',
+  name: 'color.border.accent.orange',
+  path: ['color', 'border', 'accent', 'orange', '[default]'],
+  description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#E06C00',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtlest',
-  path: ['color', 'background', 'accent', 'gray', 'subtlest', '[default]'],
-  description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#F0F1F2',
+  name: 'color.border.accent.orange.subtle',
+  path: ['color', 'border', 'accent', 'orange', 'subtle'],
+  description: 'Use for decorative orange borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FBC828',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtlest.hovered',
-  path: ['color', 'background', 'accent', 'gray', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.accent.gray.subtlest.',
-  exampleValue: '#DDDEE1',
+  name: 'color.border.accent.yellow',
+  path: ['color', 'border', 'accent', 'yellow', '[default]'],
+  description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#B38600',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtlest.pressed',
-  path: ['color', 'background', 'accent', 'gray', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#B7B9BE',
+  name: 'color.border.accent.yellow.subtle',
+  path: ['color', 'border', 'accent', 'yellow', 'subtle'],
+  description: 'Use for decorative yellow borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#EED12B',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtler',
-  path: ['color', 'background', 'accent', 'gray', 'subtler', '[default]'],
-  description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#DDDEE1',
+  name: 'color.border.accent.green',
+  path: ['color', 'border', 'accent', 'green', '[default]'],
+  description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#22A06B',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtler.hovered',
-  path: ['color', 'background', 'accent', 'gray', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.accent.gray.subtler.',
-  exampleValue: '#B7B9BE',
+  name: 'color.border.accent.green.subtle',
+  path: ['color', 'border', 'accent', 'green', 'subtle'],
+  description: 'Use for decorative green borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#7EE2B8',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtler.pressed',
-  path: ['color', 'background', 'accent', 'gray', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.accent.gray.subtler.',
-  exampleValue: '#8C8F97',
+  name: 'color.border.accent.teal',
+  path: ['color', 'border', 'accent', 'teal', '[default]'],
+  description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#2898BD',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtle',
-  path: ['color', 'background', 'accent', 'gray', 'subtle', '[default]'],
-  description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#8C8F97',
+  name: 'color.border.accent.teal.subtle',
+  path: ['color', 'border', 'accent', 'teal', 'subtle'],
+  description: 'Use for decorative teal borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#9DD9EE',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtle.hovered',
-  path: ['color', 'background', 'accent', 'gray', 'subtle', 'hovered'],
-  description: 'Hovered state of color.background.accent.gray.subtle.',
-  exampleValue: '#B7B9BE',
+  name: 'color.border.accent.blue',
+  path: ['color', 'border', 'accent', 'blue', '[default]'],
+  description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#357DE8',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.subtle.pressed',
-  path: ['color', 'background', 'accent', 'gray', 'subtle', 'pressed'],
-  description: 'Pressed state of color.background.accent.gray.subtle.',
-  exampleValue: '#DDDEE1',
+  name: 'color.border.accent.blue.subtle',
+  path: ['color', 'border', 'accent', 'blue', 'subtle'],
+  description: 'Use for decorative blue borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#8FB8F6',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.bolder',
-  path: ['color', 'background', 'accent', 'gray', 'bolder', '[default]'],
-  description: 'Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#6B6E76',
+  name: 'color.border.accent.purple',
+  path: ['color', 'border', 'accent', 'purple', '[default]'],
+  description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#AF59E1',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.bolder.hovered',
-  path: ['color', 'background', 'accent', 'gray', 'bolder', 'hovered'],
-  description: 'Hovered state of color.background.accent.gray.bolder.',
-  exampleValue: '#505258',
+  name: 'color.border.accent.purple.subtle',
+  path: ['color', 'border', 'accent', 'purple', 'subtle'],
+  description: 'Use for decorative purple borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#D8A0F7',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.accent.gray.bolder.pressed',
-  path: ['color', 'background', 'accent', 'gray', 'bolder', 'pressed'],
-  description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#3B3D42',
+  name: 'color.border.accent.magenta',
+  path: ['color', 'border', 'accent', 'magenta', '[default]'],
+  description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#CD519D',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.disabled',
-  path: ['color', 'background', 'disabled'],
-  description: 'Use for backgrounds of elements in a disabled state.',
-  exampleValue: '#0515240F',
+  name: 'color.border.accent.magenta.subtle',
+  path: ['color', 'border', 'accent', 'magenta', 'subtle'],
+  description: 'Use for decorative magenta borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#F797D2',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.input',
-  path: ['color', 'background', 'input', '[default]'],
-  description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#FFFFFF',
+  name: 'color.border.accent.gray',
+  path: ['color', 'border', 'accent', 'gray', '[default]'],
+  description: 'Use for borders on non-bold gray accent backgrounds.',
+  exampleValue: '#7D818A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.input.hovered',
-  path: ['color', 'background', 'input', 'hovered'],
-  description: 'Hovered state for color.background.input',
-  exampleValue: '#F8F8F8',
+  name: 'color.border.accent.gray.subtle',
+  path: ['color', 'border', 'accent', 'gray', 'subtle'],
+  description: 'Use for decorative gray borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B7B9BE',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.input.pressed',
-  path: ['color', 'background', 'input', 'pressed'],
-  description: 'Pressed state for color.background.input',
-  exampleValue: '#FFFFFF',
+  name: 'color.border.disabled',
+  path: ['color', 'border', 'disabled'],
+  description: 'Use for borders of elements in a disabled state.',
+  exampleValue: '#0515240F',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.inverse.subtle',
-  path: ['color', 'background', 'inverse', 'subtle', '[default]'],
-  description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.',
-  exampleValue: '#00000029',
+  name: 'color.border.focused',
+  path: ['color', 'border', 'focused'],
+  description: 'Use for focus rings of elements in a focus state.',
+  exampleValue: '#4688EC',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.inverse.subtle.hovered',
-  path: ['color', 'background', 'inverse', 'subtle', 'hovered'],
-  description: 'Use for the hovered state of color.background.inverse.subtle',
-  exampleValue: '#0000003D',
+  name: 'color.border.input',
+  path: ['color', 'border', 'input'],
+  description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.',
+  exampleValue: '#8C8F97',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.inverse.subtle.pressed',
-  path: ['color', 'background', 'inverse', 'subtle', 'pressed'],
-  description: 'Use for the pressed state of color.background.inverse.subtle',
-  exampleValue: '#00000052',
+  name: 'color.border.inverse',
+  path: ['color', 'border', 'inverse'],
+  description: 'Use for borders on bold backgrounds.',
+  exampleValue: '#FFFFFF',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral',
-  path: ['color', 'background', 'neutral', '[default]', '[default]'],
-  description: 'The default background for neutral elements, such as default buttons.',
-  exampleValue: '#0515240F',
+  name: 'color.border.selected',
+  path: ['color', 'border', 'selected'],
+  description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.hovered',
-  path: ['color', 'background', 'neutral', '[default]', 'hovered'],
-  description: 'Hovered state for color.background.neutral',
-  exampleValue: '#0B120E24',
+  name: 'color.border.brand',
+  path: ['color', 'border', 'brand'],
+  description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.pressed',
-  path: ['color', 'background', 'neutral', '[default]', 'pressed'],
-  description: 'Pressed state for color.background.neutral',
-  exampleValue: '#080F214A',
+  name: 'color.border.danger',
+  path: ['color', 'border', 'danger', '[default]'],
+  description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
+  exampleValue: '#E2483D',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.subtle',
-  path: ['color', 'background', 'neutral', 'subtle', '[default]'],
-  description: 'Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.',
-  exampleValue: '#00000000',
+  name: 'color.border.danger.subtle',
+  path: ['color', 'border', 'danger', 'subtle'],
+  description: 'Use for decorative danger borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FD9891',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.subtle.hovered',
-  path: ['color', 'background', 'neutral', 'subtle', 'hovered'],
-  description: 'Hovered state for color.background.neutral.subtle',
-  exampleValue: '#0515240F',
+  name: 'color.border.warning',
+  path: ['color', 'border', 'warning', '[default]'],
+  description: 'Use for borders communicating caution.',
+  exampleValue: '#E06C00',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.subtle.pressed',
-  path: ['color', 'background', 'neutral', 'subtle', 'pressed'],
-  description: 'Pressed state for color.background.neutral.subtle',
-  exampleValue: '#0B120E24',
+  name: 'color.border.warning.subtle',
+  path: ['color', 'border', 'warning', 'subtle'],
+  description: 'Use for decorative warning borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FBC828',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.bold',
-  path: ['color', 'background', 'neutral', 'bold', '[default]'],
-  description: 'A vibrant background option for neutral UI elements, such as announcement banners.',
-  exampleValue: '#292A2E',
+  name: 'color.border.success',
+  path: ['color', 'border', 'success', '[default]'],
+  description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
+  exampleValue: '#6A9A23',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.bold.hovered',
-  path: ['color', 'background', 'neutral', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.neutral.bold',
-  exampleValue: '#3B3D42',
+  name: 'color.border.success.subtle',
+  path: ['color', 'border', 'success', 'subtle'],
+  description: 'Use for decorative success borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B3DF72',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.neutral.bold.pressed',
-  path: ['color', 'background', 'neutral', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.neutral.bold',
-  exampleValue: '#505258',
+  name: 'color.border.discovery',
+  path: ['color', 'border', 'discovery', '[default]'],
+  description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
+  exampleValue: '#AF59E1',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.selected',
-  path: ['color', 'background', 'selected', '[default]', '[default]'],
-  description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.',
-  exampleValue: '#E9F2FE',
+  name: 'color.border.discovery.subtle',
+  path: ['color', 'border', 'discovery', 'subtle'],
+  description: 'Use for decorative discovery borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#D8A0F7',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.selected.hovered',
-  path: ['color', 'background', 'selected', '[default]', 'hovered'],
-  description: 'Hovered state for color.background.selected',
-  exampleValue: '#CFE1FD',
+  name: 'color.border.information',
+  path: ['color', 'border', 'information', '[default]'],
+  description: 'Use for borders communicating information or something in-progress.',
+  exampleValue: '#357DE8',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.selected.pressed',
-  path: ['color', 'background', 'selected', '[default]', 'pressed'],
-  description: 'Pressed state for color.background.selected',
+  name: 'color.border.information.subtle',
+  path: ['color', 'border', 'information', 'subtle'],
+  description: 'Use for decorative information borders that do not need to meet 3:1 contrast requirements.',
   exampleValue: '#8FB8F6',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.selected.bold',
-  path: ['color', 'background', 'selected', 'bold', '[default]'],
-  description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.',
-  exampleValue: '#1868DB',
+  name: 'color.border.bold',
+  path: ['color', 'border', 'bold'],
+  description: 'A neutral border option that passes min 3:1 contrast ratios.',
+  exampleValue: '#7D818A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
   }
 }, {
-  name: 'color.background.selected.bold.hovered',
-  path: ['color', 'background', 'selected', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.selected.bold',
-  exampleValue: '#1558BC',
+  name: 'color.text',
+  path: ['color', 'text', '[default]'],
+  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
+  exampleValue: '#292A2E',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.selected.bold.pressed',
-  path: ['color', 'background', 'selected', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.selected.bold',
-  exampleValue: '#123263',
+  name: 'color.text.accent.lime',
+  path: ['color', 'text', 'accent', 'lime', '[default]'],
+  description: 'Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#4C6B1F',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.subtlest',
-  path: ['color', 'background', 'brand', 'subtlest', '[default]'],
-  description: 'Use for the background of elements used to reinforce our brand, but with less emphasis.',
-  exampleValue: '#E9F2FE',
+  name: 'color.text.accent.lime.bolder',
+  path: ['color', 'text', 'accent', 'lime', 'bolder'],
+  description: 'Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#37471F',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.subtlest.hovered',
-  path: ['color', 'background', 'brand', 'subtlest', 'hovered'],
-  description: 'Hovered state of color.background.brand.subtlest.',
-  exampleValue: '#CFE1FD',
+  name: 'color.text.accent.red',
+  path: ['color', 'text', 'accent', 'red', '[default]'],
+  description: 'Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#AE2E24',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.subtlest.pressed',
-  path: ['color', 'background', 'brand', 'subtlest', 'pressed'],
-  description: 'Pressed state of color.background.brand.subtlest',
-  exampleValue: '#ADCBFB',
+  name: 'color.text.accent.red.bolder',
+  path: ['color', 'text', 'accent', 'red', 'bolder'],
+  description: 'Use for red text on subtle red accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#5D1F1A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.bold',
-  path: ['color', 'background', 'brand', 'bold', '[default]'],
-  description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.',
-  exampleValue: '#1868DB',
+  name: 'color.text.accent.orange',
+  path: ['color', 'text', 'accent', 'orange', '[default]'],
+  description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#9E4C00',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.bold.hovered',
-  path: ['color', 'background', 'brand', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.brand.bold.',
-  exampleValue: '#1558BC',
+  name: 'color.text.accent.orange.bolder',
+  path: ['color', 'text', 'accent', 'orange', 'bolder'],
+  description: 'Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#693200',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.bold.pressed',
-  path: ['color', 'background', 'brand', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.brand.bold.',
-  exampleValue: '#144794',
+  name: 'color.text.accent.yellow',
+  path: ['color', 'text', 'accent', 'yellow', '[default]'],
+  description: 'Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#7F5F01',
+  usageGuidelines: {
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
+  }
+}, {
+  name: 'color.text.accent.yellow.bolder',
+  path: ['color', 'text', 'accent', 'yellow', 'bolder'],
+  description: 'Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#533F04',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.boldest',
-  path: ['color', 'background', 'brand', 'boldest', '[default]'],
-  description: 'Use for the background of elements used to reinforce our brand, that need to stand out a lot.',
-  exampleValue: '#1C2B42',
+  name: 'color.text.accent.green',
+  path: ['color', 'text', 'accent', 'green', '[default]'],
+  description: 'Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#216E4E',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.boldest.hovered',
-  path: ['color', 'background', 'brand', 'boldest', 'hovered'],
-  description: 'Hovered state of color.background.brand.boldest.',
-  exampleValue: '#123263',
+  name: 'color.text.accent.green.bolder',
+  path: ['color', 'text', 'accent', 'green', 'bolder'],
+  description: 'Use for green text on subtle green accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#164B35',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.brand.boldest.pressed',
-  path: ['color', 'background', 'brand', 'boldest', 'pressed'],
-  description: 'Pressed state of color.background.brand.boldest.',
-  exampleValue: '#144794',
+  name: 'color.text.accent.teal',
+  path: ['color', 'text', 'accent', 'teal', '[default]'],
+  description: 'Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#206A83',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger',
-  path: ['color', 'background', 'danger', '[default]', '[default]'],
-  description: 'Use for backgrounds communicating critical information, such in error section messages.',
-  exampleValue: '#FFECEB',
+  name: 'color.text.accent.teal.bolder',
+  path: ['color', 'text', 'accent', 'teal', 'bolder'],
+  description: 'Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#164555',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.hovered',
-  path: ['color', 'background', 'danger', '[default]', 'hovered'],
-  description: 'Hovered state for color.background.danger',
-  exampleValue: '#FFD5D2',
+  name: 'color.text.accent.blue',
+  path: ['color', 'text', 'accent', 'blue', '[default]'],
+  description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#1558BC',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.pressed',
-  path: ['color', 'background', 'danger', '[default]', 'pressed'],
-  description: 'Pressed state for color.background.danger',
-  exampleValue: '#FFB8B2',
+  name: 'color.text.accent.blue.bolder',
+  path: ['color', 'text', 'accent', 'blue', 'bolder'],
+  description: 'Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#123263',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.subtler',
-  path: ['color', 'background', 'danger', 'subtler', '[default]'],
-  description: 'Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#FFD5D2',
+  name: 'color.text.accent.purple',
+  path: ['color', 'text', 'accent', 'purple', '[default]'],
+  description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#803FA5',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.subtler.hovered',
-  path: ['color', 'background', 'danger', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.danger.subtler',
-  exampleValue: '#FFB8B2',
+  name: 'color.text.accent.purple.bolder',
+  path: ['color', 'text', 'accent', 'purple', 'bolder'],
+  description: 'Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#48245D',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.subtler.pressed',
-  path: ['color', 'background', 'danger', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.danger.subtler',
-  exampleValue: '#FD9891',
+  name: 'color.text.accent.magenta',
+  path: ['color', 'text', 'accent', 'magenta', '[default]'],
+  description: 'Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#943D73',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.subtle',
-  path: ['color', 'background', 'danger', 'subtle', '[default]'],
-  description: 'Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states.',
-  exampleValue: '#FD9891',
+  name: 'color.text.accent.magenta.bolder',
+  path: ['color', 'text', 'accent', 'magenta', 'bolder'],
+  description: 'Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#50253F',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.bold',
-  path: ['color', 'background', 'danger', 'bold', '[default]'],
-  description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.',
-  exampleValue: '#C9372C',
+  name: 'color.text.accent.gray',
+  path: ['color', 'text', 'accent', 'gray', '[default]'],
+  description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
+  exampleValue: '#505258',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.bold.hovered',
-  path: ['color', 'background', 'danger', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.danger.bold',
-  exampleValue: '#AE2E24',
+  name: 'color.text.accent.gray.bolder',
+  path: ['color', 'text', 'accent', 'gray', 'bolder'],
+  description: 'Use for text and icons on gray subtle accent backgrounds.',
+  exampleValue: '#1E1F21',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.danger.bold.pressed',
-  path: ['color', 'background', 'danger', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.danger.bold',
-  exampleValue: '#872821',
+  name: 'color.text.disabled',
+  path: ['color', 'text', 'disabled'],
+  description: 'Use for text in a disabled state.',
+  exampleValue: '#080F214A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning',
-  path: ['color', 'background', 'warning', '[default]', '[default]'],
-  description: 'Use for backgrounds communicating caution, such as in warning section messages.',
-  exampleValue: '#FFF5DB',
+  name: 'color.text.inverse',
+  path: ['color', 'text', 'inverse'],
+  description: 'Use for text on bold backgrounds.',
+  exampleValue: '#FFFFFF',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.hovered',
-  path: ['color', 'background', 'warning', '[default]', 'hovered'],
-  description: 'Hovered state for color.background.warning',
-  exampleValue: '#FCE4A6',
+  name: 'color.text.selected',
+  path: ['color', 'text', 'selected'],
+  description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.pressed',
-  path: ['color', 'background', 'warning', '[default]', 'pressed'],
-  description: 'Pressed state for color.background.warning',
-  exampleValue: '#FBD779',
+  name: 'color.text.brand',
+  path: ['color', 'text', 'brand'],
+  description: 'Use for text that reinforces our brand.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.subtler',
-  path: ['color', 'background', 'warning', 'subtler', '[default]'],
-  description: 'Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#FCE4A6',
+  name: 'color.text.danger',
+  path: ['color', 'text', 'danger', '[default]'],
+  description: 'Use for critical text, such as input field error messaging.',
+  exampleValue: '#AE2E24',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.subtler.hovered',
-  path: ['color', 'background', 'warning', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.warning.subtler',
-  exampleValue: '#FBD779',
+  name: 'color.text.danger.bolder',
+  path: ['color', 'text', 'danger', 'bolder'],
+  description: 'Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#5D1F1A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.subtler.pressed',
-  path: ['color', 'background', 'warning', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.warning.subtler',
-  exampleValue: '#FBC828',
+  name: 'color.text.warning',
+  path: ['color', 'text', 'warning', '[default]'],
+  description: 'Use for text to emphasize caution, such as in moved lozenges.',
+  exampleValue: '#9E4C00',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.subtle',
-  path: ['color', 'background', 'warning', 'subtle', '[default]'],
-  description: 'Background colour for non-interactive elements communicating caution (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states.',
-  exampleValue: '#FBD779',
+  name: 'color.text.warning.inverse',
+  path: ['color', 'text', 'warning', 'inverse'],
+  description: 'Use for text when on bold warning backgrounds.',
+  exampleValue: '#292A2E',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.bold',
-  path: ['color', 'background', 'warning', 'bold', '[default]'],
-  description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.',
-  exampleValue: '#FBC828',
+  name: 'color.text.warning.bolder',
+  path: ['color', 'text', 'warning', 'bolder'],
+  description: 'Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#693200',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.bold.hovered',
-  path: ['color', 'background', 'warning', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.warning.bold',
-  exampleValue: '#FCA700',
+  name: 'color.text.success',
+  path: ['color', 'text', 'success', '[default]'],
+  description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
+  exampleValue: '#4C6B1F',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.warning.bold.pressed',
-  path: ['color', 'background', 'warning', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.warning.bold',
-  exampleValue: '#F68909',
+  name: 'color.text.success.bolder',
+  path: ['color', 'text', 'success', 'bolder'],
+  description: 'Use for text on top of success semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#37471F',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success',
-  path: ['color', 'background', 'success', '[default]', '[default]'],
-  description: 'Use for backgrounds communicating a favorable outcome, such as in success section messages.',
-  exampleValue: '#EFFFD6',
+  name: 'color.text.discovery',
+  path: ['color', 'text', 'discovery', '[default]'],
+  description: 'Use for text to emphasize change or something new, such as in new lozenges.',
+  exampleValue: '#803FA5',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success.hovered',
-  path: ['color', 'background', 'success', '[default]', 'hovered'],
-  description: 'Hovered state for color.background.success',
-  exampleValue: '#D3F1A7',
+  name: 'color.text.discovery.bolder',
+  path: ['color', 'text', 'discovery', 'bolder'],
+  description: 'Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#48245D',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success.pressed',
-  path: ['color', 'background', 'success', '[default]', 'pressed'],
-  description: 'Pressed state for color.background.success',
-  exampleValue: '#BDE97C',
+  name: 'color.text.information',
+  path: ['color', 'text', 'information', '[default]'],
+  description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
+  exampleValue: '#1558BC',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success.subtler',
-  path: ['color', 'background', 'success', 'subtler', '[default]'],
-  description: 'Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#D3F1A7',
+  name: 'color.text.information.bolder',
+  path: ['color', 'text', 'information', 'bolder'],
+  description: 'Use for text on top of information semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#123263',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success.subtler.hovered',
-  path: ['color', 'background', 'success', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.success.subtler',
-  exampleValue: '#BDE97C',
+  name: 'color.text.subtlest',
+  path: ['color', 'text', 'subtlest'],
+  description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
+  exampleValue: '#6B6E76',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success.subtler.pressed',
-  path: ['color', 'background', 'success', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.success.subtler',
-  exampleValue: '#B3DF72',
+  name: 'color.text.subtle',
+  path: ['color', 'text', 'subtle'],
+  description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
+  exampleValue: '#505258',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.background.success.subtle',
-  path: ['color', 'background', 'success', 'subtle', '[default]'],
-  description: 'Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states.',
-  exampleValue: '#B3DF72',
+  name: 'color.icon',
+  path: ['color', 'icon', '[default]'],
+  description: 'Use for icon-only buttons, or icons paired with color.text',
+  exampleValue: '#292A2E',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.success.bold',
-  path: ['color', 'background', 'success', 'bold', '[default]'],
-  description: 'A vibrant background option for communicating a favorable outcome, such as in checked toggles.',
-  exampleValue: '#5B7F24',
+  name: 'color.icon.accent.lime',
+  path: ['color', 'icon', 'accent', 'lime'],
+  description: 'Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#6A9A23',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.success.bold.hovered',
-  path: ['color', 'background', 'success', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.success.bold',
-  exampleValue: '#4C6B1F',
+  name: 'color.icon.accent.red',
+  path: ['color', 'icon', 'accent', 'red'],
+  description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#C9372C',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.success.bold.pressed',
-  path: ['color', 'background', 'success', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.success.bold',
-  exampleValue: '#3F5224',
+  name: 'color.icon.accent.orange',
+  path: ['color', 'icon', 'accent', 'orange'],
+  description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#E06C00',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery',
-  path: ['color', 'background', 'discovery', '[default]', '[default]'],
-  description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.',
-  exampleValue: '#F8EEFE',
+  name: 'color.icon.accent.yellow',
+  path: ['color', 'icon', 'accent', 'yellow'],
+  description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#B38600',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.hovered',
-  path: ['color', 'background', 'discovery', '[default]', 'hovered'],
-  description: 'Hover state for color.background.discovery',
-  exampleValue: '#EED7FC',
+  name: 'color.icon.accent.green',
+  path: ['color', 'icon', 'accent', 'green'],
+  description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#22A06B',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.pressed',
-  path: ['color', 'background', 'discovery', '[default]', 'pressed'],
-  description: 'Pressed state for color.background.discovery',
-  exampleValue: '#E3BDFA',
+  name: 'color.icon.accent.teal',
+  path: ['color', 'icon', 'accent', 'teal'],
+  description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#2898BD',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.subtler',
-  path: ['color', 'background', 'discovery', 'subtler', '[default]'],
-  description: 'Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#EED7FC',
+  name: 'color.icon.accent.blue',
+  path: ['color', 'icon', 'accent', 'blue'],
+  description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#357DE8',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.subtler.hovered',
-  path: ['color', 'background', 'discovery', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.discovery.subtler',
-  exampleValue: '#E3BDFA',
+  name: 'color.icon.accent.purple',
+  path: ['color', 'icon', 'accent', 'purple'],
+  description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#AF59E1',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.subtler.pressed',
-  path: ['color', 'background', 'discovery', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.discovery.subtler',
-  exampleValue: '#D8A0F7',
+  name: 'color.icon.accent.magenta',
+  path: ['color', 'icon', 'accent', 'magenta'],
+  description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
+  exampleValue: '#CD519D',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.subtle',
-  path: ['color', 'background', 'discovery', 'subtle', '[default]'],
-  description: 'Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states.',
-  exampleValue: '#D8A0F7',
+  name: 'color.icon.accent.gray',
+  path: ['color', 'icon', 'accent', 'gray'],
+  description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.',
+  exampleValue: '#7D818A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.bold',
-  path: ['color', 'background', 'discovery', 'bold', '[default]'],
-  description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.',
-  exampleValue: '#964AC0',
+  name: 'color.icon.disabled',
+  path: ['color', 'icon', 'disabled'],
+  description: 'Use for icons in a disabled state.',
+  exampleValue: '#080F214A',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.bold.hovered',
-  path: ['color', 'background', 'discovery', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.discovery.bold',
-  exampleValue: '#803FA5',
+  name: 'color.icon.inverse',
+  path: ['color', 'icon', 'inverse'],
+  description: 'Use for icons on bold backgrounds.',
+  exampleValue: '#FFFFFF',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.discovery.bold.pressed',
-  path: ['color', 'background', 'discovery', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.discovery.bold',
-  exampleValue: '#673286',
+  name: 'color.icon.selected',
+  path: ['color', 'icon', 'selected'],
+  description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information',
-  path: ['color', 'background', 'information', '[default]', '[default]'],
-  description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.',
-  exampleValue: '#E9F2FE',
+  name: 'color.icon.brand',
+  path: ['color', 'icon', 'brand'],
+  description: 'Use for icons that reinforce our brand.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.hovered',
-  path: ['color', 'background', 'information', '[default]', 'hovered'],
-  description: 'Hovered state of color.background.information',
-  exampleValue: '#CFE1FD',
+  name: 'color.icon.danger',
+  path: ['color', 'icon', 'danger'],
+  description: 'Use for icons communicating critical information, such as those used in error handing.',
+  exampleValue: '#C9372C',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.pressed',
-  path: ['color', 'background', 'information', '[default]', 'pressed'],
-  description: 'Pressed state of color.background.information',
-  exampleValue: '#ADCBFB',
+  name: 'color.icon.warning',
+  path: ['color', 'icon', 'warning', '[default]'],
+  description: 'Use for icons communicating caution, such as those used in warning section messages.',
+  exampleValue: '#E06C00',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.subtler',
-  path: ['color', 'background', 'information', 'subtler', '[default]'],
-  description: 'Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#CFE1FD',
+  name: 'color.icon.warning.inverse',
+  path: ['color', 'icon', 'warning', 'inverse'],
+  description: 'Use for icons when on bold warning backgrounds.',
+  exampleValue: '#292A2E',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.subtler.hovered',
-  path: ['color', 'background', 'information', 'subtler', 'hovered'],
-  description: 'Hovered state of color.background.information.subtler',
-  exampleValue: '#ADCBFB',
+  name: 'color.icon.success',
+  path: ['color', 'icon', 'success'],
+  description: 'Use for icons communicating a favorable outcome, such as those used in success section messaged.',
+  exampleValue: '#6A9A23',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.subtler.pressed',
-  path: ['color', 'background', 'information', 'subtler', 'pressed'],
-  description: 'Pressed state of color.background.information.subtler',
-  exampleValue: '#8FB8F6',
+  name: 'color.icon.discovery',
+  path: ['color', 'icon', 'discovery'],
+  description: 'Use for icons communicating change or something new, such as discovery section messages.',
+  exampleValue: '#AF59E1',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.subtle',
-  path: ['color', 'background', 'information', 'subtle', '[default]'],
-  description: 'Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states.',
-  exampleValue: '#8FB8F6',
+  name: 'color.icon.information',
+  path: ['color', 'icon', 'information'],
+  description: 'Use for icons communicating information or something in-progress, such as information section messages.',
+  exampleValue: '#357DE8',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.bold',
-  path: ['color', 'background', 'information', 'bold', '[default]'],
-  description: 'A vibrant background option for communicating information or something in-progress.',
-  exampleValue: '#1868DB',
+  name: 'color.icon.subtlest',
+  path: ['color', 'icon', 'subtlest'],
+  description: 'Use for icons paired with color.text.subtlest',
+  exampleValue: '#6B6E76',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.bold.hovered',
-  path: ['color', 'background', 'information', 'bold', 'hovered'],
-  description: 'Hovered state of color.background.information.bold',
-  exampleValue: '#1558BC',
+  name: 'color.icon.subtle',
+  path: ['color', 'icon', 'subtle'],
+  description: 'Use for icons paired with color.text.subtle',
+  exampleValue: '#505258',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
   }
 }, {
-  name: 'color.background.information.bold.pressed',
-  path: ['color', 'background', 'information', 'bold', 'pressed'],
-  description: 'Pressed state of color.background.information.bold',
-  exampleValue: '#144794',
+  name: 'color.link',
+  path: ['color', 'link', '[default]'],
+  description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
+  exampleValue: '#1868DB',
   usageGuidelines: {
-    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
-    cssProperties: ['background-color']
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.blanket',
-  path: ['color', 'blanket', '[default]'],
-  description: 'Use for the screen overlay that appears with modal dialogs',
-  exampleValue: '#050C1F75',
+  name: 'color.link.pressed',
+  path: ['color', 'link', 'pressed'],
+  description: 'Use for links in a pressed state.',
+  exampleValue: '#1558BC',
   usageGuidelines: {
-    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
-    cssProperties: ['background-color']
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.blanket.selected',
-  path: ['color', 'blanket', 'selected'],
-  description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements",
-  exampleValue: '#388BFF14',
+  name: 'color.link.visited',
+  path: ['color', 'link', 'visited', '[default]'],
+  description: 'Use for visited links.',
+  exampleValue: '#803FA5',
   usageGuidelines: {
-    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
-    cssProperties: ['background-color']
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
   }
 }, {
-  name: 'color.blanket.danger',
-  path: ['color', 'blanket', 'danger'],
-  description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements",
-  exampleValue: '#EF5C4814',
+  name: 'color.link.visited.pressed',
+  path: ['color', 'link', 'visited', 'pressed'],
+  description: 'Use for visited links in a pressed state.',
+  exampleValue: '#48245D',
   usageGuidelines: {
-    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
-    cssProperties: ['background-color']
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
   }
 }, {
   name: 'color.interaction.hovered',
@@ -3238,6 +3211,33 @@ export const tokens = [{
     usage: 'The color for skeleton/loading placeholders (e.g. color.skeleton)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.blanket',
+  path: ['color', 'blanket', '[default]'],
+  description: 'Use for the screen overlay that appears with modal dialogs',
+  exampleValue: '#050C1F75',
+  usageGuidelines: {
+    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
+    cssProperties: ['background-color']
+  }
+}, {
+  name: 'color.blanket.selected',
+  path: ['color', 'blanket', 'selected'],
+  description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements",
+  exampleValue: '#388BFF14',
+  usageGuidelines: {
+    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
+    cssProperties: ['background-color']
+  }
+}, {
+  name: 'color.blanket.danger',
+  path: ['color', 'blanket', 'danger'],
+  description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements",
+  exampleValue: '#EF5C4814',
+  usageGuidelines: {
+    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.chart.categorical.1',
   path: ['color', 'chart', 'categorical', '1', '[default]'],
@@ -4138,6 +4138,105 @@ export const tokens = [{
     usage: 'The color for chart and data visualization elements (e.g. color.chart)',
     cssProperties: ['fill', 'stroke', 'background-color', 'color']
   }
+}, {
+  name: 'color.rovo.background.brand.bold',
+  path: ['color', 'rovo', 'background', 'brand', 'bold', '[default]'],
+  description: 'Background color for Rovo brand emphasis.',
+  exampleValue: '#000000',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
+}, {
+  name: 'color.rovo.background.brand.bold.hovered',
+  path: ['color', 'rovo', 'background', 'brand', 'bold', 'hovered'],
+  description: 'Hovered state of color.rovo.background.brand.bold.',
+  exampleValue: '#1E1F21',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
+}, {
+  name: 'color.rovo.background.brand.bold.pressed',
+  path: ['color', 'rovo', 'background', 'brand', 'bold', 'pressed'],
+  description: 'Pressed state of color.rovo.background.brand.bold.',
+  exampleValue: '#292A2E',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
+}, {
+  name: 'color.rovo.border.lime',
+  path: ['color', 'rovo', 'border', 'lime'],
+  description: 'Use for Rovo lime borders.',
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
+}, {
+  name: 'color.rovo.border.saffron',
+  path: ['color', 'rovo', 'border', 'saffron'],
+  description: 'Use for Rovo saffron borders.',
+  exampleValue: '#FCA700',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
+}, {
+  name: 'color.rovo.border.blue',
+  path: ['color', 'rovo', 'border', 'blue'],
+  description: 'Use for Rovo blue borders.',
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
+}, {
+  name: 'color.rovo.border.purple',
+  path: ['color', 'rovo', 'border', 'purple'],
+  description: 'Use for Rovo purple borders.',
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
+}, {
+  name: 'color.rovo.icon.lime',
+  path: ['color', 'rovo', 'icon', 'lime'],
+  description: 'Use for Rovo lime icons.',
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
+}, {
+  name: 'color.rovo.icon.saffron',
+  path: ['color', 'rovo', 'icon', 'saffron'],
+  description: 'Use for Rovo saffron icons.',
+  exampleValue: '#FCA700',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
+}, {
+  name: 'color.rovo.icon.blue',
+  path: ['color', 'rovo', 'icon', 'blue'],
+  description: 'Use for Rovo blue icons.',
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
+}, {
+  name: 'color.rovo.icon.purple',
+  path: ['color', 'rovo', 'icon', 'purple'],
+  description: 'Use for Rovo purple icons.',
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'elevation.surface',
   path: ['elevation', 'surface', '[default]', '[default]'],