diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml
index cbab1b869..f3ceae972 100644
--- a/.github/workflows/notify_team_new_comment.yml
+++ b/.github/workflows/notify_team_new_comment.yml
@@ -27,7 +27,7 @@ jobs:
         env:
             SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
             SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
-        uses: slackapi/slack-github-action@v1.26.0
+        uses: slackapi/slack-github-action@v1.27.0
         with:
           payload: |
             {
diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index 992ca0ec7..046789715 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -59,7 +59,7 @@ jobs:
 
           with open("CHANGELOG.md", "w") as f:
               f.write(new_changelog)
-      - uses: tibdex/github-app-token@v1
+      - uses: tibdex/github-app-token@v2
         id: generate-token
         with:
           app_id: ${{ secrets.LE_BOT_APP_ID }}
diff --git a/.gitignore b/.gitignore
index b81f07174..9e4bc7763 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+docs/pages/playground.vue
diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd16ccf30..82b09598a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,209 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#815]
+  - **Description:** removed the deprecated dropshadows
+  - **Products impact:**  none
+  - **Addresses:** #725
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:**  -
+
+[#815]: https://github.com/learningequality/kolibri-design-system/pull/815
+
+
+
+- [#822]
+  - **Description:** Bump KDS version to 5.0.0-rc9.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#822]: https://github.com/learningequality/kolibri-design-system/pull/822
+
+
+
+- [#820]
+  - **Description:** Fixes KCard area not taking available width
+  - **Products impact:** bugfix
+  - **Addresses:** A bug discovered in https://github.com/learningequality/studio/pull/4803
+  - **Components:** `KCard`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#820]: https://github.com/learningequality/kolibri-design-system/pull/820
+
+
+
+- [#769]
+  - **Description:** Bump tippy.js from 4.2.1 to 4.3.5
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#769]: https://github.com/learningequality/kolibri-design-system/pull/769
+
+
+
+- [#811]
+  - **Description:** Bump elliptic from 6.5.7 to 6.6.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#811]: https://github.com/learningequality/kolibri-design-system/pull/811
+
+
+
+- [#796]
+  - **Description:** Adds an option to override `KCardGrid` base layouts partially or completely via the new prop `layoutOverride`
+  - **Products impact:** new API
+  - **Addresses:** Allows advanced grids customization
+  - **Components:** `KCardGrid`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#796]: https://github.com/learningequality/kolibri-design-system/pull/796
+
+- [#796]
+  - **Description:** Adds loading skeletons to `KCardGrid` and a way to configure them via the new prop `skeletonsConfig`
+  - **Products impact:** new API
+  - **Addresses:** Ensures smooth loading experience
+  - **Components:** `KCardGrid`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#796]: https://github.com/learningequality/kolibri-design-system/pull/796
+
+
+
+- [#810]
+  - **Description:** Bump KDS version to 5.0.0-rc8.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#810]: https://github.com/learningequality/kolibri-design-system/pull/810
+
+
+
+- [#808]
+  - **Description:** Adds ariaLabelledBy prop to KSwitch.
+  - **Products impact:** Improved accessibility.
+  - **Addresses:** -[KSwitch]: Add ariaLabelledBy prop #806
+  - **Components:** KSwitch
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:**-
+
+[#808]: https://github.com/learningequality/kolibri-design-system/pull/808
+
+
+
+- [#799]
+  - **Description:**  copy FocusTrap from kolibri into KFocusTrap in the KDS and use it in the KModal
+  - **Products impact:** -
+  - **Addresses:** #746
+  - **Components:** KModal , KFocuaTrap
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#799]: https://github.com/learningequality/kolibri-design-system/pull/799
+
+
+
+- [#807]
+  - **Description:** Bump serve-static from 1.15.0 to 1.16.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#807]: https://github.com/learningequality/kolibri-design-system/pull/807
+
+
+
+- [#771]
+  - **Description:** Bump slackapi/slack-github-action from 1.26.0 to 1.27.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#771]: https://github.com/learningequality/kolibri-design-system/pull/771
+
+
+
+- [#770]
+  - **Description:** Bump tibdex/github-app-token from 1 to 2
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#770]: https://github.com/learningequality/kolibri-design-system/pull/770
+
+
+
+- [#777]
+  - **Description:** Bump express from 4.19.2 to 4.20.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#777]: https://github.com/learningequality/kolibri-design-system/pull/777
+
+
+
+- [#803]
+  - **Description:** Adds the option to get back to the unsorted state after sorting a KTable column, making it flow to be unsorted->ascending -> descending -> unsorted.
+  - Products impact: updated API
+  - Addresses: https://github.com/learningequality/kolibri-design-system/issues/797
+  - Components: KTable
+  - Breaking: no
+  - Impacts : Adds flexibility in how users can interact with the table, especially when sorting is not desired or needs to be reset.
+
+
+
+- [#800]
+  - **Description:** Merges v4.6.0 into develop
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -.
+
+[#800]: https://github.com/learningequality/kolibri-design-system/pull/800
+
+
+
 - [#798]
   - **Description:**  Adds custom computed property `computedAriaLabel` that dynamically sets the `ariaLabel` for `KIconButton` based on the `tooltip` prop when `ariaLabel` is not provided.
   - **Products impact:** none
@@ -710,8 +913,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/assets/main.scss b/docs/assets/main.scss
index 60f0408ae..a4c9f877b 100644
--- a/docs/assets/main.scss
+++ b/docs/assets/main.scss
@@ -16,7 +16,6 @@ code {
   padding-left: 0.25em;
   font-family: 'Source Code Pro', monospace;
   font-weight: 400;
-  white-space: nowrap;
   background-color: #918caf24;
   border-radius: 0.25em;
 }
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..0e1dcef4e 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -7,7 +7,11 @@
       <p>It manages the layout, including the thumbnail image, title, and other content. It offers several base layouts and many customization options. Cards like the examples shown can be created, and many others.</p>
 
       <DocsShow block :style="{ maxWidth: '800px' }">
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig1"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="3"
             :orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
@@ -243,7 +247,11 @@
       <p><code>KCard</code> has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining <code>orientation</code>, <code>thumbnailDisplay</code> and <code>thumbnailAlign</code> props, the following card layouts can be achieved to organize diverse kinds of content:</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-3">
+        <KCardGrid
+          layout="1-2-3"
+          :skeletonsConfig="skeletonsConfig2"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
@@ -256,12 +264,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 +289,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>
@@ -303,7 +311,11 @@
       </DocsShow>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-2">
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig3"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             orientation="horizontal"
@@ -324,7 +336,11 @@
       </DocsShow>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-3">
+        <KCardGrid
+          layout="1-2-3"
+          :skeletonsConfig="skeletonsConfig4"
+          :loading="loading"
+        >
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
@@ -413,7 +429,11 @@
       <p>Use <code>aboveTitle</code>, <code>belowTitle</code>, and <code>footer</code> slots to add content to a card. <code>KCard</code> will organize these areas according to its <DocsInternalLink text="layout configuration" href="#layout" />. Apply custom styling to the inner content of slots to achieve desired effects.</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig5"
+          :loading="loading"  
+        >
           <KCard
             :to="{ path: '#guidelines' }"
             :headingLevel="4"
@@ -433,12 +453,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>
@@ -494,10 +514,14 @@
 
       <p>When <code>KCard</code> is set to display the thumbnail, the thumbnail area acts as a placeholder if the image is missing, fails to load, or is still loading. In such cases, a light gray background is shown in place of the image.</p>
 
-      <p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> This serves as a progressive loading experience where the placeholder element is displayed until the image is loaded, and is particularly important on slower networks.</p>
+      <p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> It serves as fallback content if the image fails to load unexpectedly.</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig6"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             :orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
@@ -544,7 +568,11 @@
       <p><em>This applies to all slot content, but considering accessibility is especially important with interactive elements.</em> For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig7"
+          :loading="loading"
+        >
           <DocsKCard
             :headingLevel="4"
             :orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
@@ -592,7 +620,11 @@
       <p>Managing the selection state is not <code>KCard</code>'s responsibility.</p>
 
       <DocsShow block :style="{ maxWidth: '800px' }">
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig8"
+          :loading="loading"
+        >
           <DocsKCard
             :to="{ path: '#guidelines' }"
             :headingLevel="4"
@@ -708,8 +740,134 @@
         isBookmarked3: false,
         isFirstCardChecked: false,
         isSecondCardChecked: false,
+        loading: true,
+        skeletonsConfig1: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '490px',
+          },
+          {
+            breakpoints: [2],
+            height: '430px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '220px',
+          },
+        ],
+        skeletonsConfig2: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '490px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            height: '420px',
+          },
+        ],
+        skeletonsConfig3: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailDisplay: 'large',
+            thumbnailAlign: 'left',
+            height: '310px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '240px',
+          },
+        ],
+        skeletonsConfig4: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            height: '290px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '225px',
+          },
+        ],
+        skeletonsConfig5: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailDisplay: 'large',
+            thumbnailAlign: 'left',
+            height: '300px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            height: '190px',
+          },
+        ],
+        skeletonsConfig6: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '460px',
+          },
+          {
+            breakpoints: [2],
+            height: '390px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '170px',
+          },
+        ],
+        skeletonsConfig7: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '460px',
+          },
+          {
+            breakpoints: [2],
+            height: '390px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '170px',
+          },
+        ],
+        skeletonsConfig8: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '400px',
+          },
+          {
+            breakpoints: [2],
+            height: '380px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '180px',
+          },
+        ],
       };
     },
+    mounted() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 3000);
+    },
   };
 
 </script>
diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
index ac5293981..7b33dbb99 100644
--- a/docs/pages/kcardgrid.vue
+++ b/docs/pages/kcardgrid.vue
@@ -4,7 +4,7 @@
     <DocsPageSection title="Overview" anchor="#overview">
       <p>Displays a grid of cards <DocsLibraryLink component="KCard" />.</p>
 
-      <p><code>KCardGrid</code> provides base layouts for the most common grids in our ecosystem, as well as advanced configuration via <code>useKCardGrid</code> (TBD), allowing customization or complete override of the base layouts.</p>
+      <p><code>KCardGrid</code> provides base layouts for the most common grids in our ecosystem, as well as customization or complete override of the base layouts.</p>
 
       <p>Together with <code>KCard</code>, it ensures accessible navigation within card lists, such as announcing only their titles when using the tab key to avoid overwhelming screen reader outputs.</p>
 
@@ -28,6 +28,7 @@
           Ensure robust content tolerance and consistent content alignment (<DocsInternalLink text="Card height, content tolerance and  alignment" href="#card-height-and-alignment" />)
         </li>
         <li>Preview cards on all screen sizes  (<DocsInternalLink text="Fine-tuning responsiveness" href="#fine-tuning-responsiveness" />)</li>
+        <li>Configure loading skeleton cards to match the expected visual output of cards with loaded data as closely as possible on all screen sizes (<DocsInternalLink text="Loading state" href="#loading-state" />)</li>
       </ul>
 
       <p>Also follow <DocsInternalLink text="KCard guidelines" href="/kcard#guidelines" />.</p>
@@ -37,10 +38,10 @@
       <DocsSubNav
         :items="[
           { text: 'Base layouts', href: '#base-layouts' },
-          { text: 'Layout customization (TBD)', href: '#layout-customization' },
+          { text: 'Layout customization', href: '#layout-customization' },
           { text: 'Card height, content tolerance and  alignment', href: '#card-height-and-alignment' },
           { text: 'Fine-tuning responsiveness', href: '#fine-tuning-responsiveness' },
-          { text: 'Loading state (TBD)', href: '#loading-state' },
+          { text: 'Loading state', href: '#loading-state' },
         ]"
       />
 
@@ -85,7 +86,11 @@
       </DocsToggleContent>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig1"
+          :loading="loading"
+        >
           <DocsKCard
             v-for="i in 2"
             :key="i"
@@ -141,7 +146,11 @@
       </DocsToggleContent>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-2">
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig2"
+          :loading="loading"  
+        >
           <DocsKCard
             v-for="i in 3"
             :key="i"
@@ -196,7 +205,11 @@
       </DocsToggleContent>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-3">
+        <KCardGrid
+          layout="1-2-3"
+          :skeletonsConfig="skeletonsConfig3"
+          :loading="loading"
+        >
           <DocsKCard
             v-for="i in 5"
             :key="i"
@@ -222,7 +235,71 @@
         <DocsAnchorTarget anchor="#layout-customization" />
       </h3>
 
-      <p>Base layouts can be customized or even completely overriden. Refer to <code>useKCardGrid</code> (TBD).</p>
+      <p>Base layouts can be customized or even completely overriden via the <code>layoutOverride</code> prop. <code>layoutOverride</code> takes an array of objects <code>{ breakpoints, cardsPerRow, columnGap, rowGap }</code>, where:</p>
+
+      <ul>
+        <li><code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the <DocsInternalLink text="window breakpoint levels" href="/layout#responsiveness" />. All other attributes in the same object take effect on these breakpoints.</li>
+        <li><code>cardsPerRow</code> overrides the number of cards per row for the specified breakpoints.</li>
+        <li><code>columnGap</code>/<code>rowGap</code> overrides grid column/row gaps for the specified breakpoints.</li>
+      </ul>
+
+      <p>For example:</p>
+
+      <DocsShow block>
+        <KCardGrid
+          layout="1-2-3"
+          :layoutOverride="layoutOverride"
+          :skeletonsConfig="skeletonsConfig4"
+          :loading="loading"
+        >
+          <DocsKCard
+            v-for="i in 6"
+            :key="i"
+            :headingLevel="6"
+            :prependTitle="`(${i})`"
+            hideFooter
+          />
+        </KCardGrid>
+      </DocsShow>
+
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KCardGrid
+          layout="1-2-3"
+          :layoutOverride="layoutOverride"
+        >
+          <KCard
+            v-for="i in 6"
+            ...
+          />
+        </KCardGrid>
+      </DocsShowCode>
+      <!-- eslint-enable -->
+
+      <!-- eslint-disable -->
+      <DocsShowCode language="javascript">
+        export default {
+          ...
+          data() {
+            return {
+              layoutOverride: [
+                {
+                  breakpoints: [0, 1],
+                  columnGap: '20px',
+                  rowGap: '20px',
+                },
+                {
+                  breakpoints: [4, 5, 6, 7],
+                  cardsPerRow: 4,
+                },
+              ],
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+
+      <p>Here, the base <code>1-2-3</code> layout is overriden partially. Column and row gaps are decreased to <code>20px</code> on breakpoints <code>0-1</code>, and the number of cards per row is increased to 4 on breakpoints <code>4-7</code>.</p>
 
       <h3>
         Card height, content tolerance and  alignment
@@ -233,8 +310,12 @@
 
       <p><em>Setting height on cards is discouraged. Instead, manage height bottom-up, for example by setting height on card sections, using text truncation, or other ways to limit its inner content.</em> Such approaches ensure content tolerance, prevent from unexpected overflows or excessive height, and keep vertical alignment of card sections consistent on a grid row. This is especially important when dealing with unknown lenghts or amounts of content displayed in cards. Consider:</p>
 
-      <DocsShow language="html">
-        <KCardGrid layout="1-2-3">
+      <DocsShow block>
+        <KCardGrid
+          layout="1-2-3"
+          :skeletonsConfig="skeletonsConfig5"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             preserveAboveTitle
@@ -263,7 +344,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 +406,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>
@@ -402,7 +483,11 @@
       <p>Grid configuration can be combined with <code>KCard</code>'s settings to further improve responsive experience. A common pattern is switching <code>KCard</code>'s horizontal orientation to vertical for smaller screens to organize content more effectively in limited space:</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-2">
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig6"
+          :loading="loading"  
+        >
           <DocsKCard
             v-for="i in 2"
             :key="i"
@@ -441,7 +526,11 @@
       <p>This technique also works for adjusting <code>KCard</code> slots content. In the following example, some metadata pills are hidden on smaller screens:</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-2">
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig7"
+          :loading="loading"  
+        >
           <DocsKCard
             v-for="i in 2"
             :key="i"
@@ -451,24 +540,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>
@@ -504,7 +593,117 @@
         <DocsAnchorTarget anchor="#loading-state" />
       </h3>
 
-      <p>When cards are loading, <code>KCardGrid</code> displays skeleton cards...(TBD)</p>
+      <p>While data is loading, <code>KCardGrid</code> shows loading skeleton cards. Use the <code>loading</code> prop to toggle the loading state. Note that <code>KCardGrid</code> internal optimizations may affect how closely the visual loading experience matches the <code>loading</code> value:</p>
+
+      <ul>
+        <li>The loading skeletons won't be displayed for short loading times (&lt; 1s)</li>
+        <li>When the loading skeletons are displayed, they will be visible for at least 1s</li>
+      </ul>
+
+      <p>Use the buttons in the example below to preview.</p>
+
+      <h4>Number of loading skeletons <DocsAnchorTarget anchor="#loading-state-skeletons-count" /></h4>
+
+      <p>By default, the number of loading skeletons corresponds to the number of cards in a single grid row if it were full. This behavior can be overridden via the <code>count</code> attribute (below), however do not override it unless indicated in the designs.</p>
+
+      <h4>Loading skeletons configuration</h4>
+
+      <p>Use the <code>skeletonsConfig</code> prop to configure skeleton cards to match the expected visual output of loaded cards on all screen sizes. Preview the layout and height of cards with loaded data and adjust <code>skeletonsConfig</code> accordingly.</p>
+
+      <p><code>skeletonsConfig</code> takes an array of objects <code>{ breakpoints, count, height, orientation, thumbnailDisplay, thumbnailAlign }</code>, where:</p>
+
+      <ul>
+        <li><code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the <DocsInternalLink text="window breakpoint levels" href="/layout#responsiveness" />. All other attributes in the same object take effect on these breakpoints.</li>
+        <li><code>count</code> sets the number of skeleton cards for the specified breakpoints. See <DocsInternalLink text="Number of loading skeletons" href="#loading-state-skeletons-count" />.</li>
+        <li><code>height</code> sets the height of skeleton cards for the specified breakpoints.</li>
+        <li><code>orientation</code> sets the orientation of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's orientation" href="/kcard#prop:orientation" code />.</li>
+        <li><code>thumbnailDisplay</code> sets the thumbnail display of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's thumbnailDisplay" href="/kcard#prop:thumbnailDisplay" code />.</li>
+        <li><code>thumbnailAlign</code> sets the thumbnail alignment of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's thumbnailAlign" href="/kcard#prop:thumbnailAlign" code />.</li>
+      </ul>
+
+      <p>For easier development, enable the <code>debug</code> prop to display the current breakpoint in the top left corner of the grid. Use the button in the example below to preview the debug mode.</p>
+
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <KButtonGroup>
+          <KButton primary @click="load500">
+            Load (0.5 s)
+          </KButton>
+          <KButton primary @click="load1200">
+            Load (1.2 s)
+          </KButton>
+          <KButton primary @click="load4000">
+            Load (4 s)
+          </KButton>
+          <KButton @click="debug = !debug">
+            Debug: {{ debug ? 'On' : 'Off' }}
+          </KButton>
+        </KButtonGroup>
+      </div>
+
+      <DocsShow block>
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig8"
+          :loading="loading"
+          :debug="debug"
+        >
+          <DocsKCard
+            v-for="i in 3"
+            :key="i"
+            :headingLevel="4"
+            :orientation="windowBreakpoint < 4 ? 'vertical' : 'horizontal'"
+            :prependTitle="`(${i})`"
+          />
+        </KCardGrid>
+      </DocsShow>
+
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig"
+          :loading="loading"
+        >
+          <KCard
+            v-for="i in 3"
+            :orientation="windowBreakpoint < 4 ? 'vertical' : 'horizontal'"
+            thumbnailDisplay="large"
+            thumbnailAlign="left"
+            ...
+          />
+        </KCardGrid>
+      </DocsShowCode>
+      <!-- eslint-enable -->
+
+      <!-- eslint-disable -->
+      <DocsShowCode language="javascript">
+        export default {
+          ...
+          data() {
+            return {
+              skeletonsConfig: [
+                {
+                  breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+                  height: '400px',
+                  orientation: 'vertical',
+                  thumbnailDisplay: 'large',
+                  thumbnailAlign: 'left'
+                },
+                {
+                  breakpoints: [4, 5, 6, 7],
+                  height: '220px',
+                  orientation: 'horizontal'
+                }
+              ],
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+
+      <p>Here, the height of loading skeleton cards is <code>400px</code> with vertical orientation on breakpoints <code>0-3</code>, and <code>220px</code> with horizontal orientation on breakpoints <code>4-7</code>. This makes skeleton cards resemble loaded cards at all breakpoints, creating a smooth transition for users during data loading. Note the bottom-up approach where we begin with a base setup for all breakpoints and gradually override on higher breakpoints. This simplifies the configuration object.</p>
+
+      <p>To get a sense of what skeleton layouts can be achieved, reload this page and the <code>KCard</code> page to preview the loading state in all examples.</p>
     </DocsPageSection>
 
     <DocsPageSection title="Related" anchor="#related">
@@ -536,13 +735,157 @@
       return { windowBreakpoint };
     },
     data() {
-      return {};
+      return {
+        debug: false,
+        loading: true,
+        skeletonsConfig1: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailDisplay: 'large',
+            thumbnailAlign: 'left',
+            height: '250px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            height: '180px',
+          },
+        ],
+        skeletonsConfig2: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '470px',
+          },
+          {
+            breakpoints: [2, 3],
+            height: '430px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '360px',
+          },
+        ],
+        skeletonsConfig3: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '470px',
+          },
+          {
+            breakpoints: [2, 3],
+            height: '430px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '390px',
+          },
+        ],
+        skeletonsConfig4: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '360px',
+          },
+        ],
+        skeletonsConfig5: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '420px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            height: '390px',
+          },
+        ],
+        skeletonsConfig6: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '440px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '220px',
+            orientation: 'horizontal',
+            thumbnailAlign: 'left',
+          },
+        ],
+        skeletonsConfig7: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '430px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '370px',
+          },
+        ],
+        skeletonsConfig8: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '400px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '220px',
+            orientation: 'horizontal',
+            thumbnailAlign: 'left',
+          },
+        ],
+        layoutOverride: [
+          {
+            breakpoints: [0, 1],
+            columnGap: '20px',
+            rowGap: '20px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            cardsPerRow: 4,
+          },
+        ],
+      };
     },
     computed: {
       slicedPills() {
         return ['Short Activity', 'Biology', 'Ecology', 'Ornithology'].slice(0, 2);
       },
     },
+    mounted() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 3000);
+    },
+    methods: {
+      load500() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+        }, 500);
+      },
+      load1200() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+        }, 1200);
+      },
+      load4000() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+        }, 4000);
+      },
+    },
   };
 
 </script>
diff --git a/docs/pages/kfocustrap.vue b/docs/pages/kfocustrap.vue
new file mode 100644
index 000000000..ea663f8e2
--- /dev/null
+++ b/docs/pages/kfocustrap.vue
@@ -0,0 +1,20 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+
+    <!-- Overview Section -->
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        The <code>KFocusTrap</code> component ensures that keyboard focus is trapped within a specific region of the page. 
+      </p>
+      <p>
+        When the <code>disabled</code> prop is set to <code>true</code>, focus trapping is disabled, allowing normal tab behavior. The focus trap moves the focus between the first and last elements in the slot content.
+      </p>
+
+    </DocsPageSection>
+
+
+  </DocsPageTemplate>
+
+</template>
+  
\ No newline at end of file
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/docs/static/kolibri.ico b/docs/static/kolibri.ico
index 5752a1aee..60bb82f49 100644
Binary files a/docs/static/kolibri.ico and b/docs/static/kolibri.ico differ
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index ae7ab9ee1..58877cc87 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -443,6 +443,11 @@ export default [
         isCode: true,
         keywords: cardRelatedKeywords,
       }),
+      new Page({
+        path: '/kfocustrap',
+        title: 'KFocusTrap',
+        isCode: true,
+      }),
     ],
   }),
 ];
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/KFocusTrap.vue b/lib/KFocusTrap.vue
new file mode 100644
index 000000000..9fadf7eae
--- /dev/null
+++ b/lib/KFocusTrap.vue
@@ -0,0 +1,114 @@
+<template>
+
+  <div>
+    <!-- Focus trap starting point. If not disabled, focuses this first when tabbing. -->
+    <div
+      v-if="!disabled"
+      class="focus-trap-first"
+      tabindex="0"
+      @focus="handleFirstTrapFocus"
+    ></div>
+
+    <!--@slot Default slot where the focusable content will be rendered -->
+    <slot>
+
+    </slot>
+
+    <!-- Focus trap ending point. If not disabled, focuses this last when tabbing. -->
+    <div
+      v-if="!disabled"
+      class="focus-trap-last"
+      tabindex="0"
+      @focus="handleLastTrapFocus"
+    ></div>
+  </div>
+
+</template>
+
+
+<script>
+
+  /**
+   * This component ensures that focus moves between the first element
+   * and the last element of content provided by the default slot.
+   * In disabled state, it only renders whatever has been passed
+   * to the default slot, and doesn't add any focus trap behavior,
+   * allowing for flexible use from parent components.
+   */
+  export default {
+    name: 'KFocusTrap',
+    props: {
+      /**
+       * Disables the focus trap when set to `true`. Focus will behave normally.
+       * @type {Boolean}
+       * @default false
+       */
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isTrapActive: false, // Tracks whether the focus trap is currently active
+      };
+    },
+    methods: {
+      /**
+       * Called when the first focus trap element receives focus.
+       * If the trap is not yet active, redirects focus to the first element.
+       * Otherwise, redirects focus to the last element to enforce the loop.
+       * @param {Event} e - Focus event
+       */
+      handleFirstTrapFocus(e) {
+        e.stopPropagation();
+        if (!this.isTrapActive) {
+          this.focusFirstEl();
+          this.isTrapActive = true;
+        } else {
+          this.focusLastEl();
+        }
+      },
+      /**
+       * Called when the last focus trap element receives focus.
+       * Redirects focus to the first element, ensuring focus remains within the trap.
+       * @param {Event} e - Focus event
+       */
+      handleLastTrapFocus(e) {
+        e.stopPropagation();
+        this.focusFirstEl();
+      },
+
+      focusFirstEl() {
+        /**
+         * Emits an event to notify the parent component to focus the first element.
+         */
+        this.$emit('shouldFocusFirstEl');
+      },
+
+      focusLastEl() {
+        /**
+         * Emits an event to notify the parent component to focus the last element.
+         */
+        this.$emit('shouldFocusLastEl');
+      },
+      /**
+       * @public
+       * Reset the next focus to the first focus element
+       */
+      reset() {
+        this.isTrapActive = false;
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+  .focus-trap-first,
+  .focus-trap-last {
+    outline: none; /* Prevents focus outline */
+  }
+</style>
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/KModal.vue b/lib/KModal.vue
index 71bb228b2..88728c450 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -3,98 +3,100 @@
   <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
     <transition name="modal-fade" appear>
-      <div
-        id="modal-window"
-        ref="modal-overlay"
-        class="modal-overlay"
-        @keyup.esc.stop="emitCancelEvent"
-        @keyup.enter="handleEnter"
-      >
-        <!-- KeenUiSelect targets modal by using div.modal selector -->
+      <KFocusTrap>
         <div
-          ref="modal"
-          class="modal"
-          :tabindex="0"
-          role="dialog"
-          aria-labelledby="modal-title"
-          :style="[
-            modalSizeStyles,
-            { background: $themeTokens.surface },
-            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-          ]"
+          id="modal-window"
+          ref="modal-overlay"
+          class="modal-overlay"
+          @keyup.esc.stop="emitCancelEvent"
+          @keyup.enter="handleEnter"
         >
-
-          <!-- Modal Title -->
-          <h1
-            id="modal-title"
-            ref="title"
-            class="title"
+          <!-- KeenUiSelect targets modal by using div.modal selector -->
+          <div
+            ref="modal"
+            class="modal"
+            :tabindex="0"
+            role="dialog"
+            aria-labelledby="modal-title"
+            :style="[
+              modalSizeStyles,
+              { background: $themeTokens.surface },
+              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+            ]"
           >
-            {{ title }}
-            <!-- Accessible error reporting per @radina -->
-            <span
-              v-if="hasError"
-              class="visuallyhidden"
+
+            <!-- Modal Title -->
+            <h1
+              id="modal-title"
+              ref="title"
+              class="title"
             >
-              {{ errorMessage }}
-            </span>
-          </h1>
-
-          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-          <form
-            class="form"
-            @submit.prevent="emitSubmitEvent"
-            @keyup.enter.stop
-          >
-            <!-- Wrapper for main content -->
-            <div
-              ref="content"
-              class="content"
-              :style="[ contentSectionMaxHeight, scrollShadow ? {
-                borderTop: `1px solid ${$themeTokens.fineLine}`,
-                borderBottom: `1px solid ${$themeTokens.fineLine}`,
-              } : {} ]"
-              :class="{
-                'scroll-shadow': scrollShadow,
-                'contains-kselect': containsKSelect
-              }"
+              {{ title }}
+              <!-- Accessible error reporting per @radina -->
+              <span
+                v-if="hasError"
+                class="visuallyhidden"
+              >
+                {{ errorMessage }}
+              </span>
+            </h1>
+
+            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+            <form
+              class="form"
+              @submit.prevent="emitSubmitEvent"
+              @keyup.enter.stop
             >
-              <!-- @slot Main content of modal -->
-              <slot></slot>
-            </div>
+              <!-- Wrapper for main content -->
+              <div
+                ref="content"
+                class="content"
+                :style="[ contentSectionMaxHeight, scrollShadow ? {
+                  borderTop: `1px solid ${$themeTokens.fineLine}`,
+                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
+                } : {} ]"
+                :class="{
+                  'scroll-shadow': scrollShadow,
+                  'contains-kselect': containsKSelect
+                }"
+              >
+                <!-- @slot Main content of modal -->
+                <slot></slot>
+              </div>
 
-            <div
-              ref="actions"
-              class="actions"
-            >
-              <!-- @slot Alternative buttons and actions below main content -->
-              <slot
-                v-if="$slots.actions"
-                name="actions"
+              <div
+                ref="actions"
+                class="actions"
               >
-              </slot>
-              <template v-else>
-                <KButton
-                  v-if="cancelText"
-                  name="cancel"
-                  :text="cancelText"
-                  appearance="flat-button"
-                  :disabled="cancelDisabled || $attrs.disabled"
-                  @click="emitCancelEvent"
-                />
-                <KButton
-                  v-if="submitText"
-                  name="submit"
-                  :text="submitText"
-                  :primary="true"
-                  :disabled="submitDisabled || $attrs.disabled"
-                  type="submit"
-                />
-              </template>
-            </div>
-          </form>
+                <!-- @slot Alternative buttons and actions below main content -->
+                <slot
+                  v-if="$slots.actions"
+                  name="actions"
+                >
+                </slot>
+                <template v-else>
+                  <KButton
+                    v-if="cancelText"
+                    name="cancel"
+                    :text="cancelText"
+                    appearance="flat-button"
+                    :disabled="cancelDisabled || $attrs.disabled"
+                    @click="emitCancelEvent"
+                  />
+                  <KButton
+                    v-if="submitText"
+                    name="submit"
+                    :text="submitText"
+                    :primary="true"
+                    :disabled="submitDisabled || $attrs.disabled"
+                    type="submit"
+                  />
+                </template>
+              </div>
+            </form>
+          </div>
         </div>
-      </div>
+      </KFocusTrap>
     </transition>
   </component>
 
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index 7921e7444..005642225 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -10,6 +10,7 @@
           type="checkbox"
           dir="auto"
 
+          :aria-labelledby="ariaLabelledBy"
           :checked.prop="isChecked"
           :disabled="disabled"
           :name="name"
@@ -41,6 +42,14 @@
   export default {
     name: 'KSwitch',
     props: {
+      /*
+       * Specifies the ID of an element that labels this switch component.
+       * Useful for accessibility to provide a label through an external element when `label` is empty
+       */
+      ariaLabelledBy: {
+        type: String,
+        default: null,
+      },
       /**
        * Current value of the switch state: on or off
        */
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 8d75525b3..f7b1e16c2 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;
         };
@@ -486,7 +486,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/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index 5449accb3..bbaebe33a 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -47,7 +47,7 @@ describe('useSorting', () => {
     ]);
   });
 
-  it('should sort rows by numeric column in ascending and descending order', () => {
+  it('should sort rows by numeric column in ascending then descending order then back to default order', () => {
     const { handleSort, sortedRows, sortOrder } = useSorting(headers, rows, useLocalSorting);
 
     handleSort(1); // Sort by 'Age'
@@ -65,6 +65,15 @@ describe('useSorting', () => {
       ['Jane', 25, new Date(1995, 10, 20)],
     ]);
     expect(sortOrder.value).toBe(SORT_ORDER_DESC);
+
+    handleSort(1); //Sort by 'Age' again to default order
+
+    expect(sortedRows.value).toEqual([
+      ['John', 30, new Date(1990, 5, 15)],
+      ['Jane', 25, new Date(1995, 10, 20)],
+      ['Alice', 28, new Date(1992, 8, 10)],
+    ]);
+    expect(sortOrder.value).toBe(null);
   });
 
   it('should sort rows by date column in ascending order', () => {
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index fdb8fd8c5..4b819b996 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -38,12 +38,18 @@ export default function useSorting(headers, rows, useLocalSorting) {
     if (headers.value[index].dataType === DATA_TYPE_OTHERS) return;
 
     if (sortKey.value === index) {
-      sortOrder.value = sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC;
+      if (sortOrder.value === SORT_ORDER_ASC) {
+        sortOrder.value = SORT_ORDER_DESC;
+      } else if (sortOrder.value === SORT_ORDER_DESC) {
+        sortKey.value = null;
+        sortOrder.value = null;
+      }
     } else {
       sortKey.value = index;
       sortOrder.value = SORT_ORDER_ASC;
     }
   };
+
   /**
    * Method to get the ARIA sort attribute value for a column header.
    *
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index d220b9958..affdb6b5b 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -41,6 +41,7 @@ import KTransition from './KTransition';
 import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
 import KRadioButtonGroup from './KRadioButtonGroup.vue';
+import KFocusTrap from './KFocusTrap.vue';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -163,4 +164,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTransition', KTransition);
   Vue.component('KTextTruncator', KTextTruncator);
   Vue.component('KRadioButtonGroup', KRadioButtonGroup);
+  Vue.component('KFocusTrap', KFocusTrap);
 }
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/cards/KCard.vue b/lib/cards/KCard.vue
index 286ac896d..7a7e93084 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -71,17 +71,10 @@
           :aspectRatio="thumbnailAspectRatio"
           :isDecorative="true"
           :appearanceOverrides="thumbnailStyles"
-          @load="isThumbnailImageLoaded = true"
-          @error="isThumbnailImageLoaded = false"
+          @error="onThumbnailError"
         />
-        <!--
-          Show the placeholder element even when a thumbnail source is available.
-          This serves as progressive loading experience - on slower networks,
-          users can at least see the placeholder until the image is loaded
-          successfully.
-        -->
         <span
-          v-if="!disableThumbnailPlaceholder"
+          v-if="!thumbnailSrc || thumbnailError"
           class="thumbnail-placeholder"
         >
           <!-- @slot Places content to the thumbnail placeholder area. -->
@@ -285,42 +278,29 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Private. Do not use.
+       */
+      // Disables validations and functionality
+      // that shouldn't be present when card
+      // used as loading skeleton via `SkeletonCard`
+      isSkeleton: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
         mouseDownTime: 0,
         ThumbnailDisplays,
-        isThumbnailImageLoaded: false,
         isLinkFocused: false,
+        thumbnailError: false,
       };
     },
     computed: {
       focusStyle() {
         return this.isLinkFocused ? this.$coreOutline : {};
       },
-      /**
-       * Disable the thumbnail placeholder element when
-       * there is no thumbnail area or the placeholder element
-       * is not provided.
-       *
-       * Furthermore, hide it after the thumbnail image
-       * is successfully loaded. Otherwise in some scenarios,
-       * such as when there is a large placeholder element
-       * and a small thumbnail image, some parts of the placeholder
-       * element may be visible behind the image after it has been
-       * successfully loaded.
-       *
-       * However, do not hide the placeholder element while
-       * the image is still loading to ensure progressive
-       * loading experience on slower networks.
-       */
-      disableThumbnailPlaceholder() {
-        return (
-          this.thumbnailDisplay === this.ThumbnailDisplays.NONE ||
-          !this.$slots.thumbnailPlaceholder ||
-          this.isThumbnailImageLoaded
-        );
-      },
       hasAboveTitleArea() {
         return this.$slots.aboveTitle || this.preserveAboveTitle;
       },
@@ -457,12 +437,21 @@
     },
     methods: {
       onLinkFocus() {
+        if (this.isSkeleton) {
+          return;
+        }
         this.isLinkFocused = true;
       },
       onLinkBlur() {
         this.isLinkFocused = false;
       },
+      onThumbnailError() {
+        this.thumbnailError = true;
+      },
       navigate() {
+        if (this.isSkeleton) {
+          return;
+        }
         this.$router.push(this.to);
       },
       onFocus(e) {
@@ -484,6 +473,9 @@
         this.mouseDownTime = new Date().getTime();
       },
       onClick() {
+        if (this.isSkeleton) {
+          return;
+        }
         const mouseUpTime = new Date().getTime();
         // Make textual content selectable within the whole clickable card area.
         //
@@ -540,6 +532,7 @@
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
+    width: 100%;
     height: 100%;
     border-radius: 0.5em;
     outline-offset: -1px;
@@ -556,11 +549,6 @@
     font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
   }
 
   .thumbnail {
@@ -594,6 +582,9 @@
   }
 
   .link {
+    display: inline-block; // allows title placeholder in the skeleton card
+    width: 100%; // allows title placeholder in the skeleton card
+    color: inherit;
     text-decoration: none;
     outline: none; // the focus ring is moved to the whole <li>
   }
diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
index c8abdc7ae..d7ef459bc 100644
--- a/lib/cards/KCardGrid.vue
+++ b/lib/cards/KCardGrid.vue
@@ -1,12 +1,42 @@
 <template>
 
-  <ul
+  <div
+    v-if="showGrid"
     class="card-grid"
-    :style="gridStyle"
   >
-    <!-- @slot Slot for `KCard`s -->
-    <slot></slot>
-  </ul>
+    <transition name="fade" mode="out-in" appear>
+      <ul
+        v-if="isLoading"
+        key="loading"
+        :style="gridStyle"
+      >
+        <SkeletonCard
+          v-for="i in skeletonCount"
+          :key="i"
+          :height="skeletonHeight"
+          :orientation="skeletonOrientation"
+          :thumbnailDisplay="skeletonThumbnailDisplay"
+          :thumbnailAlign="skeletonThumbnailAlign"
+        />
+      </ul>
+      <ul
+        v-else
+        key="loaded"
+        :style="gridStyle"
+      >
+        <!-- @slot Slot for `KCard`s -->
+        <slot></slot>
+      </ul>
+    </transition>
+
+    <div
+      v-if="debug"
+      class="debug"
+    >
+      <div>DEBUG</div>
+      <div>breakpoint: {{ windowBreakpoint }}</div>
+    </div>
+  </div>
 
 </template>
 
@@ -16,28 +46,40 @@
   import { watch, ref, provide } from '@vue/composition-api';
 
   import { LAYOUT_1_1_1, LAYOUT_1_2_2, LAYOUT_1_2_3 } from './gridBaseLayouts';
-  import useResponsiveGridLayout from './useResponsiveGridLayout';
+  import useGridLayout from './useGridLayout';
+  import useGridLoading from './useGridLoading';
+  import SkeletonCard from './SkeletonCard';
 
   /**
    * Displays a grid of cards `KCard`.
-   *
-   * Offers default behavior corresponding to the most
-   * commonly used grids, as well as advance configuration
-   * via `useKCardGrid` to customize a base grid layout
-   * or even completely override it.
    */
   export default {
     name: 'KCardGrid',
-
+    components: {
+      SkeletonCard,
+    },
     setup(props) {
-      const { currentLevelConfig } = useResponsiveGridLayout(props);
+      const { currentBreakpointConfig, windowBreakpoint } = useGridLayout(props);
+      const {
+        showGrid,
+        isLoading,
+        skeletonCount,
+        skeletonHeight,
+        skeletonOrientation,
+        skeletonThumbnailDisplay,
+        skeletonThumbnailAlign,
+      } = useGridLoading(props);
 
       const gridStyle = ref({});
       const gridItemStyle = ref({});
 
       watch(
-        currentLevelConfig,
+        currentBreakpointConfig,
         newValue => {
+          if (!newValue) {
+            return;
+          }
+
           const { cardsPerRow, columnGap, rowGap } = newValue;
 
           gridStyle.value = {
@@ -60,7 +102,15 @@
       provide('gridItemStyle', gridItemStyle);
 
       return {
+        windowBreakpoint,
         gridStyle,
+        isLoading,
+        showGrid,
+        skeletonCount,
+        skeletonHeight,
+        skeletonOrientation,
+        skeletonThumbnailDisplay,
+        skeletonThumbnailAlign,
       };
     },
     props: {
@@ -77,6 +127,47 @@
           return [LAYOUT_1_1_1, LAYOUT_1_2_2, LAYOUT_1_2_3].includes(value);
         },
       },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
+      /**
+       * Overrides the base grid `layout` for chosen breakpoints levels
+       */
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      layoutOverride: {
+        type: Array,
+        required: false,
+        default: null,
+      },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
+      /**
+       * Set to `true` as long as data for cards
+       * are being loaded to display loading skeletons
+       */
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
+      /**
+       * Configures loading skeletons
+       */
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      skeletonsConfig: {
+        type: Array,
+        required: false,
+        default: null,
+      },
+      // eslint-enable kolibri/vue-no-unused-properties
+      /**
+       * Use for development only. Shows information in
+       * the grid's corner that is useful for configuring
+       * loading skeletons.
+       *
+       */
+      debug: {
+        type: Boolean,
+        default: false,
+      },
     },
   };
 
@@ -85,7 +176,29 @@
 
 <style lang="scss" scoped>
 
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-active,
+  .fade-appear-active {
+    transition: opacity 0.5s ease;
+  }
+
+  .fade-leave-to {
+    opacity: 0.2;
+  }
+
+  .fade-enter,
+  .fade-appear {
+    opacity: 0;
+  }
+
   .card-grid {
+    position: relative; // for '.debug' absolute positioning
+  }
+
+  ul {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -95,4 +208,18 @@
     list-style: none;
   }
 
+  .debug {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    padding: 20px;
+    color: white;
+    background-color: rgb(41, 49, 207);
+
+    div:first-child {
+      text-decoration: underline;
+    }
+  }
+
 </style>
\ No newline at end of file
diff --git a/lib/cards/SkeletonCard.vue b/lib/cards/SkeletonCard.vue
new file mode 100644
index 000000000..516fbe401
--- /dev/null
+++ b/lib/cards/SkeletonCard.vue
@@ -0,0 +1,134 @@
+<template>
+
+  <!--
+    Required props set to avoid console validation errors.
+    Their logic is disabled in skeleton mode.
+  -->
+  <KCard
+    :to="{ path: null }"
+    :headingLevel="2"
+    isSkeleton
+    aria-hidden="true"
+    class="skeleton-card"
+    :style="{ height: height }"
+    :orientation="orientation"
+    :thumbnailDisplay="thumbnailDisplay"
+    :thumbnailAlign="thumbnailAlign"
+  >
+    <template #title>
+      <span
+        class="title-placeholder"
+        :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      >
+      </span>
+    </template>
+    <template #belowTitle>
+      <span
+        class="below-title-placeholder"
+        :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      >
+      </span>
+    </template>
+  </kcard>
+
+</template>
+
+
+<script>
+
+  /**
+   * Loading skeleton card
+   *
+   * Uses `KCard` under the hood to achieve
+   * as similar layout as possible
+   */
+  export default {
+    name: 'SkeletonCard',
+    props: {
+      /**
+       * Card height
+       */
+      height: {
+        required: false,
+        type: String,
+        default: '300px',
+      },
+      /**
+       * Same as `KCard`'s `orientation`
+       */
+      orientation: {
+        required: false,
+        type: String,
+        default: 'horizontal',
+      },
+      /**
+       * Same as `KCard`'s `thumbnailDisplay`
+       */
+      thumbnailDisplay: {
+        required: false,
+        type: String,
+        default: 'none',
+      },
+      /**
+       * Same as `KCard`'s `thumbnailAlign`
+       */
+      thumbnailAlign: {
+        required: false,
+        type: String,
+        default: 'left',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '../styles/definitions';
+
+  @keyframes loading {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .title-placeholder,
+  .below-title-placeholder {
+    display: inline-block;
+    height: 28px;
+    border-radius: 4px;
+  }
+
+  .title-placeholder {
+    width: 100%;
+  }
+
+  .below-title-placeholder {
+    width: 80%;
+  }
+
+  .skeleton-card {
+    @extend %dropshadow-2dp; // need to re-apply dropshadow because of `oveflow: hidden`
+
+    position: relative;
+    overflow: hidden; // contain animation style within card area
+    border-radius: 0.5em; // prevents sharp corner, should match inner card area border radius in KCard
+  }
+
+  .skeleton-card::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
+    animation: loading 1.5s infinite ease-in-out;
+  }
+
+</style>
\ No newline at end of file
diff --git a/lib/cards/__tests__/KCard.spec.js b/lib/cards/__tests__/KCard.spec.js
index 41acbf597..491aaa898 100644
--- a/lib/cards/__tests__/KCard.spec.js
+++ b/lib/cards/__tests__/KCard.spec.js
@@ -246,7 +246,7 @@ describe('KCard', () => {
       expect(wrapper.find('[data-test="placeholderIcon"]').exists()).toBe(false);
     });
 
-    it('is displayed when a thumbnail image is not provided', () => {
+    it('is displayed when a thumbnail image source is not provided', () => {
       const wrapper = makeWrapper({
         propsData: {
           to: { path: '/some-link' },
@@ -263,23 +263,6 @@ describe('KCard', () => {
       expect(wrapper.find('[data-test="placeholderIcon"]').exists()).toBe(true);
     });
 
-    it('is displayed while a thumbnail image is loading (progressive loading experience on slow network)', () => {
-      const wrapper = makeWrapper({
-        propsData: {
-          to: { path: '/some-link' },
-          title: 'sample title ',
-          headingLevel: 4,
-          thumbnailSrc: '/thumbnail-img.jpg',
-          thumbnailDisplay: 'large',
-        },
-        slots: {
-          thumbnailPlaceholder: '<KIcon data-test="placeholderIcon" icon="readSolid" />',
-        },
-      });
-
-      expect(wrapper.find('[data-test="placeholderIcon"]').exists()).toBe(true);
-    });
-
     it('is displayed when a thumbnail image could not be loaded', async () => {
       const wrapper = makeWrapper({
         propsData: {
@@ -301,7 +284,7 @@ describe('KCard', () => {
       expect(wrapper.find('[data-test="placeholderIcon"]').exists()).toBe(true);
     });
 
-    it('is not displayed after a thumbnail image is successfully loaded', async () => {
+    it('is not displayed when a thumbnail image is available', () => {
       const wrapper = makeWrapper({
         propsData: {
           to: { path: '/some-link' },
@@ -314,10 +297,6 @@ describe('KCard', () => {
           thumbnailPlaceholder: '<KIcon data-test="placeholderIcon" icon="readSolid" />',
         },
       });
-      wrapper.find('[data-test="thumbnail-img"]').vm.$emit('load');
-
-      // wait for re-render
-      await wrapper.vm.$nextTick();
 
       expect(wrapper.find('[data-test="placeholderIcon"]').exists()).toBe(false);
     });
diff --git a/lib/cards/__tests__/utils.spec.js b/lib/cards/__tests__/utils.spec.js
new file mode 100644
index 000000000..95f925fcd
--- /dev/null
+++ b/lib/cards/__tests__/utils.spec.js
@@ -0,0 +1,66 @@
+import { getBreakpointConfig } from '../utils';
+
+const config = [
+  {
+    breakpoints: [2, 3],
+    count: 1,
+    orientation: 'vertical',
+    thumbnailDisplay: 'small',
+    thumbnailAlign: 'right',
+  },
+  {
+    breakpoints: [4, 5, 6, 7],
+    count: 2,
+    orientation: 'horizontal',
+    thumbnailDisplay: 'large',
+    thumbnailAlign: 'left',
+  },
+  {
+    breakpoints: [4, 5],
+    height: '250px',
+  },
+  {
+    breakpoints: [5],
+    height: '200px',
+  },
+];
+
+describe('getBreakpointConfig', () => {
+  it('returns the correct breakpoint config', () => {
+    expect(getBreakpointConfig(config, 2)).toEqual({
+      count: 1,
+      orientation: 'vertical',
+      thumbnailDisplay: 'small',
+      thumbnailAlign: 'right',
+    });
+  });
+
+  it('populates all configuration for a breakpoint that overlaps multiple sub-configs', () => {
+    expect(getBreakpointConfig(config, 4)).toEqual({
+      count: 2,
+      orientation: 'horizontal',
+      thumbnailDisplay: 'large',
+      thumbnailAlign: 'left',
+      height: '250px',
+    });
+  });
+
+  it('gives preference to a last value for a breakpoint that overlaps multiple sub-configs with competing values', () => {
+    expect(getBreakpointConfig(config, 5)).toEqual({
+      count: 2,
+      orientation: 'horizontal',
+      thumbnailDisplay: 'large',
+      thumbnailAlign: 'left',
+      height: '200px',
+    });
+  });
+
+  it('returns undefined if the config array is empty or undefined', () => {
+    expect(getBreakpointConfig([], 5)).toBeUndefined();
+    expect(getBreakpointConfig(undefined, 5)).toBeUndefined();
+  });
+
+  it('returns undefined if no matching breakpoints are found', () => {
+    expect(getBreakpointConfig(config, 1)).toBeUndefined();
+  });
+});
diff --git a/lib/cards/gridBaseLayouts.js b/lib/cards/gridBaseLayouts.js
index 35b6fdb51..5898d654f 100644
--- a/lib/cards/gridBaseLayouts.js
+++ b/lib/cards/gridBaseLayouts.js
@@ -3,19 +3,8 @@
  * corresponding to the most commonly used grids in our designs.
  */
 
-// Breakpoint levels
-// Correspond to https://design-system.learningequality.org/layout/#responsiveness
-const LEVEL_0 = 'level-0';
-const LEVEL_1 = 'level-1';
-const LEVEL_2 = 'level-2';
-const LEVEL_3 = 'level-3';
-const LEVEL_4 = 'level-4';
-const LEVEL_5 = 'level-5';
-const LEVEL_6 = 'level-6';
-const LEVEL_7 = 'level-7';
-
-// Settings common to all breakpoint levels
-const levelCommon = {
+// Settings common to all breakpoints
+const breakpointCommon = {
   columnGap: '30px',
   rowGap: '30px',
 };
@@ -24,41 +13,17 @@ const levelCommon = {
  * Configuration for '1-1-1' grid,
  * that is a grid with 1 card per row
  * on all screen sizes.
+ *
+ * Organized by breakpoints as defined in
+ * https://design-system.learningequality.org/layout/#responsiveness
  */
-const LAYOUT_CONFIG_1_1_1 = {
-  [LEVEL_0]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_1]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_2]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_3]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_4]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_5]: {
+const LAYOUT_CONFIG_1_1_1 = [
+  {
+    breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
     cardsPerRow: 1,
-    ...levelCommon,
+    ...breakpointCommon,
   },
-  [LEVEL_6]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_7]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-};
+];
 
 /**
  * Configuration for '1-2-2' grid,
@@ -66,41 +31,22 @@ const LAYOUT_CONFIG_1_1_1 = {
  * - 1 card per row on smaller screens
  * - 2 cards per row on medium screens
  * - 2 cards per row on larger screens
+ *
+ * Organized by breakpoints as defined in
+ * https://design-system.learningequality.org/layout/#responsiveness
  */
-const LAYOUT_CONFIG_1_2_2 = {
-  [LEVEL_0]: {
+const LAYOUT_CONFIG_1_2_2 = [
+  {
+    breakpoints: [0, 1],
     cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_1]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_2]: {
-    cardsPerRow: 2,
-    ...levelCommon,
-  },
-  [LEVEL_3]: {
-    cardsPerRow: 2,
-    ...levelCommon,
-  },
-  [LEVEL_4]: {
-    cardsPerRow: 2,
-    ...levelCommon,
+    ...breakpointCommon,
   },
-  [LEVEL_5]: {
+  {
+    breakpoints: [2, 3, 4, 5, 6, 7],
     cardsPerRow: 2,
-    ...levelCommon,
+    ...breakpointCommon,
   },
-  [LEVEL_6]: {
-    cardsPerRow: 2,
-    ...levelCommon,
-  },
-  [LEVEL_7]: {
-    cardsPerRow: 2,
-    ...levelCommon,
-  },
-};
+];
 
 /**
  * Configuration for '1-2-3' grid,
@@ -108,55 +54,32 @@ const LAYOUT_CONFIG_1_2_2 = {
  * - 1 card per row on smaller screens
  * - 2 cards per row on medium screens
  * - 3 cards per row on larger screens
+ *
+ * Organized by breakpoints as defined in
+ * https://design-system.learningequality.org/layout/#responsiveness
  */
-const LAYOUT_CONFIG_1_2_3 = {
-  [LEVEL_0]: {
+const LAYOUT_CONFIG_1_2_3 = [
+  {
+    breakpoints: [0, 1],
     cardsPerRow: 1,
-    ...levelCommon,
+    ...breakpointCommon,
   },
-  [LEVEL_1]: {
-    cardsPerRow: 1,
-    ...levelCommon,
-  },
-  [LEVEL_2]: {
+  {
+    breakpoints: [2, 3],
     cardsPerRow: 2,
-    ...levelCommon,
+    ...breakpointCommon,
   },
-  [LEVEL_3]: {
-    cardsPerRow: 2,
-    ...levelCommon,
-  },
-  [LEVEL_4]: {
-    cardsPerRow: 3,
-    ...levelCommon,
-  },
-  [LEVEL_5]: {
-    cardsPerRow: 3,
-    ...levelCommon,
-  },
-  [LEVEL_6]: {
+  {
+    breakpoints: [4, 5, 6, 7],
     cardsPerRow: 3,
-    ...levelCommon,
+    ...breakpointCommon,
   },
-  [LEVEL_7]: {
-    cardsPerRow: 3,
-    ...levelCommon,
-  },
-};
+];
 
 export const LAYOUT_1_1_1 = '1-1-1';
 export const LAYOUT_1_2_2 = '1-2-2';
 export const LAYOUT_1_2_3 = '1-2-3';
-export const LEVELS = {
-  0: LEVEL_0,
-  1: LEVEL_1,
-  2: LEVEL_2,
-  3: LEVEL_3,
-  4: LEVEL_4,
-  5: LEVEL_5,
-  6: LEVEL_6,
-  7: LEVEL_7,
-};
+
 export const LAYOUT_CONFIGS = {
   [LAYOUT_1_1_1]: LAYOUT_CONFIG_1_1_1,
   [LAYOUT_1_2_2]: LAYOUT_CONFIG_1_2_2,
diff --git a/lib/cards/useGridLayout.js b/lib/cards/useGridLayout.js
new file mode 100644
index 000000000..dc43a0b3f
--- /dev/null
+++ b/lib/cards/useGridLayout.js
@@ -0,0 +1,67 @@
+import cloneDeep from 'lodash/cloneDeep';
+import { watch, ref, toRefs } from '@vue/composition-api';
+
+import useKResponsiveWindow from '../composables/useKResponsiveWindow';
+
+import { LAYOUT_CONFIGS } from './gridBaseLayouts';
+import { getBreakpointConfig } from './utils';
+
+/**
+ * Observes window size and returns the grid layout
+ * configuration object for the current breakpoint.
+ */
+export default function useGridLayout(props) {
+  const { layout, layoutOverride } = toRefs(props);
+  const currentBreakpointConfig = ref({});
+  const { windowBreakpoint } = useKResponsiveWindow();
+
+  /**
+   * Obtains the base grid layout configuration object
+   * for the given breakpoint. If `layoutOverride`
+   * is defined, applies overrides and returns the final
+   * grid layout configuration.
+   *
+   * @param {Object} props `KCardGrid` props
+   * @param {Number} breakpoint Breakpoint 0-7
+   *
+   * @returns {Object} The final grid layout configuration
+   *                   object for the `breakpoint`
+   */
+  function getLayoutConfigForBreakpoint(props, breakpoint) {
+    if (breakpoint === null || breakpoint === undefined) {
+      return getLayoutConfigForBreakpoint(props, 0);
+    }
+    // Obtain the base layout configuration for the breakpoint
+    const baseLayoutConfig = LAYOUT_CONFIGS[layout.value];
+    const baseBreakpointConfig = getBreakpointConfig(baseLayoutConfig, breakpoint);
+
+    // Deep clone to protect mutating LAYOUT_CONFIGS
+    const finalBreakpointConfig = cloneDeep(baseBreakpointConfig);
+
+    // Remove `breakpoints` attribute as it's not needed
+    delete finalBreakpointConfig.breakpoints;
+
+    // Override if `layoutOverride` contains
+    // settings for the breakpoint
+    const breakpointOverride = getBreakpointConfig(layoutOverride.value, breakpoint);
+    if (breakpointOverride) {
+      for (const key of ['cardsPerRow', 'columnGap', 'rowGap']) {
+        if (breakpointOverride[key]) {
+          finalBreakpointConfig[key] = breakpointOverride[key];
+        }
+      }
+    }
+
+    return finalBreakpointConfig;
+  }
+
+  watch(
+    [windowBreakpoint, layout, layoutOverride],
+    ([newBreakpoint]) => {
+      currentBreakpointConfig.value = getLayoutConfigForBreakpoint(props, newBreakpoint);
+    },
+    { immediate: true, deep: true }
+  );
+
+  return { currentBreakpointConfig, windowBreakpoint };
+}
diff --git a/lib/cards/useGridLoading.js b/lib/cards/useGridLoading.js
new file mode 100644
index 000000000..aa6683a02
--- /dev/null
+++ b/lib/cards/useGridLoading.js
@@ -0,0 +1,141 @@
+import Vue from 'vue';
+import { ref, watch, onMounted, toRefs, computed } from '@vue/composition-api';
+
+import useGridLayout from './useGridLayout';
+import { getBreakpointConfig } from './utils';
+
+// The skeleton loaders will be displayed after `LOADING_DELAY`
+// for a duration of `MIN_LOADING_TIME`
+// (https://www.nngroup.com/articles/skeleton-screens/)
+const LOADING_DELAY = 1000;
+const MIN_LOADING_TIME = 1000;
+
+const DEFAULT_SKELETON = {
+  count: undefined, // default determined by the grid layout and the current breakpoint
+  height: '200px',
+  orientation: 'horizontal',
+  thumbnailDisplay: 'none',
+  thumbnailAlign: 'left',
+};
+
+/**
+ * Manages `KCardGrid`'s loading state
+ */
+export default function useGridLoading(props) {
+  const { currentBreakpointConfig, windowBreakpoint } = useGridLayout(props);
+  const { loading, skeletonsConfig } = toRefs(props);
+
+  const skeletonCount = ref(DEFAULT_SKELETON.count);
+  const skeletonHeight = ref(DEFAULT_SKELETON.height);
+  const skeletonOrientation = ref(DEFAULT_SKELETON.orientation);
+  const skeletonThumbnailDisplay = ref(DEFAULT_SKELETON.thumbnailDisplay);
+  const skeletonThumbnailAlign = ref(DEFAULT_SKELETON.thumbnailAlign);
+
+  const isLoading = ref(false); // Used by `KCardGrid` to determine whether to display loading skeletons
+  const finishedMounting = ref(false);
+  const isLoadingDelayActive = ref(false);
+  let loadingDelayTimeout = null;
+  let loadingStartTime = null;
+  let loadingElapsedTime = null;
+  let remainingLoadingTime = 0;
+
+  // Handles `KCardGrid`'s `loading` prop changes and returns
+  // final `isLoading` state to be used by `KCardGrid`
+  watch(
+    loading,
+    (newLoading, oldLoading) => {
+      if (newLoading === oldLoading) {
+        return;
+      }
+
+      // if loading started, delay it
+      if (newLoading) {
+        isLoadingDelayActive.value = true;
+        loadingDelayTimeout = setTimeout(() => {
+          loadingStartTime = Date.now();
+          isLoading.value = true;
+          isLoadingDelayActive.value = false;
+        }, LOADING_DELAY);
+      }
+
+      // if loading finished before the loading delay completed,
+      // cancel display of the loading state
+      if (!newLoading && !loadingStartTime) {
+        isLoadingDelayActive.value = false;
+        clearTimeout(loadingDelayTimeout);
+      }
+
+      // if loading finished some time after the loading delay completed,
+      // ensure that the loading state is visible for at least `MIN_LOADING_TIME`
+      if (!newLoading && loadingStartTime) {
+        loadingElapsedTime = Date.now() - loadingStartTime;
+        if (loadingElapsedTime < MIN_LOADING_TIME) {
+          remainingLoadingTime = MIN_LOADING_TIME - loadingElapsedTime;
+        } else {
+          remainingLoadingTime = 0;
+        }
+
+        setTimeout(() => {
+          isLoading.value = false;
+
+          loadingStartTime = null;
+          loadingElapsedTime = null;
+          remainingLoadingTime = 0;
+        }, remainingLoadingTime);
+      }
+    },
+    { immediate: true }
+  );
+
+  // Used by `KCardGrid` to prevent jarring UX:
+  // - (1) prevents flashes of unstyled content during the mouning stage
+  // - (2) prevents uncomplete cards from being displayed during the loading delay period
+  const showGrid = computed(() => {
+    return finishedMounting.value && !isLoadingDelayActive.value;
+  });
+
+  onMounted(() => {
+    Vue.nextTick(() => {
+      finishedMounting.value = true;
+    });
+  });
+
+  // Updates the loading skeleton configuration
+  //for the current breakpoint
+  watch(
+    [windowBreakpoint, skeletonsConfig, currentBreakpointConfig],
+    ([newBreakpoint]) => {
+      skeletonCount.value = currentBreakpointConfig.value.cardsPerRow;
+
+      const breakpointSkeletonConfig = getBreakpointConfig(skeletonsConfig.value, newBreakpoint);
+      if (breakpointSkeletonConfig) {
+        if (breakpointSkeletonConfig.count) {
+          skeletonCount.value = breakpointSkeletonConfig.count;
+        }
+        if (breakpointSkeletonConfig.height) {
+          skeletonHeight.value = breakpointSkeletonConfig.height;
+        }
+        if (breakpointSkeletonConfig.orientation) {
+          skeletonOrientation.value = breakpointSkeletonConfig.orientation;
+        }
+        if (breakpointSkeletonConfig.thumbnailDisplay) {
+          skeletonThumbnailDisplay.value = breakpointSkeletonConfig.thumbnailDisplay;
+        }
+        if (breakpointSkeletonConfig.thumbnailAlign) {
+          skeletonThumbnailAlign.value = breakpointSkeletonConfig.thumbnailAlign;
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
+
+  return {
+    showGrid,
+    isLoading,
+    skeletonCount,
+    skeletonHeight,
+    skeletonOrientation,
+    skeletonThumbnailDisplay,
+    skeletonThumbnailAlign,
+  };
+}
diff --git a/lib/cards/useResponsiveGridLayout.js b/lib/cards/useResponsiveGridLayout.js
deleted file mode 100644
index 0fecebc1b..000000000
--- a/lib/cards/useResponsiveGridLayout.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { watch, ref } from '@vue/composition-api';
-
-import useKResponsiveWindow from '../composables/useKResponsiveWindow';
-
-import { LAYOUT_CONFIGS, LEVELS } from './gridBaseLayouts';
-
-/**
- * Observes the window breakpoint level
- * and returns the grid layout configuration
- * object for the current breakpoint level.
- */
-export default function useResponsiveGridLayout(props) {
-  const currentLevelConfig = ref({});
-
-  const { windowBreakpoint } = useKResponsiveWindow();
-
-  /**
-   *
-   * @param {Object} props `KCardGrid` props
-   * @param {Number} breakpoint The breakpoint level 0-7
-   *
-   * @returns {Object} The grid layout configuration object
-   *                   for the given breakpoint level
-   */
-  function getLevelLayoutConfig(props, breakpoint) {
-    const baseLayoutConfig = LAYOUT_CONFIGS[props.layout];
-    const baseLevelConfig = baseLayoutConfig[LEVELS[breakpoint]];
-
-    return { ...baseLevelConfig };
-  }
-
-  watch(
-    windowBreakpoint,
-    (newBreakpoint, oldBreakpoint) => {
-      // can happen very briefly before the breakpoint value gets calculated
-      if (newBreakpoint === null) {
-        currentLevelConfig.value = getLevelLayoutConfig(props, 0);
-      }
-      if (newBreakpoint !== oldBreakpoint) {
-        currentLevelConfig.value = getLevelLayoutConfig(props, newBreakpoint);
-      }
-    },
-    { immediate: true }
-  );
-
-  return { currentLevelConfig };
-}
diff --git a/lib/cards/utils.js b/lib/cards/utils.js
new file mode 100644
index 000000000..d8809a5ba
--- /dev/null
+++ b/lib/cards/utils.js
@@ -0,0 +1,35 @@
+/**
+ * Get final configuration object for a breakpoint
+ *
+ * @param {Array} config A configuration in the same format as in LAYOUT_CONFIGS
+ * @param {Number} breakpoint 0-7
+ *
+ * @returns {Object} The configuration object for the `breakpoint`
+ */
+export function getBreakpointConfig(config, breakpoint) {
+  if (!config || !config.length) {
+    return undefined;
+  }
+
+  // The same breakpoint can be used in multiple configuration
+  // objects so here filter all matching configurations objects
+  // for the breakpoint...
+  const matchingConfigs = config.filter(
+    breakpointConfig =>
+      breakpointConfig.breakpoints && breakpointConfig.breakpoints.includes(breakpoint)
+  );
+
+  // ...and populate all configurations related to the breakpoint
+  // to its final configuration object.
+  // If there are competing values, give preference to the last one
+  const result = {};
+  matchingConfigs.forEach(breakpointConfig => {
+    Object.keys(breakpointConfig).forEach(key => {
+      if (key !== 'breakpoints') {
+        result[key] = breakpointConfig[key];
+      }
+    });
+  });
+
+  return Object.keys(result).length ? result : undefined;
+}
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/definitions.scss b/lib/styles/definitions.scss
index ba1350e88..5cacfc4e1 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -67,91 +67,93 @@ $core-time: 0.15s;
   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.12);
 }
-%dropshadow-3dp {
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-    0 3px 3px -2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-4dp {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-5dp {
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-    0 1px 14px 0 rgba(0, 0, 0, 0.12);
-}
+//NOTE: uncommenting needs to be discussed with designers and should be aligned with the guidelines.
+
+// %dropshadow-3dp {
+//   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+//     0 3px 3px -2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-4dp {
+//   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+//     0 1px 10px 0 rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-5dp {
+//   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+//     0 1px 14px 0 rgba(0, 0, 0, 0.12);
+// }
 %dropshadow-6dp {
   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
     0 1px 18px 0 rgba(0, 0, 0, 0.12);
 }
-%dropshadow-7dp {
-  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
-    0 2px 16px 1px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-8dp {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-9dp {
-  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
-    0 3px 16px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-10dp {
-  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-    0 4px 18px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-11dp {
-  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
-    0 4px 20px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-12dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
-    0 5px 22px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-13dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
-    0 5px 24px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-14dp {
-  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
-    0 5px 26px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-15dp {
-  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
-    0 6px 28px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-16dp {
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-    0 6px 30px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-17dp {
-  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
-    0 6px 32px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-18dp {
-  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
-    0 7px 34px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-19dp {
-  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
-    0 7px 36px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-20dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
-    0 8px 38px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-21dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
-    0 8px 40px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-22dp {
-  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
-    0 8px 42px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-23dp {
-  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
-    0 9px 44px 8px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-24dp {
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-    0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
+// %dropshadow-7dp {
+//   box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
+//     0 2px 16px 1px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-8dp {
+//   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+//     0 3px 14px 2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-9dp {
+//   box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+//     0 3px 16px 2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-10dp {
+//   box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
+//     0 4px 18px 3px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-11dp {
+//   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
+//     0 4px 20px 3px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-12dp {
+//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 22px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-13dp {
+//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 24px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-14dp {
+//   box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 26px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-15dp {
+//   box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 28px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-16dp {
+//   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 30px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-17dp {
+//   box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 32px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-18dp {
+//   box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
+//     0 7px 34px 6px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-19dp {
+//   box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
+//     0 7px 36px 6px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-20dp {
+//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 38px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-21dp {
+//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 40px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-22dp {
+//   box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 42px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-23dp {
+//   box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
+//     0 9px 44px 8px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-24dp {
+//   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+//     0 9px 46px 8px rgba(0, 0, 0, 0.12);
+// }
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,
diff --git a/package.json b/package.json
index 2e95ffaf1..985d3708c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kolibri-design-system",
-  "version": "5.0.0-rc7",
+  "version": "5.0.0-rc9",
   "private": false,
   "description": "The Kolibri Design System defines common design patterns and code for use in Kolibri applications",
   "repository": {
@@ -38,7 +38,7 @@
     "lodash": "4.17.21",
     "popper.js": "1.16.1",
     "purecss": "2.2.0",
-    "tippy.js": "4.2.1",
+    "tippy.js": "4.3.5",
     "vue-intl": "3.1.0",
     "vue2-teleport": "1.1.4",
     "xstate": "4.38.3"
diff --git a/yarn.lock b/yarn.lock
index ff78f9eaf..2bb6137f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3239,10 +3239,10 @@ bn.js@^5.2.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
-body-parser@1.20.2:
-  version "1.20.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
-  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.5"
@@ -3252,7 +3252,7 @@ body-parser@1.20.2:
     http-errors "2.0.0"
     iconv-lite "0.4.24"
     on-finished "2.4.1"
-    qs "6.11.0"
+    qs "6.13.0"
     raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
@@ -3565,6 +3565,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
@@ -4866,6 +4877,15 @@ default-gateway@^4.2.0:
     execa "^1.0.0"
     ip-regex "^2.1.0"
 
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -5232,9 +5252,9 @@ electron-to-chromium@^1.4.17:
   integrity sha512-fWc/zAThqZzl7fbuLzar+x6bqZBWHrsBXQOqv//yrgdTLY/G3JGTPOWhPKIhbhynJJhqE9QNzKzlpCINUmUMoA==
 
 elliptic@^6.5.3, elliptic@^6.5.4:
-  version "6.5.7"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
-  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.6.0.tgz#5919ec723286c1edf28685aa89261d4761afa210"
+  integrity sha512-dpwoQcLc/2WLQvJvLRHKZ+f9FgOdjnq11rurqwekGQygGPsYSK29OMMD2WalatiqQ+XGFDglTNixpPfI+lpaAA==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -5274,6 +5294,11 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -5355,6 +5380,18 @@ es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-
     string.prototype.trimstart "^1.0.4"
     unbox-primitive "^1.0.1"
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -5762,36 +5799,36 @@ expect@^27.4.6:
     jest-message-util "^27.4.6"
 
 express@^4.16.3, express@^4.16.4, express@^4.17.1:
-  version "4.19.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
-  integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.20.0.tgz#f1d08e591fcec770c07be4767af8eb9bcfd67c48"
+  integrity sha512-pLdae7I6QqShF5PnNTCVn4hI91Dx0Grkn2+IAsMTgMIKuQVte2dN9PeGSSAME2FR8anOhVA62QDIUaWVfEXVLw==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.2"
+    body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
     cookie "0.6.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
     finalhandler "1.2.0"
     fresh "0.5.2"
     http-errors "2.0.0"
-    merge-descriptors "1.0.1"
+    merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
+    path-to-regexp "0.1.10"
     proxy-addr "~2.0.7"
     qs "6.11.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.18.0"
-    serve-static "1.15.0"
+    send "0.19.0"
+    serve-static "1.16.0"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
@@ -6252,6 +6289,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
@@ -6334,6 +6376,17 @@ get-intrinsic@^1.1.3:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -6644,6 +6697,18 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
 has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
@@ -6731,6 +6796,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 he@1.2.x, he@^1.1.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -9420,10 +9492,10 @@ meow@^5.0.0:
     trim-newlines "^2.0.0"
     yargs-parser "^10.0.0"
 
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
 
 merge-source-map@^1.1.0:
   version "1.1.0"
@@ -10076,6 +10148,11 @@ object-inspect@^1.11.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
   integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
 
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
 object-inspect@^1.9.0:
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
@@ -10500,10 +10577,10 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
+path-to-regexp@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
+  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
 
 path-type@^1.0.0:
   version "1.1.0"
@@ -11844,6 +11921,13 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
 qs@~6.5.2:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
@@ -12666,6 +12750,25 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
 serialize-javascript@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
@@ -12705,16 +12808,26 @@ serve-placeholder@^1.2.1:
   dependencies:
     defu "^5.0.0"
 
-serve-static@1.15.0, serve-static@^1.14.1:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
-  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+serve-static@1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.0.tgz#2bf4ed49f8af311b519c46f272bf6ac3baf38a92"
+  integrity sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
     send "0.18.0"
 
+serve-static@^1.14.1:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.0"
+
 server-destroy@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
@@ -12725,6 +12838,18 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -12822,6 +12947,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
 sigmund@^1.0.1, sigmund@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -13862,10 +13997,10 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tippy.js@4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.2.1.tgz#9e4939d976465f77229b05a3cb233b5dc28cf850"
-  integrity sha512-xEE7zYNgQxCDdPcuT6T04f0frPh0wO7CcIqJKMFazU/NqusyjCgYSkLRosIHoiRkZMRzSPOudC8wRN5GjvAyOQ==
+tippy.js@4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
+  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
   dependencies:
     popper.js "^1.14.7"