diff --git a/docs/common/DocsShow.vue b/docs/common/DocsShow.vue
index cd1a8acec..43460b2f1 100644
--- a/docs/common/DocsShow.vue
+++ b/docs/common/DocsShow.vue
@@ -35,7 +35,7 @@
         return {
           display: this.block ? 'block' : 'inline-block',
           padding: this.padding ? '8px 24px' : null,
-          backgroundColor: this.dark ? this.$themePalette.grey.v_500 : undefined,
+          backgroundColor: this.dark ? this.$themePalette.grey.v_700 : undefined,
         };
       },
     },
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index 312829331..cd9948452 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -17,8 +17,8 @@
       <DocsColorBlock name="tokens.text" />
       <DocsColorBlock name="tokens.error" />
       <DocsColorBlock name="tokens.primary" />
-      <DocsColorBlock name="brand.primary.v_1100" />
-      <DocsColorBlock name="brand.secondary.v_800" />
+      <DocsColorBlock name="brand.primary.v_600" />
+      <DocsColorBlock name="brand.secondary.v_400" />
       <DocsColorBlock name="palette.grey.v_400" />
 
       <p>
@@ -203,16 +203,14 @@
 
     <DocsPageSection title="Scales" anchor="#scales">
       <p>
-        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</code>:
+        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:
       </p>
+      <DocsColorBlock name="palette.green.v_100" />
       <DocsColorBlock name="palette.green.v_200" />
+      <DocsColorBlock name="palette.green.v_300" />
       <DocsColorBlock name="palette.green.v_400" />
+      <DocsColorBlock name="palette.green.v_500" />
       <DocsColorBlock name="palette.green.v_600" />
-      <p style="margin-left: 60px">
-        …
-      </p>
-      <DocsColorBlock name="palette.green.v_1000" />
-      <DocsColorBlock name="palette.green.v_1100" />
       <p>
         Due to the inconsistent way that humans perceive color and light, computing these scales is <DocsExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <DocsExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
       </p>
diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue
index 840443c4c..c8abf6269 100644
--- a/docs/pages/errors/index.vue
+++ b/docs/pages/errors/index.vue
@@ -140,7 +140,7 @@
         For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences.
       </p>
       <p>
-        For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_400</code> and informative language of the consequences under the current condition.
+        For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_200</code> and informative language of the consequences under the current condition.
       </p>
       <img src="./warning.png">
       <h3>
diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue
index ecd0af5da..8ceab7685 100644
--- a/docs/pages/klinearloader.vue
+++ b/docs/pages/klinearloader.vue
@@ -36,7 +36,7 @@
     <DocsPageSection title="Specifications" anchor="#specifications">
 
       <ul>
-        <li>Progress track uses palette.grey.v_100</li>
+        <li>Progress track uses palette.grey.v_200</li>
         <li>Progress indicator uses palette.grey.v_800</li>
         <li>Progress track height is 4px</li>
         <li>Include a 2px corner radius</li>
diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue
index 7787bf918..20f0d12c6 100644
--- a/docs/pages/kswitch.vue
+++ b/docs/pages/kswitch.vue
@@ -33,19 +33,19 @@
       <ul>
         <li>
           Thumb ON color:
-          <DocsInternalLink code text="brand.primary.v_1000" href="/colors#brand-primary-v_1000" />
+          <DocsInternalLink code text="brand.primary.v_500" href="/colors#brand-primary-v_500" />
         </li>
         <li>
           Track ON color:
-          <DocsInternalLink code text="brand.primary.v_400" href="/colors#brand-primary-v_400" />
+          <DocsInternalLink code text="brand.primary.v_200" href="/colors#brand-primary-v_200" />
         </li>
         <li>
           Thumb OFF color:
-          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
+          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
         </li>
         <li>
           Track OFF color:
-          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
+          <DocsInternalLink code text="palette.grey.v_300" href="/colors#palette-grey-v_300" />
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue
index ae865e0b1..3d38ac218 100644
--- a/docs/pages/menus/index.vue
+++ b/docs/pages/menus/index.vue
@@ -91,11 +91,11 @@
         </li>
         <li>
           Option text color:
-          <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_100" />
+          <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_200" />
         </li>
         <li>
           Option text hover color:
-          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
+          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
         </li>
         <li>
           Iconography color:
diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue
index 6a758cf0d..7f92ad9fd 100644
--- a/docs/pages/textfields/index.vue
+++ b/docs/pages/textfields/index.vue
@@ -184,11 +184,11 @@
         <li>Corner radius: 2px</li>
         <li>
           Fill color:
-          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
+          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
         </li>
         <li>
           Bottom stroke color:
-          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
+          <DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
         </li>
         <li>
           Bottom stroke focused color:
@@ -196,7 +196,7 @@
         </li>
         <li>
           Label text color:
-          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
+          <DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
         </li>
         <li>
           Focused text color:
diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
index f9c1869d2..70c2cb2cc 100644
--- a/lib/KDateRange/KDateCalendar.vue
+++ b/lib/KDateRange/KDateCalendar.vue
@@ -31,7 +31,7 @@
             :style="[
               (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first') ||
                 (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second') ?
-                  { backgroundColor: $themeBrand.primary.v_200 } : {}
+                  { backgroundColor: $themeBrand.primary.v_100 } : {}
             ]"
             :class="[{
               'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
@@ -64,7 +64,7 @@
             :style="[
               (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first') ||
                 (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second') ?
-                  { backgroundColor: $themeBrand.primary.v_200 } : {}
+                  { backgroundColor: $themeBrand.primary.v_100 } : {}
             ]"
             :class="[{
               'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue
index a968e287d..bceab329c 100644
--- a/lib/KDateRange/KDateDay.vue
+++ b/lib/KDateRange/KDateDay.vue
@@ -69,9 +69,9 @@
       inRangeStyle() {
         return this.isInRange
           ? {
-              backgroundColor: this.$themeBrand.primary.v_200,
+              backgroundColor: this.$themeBrand.primary.v_100,
               ':hover': {
-                backgroundColor: this.$themePalette.grey.v_200,
+                backgroundColor: this.$themePalette.grey.v_300,
               },
             }
           : {};
@@ -79,7 +79,7 @@
       selectedStyle() {
         return this.isSelected
           ? {
-              backgroundColor: this.$themeBrand.primary.v_1000,
+              backgroundColor: this.$themeBrand.primary.v_500,
               color: this.$themePalette.white + '!important',
             }
           : {};
diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue
index 1334a7bea..45e4d3548 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -185,7 +185,7 @@
        * (3) a progressive loading experience as the colored background
        * is displayed while an image is loading.
        *
-       * Its default value is `$themePalette.grey.v_200`.
+       * Its default value is `$themePalette.grey.v_100`.
        */
       backgroundColor: {
         type: String,
@@ -218,7 +218,7 @@
       baseStyles() {
         const backgroundColor = this.backgroundColor
           ? this.backgroundColor
-          : this.$themePalette.grey.v_200;
+          : this.$themePalette.grey.v_100;
         const borderRadius = this.borderRadius ? this.borderRadius : 0;
 
         return {
diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue
index 88236428e..f9f9289c8 100644
--- a/lib/KLogo/index.vue
+++ b/lib/KLogo/index.vue
@@ -136,8 +136,8 @@
 
   const colorScheme = {
     default: {
-      blobColor: defaultBrandColors.secondary.v_1000,
-      strokeColor: defaultBrandColors.primary.v_1000,
+      blobColor: defaultBrandColors.secondary.v_500,
+      strokeColor: defaultBrandColors.primary.v_500,
     },
     monoBlack: {
       blobColor: materialColors.black,
@@ -146,17 +146,17 @@
       blobColor: materialColors.white,
     },
     monoPrimary: {
-      blobColor: defaultBrandColors.primary.v_1000,
+      blobColor: defaultBrandColors.primary.v_500,
     },
     monoSecondary: {
-      blobColor: defaultBrandColors.secondary.v_1000,
+      blobColor: defaultBrandColors.secondary.v_500,
     },
     whiteGrey: {
-      blobColor: materialColors.grey.v_200,
+      blobColor: materialColors.grey.v_300,
       strokeColor: materialColors.white,
     },
     blackGrey: {
-      blobColor: materialColors.grey.v_200,
+      blobColor: materialColors.grey.v_300,
       strokeColor: materialColors.black,
     },
   };
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index 360cdd28d..bbd7d4e91 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -92,7 +92,7 @@ export default {
       return {
         color: this.$themeTokens.primary,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_100,
+          backgroundColor: this.$themePalette.grey.v_200,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,
@@ -104,9 +104,9 @@ export default {
     secondaryRaisedStyle() {
       return {
         color: this.$themeTokens.text,
-        backgroundColor: this.$themePalette.grey.v_50,
+        backgroundColor: this.$themePalette.grey.v_100,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_100,
+          backgroundColor: this.$themePalette.grey.v_200,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: '6px' },
         ':disabled': disabledStyle,
@@ -119,7 +119,7 @@ export default {
       return {
         color: this.$themeTokens.text,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_200,
+          backgroundColor: this.$themePalette.grey.v_300,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,
diff --git a/lib/loaders/KLinearLoader.vue b/lib/loaders/KLinearLoader.vue
index 9f2ca6e7a..acd09faae 100644
--- a/lib/loaders/KLinearLoader.vue
+++ b/lib/loaders/KLinearLoader.vue
@@ -11,7 +11,7 @@
     <div
       class="ui-progress-linear"
       :class="classes"
-      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      :style="{ backgroundColor: $themePalette.grey.v_200 }"
     >
       <div
         v-if="type === 'determinate'"
diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js
index 7d3e6c144..a79704234 100644
--- a/lib/styles/colorsDefault.js
+++ b/lib/styles/colorsDefault.js
@@ -1,45 +1,45 @@
 export const defaultTokenMapping = {
   // Branded UI colors
-  primary: 'brand.primary.v_1000',
-  primaryDark: 'brand.primary.v_1100',
-  secondary: 'brand.secondary.v_1000',
-  secondaryDark: 'brand.secondary.v_1100',
-  appBar: 'brand.secondary.v_800',
+  primary: 'brand.primary.v_500',
+  primaryDark: 'brand.primary.v_600',
+  secondary: 'brand.secondary.v_500',
+  secondaryDark: 'brand.secondary.v_600',
+  appBar: 'brand.secondary.v_400',
   appBarDark: 'palette.black',
-  link: 'brand.primary.v_1000',
+  link: 'brand.primary.v_500',
   loading: 'palette.grey.v_800',
-  focusOutline: 'palette.lightblue.v_800',
+  focusOutline: 'palette.lightblue.v_400',
 
   // Generic UI colors
   text: 'palette.black',
-  textDisabled: 'palette.grey.v_200',
-  annotation: 'palette.grey.v_600',
+  textDisabled: 'palette.grey.v_300',
+  annotation: 'palette.grey.v_700',
   textInverted: 'palette.white',
   surface: 'palette.white',
-  fineLine: 'palette.grey.v_100',
+  fineLine: 'palette.grey.v_200',
 
   // general semantic colors
-  error: 'palette.red.v_1100',
-  incorrect: 'palette.red.v_1100',
-  success: 'palette.green.v_1100',
-  correct: 'palette.green.v_1100',
+  error: 'palette.red.v_600',
+  incorrect: 'palette.red.v_600',
+  success: 'palette.green.v_600',
+  correct: 'palette.green.v_600',
 
   // Kolibri-specific semantic colors
-  progress: 'palette.lightblue.v_1000',
-  mastered: 'palette.yellow.v_1000',
-  warning: 'palette.yellow.v_1000',
-  incomplete: 'palette.yellow.v_1000',
-  coachContent: 'palette.lightblue.v_1100',
-  superAdmin: 'palette.yellow.v_1000',
+  progress: 'palette.lightblue.v_500',
+  mastered: 'palette.yellow.v_500',
+  warning: 'palette.yellow.v_500',
+  incomplete: 'palette.yellow.v_500',
+  coachContent: 'palette.lightblue.v_600',
+  superAdmin: 'palette.yellow.v_500',
 
   // content colors
-  practice: 'palette.blue.v_800',
-  watch: 'palette.lightblue.v_800',
-  listen: 'palette.pink.v_1000',
-  read: 'palette.red.v_1000',
-  explore: 'palette.orange.v_1000',
-  create: 'palette.green.v_1000',
-  reflect: 'palette.yellow.v_1000',
+  practice: 'palette.blue.v_400',
+  watch: 'palette.lightblue.v_400',
+  listen: 'palette.pink.v_500',
+  read: 'palette.red.v_500',
+  explore: 'palette.orange.v_500',
+  create: 'palette.green.v_500',
+  reflect: 'palette.yellow.v_500',
   topic: 'palette.grey.v_800',
 };
 
@@ -47,20 +47,20 @@ export const defaultTokenMapping = {
 export const defaultBrandColors = {
   // blues
   primary: {
-    v_200: '#D9E1FD',
-    v_400: '#B4C3FB',
-    v_600: '#8EA4F9',
-    v_800: '#6986F7',
-    v_1000: '#4368F5',
-    v_1100: '#2547F3',
+    v_100: '#D9E1FD',
+    v_200: '#B4C3FB',
+    v_300: '#8EA4F9',
+    v_400: '#6986F7',
+    v_500: '#4368F5',
+    v_600: '#2547F3',
   },
   // yellows
   secondary: {
-    v_200: '#FFF5CC',
-    v_400: '#FFEA99',
-    v_600: '#FFE066',
-    v_800: '#FFD533',
-    v_1000: '#FFCB00',
-    v_1100: '#E5B700',
+    v_100: '#FFF5CC',
+    v_200: '#FFEA99',
+    v_300: '#FFE066',
+    v_400: '#FFD533',
+    v_500: '#FFCB00',
+    v_600: '#E5B700',
   },
 };
diff --git a/lib/styles/colorsMaterial.js b/lib/styles/colorsMaterial.js
index 1ce36f02f..8d8ea46b7 100644
--- a/lib/styles/colorsMaterial.js
+++ b/lib/styles/colorsMaterial.js
@@ -1,76 +1,81 @@
+const BLACK = '#000000';
+const WHITE = '#ffffff';
+
 export default {
-  black: '#000000',
-  white: '#ffffff',
+  black: BLACK,
+  white: WHITE,
   red: {
-    v_200: '#FFD9D3',
-    v_400: '#FFB4A7',
-    v_600: '#FF8E7C',
-    v_800: '#FF6950',
-    v_1000: '#FF4324',
-    v_1100: '#D21E00',
+    v_100: '#FFD9D3',
+    v_200: '#FFB4A7',
+    v_300: '#FF8E7C',
+    v_400: '#FF6950',
+    v_500: '#FF4324',
+    v_600: '#D21E00',
   },
   pink: {
-    v_200: '#FFE5E8',
-    v_400: '#FFCCD1',
-    v_600: '#FFB2BB',
-    v_800: '#FF99A4',
-    v_1000: '#FF7F8D',
-    v_1100: '#F76474',
+    v_100: '#FFE5E8',
+    v_200: '#FFCCD1',
+    v_300: '#FFB2BB',
+    v_400: '#FF99A4',
+    v_500: '#FF7F8D',
+    v_600: '#F76474',
   },
   blue: {
-    v_200: '#D9E1FD',
-    v_400: '#B4C3FB',
-    v_600: '#8EA4F9',
-    v_800: '#6986F7',
-    v_1000: '#4368F5',
-    v_1100: '#2547F3',
+    v_100: '#D9E1FD',
+    v_200: '#B4C3FB',
+    v_300: '#8EA4F9',
+    v_400: '#6986F7',
+    v_500: '#4368F5',
+    v_600: '#2547F3',
   },
   lightblue: {
-    v_200: '#CCEAFC',
-    v_400: '#99D5FA',
-    v_600: '#66C1F7',
-    v_800: '#33ACF5',
-    v_1000: '#0097F2',
-    v_1100: '#0079C2',
+    v_100: '#CCEAFC',
+    v_200: '#99D5FA',
+    v_300: '#66C1F7',
+    v_400: '#33ACF5',
+    v_500: '#0097F2',
+    v_600: '#0079C2',
   },
   darkgreen: {
-    v_200: '#CCDDD6',
-    v_400: '#99BBAD',
-    v_600: '#669A85',
-    v_800: '#33785C',
-    v_1000: '#005633',
-    v_1100: '#00331E',
+    v_100: '#CCDDD6',
+    v_200: '#99BBAD',
+    v_300: '#669A85',
+    v_400: '#33785C',
+    v_500: '#005633',
+    v_600: '#00331E',
   },
   green: {
-    v_200: '#CCF4D8',
-    v_400: '#99E9B1',
-    v_600: '#66DD8A',
-    v_800: '#33D263',
-    v_1000: '#00C73C',
-    v_1100: '#00992E',
+    v_100: '#CCF4D8',
+    v_200: '#99E9B1',
+    v_300: '#66DD8A',
+    v_400: '#33D263',
+    v_500: '#00C73C',
+    v_600: '#00992E',
   },
   orange: {
-    v_200: '#FFE4CC',
-    v_400: '#FFC899',
-    v_600: '#FFAD66',
-    v_800: '#FF9133',
-    v_1000: '#FF7600',
-    v_1100: '#E56A00',
+    v_100: '#FFE4CC',
+    v_200: '#FFC899',
+    v_300: '#FFAD66',
+    v_400: '#FF9133',
+    v_500: '#FF7600',
+    v_600: '#E56A00',
   },
   yellow: {
-    v_200: '#FFF5CC',
-    v_400: '#FFEA99',
-    v_600: '#FFE066',
-    v_800: '#FFD533',
-    v_1000: '#FFCB00',
-    v_1100: '#E5B700',
+    v_100: '#FFF5CC',
+    v_200: '#FFEA99',
+    v_300: '#FFE066',
+    v_400: '#FFD533',
+    v_500: '#FFCB00',
+    v_600: '#E5B700',
   },
   grey: {
-    v_50: '#F5F5F5',
-    v_100: '#E6E6E6',
-    v_200: '#CCCCCC',
+    v_50: WHITE,
+    v_100: '#F5F5F5',
+    v_200: '#E6E6E6',
+    v_300: '#CCCCCC',
     v_400: '#999999',
-    v_600: '#666666',
+    v_700: '#666666',
     v_800: '#333333',
+    v_900: BLACK,
   },
 };
diff --git a/lib/styles/generateGlobalStyles.js b/lib/styles/generateGlobalStyles.js
index 48f0bf432..67ccc118f 100644
--- a/lib/styles/generateGlobalStyles.js
+++ b/lib/styles/generateGlobalStyles.js
@@ -28,7 +28,7 @@ export default function generateGlobalStyles() {
   };
   const htmlBodyStyles = {
     color: themeTokens().text,
-    backgroundColor: themePalette().grey.v_50,
+    backgroundColor: themePalette().grey.v_100,
     ...printStyle,
   };
   const globalStyles = StyleSheet.create({
@@ -39,7 +39,7 @@ export default function generateGlobalStyles() {
       '*:focus': themeOutlineStyle(),
       '*:focus:hover': themeOutlineStyle(),
       '*::selection': {
-        background: themeBrand().secondary.v_200,
+        background: themeBrand().secondary.v_100,
       },
     },
   });
diff --git a/lib/tabs/KTabsList.vue b/lib/tabs/KTabsList.vue
index 8349b968e..113f9059a 100644
--- a/lib/tabs/KTabsList.vue
+++ b/lib/tabs/KTabsList.vue
@@ -128,7 +128,7 @@
           : this.$themeTokens.surface;
         const hoverBackgroundColor = this.hoverBackgroundColor
           ? this.hoverBackgroundColor
-          : this.$themeBrand.primary.v_200;
+          : this.$themeBrand.primary.v_100;
         return {
           color,
           backgroundColor,
diff --git a/lib/tabs/tabsMixin.js b/lib/tabs/tabsMixin.js
index a027649d4..da4b4e0aa 100644
--- a/lib/tabs/tabsMixin.js
+++ b/lib/tabs/tabsMixin.js
@@ -73,7 +73,7 @@ export default {
     },
     /**
      * Tabs hover background color.
-     * Defaults to `$themeBrand.primary.v_200`.
+     * Defaults to `$themeBrand.primary.v_100`.
      */
     hoverBackgroundColor: {
       type: String,