@atlaskit/tokens 11.1.0 → 11.2.0

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

@@ -7,9 +7,9 @@ exports.tokens = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
+ * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::6c61f13b08f7f4a5c5fb8d55f8ef5c14>>
+ * @codegen <<SignedSource::c219f53298a002dc5340fcc003a56953>>
  * @codegenCommand yarn build tokens
  */
 
@@ -17,2340 +17,4212 @@ var tokens = exports.tokens = [{
   name: 'color.text',
   path: ['color', 'text', '[default]'],
   description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
-  exampleValue: '#292A2E'
+  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'
+  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'
+  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'
+  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'
+  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'
+  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'
+  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'
+  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'
+  exampleValue: '#533F04',
+  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.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'
+  exampleValue: '#216E4E',
+  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.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'
+  exampleValue: '#164B35',
+  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.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'
+  exampleValue: '#206A83',
+  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.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'
+  exampleValue: '#164555',
+  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.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'
+  exampleValue: '#1558BC',
+  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.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'
+  exampleValue: '#123263',
+  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.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'
+  exampleValue: '#803FA5',
+  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.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'
+  exampleValue: '#48245D',
+  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.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'
+  exampleValue: '#943D73',
+  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.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'
+  exampleValue: '#50253F',
+  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.gray',
   path: ['color', 'text', 'accent', 'gray', '[default]'],
   description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
-  exampleValue: '#505258'
+  exampleValue: '#505258',
+  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.gray.bolder',
   path: ['color', 'text', 'accent', 'gray', 'bolder'],
   description: 'Use for text and icons on gray subtle accent backgrounds.',
-  exampleValue: '#1E1F21'
+  exampleValue: '#1E1F21',
+  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.disabled',
   path: ['color', 'text', 'disabled'],
   description: 'Use for text in a disabled state.',
-  exampleValue: '#080F214A'
+  exampleValue: '#080F214A',
+  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.inverse',
   path: ['color', 'text', 'inverse'],
   description: 'Use for text on bold backgrounds.',
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  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.selected',
   path: ['color', 'text', 'selected'],
   description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  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.brand',
   path: ['color', 'text', 'brand'],
   description: 'Use for text that reinforces our brand.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  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.danger',
   path: ['color', 'text', 'danger', '[default]'],
   description: 'Use for critical text, such as input field error messaging.',
-  exampleValue: '#AE2E24'
+  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.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'
+  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.warning',
   path: ['color', 'text', 'warning', '[default]'],
   description: 'Use for text to emphasize caution, such as in moved lozenges.',
-  exampleValue: '#9E4C00'
+  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.warning.inverse',
   path: ['color', 'text', 'warning', 'inverse'],
   description: 'Use for text when on bold warning backgrounds.',
-  exampleValue: '#292A2E'
+  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.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'
+  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.success',
   path: ['color', 'text', 'success', '[default]'],
   description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
-  exampleValue: '#4C6B1F'
+  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.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'
+  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.discovery',
   path: ['color', 'text', 'discovery', '[default]'],
   description: 'Use for text to emphasize change or something new, such as in new lozenges.',
-  exampleValue: '#803FA5'
+  exampleValue: '#803FA5',
+  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.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'
+  exampleValue: '#48245D',
+  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.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'
+  exampleValue: '#1558BC',
+  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.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'
+  exampleValue: '#123263',
+  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.subtlest',
   path: ['color', 'text', 'subtlest'],
   description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
-  exampleValue: '#6B6E76'
+  exampleValue: '#6B6E76',
+  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.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'
+  exampleValue: '#505258',
+  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.link',
   path: ['color', 'link', '[default]'],
   description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
+  }
 }, {
   name: 'color.link.pressed',
   path: ['color', 'link', 'pressed'],
   description: 'Use for links in a pressed state.',
-  exampleValue: '#1558BC'
+  exampleValue: '#1558BC',
+  usageGuidelines: {
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
+  }
 }, {
   name: 'color.link.visited',
   path: ['color', 'link', 'visited', '[default]'],
   description: 'Use for visited links.',
-  exampleValue: '#803FA5'
+  exampleValue: '#803FA5',
+  usageGuidelines: {
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
+  }
 }, {
   name: 'color.link.visited.pressed',
   path: ['color', 'link', 'visited', 'pressed'],
   description: 'Use for visited links in a pressed state.',
-  exampleValue: '#48245D'
+  exampleValue: '#48245D',
+  usageGuidelines: {
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
+  }
 }, {
   name: 'color.icon',
   path: ['color', 'icon', '[default]'],
   description: 'Use for icon-only buttons, or icons paired with color.text',
-  exampleValue: '#292A2E'
+  exampleValue: '#292A2E',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#C9372C',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#E06C00',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#B38600',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#22A06B',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#2898BD',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#CD519D',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#7D818A',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.disabled',
   path: ['color', 'icon', 'disabled'],
   description: 'Use for icons in a disabled state.',
-  exampleValue: '#080F214A'
+  exampleValue: '#080F214A',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.inverse',
   path: ['color', 'icon', 'inverse'],
   description: 'Use for icons on bold backgrounds.',
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.brand',
   path: ['color', 'icon', 'brand'],
   description: 'Use for icons that reinforce our brand.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.danger',
   path: ['color', 'icon', 'danger'],
   description: 'Use for icons communicating critical information, such as those used in error handing.',
-  exampleValue: '#C9372C'
+  exampleValue: '#C9372C',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#E06C00',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.warning.inverse',
   path: ['color', 'icon', 'warning', 'inverse'],
   description: 'Use for icons when on bold warning backgrounds.',
-  exampleValue: '#292A2E'
+  exampleValue: '#292A2E',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.discovery',
   path: ['color', 'icon', 'discovery'],
   description: 'Use for icons communicating change or something new, such as discovery section messages.',
-  exampleValue: '#AF59E1'
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.subtlest',
   path: ['color', 'icon', 'subtlest'],
   description: 'Use for icons paired with color.text.subtlest',
-  exampleValue: '#6B6E76'
+  exampleValue: '#6B6E76',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   name: 'color.icon.subtle',
   path: ['color', 'icon', 'subtle'],
   description: 'Use for icons paired with color.text.subtle',
-  exampleValue: '#505258'
+  exampleValue: '#505258',
+  usageGuidelines: {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  }
 }, {
   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'
+  exampleValue: '#0B120E24',
+  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',
   path: ['color', 'border', 'accent', 'lime'],
   description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#6A9A23'
+  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.red',
   path: ['color', 'border', 'accent', 'red'],
   description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E2483D'
+  exampleValue: '#E2483D',
+  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.orange',
   path: ['color', 'border', 'accent', 'orange'],
   description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E06C00'
+  exampleValue: '#E06C00',
+  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.yellow',
   path: ['color', 'border', 'accent', 'yellow'],
   description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#B38600'
+  exampleValue: '#B38600',
+  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.green',
   path: ['color', 'border', 'accent', 'green'],
   description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#22A06B'
+  exampleValue: '#22A06B',
+  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.teal',
   path: ['color', 'border', 'accent', 'teal'],
   description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#2898BD'
+  exampleValue: '#2898BD',
+  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.blue',
   path: ['color', 'border', 'accent', 'blue'],
   description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  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.purple',
   path: ['color', 'border', 'accent', 'purple'],
   description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#AF59E1'
+  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.border.accent.magenta',
   path: ['color', 'border', 'accent', 'magenta'],
   description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#CD519D'
+  exampleValue: '#CD519D',
+  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.gray',
   path: ['color', 'border', 'accent', 'gray'],
   description: 'Use for borders on non-bold gray accent backgrounds.',
-  exampleValue: '#7D818A'
+  exampleValue: '#7D818A',
+  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.disabled',
   path: ['color', 'border', 'disabled'],
   description: 'Use for borders of elements in a disabled state.',
-  exampleValue: '#0515240F'
+  exampleValue: '#0515240F',
+  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.focused',
   path: ['color', 'border', 'focused'],
   description: 'Use for focus rings of elements in a focus state.',
-  exampleValue: '#4688EC'
+  exampleValue: '#4688EC',
+  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.input',
   path: ['color', 'border', 'input'],
   description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#8C8F97'
+  exampleValue: '#8C8F97',
+  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.inverse',
   path: ['color', 'border', 'inverse'],
   description: 'Use for borders on bold backgrounds.',
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  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.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'
+  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.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'
+  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.border.danger',
   path: ['color', 'border', 'danger'],
   description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
-  exampleValue: '#E2483D'
+  exampleValue: '#E2483D',
+  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.warning',
   path: ['color', 'border', 'warning'],
   description: 'Use for borders communicating caution.',
-  exampleValue: '#E06C00'
+  exampleValue: '#E06C00',
+  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.success',
   path: ['color', 'border', 'success'],
   description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
-  exampleValue: '#6A9A23'
+  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.discovery',
   path: ['color', 'border', 'discovery'],
   description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
-  exampleValue: '#AF59E1'
+  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.border.information',
   path: ['color', 'border', 'information'],
   description: 'Use for borders communicating information or something in-progress.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  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.bold',
   path: ['color', 'border', 'bold'],
   description: 'A neutral border option that passes min 3:1 contrast ratios.',
-  exampleValue: '#7D818A'
+  exampleValue: '#7D818A',
+  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.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'
+  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.lime.subtlest.hovered',
   path: ['color', 'background', 'accent', 'lime', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.lime.subtlest.',
-  exampleValue: '#D3F1A7'
+  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.lime.subtlest.pressed',
   path: ['color', 'background', 'accent', 'lime', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.subtlest.',
-  exampleValue: '#BDE97C'
+  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.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'
+  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.lime.subtler.hovered',
   path: ['color', 'background', 'accent', 'lime', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.lime.subtler.',
-  exampleValue: '#BDE97C'
+  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.lime.subtler.pressed',
   path: ['color', 'background', 'accent', 'lime', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.subtler.',
-  exampleValue: '#B3DF72'
+  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.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'
+  exampleValue: '#94C748',
+  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'
+  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.lime.subtle.pressed',
   path: ['color', 'background', 'accent', 'lime', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.subtle.',
-  exampleValue: '#BDE97C'
+  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.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'
+  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.lime.bolder.hovered',
   path: ['color', 'background', 'accent', 'lime', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.lime.bolder.',
-  exampleValue: '#4C6B1F'
+  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.lime.bolder.pressed',
   path: ['color', 'background', 'accent', 'lime', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.bolder.',
-  exampleValue: '#3F5224'
+  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.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'
+  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.red.subtlest.hovered',
   path: ['color', 'background', 'accent', 'red', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.red.subtlest.',
-  exampleValue: '#FFD5D2'
+  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.red.subtlest.pressed',
   path: ['color', 'background', 'accent', 'red', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.red.subtlest.',
-  exampleValue: '#FFB8B2'
+  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.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'
+  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.red.subtler.hovered',
   path: ['color', 'background', 'accent', 'red', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.red.subtler.',
-  exampleValue: '#FFB8B2'
+  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.red.subtler.pressed',
   path: ['color', 'background', 'accent', 'red', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.red.subtler.',
-  exampleValue: '#FD9891'
+  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.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'
+  exampleValue: '#F87168',
+  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'
+  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.red.subtle.pressed',
   path: ['color', 'background', 'accent', 'red', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.red.subtle.',
-  exampleValue: '#FFB8B2'
+  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.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'
+  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.red.bolder.hovered',
   path: ['color', 'background', 'accent', 'red', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.red.bolder.',
-  exampleValue: '#AE2E24'
+  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.red.bolder.pressed',
   path: ['color', 'background', 'accent', 'red', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.red.bolder.',
-  exampleValue: '#872821'
+  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.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'
+  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.orange.subtlest.hovered',
   path: ['color', 'background', 'accent', 'orange', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FCE4A6'
+  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.orange.subtlest.pressed',
   path: ['color', 'background', 'accent', 'orange', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FBD779'
+  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.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'
+  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.orange.subtler.hovered',
   path: ['color', 'background', 'accent', 'orange', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.subtler.',
-  exampleValue: '#FBD779'
+  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.orange.subtler.pressed',
   path: ['color', 'background', 'accent', 'orange', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.subtler.',
-  exampleValue: '#FBC828'
+  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.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'
+  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.orange.subtle.hovered',
   path: ['color', 'background', 'accent', 'orange', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.subtle.',
-  exampleValue: '#FBC828'
+  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.orange.subtle.pressed',
   path: ['color', 'background', 'accent', 'orange', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.subtle.',
-  exampleValue: '#FBD779'
+  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.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'
+  exampleValue: '#BD5B00',
+  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'
+  exampleValue: '#9E4C00',
+  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'
+  exampleValue: '#7A3B00',
+  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'
+  exampleValue: '#FEF7C8',
+  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'
+  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.subtlest.pressed',
   path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#EFDD4E'
+  exampleValue: '#EFDD4E',
+  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'
+  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'
+  exampleValue: '#EFDD4E',
+  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'
+  exampleValue: '#EED12B',
+  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'
+  exampleValue: '#EED12B',
+  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'
+  exampleValue: '#DDB30E',
+  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'
+  exampleValue: '#EFDD4E',
+  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'
+  exampleValue: '#946F00',
+  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'
+  exampleValue: '#7F5F01',
+  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'
+  exampleValue: '#614A05',
+  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'
+  exampleValue: '#DCFFF1',
+  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'
+  exampleValue: '#BAF3DB',
+  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'
+  exampleValue: '#97EDC9',
+  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'
+  exampleValue: '#BAF3DB',
+  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'
+  exampleValue: '#97EDC9',
+  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'
+  exampleValue: '#7EE2B8',
+  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'
+  exampleValue: '#4BCE97',
+  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'
+  exampleValue: '#7EE2B8',
+  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'
+  exampleValue: '#97EDC9',
+  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'
+  exampleValue: '#1F845A',
+  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'
+  exampleValue: '#216E4E',
+  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'
+  exampleValue: '#19573D',
+  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'
+  exampleValue: '#E7F9FF',
+  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'
+  exampleValue: '#C6EDFB',
+  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'
+  exampleValue: '#B1E4F7',
+  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'
+  exampleValue: '#C6EDFB',
+  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'
+  exampleValue: '#B1E4F7',
+  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'
+  exampleValue: '#9DD9EE',
+  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'
+  exampleValue: '#6CC3E0',
+  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'
+  exampleValue: '#9DD9EE',
+  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'
+  exampleValue: '#B1E4F7',
+  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'
+  exampleValue: '#227D9B',
+  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'
+  exampleValue: '#206A83',
+  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'
+  exampleValue: '#1A5265',
+  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'
+  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.blue.subtlest.hovered',
   path: ['color', 'background', 'accent', 'blue', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.subtlest.',
-  exampleValue: '#CFE1FD'
+  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.blue.subtlest.pressed',
   path: ['color', 'background', 'accent', 'blue', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.subtlest.',
-  exampleValue: '#ADCBFB'
+  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.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'
+  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.blue.subtler.hovered',
   path: ['color', 'background', 'accent', 'blue', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.subtler.',
-  exampleValue: '#ADCBFB'
+  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.blue.subtler.pressed',
   path: ['color', 'background', 'accent', 'blue', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.subtler.',
-  exampleValue: '#8FB8F6'
+  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.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'
+  exampleValue: '#669DF1',
+  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'
+  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.blue.subtle.pressed',
   path: ['color', 'background', 'accent', 'blue', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.subtle.',
-  exampleValue: '#ADCBFB'
+  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.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'
+  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.blue.bolder.hovered',
   path: ['color', 'background', 'accent', 'blue', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.bolder.',
-  exampleValue: '#1558BC'
+  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.blue.bolder.pressed',
   path: ['color', 'background', 'accent', 'blue', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.bolder.',
-  exampleValue: '#144794'
+  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.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'
+  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.',
-  exampleValue: '#EED7FC'
+  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.',
-  exampleValue: '#E3BDFA'
+  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.',
-  exampleValue: '#EED7FC'
+  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.',
-  exampleValue: '#E3BDFA'
+  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.',
-  exampleValue: '#D8A0F7'
+  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'
+  exampleValue: '#C97CF4',
+  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'
+  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.pressed',
   path: ['color', 'background', 'accent', 'purple', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.purple.subtle.',
-  exampleValue: '#E3BDFA'
+  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.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'
+  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.bolder.hovered',
   path: ['color', 'background', 'accent', 'purple', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.purple.bolder.',
-  exampleValue: '#803FA5'
+  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.pressed',
   path: ['color', 'background', 'accent', 'purple', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.purple.bolder.',
-  exampleValue: '#673286'
+  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.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'
+  exampleValue: '#FFECF8',
+  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'
+  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.magenta.subtlest.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.subtlest.',
-  exampleValue: '#FCB6E1'
+  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.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'
+  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.magenta.subtler.hovered',
   path: ['color', 'background', 'accent', 'magenta', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.magenta.subtler.',
-  exampleValue: '#FCB6E1'
+  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.magenta.subtler.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.subtler.',
-  exampleValue: '#F797D2'
+  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.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'
+  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.magenta.subtle.hovered',
   path: ['color', 'background', 'accent', 'magenta', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.magenta.subtle.',
-  exampleValue: '#F797D2'
+  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.magenta.subtle.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.subtle.',
-  exampleValue: '#FCB6E1'
+  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.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'
+  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.magenta.bolder.hovered',
   path: ['color', 'background', 'accent', 'magenta', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.magenta.bolder.',
-  exampleValue: '#943D73'
+  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.magenta.bolder.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.bolder.',
-  exampleValue: '#77325B'
+  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.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'
+  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.gray.subtlest.hovered',
   path: ['color', 'background', 'accent', 'gray', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.subtlest.',
-  exampleValue: '#DDDEE1'
+  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.gray.subtlest.pressed',
   path: ['color', 'background', 'accent', 'gray', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#B7B9BE'
+  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.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'
+  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.gray.subtler.hovered',
   path: ['color', 'background', 'accent', 'gray', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.subtler.',
-  exampleValue: '#B7B9BE'
+  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.gray.subtler.pressed',
   path: ['color', 'background', 'accent', 'gray', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtler.',
-  exampleValue: '#8C8F97'
+  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.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'
+  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.gray.subtle.hovered',
   path: ['color', 'background', 'accent', 'gray', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.subtle.',
-  exampleValue: '#B7B9BE'
+  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.gray.subtle.pressed',
   path: ['color', 'background', 'accent', 'gray', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtle.',
-  exampleValue: '#DDDEE1'
+  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.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'
+  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.gray.bolder.hovered',
   path: ['color', 'background', 'accent', 'gray', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.bolder.',
-  exampleValue: '#505258'
+  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.gray.bolder.pressed',
   path: ['color', 'background', 'accent', 'gray', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#3B3D42'
+  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.disabled',
   path: ['color', 'background', 'disabled'],
   description: 'Use for backgrounds of elements in a disabled state.',
-  exampleValue: '#17171708'
+  exampleValue: '#17171708',
+  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.input',
   path: ['color', 'background', 'input', '[default]'],
   description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#FFFFFF'
+  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.input.hovered',
   path: ['color', 'background', 'input', 'hovered'],
   description: 'Hovered state for color.background.input',
-  exampleValue: '#F8F8F8'
+  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.input.pressed',
   path: ['color', 'background', 'input', 'pressed'],
   description: 'Pressed state for color.background.input',
-  exampleValue: '#FFFFFF'
+  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.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'
+  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.inverse.subtle.hovered',
   path: ['color', 'background', 'inverse', 'subtle', 'hovered'],
   description: 'Use for the hovered state of color.background.inverse.subtle',
-  exampleValue: '#0000003D'
+  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.inverse.subtle.pressed',
   path: ['color', 'background', 'inverse', 'subtle', 'pressed'],
   description: 'Use for the pressed state of color.background.inverse.subtle',
-  exampleValue: '#00000052'
+  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.neutral',
   path: ['color', 'background', 'neutral', '[default]', '[default]'],
   description: 'The default background for neutral elements, such as default buttons.',
-  exampleValue: '#0515240F'
+  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.neutral.hovered',
   path: ['color', 'background', 'neutral', '[default]', 'hovered'],
   description: 'Hovered state for color.background.neutral',
-  exampleValue: '#0B120E24'
+  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.neutral.pressed',
   path: ['color', 'background', 'neutral', '[default]', 'pressed'],
   description: 'Pressed state for color.background.neutral',
-  exampleValue: '#080F214A'
+  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.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'
+  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.neutral.subtle.hovered',
   path: ['color', 'background', 'neutral', 'subtle', 'hovered'],
   description: 'Hovered state for color.background.neutral.subtle',
-  exampleValue: '#0515240F'
+  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.neutral.subtle.pressed',
   path: ['color', 'background', 'neutral', 'subtle', 'pressed'],
   description: 'Pressed state for color.background.neutral.subtle',
-  exampleValue: '#0B120E24'
+  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.neutral.bold',
   path: ['color', 'background', 'neutral', 'bold', '[default]'],
   description: 'A vibrant background option for neutral UI elements, such as announcement banners.',
-  exampleValue: '#292A2E'
+  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.neutral.bold.hovered',
   path: ['color', 'background', 'neutral', 'bold', 'hovered'],
   description: 'Hovered state of color.background.neutral.bold',
-  exampleValue: '#3B3D42'
+  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.neutral.bold.pressed',
   path: ['color', 'background', 'neutral', 'bold', 'pressed'],
   description: 'Pressed state of color.background.neutral.bold',
-  exampleValue: '#505258'
+  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.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'
+  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.selected.hovered',
   path: ['color', 'background', 'selected', '[default]', 'hovered'],
   description: 'Hovered state for color.background.selected',
-  exampleValue: '#CFE1FD'
+  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.selected.pressed',
   path: ['color', 'background', 'selected', '[default]', 'pressed'],
   description: 'Pressed state for color.background.selected',
-  exampleValue: '#8FB8F6'
+  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.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'
+  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.selected.bold.hovered',
   path: ['color', 'background', 'selected', 'bold', 'hovered'],
   description: 'Hovered state of color.background.selected.bold',
-  exampleValue: '#1558BC'
+  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.selected.bold.pressed',
   path: ['color', 'background', 'selected', 'bold', 'pressed'],
   description: 'Pressed state of color.background.selected.bold',
-  exampleValue: '#123263'
+  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.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'
+  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.brand.subtlest.hovered',
   path: ['color', 'background', 'brand', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.brand.subtlest.',
-  exampleValue: '#CFE1FD'
+  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.brand.subtlest.pressed',
   path: ['color', 'background', 'brand', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.brand.subtlest',
-  exampleValue: '#ADCBFB'
+  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.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'
+  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.brand.bold.hovered',
   path: ['color', 'background', 'brand', 'bold', 'hovered'],
   description: 'Hovered state of color.background.brand.bold.',
-  exampleValue: '#1558BC'
+  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.brand.bold.pressed',
   path: ['color', 'background', 'brand', 'bold', 'pressed'],
   description: 'Pressed state of color.background.brand.bold.',
-  exampleValue: '#144794'
+  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.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'
+  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.brand.boldest.hovered',
   path: ['color', 'background', 'brand', 'boldest', 'hovered'],
   description: 'Hovered state of color.background.brand.boldest.',
-  exampleValue: '#123263'
+  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.brand.boldest.pressed',
   path: ['color', 'background', 'brand', 'boldest', 'pressed'],
   description: 'Pressed state of color.background.brand.boldest.',
-  exampleValue: '#144794'
+  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.danger',
   path: ['color', 'background', 'danger', '[default]', '[default]'],
   description: 'Use for backgrounds communicating critical information, such in error section messages.',
-  exampleValue: '#FFECEB'
+  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.danger.hovered',
   path: ['color', 'background', 'danger', '[default]', 'hovered'],
   description: 'Hovered state for color.background.danger',
-  exampleValue: '#FFD5D2'
+  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.danger.pressed',
   path: ['color', 'background', 'danger', '[default]', 'pressed'],
   description: 'Pressed state for color.background.danger',
-  exampleValue: '#FFB8B2'
+  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.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'
+  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.danger.subtler.hovered',
   path: ['color', 'background', 'danger', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.danger.subtler',
-  exampleValue: '#FFB8B2'
+  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.danger.subtler.pressed',
   path: ['color', 'background', 'danger', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.danger.subtler',
-  exampleValue: '#FD9891'
+  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.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'
+  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.danger.bold.hovered',
   path: ['color', 'background', 'danger', 'bold', 'hovered'],
   description: 'Hovered state of color.background.danger.bold',
-  exampleValue: '#AE2E24'
+  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.danger.bold.pressed',
   path: ['color', 'background', 'danger', 'bold', 'pressed'],
   description: 'Pressed state of color.background.danger.bold',
-  exampleValue: '#872821'
+  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.warning',
   path: ['color', 'background', 'warning', '[default]', '[default]'],
   description: 'Use for backgrounds communicating caution, such as in warning section messages.',
-  exampleValue: '#FFF5DB'
+  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.warning.hovered',
   path: ['color', 'background', 'warning', '[default]', 'hovered'],
   description: 'Hovered state for color.background.warning',
-  exampleValue: '#FCE4A6'
+  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.warning.pressed',
   path: ['color', 'background', 'warning', '[default]', 'pressed'],
   description: 'Pressed state for color.background.warning',
-  exampleValue: '#FBD779'
+  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.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'
+  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.warning.subtler.hovered',
   path: ['color', 'background', 'warning', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.warning.subtler',
-  exampleValue: '#FBD779'
+  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.warning.subtler.pressed',
   path: ['color', 'background', 'warning', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.warning.subtler',
-  exampleValue: '#FBC828'
+  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.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'
+  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.warning.bold.hovered',
   path: ['color', 'background', 'warning', 'bold', 'hovered'],
   description: 'Hovered state of color.background.warning.bold',
-  exampleValue: '#FCA700'
+  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.warning.bold.pressed',
   path: ['color', 'background', 'warning', 'bold', 'pressed'],
   description: 'Pressed state of color.background.warning.bold',
-  exampleValue: '#F68909'
+  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.success',
   path: ['color', 'background', 'success', '[default]', '[default]'],
   description: 'Use for backgrounds communicating a favorable outcome, such as in success section messages.',
-  exampleValue: '#EFFFD6'
+  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.success.hovered',
   path: ['color', 'background', 'success', '[default]', 'hovered'],
   description: 'Hovered state for color.background.success',
-  exampleValue: '#D3F1A7'
+  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.success.pressed',
   path: ['color', 'background', 'success', '[default]', 'pressed'],
   description: 'Pressed state for color.background.success',
-  exampleValue: '#BDE97C'
+  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.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'
+  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.success.subtler.hovered',
   path: ['color', 'background', 'success', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.success.subtler',
-  exampleValue: '#BDE97C'
+  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.success.subtler.pressed',
   path: ['color', 'background', 'success', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.success.subtler',
-  exampleValue: '#B3DF72'
+  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.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'
+  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.success.bold.hovered',
   path: ['color', 'background', 'success', 'bold', 'hovered'],
   description: 'Hovered state of color.background.success.bold',
-  exampleValue: '#4C6B1F'
+  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.success.bold.pressed',
   path: ['color', 'background', 'success', 'bold', 'pressed'],
   description: 'Pressed state of color.background.success.bold',
-  exampleValue: '#3F5224'
+  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.discovery',
   path: ['color', 'background', 'discovery', '[default]', '[default]'],
   description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.',
-  exampleValue: '#F8EEFE'
+  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.discovery.hovered',
   path: ['color', 'background', 'discovery', '[default]', 'hovered'],
   description: 'Hover state for color.background.discovery',
-  exampleValue: '#EED7FC'
+  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.discovery.pressed',
   path: ['color', 'background', 'discovery', '[default]', 'pressed'],
   description: 'Pressed state for color.background.discovery',
-  exampleValue: '#E3BDFA'
+  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.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'
+  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.discovery.subtler.hovered',
   path: ['color', 'background', 'discovery', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.discovery.subtler',
-  exampleValue: '#E3BDFA'
+  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.discovery.subtler.pressed',
   path: ['color', 'background', 'discovery', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.discovery.subtler',
-  exampleValue: '#D8A0F7'
+  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.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'
+  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.discovery.bold.hovered',
   path: ['color', 'background', 'discovery', 'bold', 'hovered'],
   description: 'Hovered state of color.background.discovery.bold',
-  exampleValue: '#803FA5'
+  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.discovery.bold.pressed',
   path: ['color', 'background', 'discovery', 'bold', 'pressed'],
   description: 'Pressed state of color.background.discovery.bold',
-  exampleValue: '#673286'
+  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.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'
+  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.information.hovered',
   path: ['color', 'background', 'information', '[default]', 'hovered'],
   description: 'Hovered state of color.background.information',
-  exampleValue: '#CFE1FD'
+  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.information.pressed',
   path: ['color', 'background', 'information', '[default]', 'pressed'],
   description: 'Pressed state of color.background.information',
-  exampleValue: '#ADCBFB'
+  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.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'
+  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.information.subtler.hovered',
   path: ['color', 'background', 'information', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.information.subtler',
-  exampleValue: '#ADCBFB'
+  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.information.subtler.pressed',
   path: ['color', 'background', 'information', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.information.subtler',
-  exampleValue: '#8FB8F6'
+  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.information.bold',
   path: ['color', 'background', 'information', 'bold', '[default]'],
   description: 'A vibrant background option for communicating information or something in-progress.',
-  exampleValue: '#1868DB'
+  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.information.bold.hovered',
   path: ['color', 'background', 'information', 'bold', 'hovered'],
   description: 'Hovered state of color.background.information.bold',
-  exampleValue: '#1558BC'
+  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.information.bold.pressed',
   path: ['color', 'background', 'information', 'bold', 'pressed'],
   description: 'Pressed state of color.background.information.bold',
-  exampleValue: '#144794'
+  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.blanket',
   path: ['color', 'blanket', '[default]'],
   description: 'Use for the screen overlay that appears with modal dialogs',
-  exampleValue: '#050C1F75'
+  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'
+  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'
+  exampleValue: '#EF5C4814',
+  usageGuidelines: {
+    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.interaction.hovered',
   path: ['color', 'interaction', 'hovered'],
   description: 'Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.',
-  exampleValue: '#00000029'
+  exampleValue: '#00000029',
+  usageGuidelines: {
+    usage: 'Transparent interaction states for use over elements when their background color cannot change, such as images and avatars.',
+    cssProperties: ['background-color', 'border-color']
+  }
 }, {
   name: 'color.interaction.pressed',
   path: ['color', 'interaction', 'pressed'],
   description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.',
-  exampleValue: '#00000052'
+  exampleValue: '#00000052',
+  usageGuidelines: {
+    usage: 'Transparent interaction states for use over elements when their background color cannot change, such as images and avatars.',
+    cssProperties: ['background-color', 'border-color']
+  }
 }, {
   name: 'color.skeleton',
   path: ['color', 'skeleton', '[default]'],
   description: 'Use for skeleton loading states',
-  exampleValue: '#0515240F'
+  exampleValue: '#0515240F',
+  usageGuidelines: {
+    usage: 'The color for skeleton/loading placeholders (e.g. color.skeleton)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.skeleton.subtle',
   path: ['color', 'skeleton', 'subtle'],
   description: 'Use for the pulse or shimmer effect in skeleton loading states',
-  exampleValue: '#17171708'
+  exampleValue: '#17171708',
+  usageGuidelines: {
+    usage: 'The color for skeleton/loading placeholders (e.g. color.skeleton)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.chart.categorical.1',
   path: ['color', 'chart', 'categorical', '1', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.1.hovered',
   path: ['color', 'chart', 'categorical', '1', 'hovered'],
   description: 'Hovered state of color.chart.categorical.1.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.2',
   path: ['color', 'chart', 'categorical', '2', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#82B536'
+  exampleValue: '#82B536',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.2.hovered',
   path: ['color', 'chart', 'categorical', '2', 'hovered'],
   description: 'Hovered state of color.chart.categorical.2.',
-  exampleValue: '#6A9A23'
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.3',
   path: ['color', 'chart', 'categorical', '3', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#BF63F3'
+  exampleValue: '#BF63F3',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.3.hovered',
   path: ['color', 'chart', 'categorical', '3', 'hovered'],
   description: 'Hovered state of color.chart.categorical.3.',
-  exampleValue: '#AF59E1'
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.4',
   path: ['color', 'chart', 'categorical', '4', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#F68909'
+  exampleValue: '#F68909',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.4.hovered',
   path: ['color', 'chart', 'categorical', '4', 'hovered'],
   description: 'Hovered state of color.chart.categorical.4.',
-  exampleValue: '#E06C00'
+  exampleValue: '#E06C00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.5',
   path: ['color', 'chart', 'categorical', '5', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#1558BC'
+  exampleValue: '#1558BC',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.5.hovered',
   path: ['color', 'chart', 'categorical', '5', 'hovered'],
   description: 'Hovered state of color.chart.categorical.5.',
-  exampleValue: '#123263'
+  exampleValue: '#123263',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.6',
   path: ['color', 'chart', 'categorical', '6', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#964AC0'
+  exampleValue: '#964AC0',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.6.hovered',
   path: ['color', 'chart', 'categorical', '6', 'hovered'],
   description: 'Hovered state of color.chart.categorical.6.',
-  exampleValue: '#803FA5'
+  exampleValue: '#803FA5',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.7',
   path: ['color', 'chart', 'categorical', '7', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#42B2D7'
+  exampleValue: '#42B2D7',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.7.hovered',
   path: ['color', 'chart', 'categorical', '7', 'hovered'],
   description: 'Hovered state of color.chart.categorical.7.',
-  exampleValue: '#2898BD'
+  exampleValue: '#2898BD',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.8',
   path: ['color', 'chart', 'categorical', '8', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#BD5B00'
+  exampleValue: '#BD5B00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.categorical.8.hovered',
   path: ['color', 'chart', 'categorical', '8', 'hovered'],
   description: 'Hovered state of color.chart.categorical.8.',
-  exampleValue: '#7A3B00'
+  exampleValue: '#7A3B00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.lime.bold',
   path: ['color', 'chart', 'lime', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#6A9A23'
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.lime.bold.hovered',
   path: ['color', 'chart', 'lime', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.lime.bold.',
-  exampleValue: '#5B7F24'
+  exampleValue: '#5B7F24',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.lime.bolder',
   path: ['color', 'chart', 'lime', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#5B7F24'
+  exampleValue: '#5B7F24',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.lime.bolder.hovered',
   path: ['color', 'chart', 'lime', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.lime.bolder.',
-  exampleValue: '#4C6B1F'
+  exampleValue: '#4C6B1F',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.lime.boldest',
   path: ['color', 'chart', 'lime', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#4C6B1F'
+  exampleValue: '#4C6B1F',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.lime.boldest.hovered',
   path: ['color', 'chart', 'lime', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.lime.boldest.',
-  exampleValue: '#37471F'
+  exampleValue: '#37471F',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.neutral',
   path: ['color', 'chart', 'neutral', '[default]'],
   description: "A secondary color for data visualisation or to communicate 'to-do' statues.",
-  exampleValue: '#8C8F97'
+  exampleValue: '#8C8F97',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.neutral.hovered',
   path: ['color', 'chart', 'neutral', 'hovered'],
   description: 'Hovered state of color.chart.neutral.',
-  exampleValue: '#7D818A'
+  exampleValue: '#7D818A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.red.bold',
   path: ['color', 'chart', 'red', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#F15B50'
+  exampleValue: '#F15B50',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.red.bold.hovered',
   path: ['color', 'chart', 'red', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.red.bold.',
-  exampleValue: '#E2483D'
+  exampleValue: '#E2483D',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.red.bolder',
   path: ['color', 'chart', 'red', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#E2483D'
+  exampleValue: '#E2483D',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.red.bolder.hovered',
   path: ['color', 'chart', 'red', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.red.bolder.',
-  exampleValue: '#C9372C'
+  exampleValue: '#C9372C',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.red.boldest',
   path: ['color', 'chart', 'red', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#AE2E24'
+  exampleValue: '#AE2E24',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.red.boldest.hovered',
   path: ['color', 'chart', 'red', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.red.boldest.',
-  exampleValue: '#5D1F1A'
+  exampleValue: '#5D1F1A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.orange.bold',
   path: ['color', 'chart', 'orange', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#E06C00'
+  exampleValue: '#E06C00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.orange.bold.hovered',
   path: ['color', 'chart', 'orange', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.orange.bold.',
-  exampleValue: '#BD5B00'
+  exampleValue: '#BD5B00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.orange.bolder',
   path: ['color', 'chart', 'orange', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#BD5B00'
+  exampleValue: '#BD5B00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.orange.bolder.hovered',
   path: ['color', 'chart', 'orange', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.orange.bolder.',
-  exampleValue: '#9E4C00'
+  exampleValue: '#9E4C00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.orange.boldest',
   path: ['color', 'chart', 'orange', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#7A3B00'
+  exampleValue: '#7A3B00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.orange.boldest.hovered',
   path: ['color', 'chart', 'orange', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.orange.boldest.',
-  exampleValue: '#693200'
+  exampleValue: '#693200',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.yellow.bold',
   path: ['color', 'chart', 'yellow', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#B38600'
+  exampleValue: '#B38600',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.yellow.bold.hovered',
   path: ['color', 'chart', 'yellow', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.yellow.bold.',
-  exampleValue: '#946F00'
+  exampleValue: '#946F00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.yellow.bolder',
   path: ['color', 'chart', 'yellow', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#946F00'
+  exampleValue: '#946F00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.yellow.bolder.hovered',
   path: ['color', 'chart', 'yellow', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.yellow.bolder.',
-  exampleValue: '#7F5F01'
+  exampleValue: '#7F5F01',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.yellow.boldest',
   path: ['color', 'chart', 'yellow', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#7F5F01'
+  exampleValue: '#7F5F01',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.yellow.boldest.hovered',
   path: ['color', 'chart', 'yellow', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.yellow.boldest.',
-  exampleValue: '#533F04'
+  exampleValue: '#533F04',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.green.bold',
   path: ['color', 'chart', 'green', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#22A06B'
+  exampleValue: '#22A06B',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.green.bold.hovered',
   path: ['color', 'chart', 'green', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.green.bold.',
-  exampleValue: '#1F845A'
+  exampleValue: '#1F845A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.green.bolder',
   path: ['color', 'chart', 'green', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#1F845A'
+  exampleValue: '#1F845A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.green.bolder.hovered',
   path: ['color', 'chart', 'green', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.green.bolder.',
-  exampleValue: '#216E4E'
+  exampleValue: '#216E4E',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.green.boldest',
   path: ['color', 'chart', 'green', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#216E4E'
+  exampleValue: '#216E4E',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.green.boldest.hovered',
   path: ['color', 'chart', 'green', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.green.boldest.',
-  exampleValue: '#164B35'
+  exampleValue: '#164B35',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.teal.bold',
   path: ['color', 'chart', 'teal', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#2898BD'
+  exampleValue: '#2898BD',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.teal.bold.hovered',
   path: ['color', 'chart', 'teal', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.teal.bold.',
-  exampleValue: '#227D9B'
+  exampleValue: '#227D9B',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.teal.bolder',
   path: ['color', 'chart', 'teal', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#227D9B'
+  exampleValue: '#227D9B',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.teal.bolder.hovered',
   path: ['color', 'chart', 'teal', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.teal.bolder.',
-  exampleValue: '#206A83'
+  exampleValue: '#206A83',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.teal.boldest',
   path: ['color', 'chart', 'teal', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#206A83'
+  exampleValue: '#206A83',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.teal.boldest.hovered',
   path: ['color', 'chart', 'teal', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.teal.boldest.',
-  exampleValue: '#164555'
+  exampleValue: '#164555',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.blue.bold',
   path: ['color', 'chart', 'blue', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#4688EC'
+  exampleValue: '#4688EC',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.blue.bold.hovered',
   path: ['color', 'chart', 'blue', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.blue.bold.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.blue.bolder',
   path: ['color', 'chart', 'blue', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.blue.bolder.hovered',
   path: ['color', 'chart', 'blue', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.blue.bolder.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.blue.boldest',
   path: ['color', 'chart', 'blue', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#1558BC'
+  exampleValue: '#1558BC',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.blue.boldest.hovered',
   path: ['color', 'chart', 'blue', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.blue.boldest.',
-  exampleValue: '#123263'
+  exampleValue: '#123263',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.purple.bold',
   path: ['color', 'chart', 'purple', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#BF63F3'
+  exampleValue: '#BF63F3',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.purple.bold.hovered',
   path: ['color', 'chart', 'purple', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.purple.bold.',
-  exampleValue: '#AF59E1'
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.purple.bolder',
   path: ['color', 'chart', 'purple', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#AF59E1'
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.purple.bolder.hovered',
   path: ['color', 'chart', 'purple', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.purple.bolder.',
-  exampleValue: '#964AC0'
+  exampleValue: '#964AC0',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.purple.boldest',
   path: ['color', 'chart', 'purple', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#803FA5'
+  exampleValue: '#803FA5',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.purple.boldest.hovered',
   path: ['color', 'chart', 'purple', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.purple.boldest.',
-  exampleValue: '#48245D'
+  exampleValue: '#48245D',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.magenta.bold',
   path: ['color', 'chart', 'magenta', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#DA62AC'
+  exampleValue: '#DA62AC',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.magenta.bold.hovered',
   path: ['color', 'chart', 'magenta', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.magenta.bold.',
-  exampleValue: '#CD519D'
+  exampleValue: '#CD519D',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.magenta.bolder',
   path: ['color', 'chart', 'magenta', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#CD519D'
+  exampleValue: '#CD519D',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.magenta.bolder.hovered',
   path: ['color', 'chart', 'magenta', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.magenta.bolder.',
-  exampleValue: '#AE4787'
+  exampleValue: '#AE4787',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.magenta.boldest',
   path: ['color', 'chart', 'magenta', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#943D73'
+  exampleValue: '#943D73',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.magenta.boldest.hovered',
   path: ['color', 'chart', 'magenta', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.magenta.boldest.',
-  exampleValue: '#50253F'
+  exampleValue: '#50253F',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.gray.bold',
   path: ['color', 'chart', 'gray', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#8C8F97'
+  exampleValue: '#8C8F97',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.gray.bold.hovered',
   path: ['color', 'chart', 'gray', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.gray.bold.',
-  exampleValue: '#7D818A'
+  exampleValue: '#7D818A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.gray.bolder',
   path: ['color', 'chart', 'gray', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#7D818A'
+  exampleValue: '#7D818A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.gray.bolder.hovered',
   path: ['color', 'chart', 'gray', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.gray.bolder.',
-  exampleValue: '#6B6E76'
+  exampleValue: '#6B6E76',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.gray.boldest',
   path: ['color', 'chart', 'gray', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#505258'
+  exampleValue: '#505258',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.gray.boldest.hovered',
   path: ['color', 'chart', 'gray', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.gray.boldest.',
-  exampleValue: '#3B3D42'
+  exampleValue: '#3B3D42',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.brand',
   path: ['color', 'chart', 'brand', '[default]'],
   description: 'Our primary color for data visualisation. Use when only one color is required.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.brand.hovered',
   path: ['color', 'chart', 'brand', 'hovered'],
   description: 'Hovered state of color.chart.brand.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.danger',
   path: ['color', 'chart', 'danger', '[default]', '[default]'],
   description: "For data visualisation communicating negative information, such as 'off track'.",
-  exampleValue: '#E2483D'
+  exampleValue: '#E2483D',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.danger.hovered',
   path: ['color', 'chart', 'danger', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.danger.',
-  exampleValue: '#C9372C'
+  exampleValue: '#C9372C',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.danger.bold',
   path: ['color', 'chart', 'danger', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.danger.',
-  exampleValue: '#872821'
+  exampleValue: '#872821',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.danger.bold.hovered',
   path: ['color', 'chart', 'danger', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.danger.bold.',
-  exampleValue: '#5D1F1A'
+  exampleValue: '#5D1F1A',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.warning',
   path: ['color', 'chart', 'warning', '[default]', '[default]'],
   description: "For data visualisation communicating caution, such as 'at risk' statuses.",
-  exampleValue: '#F68909'
+  exampleValue: '#F68909',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.warning.hovered',
   path: ['color', 'chart', 'warning', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.warning.',
-  exampleValue: '#E06C00'
+  exampleValue: '#E06C00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.warning.bold',
   path: ['color', 'chart', 'warning', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.warning.',
-  exampleValue: '#BD5B00'
+  exampleValue: '#BD5B00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.warning.bold.hovered',
   path: ['color', 'chart', 'warning', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.warning.bold.',
-  exampleValue: '#9E4C00'
+  exampleValue: '#9E4C00',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.success',
   path: ['color', 'chart', 'success', '[default]', '[default]'],
   description: "For data visualisation communicating positive information, such as 'on track'.",
-  exampleValue: '#82B536'
+  exampleValue: '#82B536',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.success.hovered',
   path: ['color', 'chart', 'success', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.success.',
-  exampleValue: '#6A9A23'
+  exampleValue: '#6A9A23',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.success.bold',
   path: ['color', 'chart', 'success', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.success.',
-  exampleValue: '#5B7F24'
+  exampleValue: '#5B7F24',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.success.bold.hovered',
   path: ['color', 'chart', 'success', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.success.bold.',
-  exampleValue: '#4C6B1F'
+  exampleValue: '#4C6B1F',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.discovery',
   path: ['color', 'chart', 'discovery', '[default]', '[default]'],
   description: "For data visualisation communicating 'new' statuses.",
-  exampleValue: '#BF63F3'
+  exampleValue: '#BF63F3',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.discovery.hovered',
   path: ['color', 'chart', 'discovery', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.discovery.',
-  exampleValue: '#AF59E1'
+  exampleValue: '#AF59E1',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.discovery.bold',
   path: ['color', 'chart', 'discovery', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.discovery.',
-  exampleValue: '#803FA5'
+  exampleValue: '#803FA5',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.discovery.bold.hovered',
   path: ['color', 'chart', 'discovery', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.discovery.bold.',
-  exampleValue: '#964AC0'
+  exampleValue: '#964AC0',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.information',
   path: ['color', 'chart', 'information', '[default]', '[default]'],
   description: 'For data visualisation communicating low priority or in-progress statuses.',
-  exampleValue: '#357DE8'
+  exampleValue: '#357DE8',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.information.hovered',
   path: ['color', 'chart', 'information', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.information.',
-  exampleValue: '#1868DB'
+  exampleValue: '#1868DB',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.information.bold',
   path: ['color', 'chart', 'information', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.information.',
-  exampleValue: '#1558BC'
+  exampleValue: '#1558BC',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'color.chart.information.bold.hovered',
   path: ['color', 'chart', 'information', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.information.bold.',
-  exampleValue: '#123263'
+  exampleValue: '#123263',
+  usageGuidelines: {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  }
 }, {
   name: 'elevation.surface',
   path: ['elevation', 'surface', '[default]', '[default]'],
   description: 'Use as the primary background for the UI.',
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.hovered',
   path: ['elevation', 'surface', '[default]', 'hovered'],
   description: 'Hovered state of elevation.surface',
-  exampleValue: '#F0F1F2'
+  exampleValue: '#F0F1F2',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.pressed',
   path: ['elevation', 'surface', '[default]', 'pressed'],
   description: 'Pressed state of elevation.surface',
-  exampleValue: '#DDDEE1'
+  exampleValue: '#DDDEE1',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.overlay',
   path: ['elevation', 'surface', 'overlay', '[default]'],
   description: 'Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay.',
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.overlay.hovered',
   path: ['elevation', 'surface', 'overlay', 'hovered'],
   description: 'Hovered state of elevation.surface.overlay',
-  exampleValue: '#F0F1F2'
+  exampleValue: '#F0F1F2',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.overlay.pressed',
   path: ['elevation', 'surface', 'overlay', 'pressed'],
   description: 'Pressed state of elevation.surface.overlay',
-  exampleValue: '#DDDEE1'
+  exampleValue: '#DDDEE1',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.raised',
   path: ['elevation', 'surface', 'raised', '[default]'],
   description: 'Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised.',
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.raised.hovered',
   path: ['elevation', 'surface', 'raised', 'hovered'],
   description: 'Hovered state of elevation.surface.raised',
-  exampleValue: '#F0F1F2'
+  exampleValue: '#F0F1F2',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.raised.pressed',
   path: ['elevation', 'surface', 'raised', 'pressed'],
   description: 'Pressed state of elevation.surface.raised',
-  exampleValue: '#DDDEE1'
+  exampleValue: '#DDDEE1',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.surface.sunken',
   path: ['elevation', 'surface', 'sunken'],
   description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.',
-  exampleValue: '#F8F8F8'
+  exampleValue: '#F8F8F8',
+  usageGuidelines: {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'elevation.shadow.overflow',
   path: ['elevation', 'shadow', 'overflow', '[default]'],
   description: 'Use to create a shadow when content scrolls under other content.',
-  exampleValue: '0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F'
+  exampleValue: '0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F',
+  usageGuidelines: {
+    usage: 'Shadows for showing depth and elevation (e.g. elevation.shadow.raised, elevation.shadow.overlay). Use via the box-shadow property to indicate layer hierarchy',
+    cssProperties: ['box-shadow']
+  }
 }, {
   name: 'elevation.shadow.overflow.perimeter',
   path: ['elevation', 'shadow', 'overflow', 'perimeter'],
   description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.',
-  exampleValue: '#1E1F211f'
+  exampleValue: '#1E1F211f',
+  usageGuidelines: {
+    usage: 'Shadows for showing depth and elevation (e.g. elevation.shadow.raised, elevation.shadow.overlay). Use via the box-shadow property to indicate layer hierarchy',
+    cssProperties: ['box-shadow']
+  }
 }, {
   name: 'elevation.shadow.overflow.spread',
   path: ['elevation', 'shadow', 'overflow', 'spread'],
   description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.',
-  exampleValue: '#1E1F2129'
+  exampleValue: '#1E1F2129',
+  usageGuidelines: {
+    usage: 'Shadows for showing depth and elevation (e.g. elevation.shadow.raised, elevation.shadow.overlay). Use via the box-shadow property to indicate layer hierarchy',
+    cssProperties: ['box-shadow']
+  }
 }, {
   name: 'elevation.shadow.overlay',
   path: ['elevation', 'shadow', 'overlay'],
   description: 'Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\n\nAlso use for the box shadow of raised cards in a dragged state.',
-  exampleValue: '0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F'
+  exampleValue: '0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F',
+  usageGuidelines: {
+    usage: 'Shadows for showing depth and elevation (e.g. elevation.shadow.raised, elevation.shadow.overlay). Use via the box-shadow property to indicate layer hierarchy',
+    cssProperties: ['box-shadow']
+  }
 }, {
   name: 'elevation.shadow.raised',
   path: ['elevation', 'shadow', 'raised'],
   description: 'Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised',
-  exampleValue: '0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F'
+  exampleValue: '0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F',
+  usageGuidelines: {
+    usage: 'Shadows for showing depth and elevation (e.g. elevation.shadow.raised, elevation.shadow.overlay). Use via the box-shadow property to indicate layer hierarchy',
+    cssProperties: ['box-shadow']
+  }
 }, {
   name: 'opacity.disabled',
   path: ['opacity', 'disabled'],
   description: 'Apply to images when in a disabled state.',
-  exampleValue: 0.4
+  exampleValue: 0.4,
+  usageGuidelines: {
+    usage: 'Controls the transparency of an element (e.g. opacity.disabled, opacity.loading). Used for communication of loading and disabled states',
+    cssProperties: ['opacity']
+  }
 }, {
   name: 'opacity.loading',
   path: ['opacity', 'loading'],
   description: 'Apply to content that sits under a loading spinner.',
-  exampleValue: 0.2
+  exampleValue: 0.2,
+  usageGuidelines: {
+    usage: 'Controls the transparency of an element (e.g. opacity.disabled, opacity.loading). Used for communication of loading and disabled states',
+    cssProperties: ['opacity']
+  }
 }, {
   name: 'utility.UNSAFE.transparent',
   path: ['utility', 'UNSAFE', 'transparent'],
   description: 'Transparent token used for backwards compatibility between new and old theming solutions',
-  exampleValue: 'transparent'
+  exampleValue: 'transparent',
+  usageGuidelines: {
+    usage: 'Code-specific tokens to aid with migration or enable features such as automatic elevation detection',
+    cssProperties: []
+  }
 }, {
   name: 'utility.elevation.surface.current',
   path: ['utility', 'elevation', 'surface', 'current'],
   description: "A dynamic token that represents the current surface color set by a parent element. It defaults to the 'elevation.surface' token value.",
-  exampleValue: '#FFFFFF'
+  exampleValue: '#FFFFFF',
+  usageGuidelines: {
+    usage: 'Code-specific tokens to aid with migration or enable features such as automatic elevation detection',
+    cssProperties: []
+  }
 }, {
   name: 'space.0',
   path: ['space', '0'],
   description: 'Equates to `0`. Use for resetting default spacing styles.',
-  exampleValue: '0rem'
+  exampleValue: '0rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.025',
   path: ['space', '025'],
   description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.125rem'
+  exampleValue: '0.125rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.050',
   path: ['space', '050'],
   description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.25rem'
+  exampleValue: '0.25rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.075',
   path: ['space', '075'],
   description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.375rem'
+  exampleValue: '0.375rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.100',
   path: ['space', '100'],
   description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.5rem'
+  exampleValue: '0.5rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.150',
   path: ['space', '150'],
   description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '0.75rem'
+  exampleValue: '0.75rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.200',
   path: ['space', '200'],
   description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '1rem'
+  exampleValue: '1rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.250',
   path: ['space', '250'],
   description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '1.25rem'
+  exampleValue: '1.25rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.300',
   path: ['space', '300'],
   description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '1.5rem'
+  exampleValue: '1.5rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.400',
   path: ['space', '400'],
   description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '2rem'
+  exampleValue: '2rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.500',
   path: ['space', '500'],
   description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '2.5rem'
+  exampleValue: '2.5rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.600',
   path: ['space', '600'],
   description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '3rem'
+  exampleValue: '3rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.800',
   path: ['space', '800'],
   description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '4rem'
+  exampleValue: '4rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.1000',
   path: ['space', '1000'],
   description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '5rem'
+  exampleValue: '5rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.025',
   path: ['space', 'negative', '025'],
   description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.125rem'
+  exampleValue: '-0.125rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.050',
   path: ['space', 'negative', '050'],
   description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.25rem'
+  exampleValue: '-0.25rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.075',
   path: ['space', 'negative', '075'],
   description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.375rem'
+  exampleValue: '-0.375rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.100',
   path: ['space', 'negative', '100'],
   description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.5rem'
+  exampleValue: '-0.5rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.150',
   path: ['space', 'negative', '150'],
   description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-0.75rem'
+  exampleValue: '-0.75rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.200',
   path: ['space', 'negative', '200'],
   description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-1rem'
+  exampleValue: '-1rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.250',
   path: ['space', 'negative', '250'],
   description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-1.25rem'
+  exampleValue: '-1.25rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.300',
   path: ['space', 'negative', '300'],
   description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-1.5rem'
+  exampleValue: '-1.5rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'space.negative.400',
   path: ['space', 'negative', '400'],
   description: 'Use to negate parent whitespace or overlap the largest pieces of UI.',
-  exampleValue: '-2rem'
+  exampleValue: '-2rem',
+  usageGuidelines: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  }
 }, {
   name: 'font.heading.xxlarge',
   path: ['font', 'heading', 'xxlarge'],
   description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.',
-  exampleValue: 'normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.heading.xlarge',
   path: ['font', 'heading', 'xlarge'],
   description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.',
-  exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.heading.large',
   path: ['font', 'heading', 'large'],
   description: 'App page titles, such as forms. Migrate instances of H700 to Heading L.',
-  exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.heading.medium',
   path: ['font', 'heading', 'medium'],
   description: 'Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.',
-  exampleValue: 'normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.heading.small',
   path: ['font', 'heading', 'small'],
   description: 'For headers in small components where space is limited. Migrate instances of H500 to Heading S.',
-  exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.heading.xsmall',
   path: ['font', 'heading', 'xsmall'],
   description: 'For headers in small components where space is limited. Migrate instances of H400 to Heading XS.',
-  exampleValue: 'normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.heading.xxsmall',
   path: ['font', 'heading', 'xxsmall'],
   description: 'For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.',
-  exampleValue: 'normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.body.large',
   path: ['font', 'body', 'large'],
   description: 'For long-form text, such as in blogs.',
-  exampleValue: 'normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.body',
   path: ['font', 'body', '[default]'],
   description: 'Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.',
-  exampleValue: 'normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.body.small',
   path: ['font', 'body', 'small'],
   description: 'Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.',
-  exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.body.UNSAFE_small',
   path: ['font', 'body', 'UNSAFE_small'],
   description: 'UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token',
-  exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.metric.large',
   path: ['font', 'metric', 'large'],
   description: 'Use to emphasize a number within a large donut.',
-  exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Font settings for displaying numbers or metrics, ensuring legibility and alignment (e.g. font.metric)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.metric.medium',
   path: ['font', 'metric', 'medium'],
   description: 'Use to emphasize a number within a medium donut.',
-  exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Font settings for displaying numbers or metrics, ensuring legibility and alignment (e.g. font.metric)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.metric.small',
   path: ['font', 'metric', 'small'],
   description: 'Use to emphasize a number and words in single-value tiles, or small donuts.',
-  exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Font settings for displaying numbers or metrics, ensuring legibility and alignment (e.g. font.metric)',
+    cssProperties: ['font']
+  }
 }, {
   name: 'font.code',
   path: ['font', 'code', '[default]'],
   description: 'For representing code only, either inline or in code blocks.',
-  exampleValue: 'normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
+  exampleValue: 'normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+  usageGuidelines: {
+    usage: 'Font settings for inline code and code blocks, enforcing monospace font and sizing (e.g. font.code)',
+    cssProperties: ['font', 'font-family', 'font-size', 'font-weight', 'line-height']
+  }
 }, {
   name: 'font.weight.regular',
   path: ['font', 'weight', 'regular'],
   description: 'Default font weight for body text styles.',
-  exampleValue: '400'
+  exampleValue: '400',
+  usageGuidelines: {
+    usage: 'Granular control of font weight (e.g. font.weight.regular, font.weight.semibold). Use only to override the default font tokens for custom typography components beyond what’s supported by Text, MetricText and Heading',
+    cssProperties: ['font-weight']
+  }
 }, {
   name: 'font.weight.medium',
   path: ['font', 'weight', 'medium'],
   description: 'For all text that may appear beside iconography, such as in a button.',
-  exampleValue: '500'
+  exampleValue: '500',
+  usageGuidelines: {
+    usage: 'Granular control of font weight (e.g. font.weight.regular, font.weight.semibold). Use only to override the default font tokens for custom typography components beyond what’s supported by Text, MetricText and Heading',
+    cssProperties: ['font-weight']
+  }
 }, {
   name: 'font.weight.semibold',
   path: ['font', 'weight', 'semibold'],
   description: 'Use with caution as fallback fonts do not support this font weight and will default to bold weight.',
-  exampleValue: '600'
+  exampleValue: '600',
+  usageGuidelines: {
+    usage: 'Granular control of font weight (e.g. font.weight.regular, font.weight.semibold). Use only to override the default font tokens for custom typography components beyond what’s supported by Text, MetricText and Heading',
+    cssProperties: ['font-weight']
+  }
 }, {
   name: 'font.weight.bold',
   path: ['font', 'weight', 'bold'],
   description: 'Use sparingly for emphasising text, such as in a lozenge.',
-  exampleValue: '653'
+  exampleValue: '653',
+  usageGuidelines: {
+    usage: 'Granular control of font weight (e.g. font.weight.regular, font.weight.semibold). Use only to override the default font tokens for custom typography components beyond what’s supported by Text, MetricText and Heading',
+    cssProperties: ['font-weight']
+  }
 }, {
   name: 'font.family.heading',
   path: ['font', 'family', 'heading'],
   description: 'For our default UI heading text.',
-  exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Granular control of font family (e.g. font.family.body). Use only when overriding the default in composites',
+    cssProperties: ['font-family']
+  }
 }, {
   name: 'font.family.body',
   path: ['font', 'family', 'body'],
   description: 'For our default UI body text.',
-  exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Granular control of font family (e.g. font.family.body). Use only when overriding the default in composites',
+    cssProperties: ['font-family']
+  }
 }, {
   name: 'font.family.code',
   path: ['font', 'family', 'code'],
   description: 'For representing code only.',
-  exampleValue: '"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
+  exampleValue: '"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+  usageGuidelines: {
+    usage: 'Granular control of font family (e.g. font.family.body). Use only when overriding the default in composites',
+    cssProperties: ['font-family']
+  }
 }, {
   name: 'font.family.brand.heading',
   path: ['font', 'family', 'brand', 'heading'],
   description: 'For our brand heading text. Uses Charlie Display.',
-  exampleValue: '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Granular control of font family (e.g. font.family.body). Use only when overriding the default in composites',
+    cssProperties: ['font-family']
+  }
 }, {
   name: 'font.family.brand.body',
   path: ['font', 'family', 'brand', 'body'],
   description: 'For our brand body text. Uses Charlie Text.',
-  exampleValue: '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  exampleValue: '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  usageGuidelines: {
+    usage: 'Granular control of font family (e.g. font.family.body). Use only when overriding the default in composites',
+    cssProperties: ['font-family']
+  }
 }, {
   name: 'radius.xsmall',
   path: ['radius', 'xsmall'],
   description: 'Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts.',
-  exampleValue: '0.125rem'
+  exampleValue: '0.125rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.small',
   path: ['radius', 'small'],
   description: 'Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons.',
-  exampleValue: '0.25rem'
+  exampleValue: '0.25rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.medium',
   path: ['radius', 'medium'],
   description: 'Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links.',
-  exampleValue: '0.375rem'
+  exampleValue: '0.375rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.large',
   path: ['radius', 'large'],
   description: 'Use for containment elements: cards, in-page containers, floating UI, dropdown menus.',
-  exampleValue: '0.5rem'
+  exampleValue: '0.5rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.xlarge',
   path: ['radius', 'xlarge'],
   description: 'Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables.',
-  exampleValue: '0.75rem'
+  exampleValue: '0.75rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.xxlarge',
   path: ['radius', 'xxlarge'],
   description: 'Use for video player containers.',
-  exampleValue: '1rem'
+  exampleValue: '1rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.full',
   path: ['radius', 'full'],
   description: 'Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions.',
-  exampleValue: '624.9375rem'
+  exampleValue: '624.9375rem',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'radius.tile',
   path: ['radius', 'tile'],
   description: 'Use this specific radius token exclusively for the tile component system.',
-  exampleValue: '25%'
+  exampleValue: '25%',
+  usageGuidelines: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  }
 }, {
   name: 'border.width',
   path: ['border', 'width', '[default]'],
   description: 'The default width for all standard component borders and dividers.',
-  exampleValue: '0.0625rem'
+  exampleValue: '0.0625rem',
+  usageGuidelines: {
+    usage: 'Controls the thickness of borders/dividers (e.g. border.width, border.width.selected). Use to standardize border widths throughout UI',
+    cssProperties: ['border-width']
+  }
 }, {
   name: 'border.width.selected',
   path: ['border', 'width', 'selected'],
   description: 'The width used to indicate a selected element, such as an active tab or a chosen item.',
-  exampleValue: '0.125rem'
+  exampleValue: '0.125rem',
+  usageGuidelines: {
+    usage: 'Controls the thickness of borders/dividers (e.g. border.width, border.width.selected). Use to standardize border widths throughout UI',
+    cssProperties: ['border-width']
+  }
 }, {
   name: 'border.width.focused',
   path: ['border', 'width', 'focused'],
   description: 'The width used for the focus ring on interactive elements.',
-  exampleValue: '0.125rem'
+  exampleValue: '0.125rem',
+  usageGuidelines: {
+    usage: 'Controls the thickness of borders/dividers (e.g. border.width, border.width.selected). Use to standardize border widths throughout UI',
+    cssProperties: ['border-width']
+  }
 }];