diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd16ccf30..01d734b5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -710,8 +710,41 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
+- [#791]
+  - **Description:** Bump KDS version to 4.6.0.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#791]: https://github.com/learningequality/kolibri-design-system/pull/791
+
+- [#782]
+  - **Description:** Update Theme Tokens to the latest specs to comply material design specifications.
+  - **Products impact:** Updated API.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/775.
+  - **Components:** -.
+  - **Breaking:** yes.
+  - **Impacts a11y:** no.
+  - **Guidance:** Please update all `v_*` theme tokens using the mapping posted in https://github.com/learningequality/kolibri-design-system/issues/775.
+
+[#782]: https://github.com/learningequality/kolibri-design-system/pull/782
+
+- [#786]
+  - **Description:** Bump KDS version to 4.5.1.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#786]: https://github.com/learningequality/kolibri-design-system/pull/786
+
 - [#784]
-  - **Description:** Adds `labelDir` prop to control rtl direction of label.
+  - **Description:** Add `labelDir` prop to control rtl direction of label.
   - **Products impact:** new API.
   - **Addresses:** https://github.com/learningequality/studio/issues/4728.
   - **Components:** KCheckbox, KRadioButton.
diff --git a/docs/common/DocsShow.vue b/docs/common/DocsShow.vue
index fc55d7f75..8155abe26 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-components/DocsKCard.vue b/docs/pages-components/DocsKCard.vue
index 3e452e7c3..f734ee51d 100644
--- a/docs/pages-components/DocsKCard.vue
+++ b/docs/pages-components/DocsKCard.vue
@@ -45,14 +45,14 @@
       <div class="footer-wrapper">
         <div class="pills" :style="{ 'color': $themeTokens.annotation }">
           <span
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
             Read
           </span>
           <span
             v-if="!showMenuInFooter"
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             Short Activity
           </span>
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index a6445476d..de29ed610 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>
@@ -97,30 +97,30 @@
       <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
 
       <DocsShowCode language="html">
-        <div :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div :style="{ backgroundColor: $themePalette.red.v_600 }">
           base
         </div>
-        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           $darken1
         </div>
-        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           $darken2
         </div>
-        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           $darken3
         </div>
       </DocsShowCode>
       <DocsShow>
-        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_600 }">
           <code>base</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           <code>$darken1</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           <code>$darken2</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           <code>$darken3</code>
         </div>
       </DocsShow>
@@ -236,16 +236,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/kcard.vue b/docs/pages/kcard.vue
index e2140295a..889979dee 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -256,12 +256,12 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Biology
                 </span>
@@ -281,7 +281,7 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
@@ -433,12 +433,12 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
                 >
                   Biology
                 </span>
diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
index ac5293981..4b5fe735c 100644
--- a/docs/pages/kcardgrid.vue
+++ b/docs/pages/kcardgrid.vue
@@ -263,7 +263,7 @@
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   {{ pill }}
                 </span>
@@ -325,7 +325,7 @@
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   {{ pill }}
                 </span>
@@ -451,24 +451,24 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
                   Read
                 </span>
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <template v-if="windowBreakpoint > 3">
                   <span
-                    :style="{ 'background-color': $themePalette.grey.v_50 }"
+                    :style="{ 'background-color': $themePalette.grey.v_100 }"
                   >
                     Biology
                   </span>
                   <span
-                    :style="{ 'background-color': $themePalette.grey.v_50 }"
+                    :style="{ 'background-color': $themePalette.grey.v_100 }"
                   >
                     Ecology
                   </span>
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 5fca08778..38aa3c3cb 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 771a8d304..3fe8cb47d 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -142,7 +142,7 @@
        * (3) a progressive loading experience as the colored background
        * is displayed while an image is loading.
        *
-       * Its default value is `$themePalette.grey.v_50`.
+       * Its default value is `$themePalette.grey.v_100`.
        */
       backgroundColor: {
         type: String,
@@ -175,7 +175,7 @@
       baseStyles() {
         const backgroundColor = this.backgroundColor
           ? this.backgroundColor
-          : this.$themePalette.grey.v_50;
+          : 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 86ac8c850..a76da44ee 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/KTable/index.vue b/lib/KTable/index.vue
index c3d743863..a8acb8814 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -24,9 +24,9 @@
                 'sticky-column': index === 0,
               }"
               :style="[getHeaderStyle(header),
-                       isColumnSortActive(index) ? { color: $themeBrand.primary.v_1000 } : { color: $themePalette.grey.v_800 },
+                       isColumnSortActive(index) ? { color: $themeBrand.primary.v_500 } : { color: $themePalette.grey.v_800 },
                        { backgroundColor: $themePalette.white } ,
-                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_50 } : {},
+                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_100 } : {},
                        { textAlign: getTextAlign(header.dataType) }]"
               role="columnheader"
               data-focus="true"
@@ -39,8 +39,8 @@
                 {{ header.label }}
               </slot>
               <span v-if="isColumnSortable(index)" class="sort-icon">
-                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="isColumnSortActive(index) ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
-                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="isColumnSortActive(index) ? $themeBrand.primary.v_1100 : $themePalette.grey.v_800 " /></span>
+                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="isColumnSortActive(index) ? $themeBrand.primary.v_600 : $themePalette.grey.v_800 " /></span>
+                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="isColumnSortActive(index) ? $themeBrand.primary.v_600 : $themePalette.grey.v_800 " /></span>
                 <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
               </span>
             </th>
@@ -251,7 +251,7 @@
       getRowStyle() {
         return rowIndex => {
           return this.hoveredRowIndex === rowIndex || this.focusedRowIndex === rowIndex
-            ? { backgroundColor: this.$themePalette.grey.v_50 }
+            ? { backgroundColor: this.$themePalette.grey.v_100 }
             : {};
         };
       },
@@ -265,7 +265,7 @@
             (this.hoveredRowIndex === rowIndex || this.focusedRowIndex === rowIndex) &&
             colIndex === 0
           ) {
-            styles.push({ backgroundColor: this.$themePalette.grey.v_50 });
+            styles.push({ backgroundColor: this.$themePalette.grey.v_100 });
           }
           return styles;
         };
@@ -496,7 +496,7 @@
       },
       setHighlightHeader(header, highlight) {
         header.style.backgroundColor = highlight
-          ? this.$themePalette.grey.v_50
+          ? this.$themePalette.grey.v_100
           : this.$themePalette.white;
       },
       highlightHeader(colIndex) {
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,