diff --git a/src/components/card/card.config.js b/src/components/card/card.config.js
index 81145e1d2890..242dec3b5437 100644
--- a/src/components/card/card.config.js
+++ b/src/components/card/card.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Card',
       notes: `
         Cards provide an at-a glance preview of the content they link to and frequently contain
         easily-consumable content.
diff --git a/src/components/code-snippet/code-snippet.config.js b/src/components/code-snippet/code-snippet.config.js
index 75db9e9c6c6c..90019d787af1 100644
--- a/src/components/code-snippet/code-snippet.config.js
+++ b/src/components/code-snippet/code-snippet.config.js
@@ -41,7 +41,7 @@ module.exports = {
     },
     {
       name: 'inline-light',
-      label: 'Inline Light',
+      label: 'Inline (Light)',
       notes: `
         Code snippets are small blocks of reusable code that can be inserted in a code file.
 
diff --git a/src/components/combo-box/combo-box.config.js b/src/components/combo-box/combo-box.config.js
index ed087691cd71..6f0f6aef387c 100644
--- a/src/components/combo-box/combo-box.config.js
+++ b/src/components/combo-box/combo-box.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Combo Box',
     },
     {
       name: 'disabled',
diff --git a/src/components/detail-page-header/detail-page-header.config.js b/src/components/detail-page-header/detail-page-header.config.js
index 67daad071ca0..8def2a7e1cdc 100644
--- a/src/components/detail-page-header/detail-page-header.config.js
+++ b/src/components/detail-page-header/detail-page-header.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Detail Page Header',
     },
     {
       name: 'with-tabs',
diff --git a/src/components/dropdown/dropdown.config.js b/src/components/dropdown/dropdown.config.js
index 0cdffdf1d1b3..1c5e2e5fb753 100644
--- a/src/components/dropdown/dropdown.config.js
+++ b/src/components/dropdown/dropdown.config.js
@@ -4,14 +4,14 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Dropdown',
       notes: `
         The Dropdown component is used for navigating or filtering existing content.
       `,
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Dropdown (Light)',
       context: {
         light: true,
       },
@@ -25,7 +25,7 @@ module.exports = {
     },
     {
       name: 'up-light',
-      label: 'Up light',
+      label: 'Up (Light)',
       context: {
         up: true,
         light: true,
diff --git a/src/components/form/form.config.js b/src/components/form/form.config.js
index 7d2b972a7241..baad34c54deb 100644
--- a/src/components/form/form.config.js
+++ b/src/components/form/form.config.js
@@ -4,12 +4,12 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Form',
       notes: 'Forms are widely used to collect user input.',
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Form (Light)',
       context: {
         light: true,
       },
diff --git a/src/components/interior-left-nav/interior-left-nav.config.js b/src/components/interior-left-nav/interior-left-nav.config.js
index 804f970550fd..dc1337cf6c9c 100644
--- a/src/components/interior-left-nav/interior-left-nav.config.js
+++ b/src/components/interior-left-nav/interior-left-nav.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Interior Left Nav',
       notes: `
         Interior left navigation organizes the content structure and provides
         context to support user orientation. This pattern accommodates the
diff --git a/src/components/list-box/list-box.config.js b/src/components/list-box/list-box.config.js
index 2b787ccdb462..114fabe330b2 100644
--- a/src/components/list-box/list-box.config.js
+++ b/src/components/list-box/list-box.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'List Box',
     },
     {
       name: 'inline',
diff --git a/src/components/loading/loading.config.js b/src/components/loading/loading.config.js
index a5ce6828f328..04a13df46bd1 100644
--- a/src/components/loading/loading.config.js
+++ b/src/components/loading/loading.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Loading',
       notes: `
         Loading spinners are used when retrieving data or performing slow computations,
         and help to notify users that loading is underway.
diff --git a/src/components/modal/modal.config.js b/src/components/modal/modal.config.js
index 2742832c2488..52bd67e582df 100644
--- a/src/components/modal/modal.config.js
+++ b/src/components/modal/modal.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Transactional Modal',
       notes: `
         Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.
       `,
@@ -19,8 +19,8 @@ module.exports = {
     },
     {
       name: 'nofooter',
-      label: 'Without footer',
-      notes: 'Passive modals are modals without footers.',
+      label: 'Passive Modal',
+      notes: 'Passive Modals are modals without footers.',
       context: {
         idSuffix: Math.random()
           .toString(36)
@@ -32,7 +32,7 @@ module.exports = {
     },
     {
       name: 'danger',
-      label: 'Danger',
+      label: 'Danger Modal',
       context: {
         idSuffix: Math.random()
           .toString(36)
diff --git a/src/components/multi-select/multi-select.config.js b/src/components/multi-select/multi-select.config.js
index 2b787ccdb462..5748cfde23cc 100644
--- a/src/components/multi-select/multi-select.config.js
+++ b/src/components/multi-select/multi-select.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Multi Select',
     },
     {
       name: 'inline',
diff --git a/src/components/number-input/number-input.config.js b/src/components/number-input/number-input.config.js
index 49606a2ca77b..476a38b474e2 100644
--- a/src/components/number-input/number-input.config.js
+++ b/src/components/number-input/number-input.config.js
@@ -4,14 +4,15 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Number Input',
       notes: `
-        Number inputs are similar to text fields, but contain controls used to increase or decrease an incremental value. The Number Input component can be passed a starting value, a min, a max, and the step.
+        Number inputs are similar to text fields, but contain controls used to increase or decrease an incremental value.
+        The Number Input component can be passed a starting value, a min, a max, and the step.
       `,
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Number Input (Light)',
       context: {
         light: true,
       },
diff --git a/src/components/order-summary/order-summary.config.js b/src/components/order-summary/order-summary.config.js
index 06ab494b8b89..f5d1768f5fd9 100644
--- a/src/components/order-summary/order-summary.config.js
+++ b/src/components/order-summary/order-summary.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Order Summary',
       notes: `
         This component is used to display the items a user will be purchasing.
         This version does not include OrderSummaryCategory.
diff --git a/src/components/search/search.config.js b/src/components/search/search.config.js
index a81ae9d9a9dc..636649e65a82 100644
--- a/src/components/search/search.config.js
+++ b/src/components/search/search.config.js
@@ -5,7 +5,7 @@ module.exports = {
   variants: [
     {
       name: 'large',
-      label: 'Normal',
+      label: 'Normal search',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
@@ -17,7 +17,7 @@ module.exports = {
     },
     {
       name: 'small',
-      label: 'Small',
+      label: 'Small search',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
@@ -30,7 +30,7 @@ module.exports = {
     },
     {
       name: 'large-light',
-      label: 'Normal Light',
+      label: 'Normal search (Light)',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
@@ -43,7 +43,7 @@ module.exports = {
     },
     {
       name: 'small-light',
-      label: 'Small Light',
+      label: 'Small search (Light)',
       notes: `
         Search enables users to specify a word or a phrase to find particular relevant pieces of content
         without the use of navigation. Search can be used as the primary means of discovering content,
diff --git a/src/components/select/select.config.js b/src/components/select/select.config.js
index b170a7fe4627..248fcdf4e149 100644
--- a/src/components/select/select.config.js
+++ b/src/components/select/select.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Select',
       notes: `
         Select displays a list below its title when selected. They are used primarily in forms,
         where a user chooses one option from a list. Once the user selects an item, the dropdown will
@@ -14,7 +14,7 @@ module.exports = {
     },
     {
       name: 'inline',
-      label: 'Inline',
+      label: 'Inline Select',
       notes: 'Inline select is for use when there will be multiple elements in a row.',
       context: {
         inline: true,
@@ -22,21 +22,21 @@ module.exports = {
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Select (Light)',
       context: {
         light: true,
       },
     },
     {
       name: 'invalid',
-      label: 'Invalid',
+      label: 'Select (Invalid)',
       context: {
         invalid: true,
       },
     },
     {
       name: 'light-invalid',
-      label: 'Light invalid',
+      label: 'Select (Light/Invalid)',
       context: {
         light: true,
         invalid: true,
diff --git a/src/components/text-area/text-area.config.js b/src/components/text-area/text-area.config.js
index 87ea755d89f5..b4d55f6e8172 100644
--- a/src/components/text-area/text-area.config.js
+++ b/src/components/text-area/text-area.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Text Area',
       notes: `
         Text areas enable the user to interact with and input data. A text area is used when you
         anticipate the user to input more than 1 sentence.
diff --git a/src/components/text-input/text-input.config.js b/src/components/text-input/text-input.config.js
index 5546e4041c86..7140a6bafdc7 100644
--- a/src/components/text-input/text-input.config.js
+++ b/src/components/text-input/text-input.config.js
@@ -4,7 +4,7 @@ module.exports = {
   variants: [
     {
       name: 'default',
-      label: 'Default',
+      label: 'Text Input',
       notes: `
         Text fields enable the user to interact with and input data. A single line
         field is used when the input anticipated by the user is a single line of
@@ -13,7 +13,7 @@ module.exports = {
     },
     {
       name: 'light',
-      label: 'Light',
+      label: 'Text Input (Light)',
       context: {
         light: true,
       },