@atlaskit/ads-mcp 0.9.1 → 0.10.1

package/dist/esm/tools/get-tokens/token-structured-content.codegen.js

@@ -0,0 +1,2255 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Structured content for tokens generated from token-metadata.
+ *
+ * @codegen <<SignedSource::41dd1fd7431557df57b792c2eb5e5f70>>
+ * @codegenCommand yarn build structured-docs
+ */
+
+export var tokenStructuredContent = [{
+  content: '# color.text\n\nUse for primary text, such as body copy, sentence case headers, and buttons.\n\nExample Value: `#292A2E`\n',
+  name: 'color.text',
+  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
+  exampleValue: '#292A2E'
+}, {
+  content: '# color.text.accent.lime\n\nUse for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.text.accent.lime',
+  description: 'Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#4C6B1F'
+}, {
+  content: '# color.text.accent.lime.bolder\n\nUse for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#37471F`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.red\n\nUse for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#AE2E24`\n',
+  name: 'color.text.accent.red',
+  description: 'Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#AE2E24'
+}, {
+  content: '# color.text.accent.red.bolder\n\nUse for red text on subtle red accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#5D1F1A`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.orange\n\nUse for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#9E4C00`\n',
+  name: 'color.text.accent.orange',
+  description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#9E4C00'
+}, {
+  content: '# color.text.accent.orange.bolder\n\nUse for orange text on subtle orange accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#693200`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.yellow\n\nUse for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#7F5F01`\n',
+  name: 'color.text.accent.yellow',
+  description: 'Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#7F5F01'
+}, {
+  content: '# color.text.accent.yellow.bolder\n\nUse for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#533F04`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.green\n\nUse for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#216E4E`\n',
+  name: 'color.text.accent.green',
+  description: 'Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#216E4E'
+}, {
+  content: '# color.text.accent.green.bolder\n\nUse for green text on subtle green accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#164B35`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.teal\n\nUse for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#206A83`\n',
+  name: 'color.text.accent.teal',
+  description: 'Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#206A83'
+}, {
+  content: '# color.text.accent.teal.bolder\n\nUse for teal text on subtle teal accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#164555`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.blue\n\nUse for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#1558BC`\n',
+  name: 'color.text.accent.blue',
+  description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.text.accent.blue.bolder\n\nUse for blue text on subtle blue accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#123263`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.purple\n\nUse for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#803FA5`\n',
+  name: 'color.text.accent.purple',
+  description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.text.accent.purple.bolder\n\nUse for purple text on subtle purple accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#48245D`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.magenta\n\nUse for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#943D73`\n',
+  name: 'color.text.accent.magenta',
+  description: 'Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#943D73'
+}, {
+  content: '# color.text.accent.magenta.bolder\n\nUse for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color.\n\nExample Value: `#50253F`\n',
+  name: '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'
+}, {
+  content: '# color.text.accent.gray\n\nUse for text on non-bold gray accent backgrounds, such as colored tags.\n\nExample Value: `#505258`\n',
+  name: 'color.text.accent.gray',
+  description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
+  exampleValue: '#505258'
+}, {
+  content: '# color.text.accent.gray.bolder\n\nUse for text and icons on gray subtle accent backgrounds.\n\nExample Value: `#1E1F21`\n',
+  name: 'color.text.accent.gray.bolder',
+  description: 'Use for text and icons on gray subtle accent backgrounds.',
+  exampleValue: '#1E1F21'
+}, {
+  content: '# color.text.disabled\n\nUse for text in a disabled state.\n\nExample Value: `#080F214A`\n',
+  name: 'color.text.disabled',
+  description: 'Use for text in a disabled state.',
+  exampleValue: '#080F214A'
+}, {
+  content: '# color.text.inverse\n\nUse for text on bold backgrounds.\n\nExample Value: `#FFFFFF`\n',
+  name: 'color.text.inverse',
+  description: 'Use for text on bold backgrounds.',
+  exampleValue: '#FFFFFF'
+}, {
+  content: '# color.text.selected\n\nUse for text in selected or opened states, such as tabs and dropdown buttons.\n\nExample Value: `#1868DB`\n',
+  name: 'color.text.selected',
+  description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.text.brand\n\nUse for text that reinforces our brand.\n\nExample Value: `#1868DB`\n',
+  name: 'color.text.brand',
+  description: 'Use for text that reinforces our brand.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.text.danger\n\nUse for critical text, such as input field error messaging.\n\nExample Value: `#AE2E24`\n',
+  name: 'color.text.danger',
+  description: 'Use for critical text, such as input field error messaging.',
+  exampleValue: '#AE2E24'
+}, {
+  content: '# color.text.warning\n\nUse for text to emphasize caution, such as in moved lozenges.\n\nExample Value: `#9E4C00`\n',
+  name: 'color.text.warning',
+  description: 'Use for text to emphasize caution, such as in moved lozenges.',
+  exampleValue: '#9E4C00'
+}, {
+  content: '# color.text.warning.inverse\n\nUse for text when on bold warning backgrounds.\n\nExample Value: `#292A2E`\n',
+  name: 'color.text.warning.inverse',
+  description: 'Use for text when on bold warning backgrounds.',
+  exampleValue: '#292A2E'
+}, {
+  content: '# color.text.success\n\nUse for text to communicate a favorable outcome, such as input field success messaging.\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.text.success',
+  description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
+  exampleValue: '#4C6B1F'
+}, {
+  content: '# color.text.discovery\n\nUse for text to emphasize change or something new, such as in new lozenges.\n\nExample Value: `#803FA5`\n',
+  name: 'color.text.discovery',
+  description: 'Use for text to emphasize change or something new, such as in new lozenges.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.text.information\n\nUse for informative text or to communicate something is in progress, such as in-progress lozenges.\n\nExample Value: `#1558BC`\n',
+  name: 'color.text.information',
+  description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.text.subtlest\n\nUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.\n\nExample Value: `#6B6E76`\n',
+  name: 'color.text.subtlest',
+  description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
+  exampleValue: '#6B6E76'
+}, {
+  content: '# color.text.subtle\n\nUse for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.\n\nExample Value: `#505258`\n',
+  name: 'color.text.subtle',
+  description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
+  exampleValue: '#505258'
+}, {
+  content: '# color.link\n\nUse for links in a default or hovered state. Add an underline for hovered states.\n\nExample Value: `#1868DB`\n',
+  name: 'color.link',
+  description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.link.pressed\n\nUse for links in a pressed state.\n\nExample Value: `#1558BC`\n',
+  name: 'color.link.pressed',
+  description: 'Use for links in a pressed state.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.link.visited\n\nUse for visited links.\n\nExample Value: `#803FA5`\n',
+  name: 'color.link.visited',
+  description: 'Use for visited links.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.link.visited.pressed\n\nUse for visited links in a pressed state.\n\nExample Value: `#48245D`\n',
+  name: 'color.link.visited.pressed',
+  description: 'Use for visited links in a pressed state.',
+  exampleValue: '#48245D'
+}, {
+  content: '# color.icon\n\nUse for icon-only buttons, or icons paired with color.text\n\nExample Value: `#292A2E`\n',
+  name: 'color.icon',
+  description: 'Use for icon-only buttons, or icons paired with color.text',
+  exampleValue: '#292A2E'
+}, {
+  content: '# color.icon.accent.lime\n\nUse for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#6A9A23`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.red\n\nUse for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#C9372C`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.orange\n\nUse for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#E06C00`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.yellow\n\nUse for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#B38600`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.green\n\nUse for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#22A06B`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.teal\n\nUse for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#2898BD`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.blue\n\nUse for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#357DE8`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.purple\n\nUse for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#AF59E1`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.magenta\n\nUse for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.\n\nExample Value: `#CD519D`\n',
+  name: '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'
+}, {
+  content: '# color.icon.accent.gray\n\nUse for icons on non-bold gray accent backgrounds, such as file type icons.\n\nExample Value: `#7D818A`\n',
+  name: 'color.icon.accent.gray',
+  description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.',
+  exampleValue: '#7D818A'
+}, {
+  content: '# color.icon.disabled\n\nUse for icons in a disabled state.\n\nExample Value: `#080F214A`\n',
+  name: 'color.icon.disabled',
+  description: 'Use for icons in a disabled state.',
+  exampleValue: '#080F214A'
+}, {
+  content: '# color.icon.inverse\n\nUse for icons on bold backgrounds.\n\nExample Value: `#FFFFFF`\n',
+  name: 'color.icon.inverse',
+  description: 'Use for icons on bold backgrounds.',
+  exampleValue: '#FFFFFF'
+}, {
+  content: '# color.icon.selected\n\nUse for icons in selected or opened states, such as those used in dropdown buttons.\n\nExample Value: `#1868DB`\n',
+  name: 'color.icon.selected',
+  description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.icon.brand\n\nUse for icons that reinforce our brand.\n\nExample Value: `#1868DB`\n',
+  name: 'color.icon.brand',
+  description: 'Use for icons that reinforce our brand.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.icon.danger\n\nUse for icons communicating critical information, such as those used in error handing.\n\nExample Value: `#C9372C`\n',
+  name: 'color.icon.danger',
+  description: 'Use for icons communicating critical information, such as those used in error handing.',
+  exampleValue: '#C9372C'
+}, {
+  content: '# color.icon.warning\n\nUse for icons communicating caution, such as those used in warning section messages.\n\nExample Value: `#E06C00`\n',
+  name: 'color.icon.warning',
+  description: 'Use for icons communicating caution, such as those used in warning section messages.',
+  exampleValue: '#E06C00'
+}, {
+  content: '# color.icon.warning.inverse\n\nUse for icons when on bold warning backgrounds.\n\nExample Value: `#292A2E`\n',
+  name: 'color.icon.warning.inverse',
+  description: 'Use for icons when on bold warning backgrounds.',
+  exampleValue: '#292A2E'
+}, {
+  content: '# color.icon.success\n\nUse for icons communicating a favorable outcome, such as those used in success section messaged.\n\nExample Value: `#6A9A23`\n',
+  name: 'color.icon.success',
+  description: 'Use for icons communicating a favorable outcome, such as those used in success section messaged.',
+  exampleValue: '#6A9A23'
+}, {
+  content: '# color.icon.discovery\n\nUse for icons communicating change or something new, such as discovery section messages.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.icon.discovery',
+  description: 'Use for icons communicating change or something new, such as discovery section messages.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.icon.information\n\nUse for icons communicating information or something in-progress, such as information section messages.\n\nExample Value: `#357DE8`\n',
+  name: 'color.icon.information',
+  description: 'Use for icons communicating information or something in-progress, such as information section messages.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.icon.subtlest\n\nUse for icons paired with color.text.subtlest\n\nExample Value: `#6B6E76`\n',
+  name: 'color.icon.subtlest',
+  description: 'Use for icons paired with color.text.subtlest',
+  exampleValue: '#6B6E76'
+}, {
+  content: '# color.icon.subtle\n\nUse for icons paired with color.text.subtle\n\nExample Value: `#505258`\n',
+  name: 'color.icon.subtle',
+  description: 'Use for icons paired with color.text.subtle',
+  exampleValue: '#505258'
+}, {
+  content: '# color.border\n\nUse to visually group or separate UI elements, such as flat cards or side panel dividers.\n\nExample Value: `#0B120E24`\n',
+  name: 'color.border',
+  description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.',
+  exampleValue: '#0B120E24'
+}, {
+  content: '# color.border.accent.lime\n\nUse for lime borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#6A9A23`\n',
+  name: 'color.border.accent.lime',
+  description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#6A9A23'
+}, {
+  content: '# color.border.accent.red\n\nUse for red borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#E2483D`\n',
+  name: 'color.border.accent.red',
+  description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#E2483D'
+}, {
+  content: '# color.border.accent.orange\n\nUse for orange borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#E06C00`\n',
+  name: 'color.border.accent.orange',
+  description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#E06C00'
+}, {
+  content: '# color.border.accent.yellow\n\nUse for yellow borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#B38600`\n',
+  name: 'color.border.accent.yellow',
+  description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#B38600'
+}, {
+  content: '# color.border.accent.green\n\nUse for green borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#22A06B`\n',
+  name: 'color.border.accent.green',
+  description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#22A06B'
+}, {
+  content: '# color.border.accent.teal\n\nUse for teal borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#2898BD`\n',
+  name: 'color.border.accent.teal',
+  description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#2898BD'
+}, {
+  content: '# color.border.accent.blue\n\nUse for blue borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#357DE8`\n',
+  name: 'color.border.accent.blue',
+  description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.border.accent.purple\n\nUse for purple borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.border.accent.purple',
+  description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.border.accent.magenta\n\nUse for magenta borders on non-bold backgrounds when there is no meaning tied to the color.\n\nExample Value: `#CD519D`\n',
+  name: 'color.border.accent.magenta',
+  description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
+  exampleValue: '#CD519D'
+}, {
+  content: '# color.border.accent.gray\n\nUse for borders on non-bold gray accent backgrounds.\n\nExample Value: `#7D818A`\n',
+  name: 'color.border.accent.gray',
+  description: 'Use for borders on non-bold gray accent backgrounds.',
+  exampleValue: '#7D818A'
+}, {
+  content: '# color.border.disabled\n\nUse for borders of elements in a disabled state.\n\nExample Value: `#0515240F`\n',
+  name: 'color.border.disabled',
+  description: 'Use for borders of elements in a disabled state.',
+  exampleValue: '#0515240F'
+}, {
+  content: '# color.border.focused\n\nUse for focus rings of elements in a focus state.\n\nExample Value: `#4688EC`\n',
+  name: 'color.border.focused',
+  description: 'Use for focus rings of elements in a focus state.',
+  exampleValue: '#4688EC'
+}, {
+  content: '# color.border.input\n\nUse for borders of form UI elements, such as text fields, checkboxes, and radio buttons.\n\nExample Value: `#8C8F97`\n',
+  name: 'color.border.input',
+  description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.',
+  exampleValue: '#8C8F97'
+}, {
+  content: '# color.border.inverse\n\nUse for borders on bold backgrounds.\n\nExample Value: `#FFFFFF`\n',
+  name: 'color.border.inverse',
+  description: 'Use for borders on bold backgrounds.',
+  exampleValue: '#FFFFFF'
+}, {
+  content: '# color.border.selected\n\nUse for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.\n\nExample Value: `#1868DB`\n',
+  name: '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'
+}, {
+  content: '# color.border.brand\n\nUse for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.\n\nExample Value: `#1868DB`\n',
+  name: 'color.border.brand',
+  description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.border.danger\n\nUse for borders communicating critical information, such as the borders on invalid text fields.\n\nExample Value: `#E2483D`\n',
+  name: 'color.border.danger',
+  description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
+  exampleValue: '#E2483D'
+}, {
+  content: '# color.border.warning\n\nUse for borders communicating caution.\n\nExample Value: `#E06C00`\n',
+  name: 'color.border.warning',
+  description: 'Use for borders communicating caution.',
+  exampleValue: '#E06C00'
+}, {
+  content: '# color.border.success\n\nUse for borders communicating a favorable outcome, such as the borders on validated text fields.\n\nExample Value: `#6A9A23`\n',
+  name: 'color.border.success',
+  description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
+  exampleValue: '#6A9A23'
+}, {
+  content: '# color.border.discovery\n\nUse for borders communicating change or something new, such as the borders in onboarding spotlights.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.border.discovery',
+  description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.border.information\n\nUse for borders communicating information or something in-progress.\n\nExample Value: `#357DE8`\n',
+  name: 'color.border.information',
+  description: 'Use for borders communicating information or something in-progress.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.border.bold\n\nA neutral border option that passes min 3:1 contrast ratios.\n\nExample Value: `#7D818A`\n',
+  name: 'color.border.bold',
+  description: 'A neutral border option that passes min 3:1 contrast ratios.',
+  exampleValue: '#7D818A'
+}, {
+  content: '# color.background.accent.lime.subtlest\n\nUse for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#EFFFD6`\n',
+  name: 'color.background.accent.lime.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.lime.subtlest.hovered\n\nHovered state of color.background.accent.lime.subtlest.\n\nExample Value: `#D3F1A7`\n',
+  name: 'color.background.accent.lime.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.lime.subtlest.',
+  exampleValue: '#D3F1A7'
+}, {
+  content: '# color.background.accent.lime.subtlest.pressed\n\nPressed state of color.background.accent.lime.subtlest.\n\nExample Value: `#BDE97C`\n',
+  name: 'color.background.accent.lime.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.lime.subtlest.',
+  exampleValue: '#BDE97C'
+}, {
+  content: '# color.background.accent.lime.subtler\n\nUse for for backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#D3F1A7`\n',
+  name: 'color.background.accent.lime.subtler',
+  description: 'Use for for backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#D3F1A7'
+}, {
+  content: '# color.background.accent.lime.subtler.hovered\n\nHovered state of color.background.accent.lime.subtler.\n\nExample Value: `#BDE97C`\n',
+  name: 'color.background.accent.lime.subtler.hovered',
+  description: 'Hovered state of color.background.accent.lime.subtler.',
+  exampleValue: '#BDE97C'
+}, {
+  content: '# color.background.accent.lime.subtler.pressed\n\nPressed state of color.background.accent.lime.subtler.\n\nExample Value: `#B3DF72`\n',
+  name: 'color.background.accent.lime.subtler.pressed',
+  description: 'Pressed state of color.background.accent.lime.subtler.',
+  exampleValue: '#B3DF72'
+}, {
+  content: '# color.background.accent.lime.subtle\n\nUse for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#94C748`\n',
+  name: 'color.background.accent.lime.subtle',
+  description: 'Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#94C748'
+}, {
+  content: '# color.background.accent.lime.subtle.hovered\n\nHovered state of color.background.accent.lime.subtle.\n\nExample Value: `#B3DF72`\n',
+  name: 'color.background.accent.lime.subtle.hovered',
+  description: 'Hovered state of color.background.accent.lime.subtle.',
+  exampleValue: '#B3DF72'
+}, {
+  content: '# color.background.accent.lime.subtle.pressed\n\nPressed state of color.background.accent.lime.subtle.\n\nExample Value: `#BDE97C`\n',
+  name: 'color.background.accent.lime.subtle.pressed',
+  description: 'Pressed state of color.background.accent.lime.subtle.',
+  exampleValue: '#BDE97C'
+}, {
+  content: '# color.background.accent.lime.bolder\n\nUse for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#5B7F24`\n',
+  name: 'color.background.accent.lime.bolder',
+  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'
+}, {
+  content: '# color.background.accent.lime.bolder.hovered\n\nHovered state of color.background.accent.lime.bolder.\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.background.accent.lime.bolder.hovered',
+  description: 'Hovered state of color.background.accent.lime.bolder.',
+  exampleValue: '#4C6B1F'
+}, {
+  content: '# color.background.accent.lime.bolder.pressed\n\nPressed state of color.background.accent.lime.bolder.\n\nExample Value: `#3F5224`\n',
+  name: 'color.background.accent.lime.bolder.pressed',
+  description: 'Pressed state of color.background.accent.lime.bolder.',
+  exampleValue: '#3F5224'
+}, {
+  content: '# color.background.accent.red.subtlest\n\nUse for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#FFECEB`\n',
+  name: 'color.background.accent.red.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.red.subtlest.hovered\n\nHovered state of color.background.accent.red.subtlest.\n\nExample Value: `#FFD5D2`\n',
+  name: 'color.background.accent.red.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.red.subtlest.',
+  exampleValue: '#FFD5D2'
+}, {
+  content: '# color.background.accent.red.subtlest.pressed\n\nPressed state of color.background.accent.red.subtlest.\n\nExample Value: `#FFB8B2`\n',
+  name: 'color.background.accent.red.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.red.subtlest.',
+  exampleValue: '#FFB8B2'
+}, {
+  content: '# color.background.accent.red.subtler\n\nUse for red backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#FFD5D2`\n',
+  name: 'color.background.accent.red.subtler',
+  description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FFD5D2'
+}, {
+  content: '# color.background.accent.red.subtler.hovered\n\nHovered state of color.background.accent.red.subtler.\n\nExample Value: `#FFB8B2`\n',
+  name: 'color.background.accent.red.subtler.hovered',
+  description: 'Hovered state of color.background.accent.red.subtler.',
+  exampleValue: '#FFB8B2'
+}, {
+  content: '# color.background.accent.red.subtler.pressed\n\nPressed state of color.background.accent.red.subtler.\n\nExample Value: `#FD9891`\n',
+  name: 'color.background.accent.red.subtler.pressed',
+  description: 'Pressed state of color.background.accent.red.subtler.',
+  exampleValue: '#FD9891'
+}, {
+  content: '# color.background.accent.red.subtle\n\nUse for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#F87168`\n',
+  name: 'color.background.accent.red.subtle',
+  description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#F87168'
+}, {
+  content: '# color.background.accent.red.subtle.hovered\n\nHovered state of color.background.accent.red.subtle.\n\nExample Value: `#FD9891`\n',
+  name: 'color.background.accent.red.subtle.hovered',
+  description: 'Hovered state of color.background.accent.red.subtle.',
+  exampleValue: '#FD9891'
+}, {
+  content: '# color.background.accent.red.subtle.pressed\n\nPressed state of color.background.accent.red.subtle.\n\nExample Value: `#FFB8B2`\n',
+  name: 'color.background.accent.red.subtle.pressed',
+  description: 'Pressed state of color.background.accent.red.subtle.',
+  exampleValue: '#FFB8B2'
+}, {
+  content: '# color.background.accent.red.bolder\n\nUse for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#C9372C`\n',
+  name: 'color.background.accent.red.bolder',
+  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'
+}, {
+  content: '# color.background.accent.red.bolder.hovered\n\nHovered state of color.background.accent.red.bolder.\n\nExample Value: `#AE2E24`\n',
+  name: 'color.background.accent.red.bolder.hovered',
+  description: 'Hovered state of color.background.accent.red.bolder.',
+  exampleValue: '#AE2E24'
+}, {
+  content: '# color.background.accent.red.bolder.pressed\n\nPressed state of color.background.accent.red.bolder.\n\nExample Value: `#872821`\n',
+  name: 'color.background.accent.red.bolder.pressed',
+  description: 'Pressed state of color.background.accent.red.bolder.',
+  exampleValue: '#872821'
+}, {
+  content: '# color.background.accent.orange.subtlest\n\nUse for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#FFF5DB`\n',
+  name: 'color.background.accent.orange.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.orange.subtlest.hovered\n\nHovered state of color.background.accent.orange.subtlest.\n\nExample Value: `#FCE4A6`\n',
+  name: 'color.background.accent.orange.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.orange.subtlest.',
+  exampleValue: '#FCE4A6'
+}, {
+  content: '# color.background.accent.orange.subtlest.pressed\n\nPressed state of color.background.accent.orange.subtlest.\n\nExample Value: `#FBD779`\n',
+  name: 'color.background.accent.orange.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.orange.subtlest.',
+  exampleValue: '#FBD779'
+}, {
+  content: '# color.background.accent.orange.subtler\n\nUse for orange backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#FCE4A6`\n',
+  name: 'color.background.accent.orange.subtler',
+  description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FCE4A6'
+}, {
+  content: '# color.background.accent.orange.subtler.hovered\n\nHovered state of color.background.accent.orange.subtler.\n\nExample Value: `#FBD779`\n',
+  name: 'color.background.accent.orange.subtler.hovered',
+  description: 'Hovered state of color.background.accent.orange.subtler.',
+  exampleValue: '#FBD779'
+}, {
+  content: '# color.background.accent.orange.subtler.pressed\n\nPressed state of color.background.accent.orange.subtler.\n\nExample Value: `#FBC828`\n',
+  name: 'color.background.accent.orange.subtler.pressed',
+  description: 'Pressed state of color.background.accent.orange.subtler.',
+  exampleValue: '#FBC828'
+}, {
+  content: '# color.background.accent.orange.subtle\n\nUse for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#FCA700`\n',
+  name: 'color.background.accent.orange.subtle',
+  description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FCA700'
+}, {
+  content: '# color.background.accent.orange.subtle.hovered\n\nHovered state of color.background.accent.orange.subtle.\n\nExample Value: `#FBC828`\n',
+  name: 'color.background.accent.orange.subtle.hovered',
+  description: 'Hovered state of color.background.accent.orange.subtle.',
+  exampleValue: '#FBC828'
+}, {
+  content: '# color.background.accent.orange.subtle.pressed\n\nPressed state of color.background.accent.orange.subtle.\n\nExample Value: `#FBD779`\n',
+  name: 'color.background.accent.orange.subtle.pressed',
+  description: 'Pressed state of color.background.accent.orange.subtle.',
+  exampleValue: '#FBD779'
+}, {
+  content: '# color.background.accent.orange.bolder\n\nUse for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#BD5B00`\n',
+  name: 'color.background.accent.orange.bolder',
+  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'
+}, {
+  content: '# color.background.accent.orange.bolder.hovered\n\nHovered state of color.background.accent.orange.bolder.\n\nExample Value: `#9E4C00`\n',
+  name: 'color.background.accent.orange.bolder.hovered',
+  description: 'Hovered state of color.background.accent.orange.bolder.',
+  exampleValue: '#9E4C00'
+}, {
+  content: '# color.background.accent.orange.bolder.pressed\n\nPressed state of color.background.accent.orange.bolder.\n\nExample Value: `#7A3B00`\n',
+  name: 'color.background.accent.orange.bolder.pressed',
+  description: 'Pressed state of color.background.accent.orange.bolder.',
+  exampleValue: '#7A3B00'
+}, {
+  content: '# color.background.accent.yellow.subtlest\n\nUse for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#FEF7C8`\n',
+  name: 'color.background.accent.yellow.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.yellow.subtlest.hovered\n\nHovered state of color.background.accent.yellow.subtlest.\n\nExample Value: `#F5E989`\n',
+  name: 'color.background.accent.yellow.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.yellow.subtlest.',
+  exampleValue: '#F5E989'
+}, {
+  content: '# color.background.accent.yellow.subtlest.pressed\n\nPressed state of color.background.accent.yellow.subtlest.\n\nExample Value: `#EFDD4E`\n',
+  name: 'color.background.accent.yellow.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.yellow.subtlest.',
+  exampleValue: '#EFDD4E'
+}, {
+  content: '# color.background.accent.yellow.subtler\n\nUse for yellow backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#F5E989`\n',
+  name: 'color.background.accent.yellow.subtler',
+  description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#F5E989'
+}, {
+  content: '# color.background.accent.yellow.subtler.hovered\n\nHovered state of color.background.accent.yellow.subtler.\n\nExample Value: `#EFDD4E`\n',
+  name: 'color.background.accent.yellow.subtler.hovered',
+  description: 'Hovered state of color.background.accent.yellow.subtler.',
+  exampleValue: '#EFDD4E'
+}, {
+  content: '# color.background.accent.yellow.subtler.pressed\n\nPressed state of color.background.accent.yellow.subtler.\n\nExample Value: `#EED12B`\n',
+  name: 'color.background.accent.yellow.subtler.pressed',
+  description: 'Pressed state of color.background.accent.yellow.subtler.',
+  exampleValue: '#EED12B'
+}, {
+  content: '# color.background.accent.yellow.subtle\n\nUse for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#EED12B`\n',
+  name: 'color.background.accent.yellow.subtle',
+  description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#EED12B'
+}, {
+  content: '# color.background.accent.yellow.subtle.hovered\n\nHovered state of color.background.accent.yellow.subtle.\n\nExample Value: `#DDB30E`\n',
+  name: 'color.background.accent.yellow.subtle.hovered',
+  description: 'Hovered state of color.background.accent.yellow.subtle.',
+  exampleValue: '#DDB30E'
+}, {
+  content: '# color.background.accent.yellow.subtle.pressed\n\nPressed state of color.background.accent.yellow.subtle.\n\nExample Value: `#EFDD4E`\n',
+  name: 'color.background.accent.yellow.subtle.pressed',
+  description: 'Pressed state of color.background.accent.yellow.subtle.',
+  exampleValue: '#EFDD4E'
+}, {
+  content: '# color.background.accent.yellow.bolder\n\nUse for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#946F00`\n',
+  name: 'color.background.accent.yellow.bolder',
+  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'
+}, {
+  content: '# color.background.accent.yellow.bolder.hovered\n\nHovered state of color.background.accent.yellow.bolder.\n\nExample Value: `#7F5F01`\n',
+  name: 'color.background.accent.yellow.bolder.hovered',
+  description: 'Hovered state of color.background.accent.yellow.bolder.',
+  exampleValue: '#7F5F01'
+}, {
+  content: '# color.background.accent.yellow.bolder.pressed\n\nPressed state of color.background.accent.yellow.bolder.\n\nExample Value: `#614A05`\n',
+  name: 'color.background.accent.yellow.bolder.pressed',
+  description: 'Pressed state of color.background.accent.yellow.bolder.',
+  exampleValue: '#614A05'
+}, {
+  content: '# color.background.accent.green.subtlest\n\nUse for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#DCFFF1`\n',
+  name: 'color.background.accent.green.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.green.subtlest.hovered\n\nHovered state of color.background.accent.green.subtlest.\n\nExample Value: `#BAF3DB`\n',
+  name: 'color.background.accent.green.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.green.subtlest.',
+  exampleValue: '#BAF3DB'
+}, {
+  content: '# color.background.accent.green.subtlest.pressed\n\nPressed state of color.background.accent.green.subtlest.\n\nExample Value: `#97EDC9`\n',
+  name: 'color.background.accent.green.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.green.subtlest.',
+  exampleValue: '#97EDC9'
+}, {
+  content: '# color.background.accent.green.subtler\n\nUse for green backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#BAF3DB`\n',
+  name: 'color.background.accent.green.subtler',
+  description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#BAF3DB'
+}, {
+  content: '# color.background.accent.green.subtler.hovered\n\nHovered state of color.background.accent.green.subtler.\n\nExample Value: `#97EDC9`\n',
+  name: 'color.background.accent.green.subtler.hovered',
+  description: 'Hovered state of color.background.accent.green.subtler.',
+  exampleValue: '#97EDC9'
+}, {
+  content: '# color.background.accent.green.subtler.pressed\n\nPressed state of color.background.accent.green.subtler.\n\nExample Value: `#7EE2B8`\n',
+  name: 'color.background.accent.green.subtler.pressed',
+  description: 'Pressed state of color.background.accent.green.subtler.',
+  exampleValue: '#7EE2B8'
+}, {
+  content: '# color.background.accent.green.subtle\n\nUse for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#4BCE97`\n',
+  name: 'color.background.accent.green.subtle',
+  description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#4BCE97'
+}, {
+  content: '# color.background.accent.green.subtle.hovered\n\nHovered state of color.background.accent.green.subtle.\n\nExample Value: `#7EE2B8`\n',
+  name: 'color.background.accent.green.subtle.hovered',
+  description: 'Hovered state of color.background.accent.green.subtle.',
+  exampleValue: '#7EE2B8'
+}, {
+  content: '# color.background.accent.green.subtle.pressed\n\nPressed state of color.background.accent.green.subtle.\n\nExample Value: `#97EDC9`\n',
+  name: 'color.background.accent.green.subtle.pressed',
+  description: 'Pressed state of color.background.accent.green.subtle.',
+  exampleValue: '#97EDC9'
+}, {
+  content: '# color.background.accent.green.bolder\n\nUse for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#1F845A`\n',
+  name: 'color.background.accent.green.bolder',
+  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'
+}, {
+  content: '# color.background.accent.green.bolder.hovered\n\nHovered state of color.background.accent.green.bolder.\n\nExample Value: `#216E4E`\n',
+  name: 'color.background.accent.green.bolder.hovered',
+  description: 'Hovered state of color.background.accent.green.bolder.',
+  exampleValue: '#216E4E'
+}, {
+  content: '# color.background.accent.green.bolder.pressed\n\nPressed state of color.background.accent.green.bolder.\n\nExample Value: `#19573D`\n',
+  name: 'color.background.accent.green.bolder.pressed',
+  description: 'Pressed state of color.background.accent.green.bolder.',
+  exampleValue: '#19573D'
+}, {
+  content: '# color.background.accent.teal.subtlest\n\nUse for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#E7F9FF`\n',
+  name: 'color.background.accent.teal.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.teal.subtlest.hovered\n\nHovered state of color.background.accent.teal.subtlest.\n\nExample Value: `#C6EDFB`\n',
+  name: 'color.background.accent.teal.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.teal.subtlest.',
+  exampleValue: '#C6EDFB'
+}, {
+  content: '# color.background.accent.teal.subtlest.pressed\n\nPressed state of color.background.accent.teal.subtlest.\n\nExample Value: `#B1E4F7`\n',
+  name: 'color.background.accent.teal.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.teal.subtlest.',
+  exampleValue: '#B1E4F7'
+}, {
+  content: '# color.background.accent.teal.subtler\n\nUse for teal backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#C6EDFB`\n',
+  name: 'color.background.accent.teal.subtler',
+  description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#C6EDFB'
+}, {
+  content: '# color.background.accent.teal.subtler.hovered\n\nHovered state of color.background.accent.teal.subtler.\n\nExample Value: `#B1E4F7`\n',
+  name: 'color.background.accent.teal.subtler.hovered',
+  description: 'Hovered state of color.background.accent.teal.subtler.',
+  exampleValue: '#B1E4F7'
+}, {
+  content: '# color.background.accent.teal.subtler.pressed\n\nPressed state of color.background.accent.teal.subtler.\n\nExample Value: `#9DD9EE`\n',
+  name: 'color.background.accent.teal.subtler.pressed',
+  description: 'Pressed state of color.background.accent.teal.subtler.',
+  exampleValue: '#9DD9EE'
+}, {
+  content: '# color.background.accent.teal.subtle\n\nUse for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#6CC3E0`\n',
+  name: 'color.background.accent.teal.subtle',
+  description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#6CC3E0'
+}, {
+  content: '# color.background.accent.teal.subtle.hovered\n\nHovered state of color.background.accent.teal.subtle.\n\nExample Value: `#9DD9EE`\n',
+  name: 'color.background.accent.teal.subtle.hovered',
+  description: 'Hovered state of color.background.accent.teal.subtle.',
+  exampleValue: '#9DD9EE'
+}, {
+  content: '# color.background.accent.teal.subtle.pressed\n\nPressed state of color.background.accent.teal.subtle.\n\nExample Value: `#B1E4F7`\n',
+  name: 'color.background.accent.teal.subtle.pressed',
+  description: 'Pressed state of color.background.accent.teal.subtle.',
+  exampleValue: '#B1E4F7'
+}, {
+  content: '# color.background.accent.teal.bolder\n\nUse for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#227D9B`\n',
+  name: 'color.background.accent.teal.bolder',
+  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'
+}, {
+  content: '# color.background.accent.teal.bolder.hovered\n\nHovered state of color.background.accent.teal.bolder.\n\nExample Value: `#206A83`\n',
+  name: 'color.background.accent.teal.bolder.hovered',
+  description: 'Hovered state of color.background.accent.teal.bolder.',
+  exampleValue: '#206A83'
+}, {
+  content: '# color.background.accent.teal.bolder.pressed\n\nPressed state of color.background.accent.teal.bolder.\n\nExample Value: `#1A5265`\n',
+  name: 'color.background.accent.teal.bolder.pressed',
+  description: 'Pressed state of color.background.accent.teal.bolder.',
+  exampleValue: '#1A5265'
+}, {
+  content: '# color.background.accent.blue.subtlest\n\nUse for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#E9F2FE`\n',
+  name: 'color.background.accent.blue.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.blue.subtlest.hovered\n\nHovered state of color.background.accent.blue.subtlest.\n\nExample Value: `#CFE1FD`\n',
+  name: 'color.background.accent.blue.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.blue.subtlest.',
+  exampleValue: '#CFE1FD'
+}, {
+  content: '# color.background.accent.blue.subtlest.pressed\n\nPressed state of color.background.accent.blue.subtlest.\n\nExample Value: `#ADCBFB`\n',
+  name: 'color.background.accent.blue.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.blue.subtlest.',
+  exampleValue: '#ADCBFB'
+}, {
+  content: '# color.background.accent.blue.subtler\n\nUse for blue backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#CFE1FD`\n',
+  name: 'color.background.accent.blue.subtler',
+  description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#CFE1FD'
+}, {
+  content: '# color.background.accent.blue.subtler.hovered\n\nHovered state of color.background.accent.blue.subtler.\n\nExample Value: `#ADCBFB`\n',
+  name: 'color.background.accent.blue.subtler.hovered',
+  description: 'Hovered state of color.background.accent.blue.subtler.',
+  exampleValue: '#ADCBFB'
+}, {
+  content: '# color.background.accent.blue.subtler.pressed\n\nPressed state of color.background.accent.blue.subtler.\n\nExample Value: `#8FB8F6`\n',
+  name: 'color.background.accent.blue.subtler.pressed',
+  description: 'Pressed state of color.background.accent.blue.subtler.',
+  exampleValue: '#8FB8F6'
+}, {
+  content: '# color.background.accent.blue.subtle\n\nUse for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#669DF1`\n',
+  name: 'color.background.accent.blue.subtle',
+  description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#669DF1'
+}, {
+  content: '# color.background.accent.blue.subtle.hovered\n\nHovered state of color.background.accent.blue.subtle.\n\nExample Value: `#8FB8F6`\n',
+  name: 'color.background.accent.blue.subtle.hovered',
+  description: 'Hovered state of color.background.accent.blue.subtle.',
+  exampleValue: '#8FB8F6'
+}, {
+  content: '# color.background.accent.blue.subtle.pressed\n\nPressed state of color.background.accent.blue.subtle.\n\nExample Value: `#ADCBFB`\n',
+  name: 'color.background.accent.blue.subtle.pressed',
+  description: 'Pressed state of color.background.accent.blue.subtle.',
+  exampleValue: '#ADCBFB'
+}, {
+  content: '# color.background.accent.blue.bolder\n\nUse for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#1868DB`\n',
+  name: 'color.background.accent.blue.bolder',
+  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'
+}, {
+  content: '# color.background.accent.blue.bolder.hovered\n\nHovered state of color.background.accent.blue.bolder.\n\nExample Value: `#1558BC`\n',
+  name: 'color.background.accent.blue.bolder.hovered',
+  description: 'Hovered state of color.background.accent.blue.bolder.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.background.accent.blue.bolder.pressed\n\nPressed state of color.background.accent.blue.bolder.\n\nExample Value: `#144794`\n',
+  name: 'color.background.accent.blue.bolder.pressed',
+  description: 'Pressed state of color.background.accent.blue.bolder.',
+  exampleValue: '#144794'
+}, {
+  content: '# color.background.accent.purple.subtlest\n\nUse for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#F8EEFE`\n',
+  name: 'color.background.accent.purple.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.purple.subtlest.hovered\n\nHovered state of color.background.accent.purple.subtlest.\n\nExample Value: `#EED7FC`\n',
+  name: 'color.background.accent.purple.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.purple.subtlest.',
+  exampleValue: '#EED7FC'
+}, {
+  content: '# color.background.accent.purple.subtlest.pressed\n\nPressed state of color.background.accent.purple.subtlest.\n\nExample Value: `#E3BDFA`\n',
+  name: 'color.background.accent.purple.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.purple.subtlest.',
+  exampleValue: '#E3BDFA'
+}, {
+  content: '# color.background.accent.purple.subtler\n\nUse for purple backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#EED7FC`\n',
+  name: 'color.background.accent.purple.subtler',
+  description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#EED7FC'
+}, {
+  content: '# color.background.accent.purple.subtler.hovered\n\nHovered state of color.background.accent.purple.subtler.\n\nExample Value: `#E3BDFA`\n',
+  name: 'color.background.accent.purple.subtler.hovered',
+  description: 'Hovered state of color.background.accent.purple.subtler.',
+  exampleValue: '#E3BDFA'
+}, {
+  content: '# color.background.accent.purple.subtler.pressed\n\nPressed state of color.background.accent.purple.subtler.\n\nExample Value: `#D8A0F7`\n',
+  name: 'color.background.accent.purple.subtler.pressed',
+  description: 'Pressed state of color.background.accent.purple.subtler.',
+  exampleValue: '#D8A0F7'
+}, {
+  content: '# color.background.accent.purple.subtle\n\nUse for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#C97CF4`\n',
+  name: 'color.background.accent.purple.subtle',
+  description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#C97CF4'
+}, {
+  content: '# color.background.accent.purple.subtle.hovered\n\nHovered state of color.background.accent.purple.subtle.\n\nExample Value: `#D8A0F7`\n',
+  name: 'color.background.accent.purple.subtle.hovered',
+  description: 'Hovered state of color.background.accent.purple.subtle.',
+  exampleValue: '#D8A0F7'
+}, {
+  content: '# color.background.accent.purple.subtle.pressed\n\nPressed state of color.background.accent.purple.subtle.\n\nExample Value: `#E3BDFA`\n',
+  name: 'color.background.accent.purple.subtle.pressed',
+  description: 'Pressed state of color.background.accent.purple.subtle.',
+  exampleValue: '#E3BDFA'
+}, {
+  content: '# color.background.accent.purple.bolder\n\nUse for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#964AC0`\n',
+  name: 'color.background.accent.purple.bolder',
+  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'
+}, {
+  content: '# color.background.accent.purple.bolder.hovered\n\nHovered state of color.background.accent.purple.bolder.\n\nExample Value: `#803FA5`\n',
+  name: 'color.background.accent.purple.bolder.hovered',
+  description: 'Hovered state of color.background.accent.purple.bolder.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.background.accent.purple.bolder.pressed\n\nPressed state of color.background.accent.purple.bolder.\n\nExample Value: `#673286`\n',
+  name: 'color.background.accent.purple.bolder.pressed',
+  description: 'Pressed state of color.background.accent.purple.bolder.',
+  exampleValue: '#673286'
+}, {
+  content: '# color.background.accent.magenta.subtlest\n\nUse for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#FFECF8`\n',
+  name: 'color.background.accent.magenta.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.magenta.subtlest.hovered\n\nHovered state of color.background.accent.magenta.subtlest.\n\nExample Value: `#FDD0EC`\n',
+  name: 'color.background.accent.magenta.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.magenta.subtlest.',
+  exampleValue: '#FDD0EC'
+}, {
+  content: '# color.background.accent.magenta.subtlest.pressed\n\nPressed state of color.background.accent.magenta.subtlest.\n\nExample Value: `#FCB6E1`\n',
+  name: 'color.background.accent.magenta.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.magenta.subtlest.',
+  exampleValue: '#FCB6E1'
+}, {
+  content: '# color.background.accent.magenta.subtler\n\nUse for magenta backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#FDD0EC`\n',
+  name: 'color.background.accent.magenta.subtler',
+  description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#FDD0EC'
+}, {
+  content: '# color.background.accent.magenta.subtler.hovered\n\nHovered state of color.background.accent.magenta.subtler.\n\nExample Value: `#FCB6E1`\n',
+  name: 'color.background.accent.magenta.subtler.hovered',
+  description: 'Hovered state of color.background.accent.magenta.subtler.',
+  exampleValue: '#FCB6E1'
+}, {
+  content: '# color.background.accent.magenta.subtler.pressed\n\nPressed state of color.background.accent.magenta.subtler.\n\nExample Value: `#F797D2`\n',
+  name: 'color.background.accent.magenta.subtler.pressed',
+  description: 'Pressed state of color.background.accent.magenta.subtler.',
+  exampleValue: '#F797D2'
+}, {
+  content: '# color.background.accent.magenta.subtle\n\nUse for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#E774BB`\n',
+  name: 'color.background.accent.magenta.subtle',
+  description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#E774BB'
+}, {
+  content: '# color.background.accent.magenta.subtle.hovered\n\nHovered state of color.background.accent.magenta.subtle.\n\nExample Value: `#F797D2`\n',
+  name: 'color.background.accent.magenta.subtle.hovered',
+  description: 'Hovered state of color.background.accent.magenta.subtle.',
+  exampleValue: '#F797D2'
+}, {
+  content: '# color.background.accent.magenta.subtle.pressed\n\nPressed state of color.background.accent.magenta.subtle.\n\nExample Value: `#FCB6E1`\n',
+  name: 'color.background.accent.magenta.subtle.pressed',
+  description: 'Pressed state of color.background.accent.magenta.subtle.',
+  exampleValue: '#FCB6E1'
+}, {
+  content: '# color.background.accent.magenta.bolder\n\nUse for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#AE4787`\n',
+  name: 'color.background.accent.magenta.bolder',
+  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'
+}, {
+  content: '# color.background.accent.magenta.bolder.hovered\n\nHovered state of color.background.accent.magenta.bolder.\n\nExample Value: `#943D73`\n',
+  name: 'color.background.accent.magenta.bolder.hovered',
+  description: 'Hovered state of color.background.accent.magenta.bolder.',
+  exampleValue: '#943D73'
+}, {
+  content: '# color.background.accent.magenta.bolder.pressed\n\nPressed state of color.background.accent.magenta.bolder.\n\nExample Value: `#77325B`\n',
+  name: 'color.background.accent.magenta.bolder.pressed',
+  description: 'Pressed state of color.background.accent.magenta.bolder.',
+  exampleValue: '#77325B'
+}, {
+  content: '# color.background.accent.gray.subtlest\n\nUse for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.\n\nExample Value: `#F0F1F2`\n',
+  name: 'color.background.accent.gray.subtlest',
+  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'
+}, {
+  content: '# color.background.accent.gray.subtlest.hovered\n\nHovered state of color.background.accent.gray.subtlest.\n\nExample Value: `#DDDEE1`\n',
+  name: 'color.background.accent.gray.subtlest.hovered',
+  description: 'Hovered state of color.background.accent.gray.subtlest.',
+  exampleValue: '#DDDEE1'
+}, {
+  content: '# color.background.accent.gray.subtlest.pressed\n\nPressed state of color.background.accent.gray.subtlest.\n\nExample Value: `#B7B9BE`\n',
+  name: 'color.background.accent.gray.subtlest.pressed',
+  description: 'Pressed state of color.background.accent.gray.subtlest.',
+  exampleValue: '#B7B9BE'
+}, {
+  content: '# color.background.accent.gray.subtler\n\nUse for gray backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#DDDEE1`\n',
+  name: 'color.background.accent.gray.subtler',
+  description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#DDDEE1'
+}, {
+  content: '# color.background.accent.gray.subtler.hovered\n\nHovered state of color.background.accent.gray.subtler.\n\nExample Value: `#B7B9BE`\n',
+  name: 'color.background.accent.gray.subtler.hovered',
+  description: 'Hovered state of color.background.accent.gray.subtler.',
+  exampleValue: '#B7B9BE'
+}, {
+  content: '# color.background.accent.gray.subtler.pressed\n\nPressed state of color.background.accent.gray.subtler.\n\nExample Value: `#8C8F97`\n',
+  name: 'color.background.accent.gray.subtler.pressed',
+  description: 'Pressed state of color.background.accent.gray.subtler.',
+  exampleValue: '#8C8F97'
+}, {
+  content: '# color.background.accent.gray.subtle\n\nUse for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.\n\nExample Value: `#8C8F97`\n',
+  name: 'color.background.accent.gray.subtle',
+  description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.',
+  exampleValue: '#8C8F97'
+}, {
+  content: '# color.background.accent.gray.subtle.hovered\n\nHovered state of color.background.accent.gray.subtle.\n\nExample Value: `#B7B9BE`\n',
+  name: 'color.background.accent.gray.subtle.hovered',
+  description: 'Hovered state of color.background.accent.gray.subtle.',
+  exampleValue: '#B7B9BE'
+}, {
+  content: '# color.background.accent.gray.subtle.pressed\n\nPressed state of color.background.accent.gray.subtle.\n\nExample Value: `#DDDEE1`\n',
+  name: 'color.background.accent.gray.subtle.pressed',
+  description: 'Pressed state of color.background.accent.gray.subtle.',
+  exampleValue: '#DDDEE1'
+}, {
+  content: '# color.background.accent.gray.bolder\n\nUse for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.\n\nExample Value: `#6B6E76`\n',
+  name: 'color.background.accent.gray.bolder',
+  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'
+}, {
+  content: '# color.background.accent.gray.bolder.hovered\n\nHovered state of color.background.accent.gray.bolder.\n\nExample Value: `#505258`\n',
+  name: 'color.background.accent.gray.bolder.hovered',
+  description: 'Hovered state of color.background.accent.gray.bolder.',
+  exampleValue: '#505258'
+}, {
+  content: '# color.background.accent.gray.bolder.pressed\n\nPressed state of color.background.accent.gray.subtlest.\n\nExample Value: `#3B3D42`\n',
+  name: 'color.background.accent.gray.bolder.pressed',
+  description: 'Pressed state of color.background.accent.gray.subtlest.',
+  exampleValue: '#3B3D42'
+}, {
+  content: '# color.background.disabled\n\nUse for backgrounds of elements in a disabled state.\n\nExample Value: `#17171708`\n',
+  name: 'color.background.disabled',
+  description: 'Use for backgrounds of elements in a disabled state.',
+  exampleValue: '#17171708'
+}, {
+  content: '# color.background.input\n\nUse for background of form UI elements, such as text fields, checkboxes, and radio buttons.\n\nExample Value: `#FFFFFF`\n',
+  name: 'color.background.input',
+  description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.',
+  exampleValue: '#FFFFFF'
+}, {
+  content: '# color.background.input.hovered\n\nHovered state for color.background.input\n\nExample Value: `#F8F8F8`\n',
+  name: 'color.background.input.hovered',
+  description: 'Hovered state for color.background.input',
+  exampleValue: '#F8F8F8'
+}, {
+  content: '# color.background.input.pressed\n\nPressed state for color.background.input\n\nExample Value: `#FFFFFF`\n',
+  name: 'color.background.input.pressed',
+  description: 'Pressed state for color.background.input',
+  exampleValue: '#FFFFFF'
+}, {
+  content: '# color.background.inverse.subtle\n\nUse for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.\n\nExample Value: `#00000029`\n',
+  name: 'color.background.inverse.subtle',
+  description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.',
+  exampleValue: '#00000029'
+}, {
+  content: '# color.background.inverse.subtle.hovered\n\nUse for the hovered state of color.background.inverse.subtle\n\nExample Value: `#0000003D`\n',
+  name: 'color.background.inverse.subtle.hovered',
+  description: 'Use for the hovered state of color.background.inverse.subtle',
+  exampleValue: '#0000003D'
+}, {
+  content: '# color.background.inverse.subtle.pressed\n\nUse for the pressed state of color.background.inverse.subtle\n\nExample Value: `#00000052`\n',
+  name: 'color.background.inverse.subtle.pressed',
+  description: 'Use for the pressed state of color.background.inverse.subtle',
+  exampleValue: '#00000052'
+}, {
+  content: '# color.background.neutral\n\nThe default background for neutral elements, such as default buttons.\n\nExample Value: `#0515240F`\n',
+  name: 'color.background.neutral',
+  description: 'The default background for neutral elements, such as default buttons.',
+  exampleValue: '#0515240F'
+}, {
+  content: '# color.background.neutral.hovered\n\nHovered state for color.background.neutral\n\nExample Value: `#0B120E24`\n',
+  name: 'color.background.neutral.hovered',
+  description: 'Hovered state for color.background.neutral',
+  exampleValue: '#0B120E24'
+}, {
+  content: '# color.background.neutral.pressed\n\nPressed state for color.background.neutral\n\nExample Value: `#080F214A`\n',
+  name: 'color.background.neutral.pressed',
+  description: 'Pressed state for color.background.neutral',
+  exampleValue: '#080F214A'
+}, {
+  content: '# color.background.neutral.subtle\n\nUse for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.\n\nExample Value: `#00000000`\n',
+  name: 'color.background.neutral.subtle',
+  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'
+}, {
+  content: '# color.background.neutral.subtle.hovered\n\nHovered state for color.background.neutral.subtle\n\nExample Value: `#0515240F`\n',
+  name: 'color.background.neutral.subtle.hovered',
+  description: 'Hovered state for color.background.neutral.subtle',
+  exampleValue: '#0515240F'
+}, {
+  content: '# color.background.neutral.subtle.pressed\n\nPressed state for color.background.neutral.subtle\n\nExample Value: `#0B120E24`\n',
+  name: 'color.background.neutral.subtle.pressed',
+  description: 'Pressed state for color.background.neutral.subtle',
+  exampleValue: '#0B120E24'
+}, {
+  content: '# color.background.neutral.bold\n\nA vibrant background option for neutral UI elements, such as announcement banners.\n\nExample Value: `#292A2E`\n',
+  name: 'color.background.neutral.bold',
+  description: 'A vibrant background option for neutral UI elements, such as announcement banners.',
+  exampleValue: '#292A2E'
+}, {
+  content: '# color.background.neutral.bold.hovered\n\nHovered state of color.background.neutral.bold\n\nExample Value: `#3B3D42`\n',
+  name: 'color.background.neutral.bold.hovered',
+  description: 'Hovered state of color.background.neutral.bold',
+  exampleValue: '#3B3D42'
+}, {
+  content: '# color.background.neutral.bold.pressed\n\nPressed state of color.background.neutral.bold\n\nExample Value: `#505258`\n',
+  name: 'color.background.neutral.bold.pressed',
+  description: 'Pressed state of color.background.neutral.bold',
+  exampleValue: '#505258'
+}, {
+  content: '# color.background.selected\n\nUse for the background of elements in a selected state, such as in opened dropdown buttons.\n\nExample Value: `#E9F2FE`\n',
+  name: 'color.background.selected',
+  description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.',
+  exampleValue: '#E9F2FE'
+}, {
+  content: '# color.background.selected.hovered\n\nHovered state for color.background.selected\n\nExample Value: `#CFE1FD`\n',
+  name: 'color.background.selected.hovered',
+  description: 'Hovered state for color.background.selected',
+  exampleValue: '#CFE1FD'
+}, {
+  content: '# color.background.selected.pressed\n\nPressed state for color.background.selected\n\nExample Value: `#8FB8F6`\n',
+  name: 'color.background.selected.pressed',
+  description: 'Pressed state for color.background.selected',
+  exampleValue: '#8FB8F6'
+}, {
+  content: '# color.background.selected.bold\n\nUse for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.\n\nExample Value: `#1868DB`\n',
+  name: 'color.background.selected.bold',
+  description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.background.selected.bold.hovered\n\nHovered state of color.background.selected.bold\n\nExample Value: `#1558BC`\n',
+  name: 'color.background.selected.bold.hovered',
+  description: 'Hovered state of color.background.selected.bold',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.background.selected.bold.pressed\n\nPressed state of color.background.selected.bold\n\nExample Value: `#123263`\n',
+  name: 'color.background.selected.bold.pressed',
+  description: 'Pressed state of color.background.selected.bold',
+  exampleValue: '#123263'
+}, {
+  content: '# color.background.brand.subtlest\n\nUse for the background of elements used to reinforce our brand, but with less emphasis.\n\nExample Value: `#E9F2FE`\n',
+  name: 'color.background.brand.subtlest',
+  description: 'Use for the background of elements used to reinforce our brand, but with less emphasis.',
+  exampleValue: '#E9F2FE'
+}, {
+  content: '# color.background.brand.subtlest.hovered\n\nHovered state of color.background.brand.subtlest.\n\nExample Value: `#CFE1FD`\n',
+  name: 'color.background.brand.subtlest.hovered',
+  description: 'Hovered state of color.background.brand.subtlest.',
+  exampleValue: '#CFE1FD'
+}, {
+  content: '# color.background.brand.subtlest.pressed\n\nPressed state of color.background.brand.subtlest\n\nExample Value: `#ADCBFB`\n',
+  name: 'color.background.brand.subtlest.pressed',
+  description: 'Pressed state of color.background.brand.subtlest',
+  exampleValue: '#ADCBFB'
+}, {
+  content: '# color.background.brand.bold\n\nUse for the background of elements used to reinforce our brand, but with more emphasis.\n\nExample Value: `#1868DB`\n',
+  name: 'color.background.brand.bold',
+  description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.background.brand.bold.hovered\n\nHovered state of color.background.brand.bold.\n\nExample Value: `#1558BC`\n',
+  name: 'color.background.brand.bold.hovered',
+  description: 'Hovered state of color.background.brand.bold.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.background.brand.bold.pressed\n\nPressed state of color.background.brand.bold.\n\nExample Value: `#144794`\n',
+  name: 'color.background.brand.bold.pressed',
+  description: 'Pressed state of color.background.brand.bold.',
+  exampleValue: '#144794'
+}, {
+  content: '# color.background.brand.boldest\n\nUse for the background of elements used to reinforce our brand, that need to stand out a lot.\n\nExample Value: `#1C2B42`\n',
+  name: 'color.background.brand.boldest',
+  description: 'Use for the background of elements used to reinforce our brand, that need to stand out a lot.',
+  exampleValue: '#1C2B42'
+}, {
+  content: '# color.background.brand.boldest.hovered\n\nHovered state of color.background.brand.boldest.\n\nExample Value: `#123263`\n',
+  name: 'color.background.brand.boldest.hovered',
+  description: 'Hovered state of color.background.brand.boldest.',
+  exampleValue: '#123263'
+}, {
+  content: '# color.background.brand.boldest.pressed\n\nPressed state of color.background.brand.boldest.\n\nExample Value: `#144794`\n',
+  name: 'color.background.brand.boldest.pressed',
+  description: 'Pressed state of color.background.brand.boldest.',
+  exampleValue: '#144794'
+}, {
+  content: '# color.background.danger\n\nUse for backgrounds communicating critical information, such in error section messages.\n\nExample Value: `#FFECEB`\n',
+  name: 'color.background.danger',
+  description: 'Use for backgrounds communicating critical information, such in error section messages.',
+  exampleValue: '#FFECEB'
+}, {
+  content: '# color.background.danger.hovered\n\nHovered state for color.background.danger\n\nExample Value: `#FFD5D2`\n',
+  name: 'color.background.danger.hovered',
+  description: 'Hovered state for color.background.danger',
+  exampleValue: '#FFD5D2'
+}, {
+  content: '# color.background.danger.pressed\n\nPressed state for color.background.danger\n\nExample Value: `#FFB8B2`\n',
+  name: 'color.background.danger.pressed',
+  description: 'Pressed state for color.background.danger',
+  exampleValue: '#FFB8B2'
+}, {
+  content: '# color.background.danger.bold\n\nA vibrant background option for communicating critical information, such as in danger buttons and error banners.\n\nExample Value: `#C9372C`\n',
+  name: 'color.background.danger.bold',
+  description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.',
+  exampleValue: '#C9372C'
+}, {
+  content: '# color.background.danger.bold.hovered\n\nHovered state of color.background.danger.bold\n\nExample Value: `#AE2E24`\n',
+  name: 'color.background.danger.bold.hovered',
+  description: 'Hovered state of color.background.danger.bold',
+  exampleValue: '#AE2E24'
+}, {
+  content: '# color.background.danger.bold.pressed\n\nPressed state of color.background.danger.bold\n\nExample Value: `#872821`\n',
+  name: 'color.background.danger.bold.pressed',
+  description: 'Pressed state of color.background.danger.bold',
+  exampleValue: '#872821'
+}, {
+  content: '# color.background.warning\n\nUse for backgrounds communicating caution, such as in warning section messages.\n\nExample Value: `#FFF5DB`\n',
+  name: 'color.background.warning',
+  description: 'Use for backgrounds communicating caution, such as in warning section messages.',
+  exampleValue: '#FFF5DB'
+}, {
+  content: '# color.background.warning.hovered\n\nHovered state for color.background.warning\n\nExample Value: `#FCE4A6`\n',
+  name: 'color.background.warning.hovered',
+  description: 'Hovered state for color.background.warning',
+  exampleValue: '#FCE4A6'
+}, {
+  content: '# color.background.warning.pressed\n\nPressed state for color.background.warning\n\nExample Value: `#FBD779`\n',
+  name: 'color.background.warning.pressed',
+  description: 'Pressed state for color.background.warning',
+  exampleValue: '#FBD779'
+}, {
+  content: '# color.background.warning.bold\n\nA vibrant background option for communicating caution, such as in warning buttons and warning banners.\n\nExample Value: `#FBC828`\n',
+  name: 'color.background.warning.bold',
+  description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.',
+  exampleValue: '#FBC828'
+}, {
+  content: '# color.background.warning.bold.hovered\n\nHovered state of color.background.warning.bold\n\nExample Value: `#FCA700`\n',
+  name: 'color.background.warning.bold.hovered',
+  description: 'Hovered state of color.background.warning.bold',
+  exampleValue: '#FCA700'
+}, {
+  content: '# color.background.warning.bold.pressed\n\nPressed state of color.background.warning.bold\n\nExample Value: `#F68909`\n',
+  name: 'color.background.warning.bold.pressed',
+  description: 'Pressed state of color.background.warning.bold',
+  exampleValue: '#F68909'
+}, {
+  content: '# color.background.success\n\nUse for backgrounds communicating a favorable outcome, such as in success section messages.\n\nExample Value: `#EFFFD6`\n',
+  name: 'color.background.success',
+  description: 'Use for backgrounds communicating a favorable outcome, such as in success section messages.',
+  exampleValue: '#EFFFD6'
+}, {
+  content: '# color.background.success.hovered\n\nHovered state for color.background.success\n\nExample Value: `#D3F1A7`\n',
+  name: 'color.background.success.hovered',
+  description: 'Hovered state for color.background.success',
+  exampleValue: '#D3F1A7'
+}, {
+  content: '# color.background.success.pressed\n\nPressed state for color.background.success\n\nExample Value: `#BDE97C`\n',
+  name: 'color.background.success.pressed',
+  description: 'Pressed state for color.background.success',
+  exampleValue: '#BDE97C'
+}, {
+  content: '# color.background.success.bold\n\nA vibrant background option for communicating a favorable outcome, such as in checked toggles.\n\nExample Value: `#5B7F24`\n',
+  name: 'color.background.success.bold',
+  description: 'A vibrant background option for communicating a favorable outcome, such as in checked toggles.',
+  exampleValue: '#5B7F24'
+}, {
+  content: '# color.background.success.bold.hovered\n\nHovered state of color.background.success.bold\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.background.success.bold.hovered',
+  description: 'Hovered state of color.background.success.bold',
+  exampleValue: '#4C6B1F'
+}, {
+  content: '# color.background.success.bold.pressed\n\nPressed state of color.background.success.bold\n\nExample Value: `#3F5224`\n',
+  name: 'color.background.success.bold.pressed',
+  description: 'Pressed state of color.background.success.bold',
+  exampleValue: '#3F5224'
+}, {
+  content: '# color.background.discovery\n\nUse for backgrounds communicating change or something new, such as in discovery section messages.\n\nExample Value: `#F8EEFE`\n',
+  name: 'color.background.discovery',
+  description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.',
+  exampleValue: '#F8EEFE'
+}, {
+  content: '# color.background.discovery.hovered\n\nHover state for color.background.discovery\n\nExample Value: `#EED7FC`\n',
+  name: 'color.background.discovery.hovered',
+  description: 'Hover state for color.background.discovery',
+  exampleValue: '#EED7FC'
+}, {
+  content: '# color.background.discovery.pressed\n\nPressed state for color.background.discovery\n\nExample Value: `#E3BDFA`\n',
+  name: 'color.background.discovery.pressed',
+  description: 'Pressed state for color.background.discovery',
+  exampleValue: '#E3BDFA'
+}, {
+  content: '# color.background.discovery.bold\n\nA vibrant background option communicating change or something new, such as in onboarding spotlights.\n\nExample Value: `#964AC0`\n',
+  name: 'color.background.discovery.bold',
+  description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.',
+  exampleValue: '#964AC0'
+}, {
+  content: '# color.background.discovery.bold.hovered\n\nHovered state of color.background.discovery.bold\n\nExample Value: `#803FA5`\n',
+  name: 'color.background.discovery.bold.hovered',
+  description: 'Hovered state of color.background.discovery.bold',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.background.discovery.bold.pressed\n\nPressed state of color.background.discovery.bold\n\nExample Value: `#673286`\n',
+  name: 'color.background.discovery.bold.pressed',
+  description: 'Pressed state of color.background.discovery.bold',
+  exampleValue: '#673286'
+}, {
+  content: '# color.background.information\n\nUse for backgrounds communicating information or something in-progress, such as in information section messages.\n\nExample Value: `#E9F2FE`\n',
+  name: 'color.background.information',
+  description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.',
+  exampleValue: '#E9F2FE'
+}, {
+  content: '# color.background.information.hovered\n\nHovered state of color.background.information\n\nExample Value: `#CFE1FD`\n',
+  name: 'color.background.information.hovered',
+  description: 'Hovered state of color.background.information',
+  exampleValue: '#CFE1FD'
+}, {
+  content: '# color.background.information.pressed\n\nPressed state of color.background.information\n\nExample Value: `#ADCBFB`\n',
+  name: 'color.background.information.pressed',
+  description: 'Pressed state of color.background.information',
+  exampleValue: '#ADCBFB'
+}, {
+  content: '# color.background.information.bold\n\nA vibrant background option for communicating information or something in-progress.\n\nExample Value: `#1868DB`\n',
+  name: 'color.background.information.bold',
+  description: 'A vibrant background option for communicating information or something in-progress.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.background.information.bold.hovered\n\nHovered state of color.background.information.bold\n\nExample Value: `#1558BC`\n',
+  name: 'color.background.information.bold.hovered',
+  description: 'Hovered state of color.background.information.bold',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.background.information.bold.pressed\n\nPressed state of color.background.information.bold\n\nExample Value: `#144794`\n',
+  name: 'color.background.information.bold.pressed',
+  description: 'Pressed state of color.background.information.bold',
+  exampleValue: '#144794'
+}, {
+  content: '# color.blanket\n\nUse for the screen overlay that appears with modal dialogs\n\nExample Value: `#050C1F75`\n',
+  name: 'color.blanket',
+  description: 'Use for the screen overlay that appears with modal dialogs',
+  exampleValue: '#050C1F75'
+}, {
+  content: "# color.blanket.selected\n\nUse as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements\n\nExample Value: `#388BFF14`\n",
+  name: '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'
+}, {
+  content: "# color.blanket.danger\n\nUse as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements\n\nExample Value: `#EF5C4814`\n",
+  name: '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'
+}, {
+  content: '# color.interaction.hovered\n\nUse as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.\n\nExample Value: `#00000029`\n',
+  name: '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'
+}, {
+  content: '# color.interaction.pressed\n\nUse as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.\n\nExample Value: `#00000052`\n',
+  name: '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'
+}, {
+  content: '# color.skeleton\n\nUse for skeleton loading states\n\nExample Value: `#0515240F`\n',
+  name: 'color.skeleton',
+  description: 'Use for skeleton loading states',
+  exampleValue: '#0515240F'
+}, {
+  content: '# color.skeleton.subtle\n\nUse for the pulse or shimmer effect in skeleton loading states\n\nExample Value: `#17171708`\n',
+  name: 'color.skeleton.subtle',
+  description: 'Use for the pulse or shimmer effect in skeleton loading states',
+  exampleValue: '#17171708'
+}, {
+  content: '# color.chart.categorical.1\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#357DE8`\n',
+  name: 'color.chart.categorical.1',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.chart.categorical.1.hovered\n\nHovered state of color.chart.categorical.1.\n\nExample Value: `#1868DB`\n',
+  name: 'color.chart.categorical.1.hovered',
+  description: 'Hovered state of color.chart.categorical.1.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.chart.categorical.2\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#82B536`\n',
+  name: 'color.chart.categorical.2',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#82B536'
+}, {
+  content: '# color.chart.categorical.2.hovered\n\nHovered state of color.chart.categorical.2.\n\nExample Value: `#6A9A23`\n',
+  name: 'color.chart.categorical.2.hovered',
+  description: 'Hovered state of color.chart.categorical.2.',
+  exampleValue: '#6A9A23'
+}, {
+  content: '# color.chart.categorical.3\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#BF63F3`\n',
+  name: 'color.chart.categorical.3',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#BF63F3'
+}, {
+  content: '# color.chart.categorical.3.hovered\n\nHovered state of color.chart.categorical.3.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.chart.categorical.3.hovered',
+  description: 'Hovered state of color.chart.categorical.3.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.chart.categorical.4\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#F68909`\n',
+  name: 'color.chart.categorical.4',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#F68909'
+}, {
+  content: '# color.chart.categorical.4.hovered\n\nHovered state of color.chart.categorical.4.\n\nExample Value: `#E06C00`\n',
+  name: 'color.chart.categorical.4.hovered',
+  description: 'Hovered state of color.chart.categorical.4.',
+  exampleValue: '#E06C00'
+}, {
+  content: '# color.chart.categorical.5\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#1558BC`\n',
+  name: 'color.chart.categorical.5',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.chart.categorical.5.hovered\n\nHovered state of color.chart.categorical.5.\n\nExample Value: `#123263`\n',
+  name: 'color.chart.categorical.5.hovered',
+  description: 'Hovered state of color.chart.categorical.5.',
+  exampleValue: '#123263'
+}, {
+  content: '# color.chart.categorical.6\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#964AC0`\n',
+  name: 'color.chart.categorical.6',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#964AC0'
+}, {
+  content: '# color.chart.categorical.6.hovered\n\nHovered state of color.chart.categorical.6.\n\nExample Value: `#803FA5`\n',
+  name: 'color.chart.categorical.6.hovered',
+  description: 'Hovered state of color.chart.categorical.6.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.chart.categorical.7\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#42B2D7`\n',
+  name: 'color.chart.categorical.7',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#42B2D7'
+}, {
+  content: '# color.chart.categorical.7.hovered\n\nHovered state of color.chart.categorical.7.\n\nExample Value: `#2898BD`\n',
+  name: 'color.chart.categorical.7.hovered',
+  description: 'Hovered state of color.chart.categorical.7.',
+  exampleValue: '#2898BD'
+}, {
+  content: '# color.chart.categorical.8\n\nFor data visualisation only. Follow numbered sequence.\n\nExample Value: `#BD5B00`\n',
+  name: 'color.chart.categorical.8',
+  description: 'For data visualisation only. Follow numbered sequence.',
+  exampleValue: '#BD5B00'
+}, {
+  content: '# color.chart.categorical.8.hovered\n\nHovered state of color.chart.categorical.8.\n\nExample Value: `#7A3B00`\n',
+  name: 'color.chart.categorical.8.hovered',
+  description: 'Hovered state of color.chart.categorical.8.',
+  exampleValue: '#7A3B00'
+}, {
+  content: '# color.chart.lime.bold\n\nFor data visualisation only.\n\nExample Value: `#6A9A23`\n',
+  name: 'color.chart.lime.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#6A9A23'
+}, {
+  content: '# color.chart.lime.bold.hovered\n\nHovered state of color.chart.lime.bold.\n\nExample Value: `#5B7F24`\n',
+  name: 'color.chart.lime.bold.hovered',
+  description: 'Hovered state of color.chart.lime.bold.',
+  exampleValue: '#5B7F24'
+}, {
+  content: '# color.chart.lime.bolder\n\nFor data visualisation only.\n\nExample Value: `#5B7F24`\n',
+  name: 'color.chart.lime.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#5B7F24'
+}, {
+  content: '# color.chart.lime.bolder.hovered\n\nHovered state of color.chart.lime.bolder.\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.chart.lime.bolder.hovered',
+  description: 'Hovered state of color.chart.lime.bolder.',
+  exampleValue: '#4C6B1F'
+}, {
+  content: '# color.chart.lime.boldest\n\nFor data visualisation only.\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.chart.lime.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#4C6B1F'
+}, {
+  content: '# color.chart.lime.boldest.hovered\n\nHovered state of color.chart.lime.boldest.\n\nExample Value: `#37471F`\n',
+  name: 'color.chart.lime.boldest.hovered',
+  description: 'Hovered state of color.chart.lime.boldest.',
+  exampleValue: '#37471F'
+}, {
+  content: "# color.chart.neutral\n\nA secondary color for data visualisation or to communicate 'to-do' statues.\n\nExample Value: `#8C8F97`\n",
+  name: 'color.chart.neutral',
+  description: "A secondary color for data visualisation or to communicate 'to-do' statues.",
+  exampleValue: '#8C8F97'
+}, {
+  content: '# color.chart.neutral.hovered\n\nHovered state of color.chart.neutral.\n\nExample Value: `#7D818A`\n',
+  name: 'color.chart.neutral.hovered',
+  description: 'Hovered state of color.chart.neutral.',
+  exampleValue: '#7D818A'
+}, {
+  content: '# color.chart.red.bold\n\nFor data visualisation only.\n\nExample Value: `#F15B50`\n',
+  name: 'color.chart.red.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#F15B50'
+}, {
+  content: '# color.chart.red.bold.hovered\n\nHovered state of color.chart.red.bold.\n\nExample Value: `#E2483D`\n',
+  name: 'color.chart.red.bold.hovered',
+  description: 'Hovered state of color.chart.red.bold.',
+  exampleValue: '#E2483D'
+}, {
+  content: '# color.chart.red.bolder\n\nFor data visualisation only.\n\nExample Value: `#E2483D`\n',
+  name: 'color.chart.red.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#E2483D'
+}, {
+  content: '# color.chart.red.bolder.hovered\n\nHovered state of color.chart.red.bolder.\n\nExample Value: `#C9372C`\n',
+  name: 'color.chart.red.bolder.hovered',
+  description: 'Hovered state of color.chart.red.bolder.',
+  exampleValue: '#C9372C'
+}, {
+  content: '# color.chart.red.boldest\n\nFor data visualisation only.\n\nExample Value: `#AE2E24`\n',
+  name: 'color.chart.red.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#AE2E24'
+}, {
+  content: '# color.chart.red.boldest.hovered\n\nHovered state of color.chart.red.boldest.\n\nExample Value: `#5D1F1A`\n',
+  name: 'color.chart.red.boldest.hovered',
+  description: 'Hovered state of color.chart.red.boldest.',
+  exampleValue: '#5D1F1A'
+}, {
+  content: '# color.chart.orange.bold\n\nFor data visualisation only.\n\nExample Value: `#E06C00`\n',
+  name: 'color.chart.orange.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#E06C00'
+}, {
+  content: '# color.chart.orange.bold.hovered\n\nHovered state of color.chart.orange.bold.\n\nExample Value: `#BD5B00`\n',
+  name: 'color.chart.orange.bold.hovered',
+  description: 'Hovered state of color.chart.orange.bold.',
+  exampleValue: '#BD5B00'
+}, {
+  content: '# color.chart.orange.bolder\n\nFor data visualisation only.\n\nExample Value: `#BD5B00`\n',
+  name: 'color.chart.orange.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#BD5B00'
+}, {
+  content: '# color.chart.orange.bolder.hovered\n\nHovered state of color.chart.orange.bolder.\n\nExample Value: `#9E4C00`\n',
+  name: 'color.chart.orange.bolder.hovered',
+  description: 'Hovered state of color.chart.orange.bolder.',
+  exampleValue: '#9E4C00'
+}, {
+  content: '# color.chart.orange.boldest\n\nFor data visualisation only.\n\nExample Value: `#7A3B00`\n',
+  name: 'color.chart.orange.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#7A3B00'
+}, {
+  content: '# color.chart.orange.boldest.hovered\n\nHovered state of color.chart.orange.boldest.\n\nExample Value: `#693200`\n',
+  name: 'color.chart.orange.boldest.hovered',
+  description: 'Hovered state of color.chart.orange.boldest.',
+  exampleValue: '#693200'
+}, {
+  content: '# color.chart.yellow.bold\n\nFor data visualisation only.\n\nExample Value: `#B38600`\n',
+  name: 'color.chart.yellow.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#B38600'
+}, {
+  content: '# color.chart.yellow.bold.hovered\n\nHovered state of color.chart.yellow.bold.\n\nExample Value: `#946F00`\n',
+  name: 'color.chart.yellow.bold.hovered',
+  description: 'Hovered state of color.chart.yellow.bold.',
+  exampleValue: '#946F00'
+}, {
+  content: '# color.chart.yellow.bolder\n\nFor data visualisation only.\n\nExample Value: `#946F00`\n',
+  name: 'color.chart.yellow.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#946F00'
+}, {
+  content: '# color.chart.yellow.bolder.hovered\n\nHovered state of color.chart.yellow.bolder.\n\nExample Value: `#7F5F01`\n',
+  name: 'color.chart.yellow.bolder.hovered',
+  description: 'Hovered state of color.chart.yellow.bolder.',
+  exampleValue: '#7F5F01'
+}, {
+  content: '# color.chart.yellow.boldest\n\nFor data visualisation only.\n\nExample Value: `#7F5F01`\n',
+  name: 'color.chart.yellow.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#7F5F01'
+}, {
+  content: '# color.chart.yellow.boldest.hovered\n\nHovered state of color.chart.yellow.boldest.\n\nExample Value: `#533F04`\n',
+  name: 'color.chart.yellow.boldest.hovered',
+  description: 'Hovered state of color.chart.yellow.boldest.',
+  exampleValue: '#533F04'
+}, {
+  content: '# color.chart.green.bold\n\nFor data visualisation only.\n\nExample Value: `#22A06B`\n',
+  name: 'color.chart.green.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#22A06B'
+}, {
+  content: '# color.chart.green.bold.hovered\n\nHovered state of color.chart.green.bold.\n\nExample Value: `#1F845A`\n',
+  name: 'color.chart.green.bold.hovered',
+  description: 'Hovered state of color.chart.green.bold.',
+  exampleValue: '#1F845A'
+}, {
+  content: '# color.chart.green.bolder\n\nFor data visualisation only.\n\nExample Value: `#1F845A`\n',
+  name: 'color.chart.green.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#1F845A'
+}, {
+  content: '# color.chart.green.bolder.hovered\n\nHovered state of color.chart.green.bolder.\n\nExample Value: `#216E4E`\n',
+  name: 'color.chart.green.bolder.hovered',
+  description: 'Hovered state of color.chart.green.bolder.',
+  exampleValue: '#216E4E'
+}, {
+  content: '# color.chart.green.boldest\n\nFor data visualisation only.\n\nExample Value: `#216E4E`\n',
+  name: 'color.chart.green.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#216E4E'
+}, {
+  content: '# color.chart.green.boldest.hovered\n\nHovered state of color.chart.green.boldest.\n\nExample Value: `#164B35`\n',
+  name: 'color.chart.green.boldest.hovered',
+  description: 'Hovered state of color.chart.green.boldest.',
+  exampleValue: '#164B35'
+}, {
+  content: '# color.chart.teal.bold\n\nFor data visualisation only.\n\nExample Value: `#2898BD`\n',
+  name: 'color.chart.teal.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#2898BD'
+}, {
+  content: '# color.chart.teal.bold.hovered\n\nHovered state of color.chart.teal.bold.\n\nExample Value: `#227D9B`\n',
+  name: 'color.chart.teal.bold.hovered',
+  description: 'Hovered state of color.chart.teal.bold.',
+  exampleValue: '#227D9B'
+}, {
+  content: '# color.chart.teal.bolder\n\nFor data visualisation only.\n\nExample Value: `#227D9B`\n',
+  name: 'color.chart.teal.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#227D9B'
+}, {
+  content: '# color.chart.teal.bolder.hovered\n\nHovered state of color.chart.teal.bolder.\n\nExample Value: `#206A83`\n',
+  name: 'color.chart.teal.bolder.hovered',
+  description: 'Hovered state of color.chart.teal.bolder.',
+  exampleValue: '#206A83'
+}, {
+  content: '# color.chart.teal.boldest\n\nFor data visualisation only.\n\nExample Value: `#206A83`\n',
+  name: 'color.chart.teal.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#206A83'
+}, {
+  content: '# color.chart.teal.boldest.hovered\n\nHovered state of color.chart.teal.boldest.\n\nExample Value: `#164555`\n',
+  name: 'color.chart.teal.boldest.hovered',
+  description: 'Hovered state of color.chart.teal.boldest.',
+  exampleValue: '#164555'
+}, {
+  content: '# color.chart.blue.bold\n\nFor data visualisation only.\n\nExample Value: `#4688EC`\n',
+  name: 'color.chart.blue.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#4688EC'
+}, {
+  content: '# color.chart.blue.bold.hovered\n\nHovered state of color.chart.blue.bold.\n\nExample Value: `#357DE8`\n',
+  name: 'color.chart.blue.bold.hovered',
+  description: 'Hovered state of color.chart.blue.bold.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.chart.blue.bolder\n\nFor data visualisation only.\n\nExample Value: `#357DE8`\n',
+  name: 'color.chart.blue.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.chart.blue.bolder.hovered\n\nHovered state of color.chart.blue.bolder.\n\nExample Value: `#1868DB`\n',
+  name: 'color.chart.blue.bolder.hovered',
+  description: 'Hovered state of color.chart.blue.bolder.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.chart.blue.boldest\n\nFor data visualisation only.\n\nExample Value: `#1558BC`\n',
+  name: 'color.chart.blue.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.chart.blue.boldest.hovered\n\nHovered state of color.chart.blue.boldest.\n\nExample Value: `#123263`\n',
+  name: 'color.chart.blue.boldest.hovered',
+  description: 'Hovered state of color.chart.blue.boldest.',
+  exampleValue: '#123263'
+}, {
+  content: '# color.chart.purple.bold\n\nFor data visualisation only.\n\nExample Value: `#BF63F3`\n',
+  name: 'color.chart.purple.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#BF63F3'
+}, {
+  content: '# color.chart.purple.bold.hovered\n\nHovered state of color.chart.purple.bold.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.chart.purple.bold.hovered',
+  description: 'Hovered state of color.chart.purple.bold.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.chart.purple.bolder\n\nFor data visualisation only.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.chart.purple.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.chart.purple.bolder.hovered\n\nHovered state of color.chart.purple.bolder.\n\nExample Value: `#964AC0`\n',
+  name: 'color.chart.purple.bolder.hovered',
+  description: 'Hovered state of color.chart.purple.bolder.',
+  exampleValue: '#964AC0'
+}, {
+  content: '# color.chart.purple.boldest\n\nFor data visualisation only.\n\nExample Value: `#803FA5`\n',
+  name: 'color.chart.purple.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.chart.purple.boldest.hovered\n\nHovered state of color.chart.purple.boldest.\n\nExample Value: `#48245D`\n',
+  name: 'color.chart.purple.boldest.hovered',
+  description: 'Hovered state of color.chart.purple.boldest.',
+  exampleValue: '#48245D'
+}, {
+  content: '# color.chart.magenta.bold\n\nFor data visualisation only.\n\nExample Value: `#DA62AC`\n',
+  name: 'color.chart.magenta.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#DA62AC'
+}, {
+  content: '# color.chart.magenta.bold.hovered\n\nHovered state of color.chart.magenta.bold.\n\nExample Value: `#CD519D`\n',
+  name: 'color.chart.magenta.bold.hovered',
+  description: 'Hovered state of color.chart.magenta.bold.',
+  exampleValue: '#CD519D'
+}, {
+  content: '# color.chart.magenta.bolder\n\nFor data visualisation only.\n\nExample Value: `#CD519D`\n',
+  name: 'color.chart.magenta.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#CD519D'
+}, {
+  content: '# color.chart.magenta.bolder.hovered\n\nHovered state of color.chart.magenta.bolder.\n\nExample Value: `#AE4787`\n',
+  name: 'color.chart.magenta.bolder.hovered',
+  description: 'Hovered state of color.chart.magenta.bolder.',
+  exampleValue: '#AE4787'
+}, {
+  content: '# color.chart.magenta.boldest\n\nFor data visualisation only.\n\nExample Value: `#943D73`\n',
+  name: 'color.chart.magenta.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#943D73'
+}, {
+  content: '# color.chart.magenta.boldest.hovered\n\nHovered state of color.chart.magenta.boldest.\n\nExample Value: `#50253F`\n',
+  name: 'color.chart.magenta.boldest.hovered',
+  description: 'Hovered state of color.chart.magenta.boldest.',
+  exampleValue: '#50253F'
+}, {
+  content: '# color.chart.gray.bold\n\nFor data visualisation only.\n\nExample Value: `#8C8F97`\n',
+  name: 'color.chart.gray.bold',
+  description: 'For data visualisation only.',
+  exampleValue: '#8C8F97'
+}, {
+  content: '# color.chart.gray.bold.hovered\n\nHovered state of color.chart.gray.bold.\n\nExample Value: `#7D818A`\n',
+  name: 'color.chart.gray.bold.hovered',
+  description: 'Hovered state of color.chart.gray.bold.',
+  exampleValue: '#7D818A'
+}, {
+  content: '# color.chart.gray.bolder\n\nFor data visualisation only.\n\nExample Value: `#7D818A`\n',
+  name: 'color.chart.gray.bolder',
+  description: 'For data visualisation only.',
+  exampleValue: '#7D818A'
+}, {
+  content: '# color.chart.gray.bolder.hovered\n\nHovered state of color.chart.gray.bolder.\n\nExample Value: `#6B6E76`\n',
+  name: 'color.chart.gray.bolder.hovered',
+  description: 'Hovered state of color.chart.gray.bolder.',
+  exampleValue: '#6B6E76'
+}, {
+  content: '# color.chart.gray.boldest\n\nFor data visualisation only.\n\nExample Value: `#505258`\n',
+  name: 'color.chart.gray.boldest',
+  description: 'For data visualisation only.',
+  exampleValue: '#505258'
+}, {
+  content: '# color.chart.gray.boldest.hovered\n\nHovered state of color.chart.gray.boldest.\n\nExample Value: `#3B3D42`\n',
+  name: 'color.chart.gray.boldest.hovered',
+  description: 'Hovered state of color.chart.gray.boldest.',
+  exampleValue: '#3B3D42'
+}, {
+  content: '# color.chart.brand\n\nOur primary color for data visualisation. Use when only one color is required.\n\nExample Value: `#357DE8`\n',
+  name: 'color.chart.brand',
+  description: 'Our primary color for data visualisation. Use when only one color is required.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.chart.brand.hovered\n\nHovered state of color.chart.brand.\n\nExample Value: `#1868DB`\n',
+  name: 'color.chart.brand.hovered',
+  description: 'Hovered state of color.chart.brand.',
+  exampleValue: '#1868DB'
+}, {
+  content: "# color.chart.danger\n\nFor data visualisation communicating negative information, such as 'off track'.\n\nExample Value: `#E2483D`\n",
+  name: 'color.chart.danger',
+  description: "For data visualisation communicating negative information, such as 'off track'.",
+  exampleValue: '#E2483D'
+}, {
+  content: '# color.chart.danger.hovered\n\nHovered state of color.chart.danger.\n\nExample Value: `#C9372C`\n',
+  name: 'color.chart.danger.hovered',
+  description: 'Hovered state of color.chart.danger.',
+  exampleValue: '#C9372C'
+}, {
+  content: '# color.chart.danger.bold\n\nA stronger emphasis option of color.chart.danger.\n\nExample Value: `#872821`\n',
+  name: 'color.chart.danger.bold',
+  description: 'A stronger emphasis option of color.chart.danger.',
+  exampleValue: '#872821'
+}, {
+  content: '# color.chart.danger.bold.hovered\n\nHovered state of color.chart.danger.bold.\n\nExample Value: `#5D1F1A`\n',
+  name: 'color.chart.danger.bold.hovered',
+  description: 'Hovered state of color.chart.danger.bold.',
+  exampleValue: '#5D1F1A'
+}, {
+  content: "# color.chart.warning\n\nFor data visualisation communicating caution, such as 'at risk' statuses.\n\nExample Value: `#F68909`\n",
+  name: 'color.chart.warning',
+  description: "For data visualisation communicating caution, such as 'at risk' statuses.",
+  exampleValue: '#F68909'
+}, {
+  content: '# color.chart.warning.hovered\n\nHovered state of color.chart.warning.\n\nExample Value: `#E06C00`\n',
+  name: 'color.chart.warning.hovered',
+  description: 'Hovered state of color.chart.warning.',
+  exampleValue: '#E06C00'
+}, {
+  content: '# color.chart.warning.bold\n\nA stronger emphasis option of color.chart.warning.\n\nExample Value: `#BD5B00`\n',
+  name: 'color.chart.warning.bold',
+  description: 'A stronger emphasis option of color.chart.warning.',
+  exampleValue: '#BD5B00'
+}, {
+  content: '# color.chart.warning.bold.hovered\n\nHovered state of color.chart.warning.bold.\n\nExample Value: `#9E4C00`\n',
+  name: 'color.chart.warning.bold.hovered',
+  description: 'Hovered state of color.chart.warning.bold.',
+  exampleValue: '#9E4C00'
+}, {
+  content: "# color.chart.success\n\nFor data visualisation communicating positive information, such as 'on track'.\n\nExample Value: `#82B536`\n",
+  name: 'color.chart.success',
+  description: "For data visualisation communicating positive information, such as 'on track'.",
+  exampleValue: '#82B536'
+}, {
+  content: '# color.chart.success.hovered\n\nHovered state of color.chart.success.\n\nExample Value: `#6A9A23`\n',
+  name: 'color.chart.success.hovered',
+  description: 'Hovered state of color.chart.success.',
+  exampleValue: '#6A9A23'
+}, {
+  content: '# color.chart.success.bold\n\nA stronger emphasis option of color.chart.success.\n\nExample Value: `#5B7F24`\n',
+  name: 'color.chart.success.bold',
+  description: 'A stronger emphasis option of color.chart.success.',
+  exampleValue: '#5B7F24'
+}, {
+  content: '# color.chart.success.bold.hovered\n\nHovered state of color.chart.success.bold.\n\nExample Value: `#4C6B1F`\n',
+  name: 'color.chart.success.bold.hovered',
+  description: 'Hovered state of color.chart.success.bold.',
+  exampleValue: '#4C6B1F'
+}, {
+  content: "# color.chart.discovery\n\nFor data visualisation communicating 'new' statuses.\n\nExample Value: `#BF63F3`\n",
+  name: 'color.chart.discovery',
+  description: "For data visualisation communicating 'new' statuses.",
+  exampleValue: '#BF63F3'
+}, {
+  content: '# color.chart.discovery.hovered\n\nHovered state of color.chart.discovery.\n\nExample Value: `#AF59E1`\n',
+  name: 'color.chart.discovery.hovered',
+  description: 'Hovered state of color.chart.discovery.',
+  exampleValue: '#AF59E1'
+}, {
+  content: '# color.chart.discovery.bold\n\nA stronger emphasis option of color.chart.discovery.\n\nExample Value: `#803FA5`\n',
+  name: 'color.chart.discovery.bold',
+  description: 'A stronger emphasis option of color.chart.discovery.',
+  exampleValue: '#803FA5'
+}, {
+  content: '# color.chart.discovery.bold.hovered\n\nHovered state of color.chart.discovery.bold.\n\nExample Value: `#964AC0`\n',
+  name: 'color.chart.discovery.bold.hovered',
+  description: 'Hovered state of color.chart.discovery.bold.',
+  exampleValue: '#964AC0'
+}, {
+  content: '# color.chart.information\n\nFor data visualisation communicating low priority or in-progress statuses.\n\nExample Value: `#357DE8`\n',
+  name: 'color.chart.information',
+  description: 'For data visualisation communicating low priority or in-progress statuses.',
+  exampleValue: '#357DE8'
+}, {
+  content: '# color.chart.information.hovered\n\nHovered state of color.chart.information.\n\nExample Value: `#1868DB`\n',
+  name: 'color.chart.information.hovered',
+  description: 'Hovered state of color.chart.information.',
+  exampleValue: '#1868DB'
+}, {
+  content: '# color.chart.information.bold\n\nA stronger emphasis option of color.chart.information.\n\nExample Value: `#1558BC`\n',
+  name: 'color.chart.information.bold',
+  description: 'A stronger emphasis option of color.chart.information.',
+  exampleValue: '#1558BC'
+}, {
+  content: '# color.chart.information.bold.hovered\n\nHovered state of color.chart.information.bold.\n\nExample Value: `#123263`\n',
+  name: 'color.chart.information.bold.hovered',
+  description: 'Hovered state of color.chart.information.bold.',
+  exampleValue: '#123263'
+}, {
+  content: '# elevation.surface\n\nUse as the primary background for the UI.\n\nExample Value: `#FFFFFF`\n',
+  name: 'elevation.surface',
+  description: 'Use as the primary background for the UI.',
+  exampleValue: '#FFFFFF'
+}, {
+  content: '# elevation.surface.hovered\n\nHovered state of elevation.surface\n\nExample Value: `#F0F1F2`\n',
+  name: 'elevation.surface.hovered',
+  description: 'Hovered state of elevation.surface',
+  exampleValue: '#F0F1F2'
+}, {
+  content: '# elevation.surface.pressed\n\nPressed state of elevation.surface\n\nExample Value: `#DDDEE1`\n',
+  name: 'elevation.surface.pressed',
+  description: 'Pressed state of elevation.surface',
+  exampleValue: '#DDDEE1'
+}, {
+  content: '# elevation.surface.overlay\n\nUse 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.\n\nExample Value: `#FFFFFF`\n',
+  name: 'elevation.surface.overlay',
+  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'
+}, {
+  content: '# elevation.surface.overlay.hovered\n\nHovered state of elevation.surface.overlay\n\nExample Value: `#F0F1F2`\n',
+  name: 'elevation.surface.overlay.hovered',
+  description: 'Hovered state of elevation.surface.overlay',
+  exampleValue: '#F0F1F2'
+}, {
+  content: '# elevation.surface.overlay.pressed\n\nPressed state of elevation.surface.overlay\n\nExample Value: `#DDDEE1`\n',
+  name: 'elevation.surface.overlay.pressed',
+  description: 'Pressed state of elevation.surface.overlay',
+  exampleValue: '#DDDEE1'
+}, {
+  content: '# elevation.surface.raised\n\nUse for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised.\n\nExample Value: `#FFFFFF`\n',
+  name: 'elevation.surface.raised',
+  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'
+}, {
+  content: '# elevation.surface.raised.hovered\n\nHovered state of elevation.surface.raised\n\nExample Value: `#F0F1F2`\n',
+  name: 'elevation.surface.raised.hovered',
+  description: 'Hovered state of elevation.surface.raised',
+  exampleValue: '#F0F1F2'
+}, {
+  content: '# elevation.surface.raised.pressed\n\nPressed state of elevation.surface.raised\n\nExample Value: `#DDDEE1`\n',
+  name: 'elevation.surface.raised.pressed',
+  description: 'Pressed state of elevation.surface.raised',
+  exampleValue: '#DDDEE1'
+}, {
+  content: '# elevation.surface.sunken\n\nA secondary background for the UI commonly used for grouping items, such as Jira cards in columns.\n\nExample Value: `#F8F8F8`\n',
+  name: 'elevation.surface.sunken',
+  description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.',
+  exampleValue: '#F8F8F8'
+}, {
+  content: '# elevation.shadow.overflow\n\nUse to create a shadow when content scrolls under other content.\n\nExample Value: `0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F`\n',
+  name: 'elevation.shadow.overflow',
+  description: 'Use to create a shadow when content scrolls under other content.',
+  exampleValue: '0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F'
+}, {
+  content: '# elevation.shadow.overflow.perimeter\n\nUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.\n\nExample Value: `#1E1F211f`\n',
+  name: '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'
+}, {
+  content: '# elevation.shadow.overflow.spread\n\nUse only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.\n\nExample Value: `#1E1F2129`\n',
+  name: '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'
+}, {
+  content: '# elevation.shadow.overlay\n\nUse 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.\n\nExample Value: `0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F`\n',
+  name: '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'
+}, {
+  content: '# elevation.shadow.raised\n\nUse for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised\n\nExample Value: `0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F`\n',
+  name: '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'
+}, {
+  content: '# opacity.disabled\n\nApply to images when in a disabled state.\n\nExample Value: `0.4`\n',
+  name: 'opacity.disabled',
+  description: 'Apply to images when in a disabled state.',
+  exampleValue: '0.4'
+}, {
+  content: '# opacity.loading\n\nApply to content that sits under a loading spinner.\n\nExample Value: `0.2`\n',
+  name: 'opacity.loading',
+  description: 'Apply to content that sits under a loading spinner.',
+  exampleValue: '0.2'
+}, {
+  content: '# utility.UNSAFE.textTransformUppercase\n\nText transform uppercase token used for backwards compatibility between new and old theming solutions\n\nExample Value: `uppercase`\n',
+  name: 'utility.UNSAFE.textTransformUppercase',
+  description: 'Text transform uppercase token used for backwards compatibility between new and old theming solutions',
+  exampleValue: 'uppercase'
+}, {
+  content: '# utility.UNSAFE.transparent\n\nTransparent token used for backwards compatibility between new and old theming solutions\n\nExample Value: `transparent`\n',
+  name: 'utility.UNSAFE.transparent',
+  description: 'Transparent token used for backwards compatibility between new and old theming solutions',
+  exampleValue: 'transparent'
+}, {
+  content: "# utility.elevation.surface.current\n\nA dynamic token that represents the current surface color set by a parent element. It defaults to the 'elevation.surface' token value.\n\nExample Value: `#FFFFFF`\n",
+  name: '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'
+}, {
+  content: '# space.0\n\nEquates to `0`. Use for resetting default spacing styles.\n\nExample Value: `0rem`\n',
+  name: 'space.0',
+  description: 'Equates to `0`. Use for resetting default spacing styles.',
+  exampleValue: '0rem'
+}, {
+  content: '# space.025\n\nUse for small and compact pieces of UI.\n\nExample Value: `0.125rem`\n',
+  name: 'space.025',
+  description: 'Use for small and compact pieces of UI.',
+  exampleValue: '0.125rem'
+}, {
+  content: '# space.050\n\nUse for small and compact pieces of UI.\n\nExample Value: `0.25rem`\n',
+  name: 'space.050',
+  description: 'Use for small and compact pieces of UI.',
+  exampleValue: '0.25rem'
+}, {
+  content: '# space.075\n\nUse for small and compact pieces of UI.\n\nExample Value: `0.375rem`\n',
+  name: 'space.075',
+  description: 'Use for small and compact pieces of UI.',
+  exampleValue: '0.375rem'
+}, {
+  content: '# space.100\n\nUse for small and compact pieces of UI.\n\nExample Value: `0.5rem`\n',
+  name: 'space.100',
+  description: 'Use for small and compact pieces of UI.',
+  exampleValue: '0.5rem'
+}, {
+  content: '# space.150\n\nUse for larger and less dense pieces of UI.\n\nExample Value: `0.75rem`\n',
+  name: 'space.150',
+  description: 'Use for larger and less dense pieces of UI.',
+  exampleValue: '0.75rem'
+}, {
+  content: '# space.200\n\nUse for larger and less dense pieces of UI.\n\nExample Value: `1rem`\n',
+  name: 'space.200',
+  description: 'Use for larger and less dense pieces of UI.',
+  exampleValue: '1rem'
+}, {
+  content: '# space.250\n\nUse for larger and less dense pieces of UI.\n\nExample Value: `1.25rem`\n',
+  name: 'space.250',
+  description: 'Use for larger and less dense pieces of UI.',
+  exampleValue: '1.25rem'
+}, {
+  content: '# space.300\n\nUse for larger and less dense pieces of UI.\n\nExample Value: `1.5rem`\n',
+  name: 'space.300',
+  description: 'Use for larger and less dense pieces of UI.',
+  exampleValue: '1.5rem'
+}, {
+  content: '# space.400\n\nUse for the largest pieces of UI and for layout elements.\n\nExample Value: `2rem`\n',
+  name: 'space.400',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  exampleValue: '2rem'
+}, {
+  content: '# space.500\n\nUse for the largest pieces of UI and for layout elements.\n\nExample Value: `2.5rem`\n',
+  name: 'space.500',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  exampleValue: '2.5rem'
+}, {
+  content: '# space.600\n\nUse for the largest pieces of UI and for layout elements.\n\nExample Value: `3rem`\n',
+  name: 'space.600',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  exampleValue: '3rem'
+}, {
+  content: '# space.800\n\nUse for the largest pieces of UI and for layout elements.\n\nExample Value: `4rem`\n',
+  name: 'space.800',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  exampleValue: '4rem'
+}, {
+  content: '# space.1000\n\nUse for the largest pieces of UI and for layout elements.\n\nExample Value: `5rem`\n',
+  name: 'space.1000',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  exampleValue: '5rem'
+}, {
+  content: '# space.negative.025\n\nUse to negate parent whitespace or overlap small pieces of UI.\n\nExample Value: `-0.125rem`\n',
+  name: 'space.negative.025',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  exampleValue: '-0.125rem'
+}, {
+  content: '# space.negative.050\n\nUse to negate parent whitespace or overlap small pieces of UI.\n\nExample Value: `-0.25rem`\n',
+  name: 'space.negative.050',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  exampleValue: '-0.25rem'
+}, {
+  content: '# space.negative.075\n\nUse to negate parent whitespace or overlap small pieces of UI.\n\nExample Value: `-0.375rem`\n',
+  name: 'space.negative.075',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  exampleValue: '-0.375rem'
+}, {
+  content: '# space.negative.100\n\nUse to negate parent whitespace or overlap small pieces of UI.\n\nExample Value: `-0.5rem`\n',
+  name: 'space.negative.100',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  exampleValue: '-0.5rem'
+}, {
+  content: '# space.negative.150\n\nUse to negate parent whitespace or overlap larger pieces of UI.\n\nExample Value: `-0.75rem`\n',
+  name: 'space.negative.150',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  exampleValue: '-0.75rem'
+}, {
+  content: '# space.negative.200\n\nUse to negate parent whitespace or overlap larger pieces of UI.\n\nExample Value: `-1rem`\n',
+  name: 'space.negative.200',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  exampleValue: '-1rem'
+}, {
+  content: '# space.negative.250\n\nUse to negate parent whitespace or overlap larger pieces of UI.\n\nExample Value: `-1.25rem`\n',
+  name: 'space.negative.250',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  exampleValue: '-1.25rem'
+}, {
+  content: '# space.negative.300\n\nUse to negate parent whitespace or overlap larger pieces of UI.\n\nExample Value: `-1.5rem`\n',
+  name: 'space.negative.300',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  exampleValue: '-1.5rem'
+}, {
+  content: '# space.negative.400\n\nUse to negate parent whitespace or overlap the largest pieces of UI.\n\nExample Value: `-2rem`\n',
+  name: 'space.negative.400',
+  description: 'Use to negate parent whitespace or overlap the largest pieces of UI.',
+  exampleValue: '-2rem'
+}, {
+  content: '# font.heading.xxlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.\n\nExample Value: `normal 500 2.1875rem/2.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.heading.xxlarge',
+  description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.',
+  exampleValue: 'normal 500 2.1875rem/2.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.heading.xlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.\n\nExample Value: `normal 600 1.8125rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.heading.xlarge',
+  description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.',
+  exampleValue: 'normal 600 1.8125rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.heading.large\n\nApp page titles, such as forms. Migrate instances of H700 to Heading L.\n\nExample Value: `normal 500 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.heading.large',
+  description: 'App page titles, such as forms. Migrate instances of H700 to Heading L.',
+  exampleValue: 'normal 500 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.heading.medium\n\nHeaders in large components, such as modal dialogs. Migrate instances of H600 to Heading M.\n\nExample Value: `normal 500 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.heading.medium',
+  description: 'Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.',
+  exampleValue: 'normal 500 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.heading.small\n\nFor headers in small components where space is limited. Migrate instances of H500 to Heading S.\n\nExample Value: `normal 600 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.heading.small',
+  description: 'For headers in small components where space is limited. Migrate instances of H500 to Heading S.',
+  exampleValue: 'normal 600 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.heading.xsmall\n\nFor headers in small components where space is limited. Migrate instances of H400 to Heading XS.\n\nExample Value: `normal 600 0.875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.heading.xsmall',
+  description: 'For headers in small components where space is limited. Migrate instances of H400 to Heading XS.',
+  exampleValue: 'normal 600 0.875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.heading.xxsmall\n\nFor headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.\n\nExample Value: `normal 600 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: '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 600 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.body.large\n\nFor long-form text, such as in blogs.\n\nExample Value: `normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.body.large',
+  description: 'For long-form text, such as in blogs.',
+  exampleValue: 'normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.body\n\nUse in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.\n\nExample Value: `normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.body',
+  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 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.body.small\n\nUse in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.\n\nExample Value: `normal 400 0.6875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: '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.6875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.body.UNSAFE_small\n\nUNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token\n\nExample Value: `normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: '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 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.metric.large\n\nUse to emphasize a number within a large donut.\n\nExample Value: `normal 653 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.metric.large',
+  description: 'Use to emphasize a number within a large donut.',
+  exampleValue: 'normal 653 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.metric.medium\n\nUse to emphasize a number within a medium donut.\n\nExample Value: `normal 653 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.metric.medium',
+  description: 'Use to emphasize a number within a medium donut.',
+  exampleValue: 'normal 653 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.metric.small\n\nUse to emphasize a number and words in single-value tiles, or small donuts.\n\nExample Value: `normal 653 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.metric.small',
+  description: 'Use to emphasize a number and words in single-value tiles, or small donuts.',
+  exampleValue: 'normal 653 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.code\n\nFor representing code only, either inline or in code blocks.\n\nExample Value: `normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
+  name: 'font.code',
+  description: 'For representing code only, either inline or in code blocks.',
+  exampleValue: 'normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
+}, {
+  content: '# font.weight.regular\n\nDefault font weight for body text styles.\n\nExample Value: `400`\n',
+  name: 'font.weight.regular',
+  description: 'Default font weight for body text styles.',
+  exampleValue: '400'
+}, {
+  content: '# font.weight.medium\n\nFor all text that may appear beside iconography, such as in a button.\n\nExample Value: `500`\n',
+  name: 'font.weight.medium',
+  description: 'For all text that may appear beside iconography, such as in a button.',
+  exampleValue: '500'
+}, {
+  content: '# font.weight.semibold\n\nUse with caution as fallback fonts do not support this font weight and will default to bold weight.\n\nExample Value: `600`\n',
+  name: 'font.weight.semibold',
+  description: 'Use with caution as fallback fonts do not support this font weight and will default to bold weight.',
+  exampleValue: '600'
+}, {
+  content: '# font.weight.bold\n\nUse sparingly for emphasising text, such as in a lozenge.\n\nExample Value: `700`\n',
+  name: 'font.weight.bold',
+  description: 'Use sparingly for emphasising text, such as in a lozenge.',
+  exampleValue: '700'
+}, {
+  content: '# font.family.heading\n\nFor our default UI heading text.\n\nExample Value: `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.family.heading',
+  description: 'For our default UI heading text.',
+  exampleValue: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.family.body\n\nFor our default UI body text.\n\nExample Value: `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: 'font.family.body',
+  description: 'For our default UI body text.',
+  exampleValue: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+}, {
+  content: '# font.family.code\n\nFor representing code only.\n\nExample Value: `ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
+  name: 'font.family.code',
+  description: 'For representing code only.',
+  exampleValue: 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
+}, {
+  content: '# font.family.brand.heading\n\nFor our brand heading text. Uses Charlie Display.\n\nExample Value: `"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: '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'
+}, {
+  content: '# font.family.brand.body\n\nFor our brand body text. Uses Charlie Text.\n\nExample Value: `"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
+  name: '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'
+}, {
+  content: '# radius.xsmall\n\nUsed for small containers such as badges.\n\nExample Value: `0.125rem`\n',
+  name: 'radius.xsmall',
+  description: 'Used for small containers such as badges.',
+  exampleValue: '0.125rem'
+}, {
+  content: '# radius.small\n\nUsed for labels.\n\nExample Value: `0.25rem`\n',
+  name: 'radius.small',
+  description: 'Used for labels.',
+  exampleValue: '0.25rem'
+}, {
+  content: '# radius.medium\n\nUsed for buttons and inputs.\n\nExample Value: `0.375rem`\n',
+  name: 'radius.medium',
+  description: 'Used for buttons and inputs.',
+  exampleValue: '0.375rem'
+}, {
+  content: '# radius.large\n\nUsed for cards and small containers.\n\nExample Value: `0.5rem`\n',
+  name: 'radius.large',
+  description: 'Used for cards and small containers.',
+  exampleValue: '0.5rem'
+}, {
+  content: '# radius.xlarge\n\nUsed for modals and large containers.\n\nExample Value: `0.75rem`\n',
+  name: 'radius.xlarge',
+  description: 'Used for modals and large containers.',
+  exampleValue: '0.75rem'
+}, {
+  content: '# radius.xxlarge\n\nUsed for the largest containers.\n\nExample Value: `1rem`\n',
+  name: 'radius.xxlarge',
+  description: 'Used for the largest containers.',
+  exampleValue: '1rem'
+}, {
+  content: '# radius.full\n\nUsed for circular containers, like a rounded button.\n\nExample Value: `624.9375rem`\n',
+  name: 'radius.full',
+  description: 'Used for circular containers, like a rounded button.',
+  exampleValue: '624.9375rem'
+}, {
+  content: '# radius.tile\n\nUsed for tiles only.\n\nExample Value: `25%`\n',
+  name: 'radius.tile',
+  description: 'Used for tiles only.',
+  exampleValue: '25%'
+}, {
+  content: '# border.width\n\nThe default width for all standard component borders and dividers.\n\nExample Value: `0.0625rem`\n',
+  name: 'border.width',
+  description: 'The default width for all standard component borders and dividers.',
+  exampleValue: '0.0625rem'
+}, {
+  content: '# border.width.selected\n\nThe width used to indicate a selected element, such as an active tab or a chosen item.\n\nExample Value: `0.125rem`\n',
+  name: 'border.width.selected',
+  description: 'The width used to indicate a selected element, such as an active tab or a chosen item.',
+  exampleValue: '0.125rem'
+}, {
+  content: '# border.width.focused\n\nThe width used for the focus ring on interactive elements.\n\nExample Value: `0.125rem`\n',
+  name: 'border.width.focused',
+  description: 'The width used for the focus ring on interactive elements.',
+  exampleValue: '0.125rem'
+}];