diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c5f1cd93..a3a381450 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- Put all new updates into this section, please -->
 
+- [#440]
+  - **Description:** Updates brand theme color tokens and token mapping within components
+  - **Products impact:** Updates to the UI
+  - **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545
+  - **Components:** -
+  - **Breaking:** - Yes
+  - **Impacts a11y:** - 
+  - **Guidance:** - There have been updates made to the brand, palette, and token colors. The theme color scales have been reduced to 6 levels, with some colors being removed. Additionally, new content-related token labels have been introduced and existing ones have been renamed.
+
+[#440]: https://github.com/learningequality/kolibri-design-system/pull/440
+
 - [#531]
   - **Description:** Remove unused `keen-ui` dependency
   - **Products impact:** none
diff --git a/docs/pages/buttons.vue b/docs/pages/buttons.vue
index b033f57dd..a119b30d2 100644
--- a/docs/pages/buttons.vue
+++ b/docs/pages/buttons.vue
@@ -144,13 +144,13 @@
         <KButtonGroup>
           <KButton
             text="Options"
-            :primary="true"
+            :primary="false"
             iconAfter="chevronDown"
           >
             <KDropdownMenu
               style="margin-right: 16px;"
               text="Primary"
-              :primary="true"
+              :primary="false"
               :options="['Option 1', 'Option 2']"
               appearance="raised-button"
             />
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index db6ecc511..32da77208 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_900" />
-      <DocsColorBlock name="brand.secondary.v_200" />
+      <DocsColorBlock name="brand.primary.v_1100" />
+      <DocsColorBlock name="brand.secondary.v_800" />
       <DocsColorBlock name="palette.grey.v_400" />
 
       <p>
@@ -173,27 +173,29 @@
       </DocsColorBlock>
 
       <h3>Content-related labels</h3>
-      <DocsColorBlock name="tokens.exercise" definition />
-      <DocsColorBlock name="tokens.video" definition />
-      <DocsColorBlock name="tokens.audio" definition />
-      <DocsColorBlock name="tokens.document" definition />
-      <DocsColorBlock name="tokens.html5" definition />
+      <DocsColorBlock name="tokens.practice" definition />
+      <DocsColorBlock name="tokens.watch" definition />
+      <DocsColorBlock name="tokens.listen" definition />
+      <DocsColorBlock name="tokens.read" definition />
+      <DocsColorBlock name="tokens.explore" definition />
+      <DocsColorBlock name="tokens.create" definition />
+      <DocsColorBlock name="tokens.reflect" definition />
       <DocsColorBlock name="tokens.topic" definition />
 
     </DocsPageSection>
 
     <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 ten brightness levels, named <code>v_50</code>, <code>v_100</code>, <code>v_20</code>, … <code>v_800</code>, <code>v_900</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_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</code>:
       </p>
-      <DocsColorBlock name="palette.blue.v_50" />
-      <DocsColorBlock name="palette.blue.v_100" />
-      <DocsColorBlock name="palette.blue.v_200" />
+      <DocsColorBlock name="palette.green.v_200" />
+      <DocsColorBlock name="palette.green.v_400" />
+      <DocsColorBlock name="palette.green.v_600" />
       <p style="margin-left: 60px">
         …
       </p>
-      <DocsColorBlock name="palette.blue.v_800" />
-      <DocsColorBlock name="palette.blue.v_900" />
+      <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>
@@ -203,9 +205,6 @@
       <p>
         Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
       </p>
-      <p>
-        The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:
-      </p>
 
       <div>
         <div class="palette-block">
diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue
index e00313b63..7787bf918 100644
--- a/docs/pages/kswitch.vue
+++ b/docs/pages/kswitch.vue
@@ -33,19 +33,19 @@
       <ul>
         <li>
           Thumb ON color:
-          <DocsInternalLink code text="palette.green.v_500" href="/colors#palette-green-v_500" />
+          <DocsInternalLink code text="brand.primary.v_1000" href="/colors#brand-primary-v_1000" />
         </li>
         <li>
           Track ON color:
-          <DocsInternalLink code text="palette.green.v_200" href="/colors#palette-green-v_200" />
+          <DocsInternalLink code text="brand.primary.v_400" href="/colors#brand-primary-v_400" />
         </li>
         <li>
           Thumb OFF color:
-          <DocsInternalLink code text="palette.grey.v_400" href="/colors#palette-grey-v_400" />
+          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
         </li>
         <li>
           Track OFF color:
-          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
+          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue
index c6d5f1597..ae865e0b1 100644
--- a/docs/pages/menus/index.vue
+++ b/docs/pages/menus/index.vue
@@ -99,7 +99,7 @@
         </li>
         <li>
           Iconography color:
-          <DocsInternalLink code text="palette.grey.v_900" href="/colors#palette-grey-v_900" />
+          <DocsInternalLink code text="palette.grey.v_800" href="/colors#palette-grey-v_800" />
         </li>
       </ul>
       <h3>Dropdown menu</h3>
diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue
index 07f40cf7e..7e8c126fc 100644
--- a/docs/pages/textfields/index.vue
+++ b/docs/pages/textfields/index.vue
@@ -188,7 +188,7 @@
         </li>
         <li>
           Bottom stroke color:
-          <DocsInternalLink code text="palette.grey.v_500" href="/colors#palette-grey-v_500" />
+          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
         </li>
         <li>
           Bottom stroke focused color:
@@ -196,7 +196,7 @@
         </li>
         <li>
           Label text color:
-          <DocsInternalLink code text="palette.grey.v_300" href="/colors#palette-grey-v_300" />
+          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
         </li>
         <li>
           Focused text color:
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 55d4d5670..ebfb82bb9 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -316,11 +316,6 @@ export default [
         isCode: true,
         keywords: ['button'],
       }),
-      new Page({
-        path: '/kcontentrenderer',
-        title: 'KContentRenderer',
-        isCode: true,
-      }),
       new Page({
         path: '/kgrid',
         title: 'KGrid',
diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
index e67d57fe3..f9c1869d2 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.secondary.v_50 } : {}
+                  { backgroundColor: $themeBrand.primary.v_200 } : {}
             ]"
             :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.secondary.v_50 } : {}
+                  { backgroundColor: $themeBrand.primary.v_200 } : {}
             ]"
             :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 a32b23ea0..a968e287d 100644
--- a/lib/KDateRange/KDateDay.vue
+++ b/lib/KDateRange/KDateDay.vue
@@ -69,7 +69,7 @@
       inRangeStyle() {
         return this.isInRange
           ? {
-              backgroundColor: this.$themeBrand.secondary.v_50,
+              backgroundColor: this.$themeBrand.primary.v_200,
               ':hover': {
                 backgroundColor: this.$themePalette.grey.v_200,
               },
@@ -79,7 +79,7 @@
       selectedStyle() {
         return this.isSelected
           ? {
-              backgroundColor: this.$themeBrand.secondary.v_600,
+              backgroundColor: this.$themeBrand.primary.v_1000,
               color: this.$themePalette.white + '!important',
             }
           : {};
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index 8129b0013..b26052fba 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -188,7 +188,7 @@
 
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
-  $k-switch-thumb-color: #fafafa !default;
+  $k-switch-thumb-color: #f5f5f5 !default;
   $k-switch-track-width: 34px !default;
   $k-switch-track-height: 14px !default;
 
@@ -248,7 +248,7 @@
     top: (($k-switch-thumb-size - $k-switch-track-height) / 2);
     width: $k-switch-track-width;
     height: $k-switch-track-height;
-    background-color: rgba(0, 0, 0, 0.26);
+    background-color: #cccccc;
     border-radius: 8px;
     transition: background-color 0.1s linear;
   }
@@ -288,10 +288,10 @@
   .k-switch--color-primary {
     &.is-checked:not(.is-disabled) {
       .k-switch-track {
-        background-color: #a5d6a7;
+        background-color: #b4c3fb;
       }
       .k-switch-thumb {
-        background-color: #4caf50;
+        background-color: #4368f5;
       }
     }
   }
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index 808d3b2f8..d254944cf 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -122,12 +122,12 @@
           return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
         }
 
-        if (this.primary) {
+        if (this.secondary) {
           return this.appearance === 'raised-button'
-            ? this.$themeTokens.textInverted
-            : this.$themeTokens.primary;
+            ? this.$themeBrand.textInverted
+            : this.$themeBrand.secondary;
         } else {
-          return this.$themeTokens.text;
+          return this.$themeBrand.text;
         }
       },
       htmlTag() {
@@ -139,9 +139,9 @@
         return 'button';
       },
       arrowStyles() {
-        if (this.primary) {
+        if (this.secondary) {
           return {
-            fill: this.$themeTokens.textInverted,
+            fill: this.$themeBrand.textInverted,
           };
         }
         return {};
diff --git a/lib/buttons-and-links/KRouterLink.vue b/lib/buttons-and-links/KRouterLink.vue
index 544a097f6..8befc3dc3 100644
--- a/lib/buttons-and-links/KRouterLink.vue
+++ b/lib/buttons-and-links/KRouterLink.vue
@@ -39,7 +39,7 @@
         v-if="iconAfter"
         :icon="iconAfter"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
         data-test="icon-after"
       />
     </slot>
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index 2e26cb3a7..f31665353 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -63,7 +63,7 @@ export default {
     linkStyle() {
       return {
         color: this.$themeTokens.link,
-        ':hover': { color: this.$themeTokens.linkDark },
+        ':hover': { color: this.$themeTokens.primaryDark },
         ':focus': this.$coreOutline,
         ...(this.disabled ? disabledStyle : {}),
       };
@@ -92,21 +92,21 @@ export default {
       return {
         color: this.$themeTokens.primary,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_300,
+          backgroundColor: this.$themePalette.grey.v_100,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,
         svg: {
-          fill: this.$themeTokens.primary,
+          fill: this.$themeTokens.secondary,
         },
       };
     },
     secondaryRaisedStyle() {
       return {
         color: this.$themeTokens.text,
-        backgroundColor: this.$themePalette.grey.v_200,
+        backgroundColor: this.$themePalette.grey.v_50,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_300,
+          backgroundColor: this.$themePalette.grey.v_100,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: '6px' },
         ':disabled': disabledStyle,
@@ -119,7 +119,7 @@ export default {
       return {
         color: this.$themeTokens.text,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_300,
+          backgroundColor: this.$themePalette.grey.v_200,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,
diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js
index 0dabcc0a8..2563b3c91 100644
--- a/lib/styles/colorsDefault.js
+++ b/lib/styles/colorsDefault.js
@@ -1,70 +1,66 @@
 export const defaultTokenMapping = {
   // Branded UI colors
-  primary: 'brand.primary.v_400',
-  primaryDark: 'brand.primary.v_700',
-  appBar: 'brand.primary.v_400',
-  appBarDark: 'brand.primary.v_700',
-  appBarFullscreen: 'palette.grey.v_900',
-  appBarFullscreenDark: 'black',
-  link: 'brand.primary.v_400',
-  linkDark: 'brand.primary.v_700',
-  loading: 'brand.secondary.v_200',
-  focusOutline: 'brand.secondary.v_200',
+  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',
+  appBarDark: 'palette.black',
+  link: 'brand.primary.v_1000',
+  loading: 'palette.grey.v_800',
+  focusOutline: 'palette.lightblue.v_800',
 
   // Generic UI colors
-  text: 'palette.grey.v_900',
-  textDisabled: 'palette.grey.v_300',
-  annotation: 'palette.grey.v_700',
+  text: 'palette.black',
+  textDisabled: 'palette.grey.v_200',
+  annotation: 'palette.grey.v_600',
   textInverted: 'palette.white',
   surface: 'palette.white',
-  fineLine: '#dedede',
+  fineLine: 'palette.grey.v_100',
 
   // general semantic colors
-  error: 'palette.red.v_800',
-  success: 'palette.green.v_700',
+  error: 'palette.red.v_1100',
+  incorrect: 'palette.red.v_1100',
+  success: 'palette.green.v_1100',
+  correct: 'palette.green.v_1100',
 
   // Kolibri-specific semantic colors
-  progress: 'palette.lightblue.v_500',
-  mastered: 'palette.amber.v_500',
-  correct: 'palette.green.v_600',
-  incorrect: 'palette.red.v_800',
-  coachContent: 'palette.lightblue.v_800',
-  superAdmin: 'palette.amber.v_600',
+  progress: 'palette.lightblue.v_1000',
+  mastered: 'brand.secondary.v_1000',
+  warning: 'brand.secondary.v_1000',
+  incomplete: 'brand.secondary.v_1000',
+  coachContent: 'palette.lightblue.v_1100',
+  superAdmin: 'brand.secondary.v_1000',
 
   // content colors
-  exercise: 'palette.cyan.v_600',
-  video: 'palette.indigo.v_700',
-  audio: 'palette.pink.v_400',
-  document: 'palette.deeporange.v_600',
-  html5: 'palette.yellow.v_800',
+  practice: 'brand.primary.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: 'brand.secondary.v_1000',
   topic: 'palette.grey.v_800',
-  slideshow: 'palette.green.v_400',
 };
 
-// set some arbitrary colors
+// set core brand colors
 export const defaultBrandColors = {
+  // blues
   primary: {
-    v_50: '#f0e7ed',
-    v_100: '#dbc3d4',
-    v_200: '#c59db9',
-    v_300: '#ac799d',
-    v_400: '#996189',
-    v_500: '#874e77',
-    v_600: '#7c4870',
-    v_700: '#6e4167',
-    v_800: '#5f3b5c',
-    v_900: '#4b2e4d',
+    v_200: '#D9E1FD',
+    v_400: '#B4C3FB',
+    v_600: '#8EA4F9',
+    v_800: '#6986F7',
+    v_1000: '#4368F5',
+    v_1100: '#2547F3',
   },
+  // yellows
   secondary: {
-    v_50: '#e3f0ed',
-    v_100: '#badbd2',
-    v_200: '#8dc5b6',
-    v_300: '#62af9a',
-    v_400: '#479e86',
-    v_500: '#368d74',
-    v_600: '#328168',
-    v_700: '#2c715a',
-    v_800: '#26614d',
-    v_900: '#1b4634',
+    v_200: '#FFF5CC',
+    v_400: '#FFEA99',
+    v_600: '#FFE066',
+    v_800: '#FFD533',
+    v_1000: '#FFCB00',
+    v_1100: '#E5B700',
   },
 };
diff --git a/lib/styles/colorsMaterial.js b/lib/styles/colorsMaterial.js
index fea746e01..8d7429af7 100644
--- a/lib/styles/colorsMaterial.js
+++ b/lib/styles/colorsMaterial.js
@@ -2,295 +2,59 @@ export default {
   black: '#000000',
   white: '#ffffff',
   red: {
-    v_50: '#ffebee',
-    v_100: '#ffcdd2',
-    v_200: '#ef9a9a',
-    v_300: '#e57373',
-    v_400: '#ef5350',
-    v_500: '#f44336',
-    v_600: '#e53935',
-    v_700: '#d32f2f',
-    v_800: '#c62828',
-    v_900: '#b71c1c',
-    v_a100: '#ff8a80',
-    v_a200: '#ff5252',
-    v_a400: '#ff1744',
-    v_a700: '#d50000',
-  },
-  pink: {
-    v_50: '#fce4ec',
-    v_100: '#f8bbd0',
-    v_200: '#f48fb1',
-    v_300: '#f06292',
-    v_400: '#ec407a',
-    v_500: '#e91e63',
-    v_600: '#d81b60',
-    v_700: '#c2185b',
-    v_800: '#ad1457',
-    v_900: '#880e4f',
-    v_a100: '#ff80ab',
-    v_a200: '#ff4081',
-    v_a400: '#f50057',
-    v_a700: '#c51162',
-  },
-  purple: {
-    v_50: '#f3e5f5',
-    v_100: '#e1bee7',
-    v_200: '#ce93d8',
-    v_300: '#ba68c8',
-    v_400: '#ab47bc',
-    v_500: '#9c27b0',
-    v_600: '#8e24aa',
-    v_700: '#7b1fa2',
-    v_800: '#6a1b9a',
-    v_900: '#4a148c',
-    v_a100: '#ea80fc',
-    v_a200: '#e040fb',
-    v_a400: '#d500f9',
-    v_a700: '#aa00ff',
-  },
-  deeppurple: {
-    v_50: '#ede7f6',
-    v_100: '#d1c4e9',
-    v_200: '#b39ddb',
-    v_300: '#9575cd',
-    v_400: '#7e57c2',
-    v_500: '#673ab7',
-    v_600: '#5e35b1',
-    v_700: '#512da8',
-    v_800: '#4527a0',
-    v_900: '#311b92',
-    v_a100: '#b388ff',
-    v_a200: '#7c4dff',
-    v_a400: '#651fff',
-    v_a700: '#6200ea',
-  },
-  indigo: {
-    v_50: '#e8eaf6',
-    v_100: '#c5cae9',
-    v_200: '#9fa8da',
-    v_300: '#7986cb',
-    v_400: '#5c6bc0',
-    v_500: '#3f51b5',
-    v_600: '#3949ab',
-    v_700: '#303f9f',
-    v_800: '#283593',
-    v_900: '#1a237e',
-    v_a100: '#8c9eff',
-    v_a200: '#536dfe',
-    v_a400: '#3d5afe',
-    v_a700: '#304ffe',
-  },
-  blue: {
-    v_50: '#e3f2fd',
-    v_100: '#bbdefb',
-    v_200: '#90caf9',
-    v_300: '#64b5f6',
-    v_400: '#42a5f5',
-    v_500: '#2196f3',
-    v_600: '#1e88e5',
-    v_700: '#1976d2',
-    v_800: '#1565c0',
-    v_900: '#0d47a1',
-    v_a100: '#82b1ff',
-    v_a200: '#448aff',
-    v_a400: '#2979ff',
-    v_a700: '#2962ff',
-  },
-  lightblue: {
-    v_50: '#e1f5fe',
-    v_100: '#b3e5fc',
-    v_200: '#81d4fa',
-    v_300: '#4fc3f7',
-    v_400: '#29b6f6',
-    v_500: '#03a9f4',
-    v_600: '#039be5',
-    v_700: '#0288d1',
-    v_800: '#0277bd',
-    v_900: '#01579b',
-    v_a100: '#80d8ff',
-    v_a200: '#40c4ff',
-    v_a400: '#00b0ff',
-    v_a700: '#0091ea',
-  },
-  cyan: {
-    v_50: '#e0f7fa',
-    v_100: '#b2ebf2',
-    v_200: '#80deea',
-    v_300: '#4dd0e1',
-    v_400: '#26c6da',
-    v_500: '#00bcd4',
-    v_600: '#00acc1',
-    v_700: '#0097a7',
-    v_800: '#00838f',
-    v_900: '#006064',
-    v_a100: '#84ffff',
-    v_a200: '#18ffff',
-    v_a400: '#00e5ff',
-    v_a700: '#00b8d4',
-  },
-  teal: {
-    v_50: '#e0f2f1',
-    v_100: '#b2dfdb',
-    v_200: '#80cbc4',
-    v_300: '#4db6ac',
-    v_400: '#26a69a',
-    v_500: '#009688',
-    v_600: '#00897b',
-    v_700: '#00796b',
-    v_800: '#00695c',
-    v_900: '#004d40',
-    v_a100: '#a7ffeb',
-    v_a200: '#64ffda',
-    v_a400: '#1de9b6',
-    v_a700: '#00bfa5',
+    v_200: '#FFD9D3',
+    v_400: '#FFB4A7',
+    v_600: '#FF8E7C',
+    v_800: '#FF6950',
+    v_1000: '#FF4324',
+    v_1100: '#D21E00',
   },
   green: {
-    v_50: '#e8f5e9',
-    v_100: '#c8e6c9',
-    v_200: '#a5d6a7',
-    v_300: '#81c784',
-    v_400: '#66bb6a',
-    v_500: '#4caf50',
-    v_600: '#43a047',
-    v_700: '#388e3c',
-    v_800: '#2e7d32',
-    v_900: '#1b5e20',
-    v_a100: '#b9f6ca',
-    v_a200: '#69f0ae',
-    v_a400: '#00e676',
-    v_a700: '#00c853',
-  },
-  lightgreen: {
-    v_50: '#f1f8e9',
-    v_100: '#dcedc8',
-    v_200: '#c5e1a5',
-    v_300: '#aed581',
-    v_400: '#9ccc65',
-    v_500: '#8bc34a',
-    v_600: '#7cb342',
-    v_700: '#689f38',
-    v_800: '#558b2f',
-    v_900: '#33691e',
-    v_a100: '#ccff90',
-    v_a200: '#b2ff59',
-    v_a400: '#76ff03',
-    v_a700: '#64dd17',
-  },
-  lime: {
-    v_50: '#f9fbe7',
-    v_100: '#f0f4c3',
-    v_200: '#e6ee9c',
-    v_300: '#dce775',
-    v_400: '#d4e157',
-    v_500: '#cddc39',
-    v_600: '#c0ca33',
-    v_700: '#afb42b',
-    v_800: '#9e9d24',
-    v_900: '#827717',
-    v_a100: '#f4ff81',
-    v_a200: '#eeff41',
-    v_a400: '#c6ff00',
-    v_a700: '#aeea00',
-  },
-  yellow: {
-    v_50: '#fffde7',
-    v_100: '#fff9c4',
-    v_200: '#fff59d',
-    v_300: '#fff176',
-    v_400: '#ffee58',
-    v_500: '#ffeb3b',
-    v_600: '#fdd835',
-    v_700: '#fbc02d',
-    v_800: '#f9a825',
-    v_900: '#f57f17',
-    v_a100: '#ffff8d',
-    v_a200: '#ffff00',
-    v_a400: '#ffea00',
-    v_a700: '#ffd600',
-  },
-  amber: {
-    v_50: '#fff8e1',
-    v_100: '#ffecb3',
-    v_200: '#ffe082',
-    v_300: '#ffd54f',
-    v_400: '#ffca28',
-    v_500: '#ffc107',
-    v_600: '#ffb300',
-    v_700: '#ffa000',
-    v_800: '#ff8f00',
-    v_900: '#ff6f00',
-    v_a100: '#ffe57f',
-    v_a200: '#ffd740',
-    v_a400: '#ffc400',
-    v_a700: '#ffab00',
+    v_200: '#CCF4D8',
+    v_400: '#99E9B1',
+    v_600: '#66DD8A',
+    v_800: '#33D263',
+    v_1000: '#00C73C',
+    v_1100: '#00992E',
   },
   orange: {
-    v_50: '#fff3e0',
-    v_100: '#ffe0b2',
-    v_200: '#ffcc80',
-    v_300: '#ffb74d',
-    v_400: '#ffa726',
-    v_500: '#ff9800',
-    v_600: '#fb8c00',
-    v_700: '#f57c00',
-    v_800: '#ef6c00',
-    v_900: '#e65100',
-    v_a100: '#ffd180',
-    v_a200: '#ffab40',
-    v_a400: '#ff9100',
-    v_a700: '#ff6d00',
+    v_200: '#FFE4CC',
+    v_400: '#FFC899',
+    v_600: '#FFAD66',
+    v_800: '#FF9133',
+    v_1000: '#FF7600',
+    v_1100: '#E56A00',
   },
-  deeporange: {
-    v_50: '#fbe9e7',
-    v_100: '#ffccbc',
-    v_200: '#ffab91',
-    v_300: '#ff8a65',
-    v_400: '#ff7043',
-    v_500: '#ff5722',
-    v_600: '#f4511e',
-    v_700: '#e64a19',
-    v_800: '#d84315',
-    v_900: '#bf360c',
-    v_a100: '#ff9e80',
-    v_a200: '#ff6e40',
-    v_a400: '#ff3d00',
-    v_a700: '#dd2c00',
+  pink: {
+    v_200: '#FFE5E8',
+    v_400: '#FFCCD1',
+    v_600: '#FFB2BB',
+    v_800: '#FF99A4',
+    v_1000: '#FF7F8D',
+    v_1100: '#F76474',
+  },
+  darkgreen: {
+    v_200: '#CCDDD6',
+    v_400: '#99BBAD',
+    v_600: '#669A85',
+    v_800: '#33785C',
+    v_1000: '#005633',
+    v_1100: '#00331E',
   },
-  brown: {
-    v_50: '#efebe9',
-    v_100: '#d7ccc8',
-    v_200: '#bcaaa4',
-    v_300: '#a1887f',
-    v_400: '#8d6e63',
-    v_500: '#795548',
-    v_600: '#6d4c41',
-    v_700: '#5d4037',
-    v_800: '#4e342e',
-    v_900: '#3e2723',
+  lightblue: {
+    v_200: '#CCEAFC',
+    v_400: '#99D5FA',
+    v_600: '#66C1F7',
+    v_800: '#33ACF5',
+    v_1000: '#0097F2',
+    v_1100: '#0079C2',
   },
   grey: {
-    v_50: '#fafafa',
-    v_100: '#f5f5f5',
-    v_200: '#eeeeee',
-    v_300: '#e0e0e0',
-    v_400: '#bdbdbd',
-    v_500: '#9e9e9e',
-    v_600: '#757575',
-    v_700: '#616161',
-    v_800: '#424242',
-    v_900: '#212121',
-  },
-  bluegrey: {
-    v_50: '#eceff1',
-    v_100: '#cfd8dc',
-    v_200: '#b0bec5',
-    v_300: '#90a4ae',
-    v_400: '#78909c',
-    v_500: '#607d8b',
-    v_600: '#546e7a',
-    v_700: '#455a64',
-    v_800: '#37474f',
-    v_900: '#263238',
+    v_50: '#F5F5F5',
+    v_100: '#E6E6E6',
+    v_200: '#CCCCCC',
+    v_400: '#999999',
+    v_600: '#666666',
+    v_800: '#333333',
   },
 };
diff --git a/lib/tabs/KTabsList.vue b/lib/tabs/KTabsList.vue
index 1c9048b47..39e998cb8 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.$themePalette.grey.v_300;
+          : this.$themeBrand.primary.v_200;
         return {
           color,
           backgroundColor,
diff --git a/lib/tabs/tabsMixin.js b/lib/tabs/tabsMixin.js
index 2d85012bb..a027649d4 100644
--- a/lib/tabs/tabsMixin.js
+++ b/lib/tabs/tabsMixin.js
@@ -73,7 +73,7 @@ export default {
     },
     /**
      * Tabs hover background color.
-     * Defaults to `$themePalette.grey.v_300`.
+     * Defaults to `$themeBrand.primary.v_200`.
      */
     hoverBackgroundColor: {
       type: String,