diff --git a/guides.ts b/guides.ts
index 89fa6e8bed..9acfeed36c 100644
--- a/guides.ts
+++ b/guides.ts
@@ -3,7 +3,7 @@ import { Guide } from 'kompendium';
 export default [
     {
         name: 'Home',
-        children: ['src/contributing.md', 'src/events.md'],
+        children: ['src/contributing.md', 'src/events.md', 'src/theming.md'],
     },
     {
         name: 'DesignGuidelines',
diff --git a/src/components/action-bar/action-bar-item/action-bar-item.scss b/src/components/action-bar/action-bar-item/action-bar-item.scss
index 68198188ad..f68ae93f19 100644
--- a/src/components/action-bar/action-bar-item/action-bar-item.scss
+++ b/src/components/action-bar/action-bar-item/action-bar-item.scss
@@ -40,7 +40,7 @@ button {
     color: var(--limel-action-bar-item-text-color);
 
     border-radius: var(--action-bar-item-height);
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     padding: 0 0.25rem;
 
     &:has(.text) {
@@ -55,7 +55,10 @@ button {
         &:not(:hover) {
             box-shadow: var(--button-shadow-inset);
         }
-        color: var(--mdc-theme-primary) !important;
+        color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        ) !important;
     }
 }
 
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index e59ffb2417..98e953fba9 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -1,5 +1,4 @@
 @use '../../style/functions';
-@use '../../style/internal/lime-theme';
 @use '../../style/mixins';
 
 /**
diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
index ad9517cd44..f6a42b9433 100644
--- a/src/components/banner/banner.scss
+++ b/src/components/banner/banner.scss
@@ -1,5 +1,3 @@
-@use '../../style/internal/lime-theme';
-@use '../../style/internal/variables';
 @use '../../style/functions';
 
 /**
@@ -8,7 +6,7 @@
  */
 
 .lime-banner {
-    min-height: variables.$lime-banner-height;
+    min-height: 3.25rem;
     display: none;
     background-color: rgba(var(--contrast-100), 0.7);
     backdrop-filter: blur(functions.pxToRem(5));
diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss
index d9cce5b36a..00352a873f 100644
--- a/src/components/breadcrumbs/breadcrumbs.scss
+++ b/src/components/breadcrumbs/breadcrumbs.scss
@@ -48,7 +48,7 @@ ol {
 
     color: var(--limel-breadcrumbs-item-text-color);
     border-radius: 100vw;
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     padding: 0 0.25rem;
 
     &:not(:has(.text)) {
diff --git a/src/components/button-group/button-group.scss b/src/components/button-group/button-group.scss
index cca2db5b92..da6893df5b 100644
--- a/src/components/button-group/button-group.scss
+++ b/src/components/button-group/button-group.scss
@@ -26,7 +26,7 @@
     display: inline-grid;
     grid-auto-flow: column;
     margin: functions.pxToRem(2) !important;
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
 
     &:not(:last-child) {
         &:after {
@@ -96,7 +96,7 @@
             // which gets focused, which is inside this element…
             // and we are removing or hiding the visual appearance of the button
             outline: none;
-            color: var(--mdc-theme-primary);
+            color: var(--lime-primary-color, var(--limel-theme-primary-color));
         }
 
         &:only-child {
@@ -113,7 +113,7 @@
     }
 
     &.mdc-chip--selected {
-        background-color: var(--mdc-theme-surface);
+        background-color: var(--limel-theme-surface-background-color);
         box-shadow: var(--button-shadow-inset);
 
         &:active {
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index e9dca5f49f..6c5e548786 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 :host {
     display: inline-block;
 }
@@ -56,10 +54,13 @@ button {
 
     :host(limel-button[primary]) & {
         &:not(:disabled) {
-            color: var(--mdc-theme-on-primary, rgb(var(--color-white)));
+            color: var(
+                --lime-on-primary-color,
+                var(--limel-theme-on-primary-color)
+            );
             background-color: var(
-                --mdc-theme-primary,
-                rgb(var(--color-teal-default))
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
             );
         }
         &:disabled {
@@ -69,7 +70,7 @@ button {
 
     :host(limel-button:not([primary])) & {
         &:not(:disabled) {
-            color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));
+            color: var(--lime-primary-color, var(--limel-theme-primary-color));
         }
         &:disabled {
             color: rgba(var(--contrast-1600), 0.37);
@@ -79,7 +80,7 @@ button {
 }
 
 .label {
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     font-weight: 600;
     letter-spacing: functions.pxToRem(0.5);
     padding: 0 0.25rem;
@@ -137,13 +138,13 @@ svg {
 }
 
 .just-failed {
-    background-color: var(--lime-error-text-color) !important;
+    background-color: var(--limel-theme-error-color) !important;
     animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
 .outlined {
     border: 1px solid;
-    border-color: var(--mdc-theme-primary);
+    border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 
 @keyframes shake {
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 1148a21e0c..98607e70a9 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -124,7 +124,7 @@ header {
     }
 
     h2 {
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
         font-weight: 400;
         color: var(--card-subheading-color, rgb(var(--contrast-1000)));
     }
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index f83f5cad84..7e923cb564 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '@material/checkbox';
 @use '@material/form-field';
 
@@ -8,7 +7,10 @@
 
 @mixin custom-checkbox-styles {
     // This is used in other components too, such as `limel-list`
-    --mdc-checkbox-checked-color: var(--mdc-theme-primary);
+    --mdc-checkbox-checked-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
     --mdc-checkbox-unchecked-color: var(
         --checkbox-unchecked-border-color,
         rgb(var(--contrast-900))
@@ -38,6 +40,7 @@ limel-dynamic-label {
     // other font-related styles that might be set by MDC,
     // such as `letter-spacing` or `font-size`.
     font-family: inherit;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 .mdc-form-field {
@@ -61,7 +64,7 @@ limel-dynamic-label {
                     :indeterminate
                 )
                 ~ .mdc-checkbox__background {
-                border-color: var(--lime-error-text-color);
+                border-color: var(--limel-theme-error-color);
             }
         }
         .mdc-checkbox__native-control {
@@ -91,13 +94,15 @@ limel-dynamic-label {
         padding-top: 0.75rem;
         padding-left: 0;
 
+        color: var(--limel-theme-text-primary-on-background-color);
+
         &.mdc-checkbox--required::after {
             margin-left: 0.0625rem;
             content: '*';
         }
 
         &.mdc-checkbox--invalid {
-            color: var(--lime-error-text-color);
+            color: var(--limel-theme-error-text-color);
         }
     }
 }
diff --git a/src/components/checkbox/checkbox.template.tsx b/src/components/checkbox/checkbox.template.tsx
index 874369d515..94e2d993ca 100644
--- a/src/components/checkbox/checkbox.template.tsx
+++ b/src/components/checkbox/checkbox.template.tsx
@@ -26,7 +26,7 @@ export const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (
         if (props.checked) {
             icon = {
                 name: 'ok',
-                color: 'var(--mdc-theme-primary)',
+                color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
             };
         }
 
diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss
index 457b402b3e..2e172c9162 100644
--- a/src/components/chip-set/chip-set.scss
+++ b/src/components/chip-set/chip-set.scss
@@ -2,8 +2,6 @@
 @use '../../style/internal/shared_input-select-picker';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/textfield';
 @use '@material/textfield/icon';
 
@@ -159,7 +157,7 @@ $leading-icon-space: 1.5rem;
 .delimiter {
     opacity: 0.5;
     padding: 0 functions.pxToRem(2);
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
 }
 
 limel-chip {
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
index a54482525c..1e435f4911 100644
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -109,7 +109,7 @@
         }
     }
     .text {
-        color: var(--mdc-theme-primary);
+        color: var(--lime-primary-color, var(--limel-theme-primary-color));
     }
 }
 
@@ -183,6 +183,7 @@ limel-badge {
     @include mixins.truncate-text;
     line-height: 1.2;
     padding: 0 0.5rem;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 .trailing-button {
diff --git a/src/components/circular-progress/circular-progress.scss b/src/components/circular-progress/circular-progress.scss
index 66455608fb..d591661496 100644
--- a/src/components/circular-progress/circular-progress.scss
+++ b/src/components/circular-progress/circular-progress.scss
@@ -1,6 +1,5 @@
 @use '../../style/functions';
 @use '../../style/mixins';
-@use '../../style/internal/lime-theme';
 
 /**
  * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
@@ -50,7 +49,10 @@
 
 .lime-circular-progress {
     --size: var(--circular-progress-size, 3rem);
-    --fill-color: var(--circular-progress-fill-color, var(--mdc-theme-primary));
+    --fill-color: var(
+        --circular-progress-fill-color,
+        var(--lime-primary-color, var(--limel-theme-primary-color))
+    );
     --track-color: var(
         --circular-progress-track-color,
         rgb(var(--contrast-400))
diff --git a/src/components/collapsible-section/collapsible-section.scss b/src/components/collapsible-section/collapsible-section.scss
index 4464f4cf4f..bfd3377db0 100644
--- a/src/components/collapsible-section/collapsible-section.scss
+++ b/src/components/collapsible-section/collapsible-section.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '../../style/mixins';
 @use '../../style/internal/shared_input-select-picker';
 
@@ -101,7 +100,7 @@ limel-icon {
 .title {
     font-size: 1rem;
     font-weight: 300;
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
 
     justify-self: flex-start;
 
diff --git a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
index 50ac97eb26..1318e096b1 100644
--- a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
+++ b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss
@@ -1,4 +1,3 @@
-@use '../../../style/internal/lime-theme';
 @use '../../../style/functions';
 @use '../../../style/mixins';
 
@@ -84,19 +83,32 @@ svg {
     &.endRange,
     &.inRange,
     &.selected:hover {
-        border-color: var(--mdc-theme-primary);
-        color: var(--mdc-theme-on-primary);
-        background: var(--mdc-theme-primary);
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+        color: var(
+            --lime-on-primary-color,
+            var(--limel-theme-on-primary-color)
+        );
+        background: var(--lime-primary-color, var(--limel-theme-primary-color));
     }
 
     &.today {
-        border-color: var(--mdc-theme-on-primary);
-        box-shadow: 0 0 0 0.125rem var(--mdc-theme-primary);
+        border-color: var(
+            --lime-on-primary-color,
+            var(--limel-theme-on-primary-color)
+        );
+        box-shadow: 0 0 0 0.125rem
+            var(--lime-primary-color, var(--limel-theme-primary-color));
 
         &:hover {
             &:not(.selected) {
                 background-color: transparent;
-                color: var(--mdc-theme-primary);
+                color: var(
+                    --lime-primary-color,
+                    var(--limel-theme-primary-color)
+                );
             }
             &:before {
                 top: -60%;
@@ -139,7 +151,7 @@ svg {
     border-top: 1px solid rgb(var(--contrast-400));
 
     input {
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
     }
 
     input,
@@ -274,8 +286,11 @@ svg {
     text-align: center;
 
     &.selected {
-        color: var(--mdc-theme-on-primary);
-        background: var(--mdc-theme-primary);
+        color: var(
+            --lime-on-primary-color,
+            var(--limel-theme-on-primary-color)
+        );
+        background: var(--lime-primary-color, var(--limel-theme-primary-color));
     }
 }
 
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 346a8beb24..124eacceae 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -1,8 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/dialog';
 
 /**
@@ -91,7 +89,7 @@ $responsive-body-padding: 3vw; // 3% of viewport's width
         );
         @include mixins.fade-out-overflowed-content-on-edges(vertically);
 
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
         padding-left: var(
             --dialog-padding-left-right,
             min(1.25rem, $responsive-body-padding)
diff --git a/src/components/dock/dock-button/dock-button.scss b/src/components/dock/dock-button/dock-button.scss
index a59e54863e..fc47294e76 100644
--- a/src/components/dock/dock-button/dock-button.scss
+++ b/src/components/dock/dock-button/dock-button.scss
@@ -1,6 +1,5 @@
 @use '../../../style/mixins';
 @use '../../../style/functions';
-@use '../../../style/internal/variables';
 
 .button {
     all: unset;
@@ -21,7 +20,7 @@
     height: var(--dock-item-height);
 
     border-radius: functions.pxToRem(6);
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     padding: 0 0.5rem;
     min-width: var(--dock-item-height);
 
diff --git a/src/components/dock/dock.scss b/src/components/dock/dock.scss
index bc3af9ad48..37f98d61ab 100644
--- a/src/components/dock/dock.scss
+++ b/src/components/dock/dock.scss
@@ -1,6 +1,5 @@
 @use '../../style/mixins';
 @use '../../style/functions';
-@use '../../style/internal/variables';
 
 /**
 * @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.
diff --git a/src/components/dynamic-label/dynamic-label.scss b/src/components/dynamic-label/dynamic-label.scss
index fa9e8e734d..51ef194927 100644
--- a/src/components/dynamic-label/dynamic-label.scss
+++ b/src/components/dynamic-label/dynamic-label.scss
@@ -26,6 +26,6 @@ label {
     flex-grow: 1;
     font-size: 0.8125rem; // `13px`, Like Checkbox & Switch
     line-height: normal;
-    color: var(--mdc-theme-on-surface);
+    color: var(--limel-theme-on-surface-color);
     padding-top: 0.375rem;
 }
diff --git a/src/components/file-viewer/file-viewer.scss b/src/components/file-viewer/file-viewer.scss
index c76e965611..c05c4fa0c7 100644
--- a/src/components/file-viewer/file-viewer.scss
+++ b/src/components/file-viewer/file-viewer.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/variables';
 @use '../../style/internal/shared_input-select-picker';
 @use '../../style/mixins';
 
diff --git a/src/components/file/file.scss b/src/components/file/file.scss
index f81bde161f..e4f204b82e 100644
--- a/src/components/file/file.scss
+++ b/src/components/file/file.scss
@@ -35,7 +35,7 @@
 
     .tip {
         font-size: smaller;
-        color: var(--mdc-theme-text-secondary-on-background);
+        color: var(--limel-theme-text-secondary-on-background-color);
 
         // Below tries to render text in two lines,
         // and then truncate if there is no more space
diff --git a/src/components/form/examples/map-component.scss b/src/components/form/examples/map-component.scss
index 091357e520..848fdd5d49 100644
--- a/src/components/form/examples/map-component.scss
+++ b/src/components/form/examples/map-component.scss
@@ -24,7 +24,7 @@
     background-color: rgba(var(--contrast-300), 0.9);
     color: rgb(var(--contrast-1100));
 
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 iframe {
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
index 035fecea61..283a815fa1 100644
--- a/src/components/form/form.scss
+++ b/src/components/form/form.scss
@@ -1,5 +1,3 @@
-@use '../../style/internal/lime-theme';
-@use '../../style/internal/lime-typography';
 @use '../../style/internal/shared_input-select-picker';
 
 /**
@@ -11,8 +9,6 @@
  * @prop --form-background-color-of-odd-rows:Background of odd rows in the form, when layout type is `row`. Defaults to `--contrast-200`.
  */
 
-@include lime-typography.core-styles;
-
 .form-group {
     min-width: 0;
 }
@@ -150,7 +146,7 @@ limel-code-editor {
 }
 
 .form-error {
-    color: var(--mdc-theme-error, #b00020);
+    color: var(--limel-theme-error-color);
     font-size: 0.6875rem;
     line-height: 1.5;
     visibility: inherit;
@@ -183,10 +179,10 @@ limel-code-editor {
     }
 
     .mdc-typography--headline1 {
-        --mdc-typography-headline1-font-size: 2rem;
-        --mdc-typography-headline1-line-height: 2.25rem;
-        --mdc-typography-headline1-letter-spacing: -0.01rem;
-        --mdc-typography-headline1-font-weight: 400;
+        font-size: 2rem;
+        line-height: 2.25rem;
+        letter-spacing: -0.01rem;
+        font-weight: 400;
         margin-top: 1.5rem;
         margin-bottom: 0.25rem;
     }
@@ -194,6 +190,7 @@ limel-code-editor {
     .mdc-typography--body1 {
         margin-top: 0;
         margin-bottom: 0.5rem;
+        font-size: var(--limel-theme-default-font-size);
     }
 
     .form-group {
@@ -203,9 +200,9 @@ limel-code-editor {
         }
 
         .mdc-typography--headline1 {
-            --mdc-typography-headline1-font-size: 1.625rem;
-            --mdc-typography-headline1-line-height: 1.25rem;
-            --mdc-typography-headline1-font-weight: 300;
+            font-size: 1.625rem;
+            line-height: 1.25rem;
+            font-weight: 300;
             margin-top: 1rem;
 
             &:before {
@@ -217,9 +214,12 @@ limel-code-editor {
                 margin: auto;
                 left: -0.75rem;
 
-                background-color: var(--mdc-theme-primary);
+                background-color: var(
+                    --lime-primary-color,
+                    var(--limel-theme-primary-color)
+                );
                 width: 0.125rem;
-                height: var(--mdc-typography-headline1-line-height);
+                height: 1.5rem;
                 border-radius: 0.125rem;
 
                 opacity: 0.6;
@@ -233,8 +233,8 @@ limel-code-editor {
             }
 
             .mdc-typography--headline1 {
-                --mdc-typography-headline1-font-size: 1.375rem;
-                --mdc-typography-headline1-line-height: 1.5rem;
+                font-size: 1.375rem;
+                line-height: 1.5rem;
                 margin-top: 0.5rem;
 
                 &:before {
@@ -249,8 +249,8 @@ limel-code-editor {
                 }
 
                 .mdc-typography--headline1 {
-                    --mdc-typography-headline1-font-size: 1.25rem;
-                    --mdc-typography-headline1-line-height: 1.25rem;
+                    font-size: 1.25rem;
+                    line-height: 1.25rem;
                     margin-top: 1rem;
 
                     &:before {
@@ -265,8 +265,8 @@ limel-code-editor {
                 }
 
                 .mdc-typography--headline1 {
-                    --mdc-typography-headline1-font-size: 1.25rem;
-                    --mdc-typography-headline1-line-height: 1.25rem;
+                    font-size: 1.25rem;
+                    line-height: 1.25rem;
                     margin-top: 0.25rem;
 
                     &:before {
@@ -281,8 +281,8 @@ limel-code-editor {
                     }
 
                     .mdc-typography--headline1 {
-                        --mdc-typography-headline1-font-size: 1rem;
-                        --mdc-typography-headline1-line-height: 1rem;
+                        font-size: 1rem;
+                        line-height: 1rem;
                         margin-top: 0.25rem;
 
                         &:before {
diff --git a/src/components/form/row/row.scss b/src/components/form/row/row.scss
index d059389ac4..a1104033cf 100644
--- a/src/components/form/row/row.scss
+++ b/src/components/form/row/row.scss
@@ -74,14 +74,14 @@
         font-weight: normal;
 
         flex-grow: 1;
-        color: var(--mdc-theme-on-surface);
-        font-size: var(--mdc-typography-subtitle1-font-size, 0.875rem);
+        color: var(--limel-theme-on-surface-color);
+        font-size: 0.875rem;
     }
 
     .description {
         margin: 0;
-        color: var(--mdc-theme-text-secondary-on-background);
-        font-size: var(--mdc-typography-body2-font-size, 0.8125rem);
+        color: var(--limel-theme-text-secondary-on-background-color);
+        font-size: 0.8125rem;
         line-height: 1.5;
     }
 
diff --git a/src/components/help/limel-help-content.scss b/src/components/help/limel-help-content.scss
index 1c15adcaee..802e366ef7 100644
--- a/src/components/help/limel-help-content.scss
+++ b/src/components/help/limel-help-content.scss
@@ -28,7 +28,7 @@ a {
     bottom: 0;
 
     text-decoration: none;
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     padding-bottom: 0.125rem;
 }
 
diff --git a/src/components/helper-line/helper-line.scss b/src/components/helper-line/helper-line.scss
index a1003c5d2c..81edc5438c 100644
--- a/src/components/helper-line/helper-line.scss
+++ b/src/components/helper-line/helper-line.scss
@@ -27,7 +27,7 @@ div {
     --limel-h-l-grid-template-rows: 1fr;
 
     .helper-text {
-        color: var(--mdc-theme-error);
+        color: var(--limel-theme-error-color);
     }
 }
 
diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
index 95d86a7bf0..098d7dca6e 100644
--- a/src/components/icon-button/icon-button.scss
+++ b/src/components/icon-button/icon-button.scss
@@ -30,7 +30,7 @@ button {
     &:disabled {
         cursor: not-allowed;
 
-        color: var(--mdc-theme-text-disabled-on-background);
+        color: var(--limel-theme-text-disabled-on-background-color);
     }
 }
 
diff --git a/src/components/info-tile/info-tile.scss b/src/components/info-tile/info-tile.scss
index 7caabd5afd..0c44308e6a 100644
--- a/src/components/info-tile/info-tile.scss
+++ b/src/components/info-tile/info-tile.scss
@@ -163,7 +163,7 @@ slot[name='primary'] {
         var(--label-max-size)
     );
     @supports not (container-type: size) {
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
     }
 }
 
diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
index 9eec943b89..bc657eda39 100644
--- a/src/components/input-field/input-field.scss
+++ b/src/components/input-field/input-field.scss
@@ -3,8 +3,6 @@
 @use '../../style/internal/shared_input-select-picker';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/textfield';
 @use '@material/textfield/icon';
 @use '@material/list';
diff --git a/src/components/linear-progress/linear-progress.scss b/src/components/linear-progress/linear-progress.scss
index e3da8dc261..45cb4ae227 100644
--- a/src/components/linear-progress/linear-progress.scss
+++ b/src/components/linear-progress/linear-progress.scss
@@ -1,5 +1,3 @@
-@use '../../style/internal/lime-theme';
-
 /**
  * @prop --background-color: Color to use for progress-bar track.
  */
@@ -22,7 +20,10 @@
     width: var(--percentage, 0%);
 
     border-radius: 0.25rem;
-    background-color: var(--mdc-theme-primary);
+    background-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
 }
 
 :host(limel-linear-progress[indeterminate]) {
@@ -39,7 +40,10 @@
             height: 100%;
             border-radius: 0.25rem;
             opacity: 0;
-            background-color: var(--mdc-theme-primary);
+            background-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
         }
 
         &:before {
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index f87ae83470..9722e29fbc 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -1,7 +1,6 @@
 @use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
 @use '../checkbox/checkbox.scss';
 
 @use '@material/list';
@@ -44,6 +43,25 @@ $list-mdc-list-item: 0;
     // other font-related styles that might be set by MDC,
     // such as `letter-spacing` or `font-size`.
     font-family: inherit;
+    color: var(--limel-theme-text-primary-on-background-color);
+}
+
+.mdc-deprecated-list-item__text,
+.mdc-deprecated-list-item__primary-text {
+    font-size: var(--limel-theme-default-font-size);
+}
+
+.mdc-deprecated-list-item__secondary-text {
+    opacity: 0.6;
+    font-size: 0.8125rem; //13px
+}
+
+.mdc-deprecated-list-item--disabled {
+    .mdc-deprecated-list-item__text,
+    .mdc-deprecated-list-item__primary-text,
+    .mdc-deprecated-list-item__secondary-text {
+        color: var(--limel-theme-text-disabled-on-background-color);
+    }
 }
 
 .mdc-deprecated-list {
@@ -240,7 +258,10 @@ $list-mdc-list-item: 0;
 
 .mdc-deprecated-list-item.mdc-deprecated-list-item--selected {
     &:before {
-        background-color: var(--mdc-theme-primary);
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
         opacity: 0.15;
     }
 }
diff --git a/src/components/list/partial-styles/_static-actions.scss b/src/components/list/partial-styles/_static-actions.scss
index 64a3119baf..100c6b7e55 100644
--- a/src/components/list/partial-styles/_static-actions.scss
+++ b/src/components/list/partial-styles/_static-actions.scss
@@ -2,13 +2,13 @@
 
 :host(.static-actions-list) {
     z-index: $list-static-actions-list;
-    background-color: var(--mdc-theme-surface);
+    background-color: var(--limel-theme-surface-background-color);
 }
 
 :host(.has-position-sticky) {
     position: sticky;
     box-shadow: 0 0 functions.pxToRem(12) functions.pxToRem(8)
-        var(--mdc-theme-surface);
+        var(--limel-theme-surface-background-color);
 }
 
 :host(.has-position-sticky.is-on-top) {
diff --git a/src/components/markdown/partial-styles/_adjust-for-table-cell.scss b/src/components/markdown/partial-styles/_adjust-for-table-cell.scss
index 27c8f14358..add28e19dd 100644
--- a/src/components/markdown/partial-styles/_adjust-for-table-cell.scss
+++ b/src/components/markdown/partial-styles/_adjust-for-table-cell.scss
@@ -29,7 +29,7 @@
         display: inline-block;
         vertical-align: bottom;
 
-        font-size: 0.875rem; // Same as `<p>`s
+        font-size: var(--limel-theme-default-font-size); // Same as `<p>`s
         margin: 0 0.25rem 0 0;
         letter-spacing: normal;
         font-weight: 500;
diff --git a/src/components/markdown/partial-styles/_body-text.scss b/src/components/markdown/partial-styles/_body-text.scss
index 255bafd3c7..a677058247 100644
--- a/src/components/markdown/partial-styles/_body-text.scss
+++ b/src/components/markdown/partial-styles/_body-text.scss
@@ -10,7 +10,7 @@
 
 p,
 li {
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     word-break: break-word;
 }
 
diff --git a/src/components/markdown/partial-styles/_definition-lists.scss b/src/components/markdown/partial-styles/_definition-lists.scss
index 6e18fd2bcc..62eea28e32 100644
--- a/src/components/markdown/partial-styles/_definition-lists.scss
+++ b/src/components/markdown/partial-styles/_definition-lists.scss
@@ -12,7 +12,7 @@ dl {
     dt,
     dd {
         padding: $border-radius 0.5rem;
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
         margin: 0;
 
         &:nth-of-type(even) {
diff --git a/src/components/markdown/partial-styles/_headings.scss b/src/components/markdown/partial-styles/_headings.scss
index 2e4d15df23..68bbffc25d 100644
--- a/src/components/markdown/partial-styles/_headings.scss
+++ b/src/components/markdown/partial-styles/_headings.scss
@@ -15,7 +15,7 @@ h4 {
 }
 
 h5 {
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 h6 {
diff --git a/src/components/markdown/partial-styles/_tables.scss b/src/components/markdown/partial-styles/_tables.scss
index 3cc912ae60..cf65d825c3 100644
--- a/src/components/markdown/partial-styles/_tables.scss
+++ b/src/components/markdown/partial-styles/_tables.scss
@@ -26,7 +26,7 @@
         text-align: left;
         vertical-align: top;
         transition: background-color 0.2s ease;
-        font-size: 0.875rem; // 14px
+        font-size: var(--limel-theme-default-font-size); // 14px
     }
 
     td {
diff --git a/src/components/notched-outline/notched-outline.scss b/src/components/notched-outline/notched-outline.scss
index e6bbfd4e5a..052f26713a 100644
--- a/src/components/notched-outline/notched-outline.scss
+++ b/src/components/notched-outline/notched-outline.scss
@@ -177,10 +177,12 @@ limel-notched-outline {
 
     &[invalid]:not([invalid='false']) {
         &:not([disabled]:not([disabled='false'])) {
-            --limel-notched-outline-border-color: var(--lime-error-text-color);
+            --limel-notched-outline-border-color: var(
+                --limel-theme-error-text-color
+            );
             &:hover {
                 --limel-notched-outline-border-color: var(
-                    --lime-error-text-color
+                    --limel-theme-error-color
                 );
             }
         }
@@ -188,7 +190,7 @@ limel-notched-outline {
         .limel-notched-outline--notch {
             label {
                 &:after {
-                    color: var(--lime-error-text-color);
+                    color: var(--limel-theme-error-text-color);
                 }
             }
         }
diff --git a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
index b151022da3..c8695a5e71 100644
--- a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
+++ b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss
@@ -1,6 +1,5 @@
 @use '../../../style/mixins';
 @use '../../../style/functions';
-@use '../../../style/internal/variables';
 
 $limel-progress-flow-step-content: 2;
 $limel-progress-flow-divider: 1;
@@ -12,7 +11,7 @@ $limel-progress-flow-divider: 1;
     );
     --step-background--selected: var(
         --progress-flow-step-background-color--selected,
-        var(--mdc-theme-primary)
+        var(--lime-primary-color, var(--limel-theme-primary-color))
     );
     --step-background--passed: var(
         --progress-flow-step-background-color--passed,
@@ -25,7 +24,7 @@ $limel-progress-flow-divider: 1;
     );
     --step-text--selected: var(
         --progress-flow-step-text-color--selected,
-        var(--mdc-theme-on-primary)
+        var(--lime-on-primary-color, var(--limel-theme-on-primary-color))
     );
     --step-text--passed: var(
         --progress-flow-step-text-color--passed,
@@ -73,7 +72,7 @@ $limel-progress-flow-divider: 1;
     width: 100%;
     height: var(--step-height);
     border: none;
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
 
     &.disabled {
         cursor: not-allowed;
diff --git a/src/components/progress-flow/progress-flow.scss b/src/components/progress-flow/progress-flow.scss
index 86bc9c4395..4a4dd4485a 100644
--- a/src/components/progress-flow/progress-flow.scss
+++ b/src/components/progress-flow/progress-flow.scss
@@ -1,5 +1,4 @@
 @use '../../style/functions';
-@use '../../style/internal/variables';
 
 /**
 * @prop --progress-flow-step-background-color: Background color of steps, defaults to `--contrast-600`.
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 9562ed8cc3..0a7e300806 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -36,6 +36,7 @@ limel-notched-outline:not([invalid]:not([invalid='false'])) {
     // other font-related styles that might be set by MDC,
     // such as `letter-spacing` or `font-size`.
     font-family: inherit;
+    font-size: var(--limel-theme-default-font-size);
 }
 
 .mdc-select__dropdown-icon-graphic {
@@ -127,7 +128,10 @@ limel-notched-outline:not([invalid]:not([invalid='false'])) {
 
                 .mdc-select__dropdown-icon {
                     svg {
-                        fill: var(--mdc-theme-primary);
+                        fill: var(
+                            --lime-primary-color,
+                            var(--limel-theme-primary-color)
+                        );
                     }
                 }
 
@@ -146,7 +150,7 @@ limel-notched-outline:not([invalid]:not([invalid='false'])) {
     &.limel-select--invalid {
         .limel-select__selected-option__text,
         .invalid-icon {
-            color: var(--lime-error-text-color);
+            color: var(--limel-theme-error-text-color);
         }
     }
 }
diff --git a/src/components/slider/partial-styles/_readonly.scss b/src/components/slider/partial-styles/_readonly.scss
index 5ddeb5ea01..a4bfed40e6 100644
--- a/src/components/slider/partial-styles/_readonly.scss
+++ b/src/components/slider/partial-styles/_readonly.scss
@@ -1,4 +1,3 @@
-@use '../../../style/internal/lime-theme';
 @use '../../../style/functions';
 
 :host(limel-slider.readonly) {
@@ -28,11 +27,17 @@
 
         .mdc-slider__track--active_fill,
         .mdc-slider__thumb-knob {
-            background-color: var(--mdc-theme-primary);
+            background-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
         }
 
         .mdc-slider__track--active_fill {
-            border-color: var(--mdc-theme-primary);
+            border-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
         }
     }
 }
diff --git a/src/components/slider/partial-styles/_thumb.scss b/src/components/slider/partial-styles/_thumb.scss
index 3751900095..d48a1342ab 100644
--- a/src/components/slider/partial-styles/_thumb.scss
+++ b/src/components/slider/partial-styles/_thumb.scss
@@ -70,7 +70,10 @@
             box-shadow: var(--shadow-depth-16);
 
             &:before {
-                border-top-color: var(--mdc-theme-primary);
+                border-top-color: var(
+                    --lime-primary-color,
+                    var(--limel-theme-primary-color)
+                );
             }
         }
     }
@@ -85,6 +88,9 @@
 .mdc-slider__value-indicator {
     .mdc-slider:not(.mdc-slider--disabled) &,
     :host(limel-slider[readonly]) & {
-        background-color: var(--mdc-theme-primary);
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
     }
 }
diff --git a/src/components/slider/partial-styles/percentage-color.scss b/src/components/slider/partial-styles/percentage-color.scss
index 335484e805..0a3b4af266 100644
--- a/src/components/slider/partial-styles/percentage-color.scss
+++ b/src/components/slider/partial-styles/percentage-color.scss
@@ -5,41 +5,41 @@
 }
 
 :host(.displays-percentage-colors[readonly]) {
-    --mdc-theme-on-surface: var(--mdc-theme-primary);
+    --mdc-theme-on-surface: var(--lime-primary-color);
 }
 
 :host(.displays-percentage-colors.percent-0) {
-    --mdc-theme-primary: var(--color-percent--0);
+    --lime-primary-color: var(--color-percent--0);
 }
 :host(.displays-percentage-colors.percent-0-10) {
-    --mdc-theme-primary: var(--color-percent--0to10);
+    --lime-primary-color: var(--color-percent--0to10);
 }
 :host(.displays-percentage-colors.percent-10-20) {
-    --mdc-theme-primary: var(--color-percent--10to20);
+    --lime-primary-color: var(--color-percent--10to20);
 }
 :host(.displays-percentage-colors.percent-20-30) {
-    --mdc-theme-primary: var(--color-percent--20to30);
+    --lime-primary-color: var(--color-percent--20to30);
 }
 :host(.displays-percentage-colors.percent-30-40) {
-    --mdc-theme-primary: var(--color-percent--30to40);
+    --lime-primary-color: var(--color-percent--30to40);
 }
 :host(.displays-percentage-colors.percent-40-50) {
-    --mdc-theme-primary: var(--color-percent--40to50);
+    --lime-primary-color: var(--color-percent--40to50);
 }
 :host(.displays-percentage-colors.percent-50-60) {
-    --mdc-theme-primary: var(--color-percent--50to60);
+    --lime-primary-color: var(--color-percent--50to60);
 }
 :host(.displays-percentage-colors.percent-60-70) {
-    --mdc-theme-primary: var(--color-percent--60to70);
+    --lime-primary-color: var(--color-percent--60to70);
 }
 :host(.displays-percentage-colors.percent-70-80) {
-    --mdc-theme-primary: var(--color-percent--70to80);
+    --lime-primary-color: var(--color-percent--70to80);
 }
 :host(.displays-percentage-colors.percent-80-90) {
-    --mdc-theme-primary: var(--color-percent--80to90);
+    --lime-primary-color: var(--color-percent--80to90);
 }
 :host(.displays-percentage-colors.percent-90-100) {
-    --mdc-theme-primary: var(--color-percent--90to100);
+    --lime-primary-color: var(--color-percent--90to100);
 }
 :host(.displays-percentage-colors.percent-30-40),
 :host(.displays-percentage-colors.percent-40-50),
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index b708924187..3c4112105c 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -2,8 +2,6 @@
 @use '../../style/functions';
 @use '../../style/internal/shared_input-select-picker';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/slider/styles';
 
 :host(limel-slider) {
@@ -34,6 +32,35 @@ div[slot='content'] {
 .mdc-slider {
     height: shared_input-select-picker.$height-of-mdc-text-field;
     margin: 0 0.75rem;
+
+    .mdc-slider__track--inactive {
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .mdc-slider__track--active_fill {
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .mdc-slider__thumb-knob {
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .mdc-slider__value-indicator-text {
+        font-size: 0.8125rem; //13px
+    }
 }
 
 .mdc-slider .mdc-slider__value-indicator-text {
diff --git a/src/components/snackbar/snackbar.scss b/src/components/snackbar/snackbar.scss
index 2df4701bb7..135c25611b 100644
--- a/src/components/snackbar/snackbar.scss
+++ b/src/components/snackbar/snackbar.scss
@@ -75,9 +75,11 @@ aside {
 }
 
 .dismiss {
-    --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon
+    --limel-theme-on-surface-color: rgb(
+        var(--contrast-100)
+    ); // color of the X icon
     --icon-background-color: var(--lime-elevated-surface-background-color);
-    --fill-color: var(--mdc-theme-primary);
+    --fill-color: var(--lime-primary-color, var(--limel-theme-primary-color));
     --track-color: rgb(var(--contrast-800), 0.2);
     transition:
         opacity 0.1s ease,
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index a6f22b7b4c..a92305fc58 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '../../style/functions';
-@use '../../style/internal/lime-theme';
 
 /**
  * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-lime-green`.
diff --git a/src/components/split-button/split-button.scss b/src/components/split-button/split-button.scss
index 2d1a931e59..86a0ab93cf 100644
--- a/src/components/split-button/split-button.scss
+++ b/src/components/split-button/split-button.scss
@@ -42,14 +42,14 @@ limel-menu {
 
     &:not([disabled]) {
         color: var(
-            --mdc-theme-primary,
-            rgb(var(--color-teal-default))
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
         ); // similar to limel-button text
 
         &.primary {
             color: var(
-                --mdc-theme-on-primary,
-                rgb(var(--color-white))
+                --lime-on-primary-color,
+                var(--limel-theme-on-primary-color)
             ); // similar to limel-button text
         }
     }
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index 0f1f2b77bf..e083c42031 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -1,7 +1,5 @@
 @use '../../style/functions';
 @use '../../style/internal/shared_input-select-picker';
-@use '../../style/internal/lime-theme';
-@use '../../style/internal/lime-typography';
 
 @use '@material/switch/styles';
 
@@ -57,10 +55,22 @@ $scale-factor: 0.8;
     --mdc-switch-unselected-focus-track-color: rgb(var(--contrast-800));
     --mdc-switch-unselected-pressed-track-color: rgb(var(--contrast-800));
     --mdc-switch-unselected-hover-track-color: rgb(var(--contrast-800));
-    --mdc-switch-selected-focus-track-color: var(--mdc-theme-primary);
-    --mdc-switch-selected-pressed-track-color: var(--mdc-theme-primary);
-    --mdc-switch-selected-track-color: var(--mdc-theme-primary);
-    --mdc-switch-selected-hover-track-color: var(--mdc-theme-primary);
+    --mdc-switch-selected-focus-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
+    --mdc-switch-selected-pressed-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
+    --mdc-switch-selected-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
+    --mdc-switch-selected-hover-track-color: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
 
     --mdc-switch-handle-elevation: var(--button-shadow-normal);
     --mdc-switch-disabled-track-opacity: 0.4;
@@ -77,11 +87,8 @@ $scale-factor: 0.8;
 }
 
 label {
-    @include lime-typography.typography(body2);
-    color: var(--mdc-theme-on-surface);
-    padding-top: 0.375rem;
-    line-height: normal;
-    letter-spacing: normal;
+    padding-top: 0.25rem;
+    font-size: var(--limel-theme-default-font-size);
 
     &:not(.disabled) {
         cursor: pointer;
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 04e07b37c0..d03beb66ea 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -138,7 +138,7 @@ export class Switch {
             if (this.value) {
                 icon = {
                     name: 'ok',
-                    color: 'var(--mdc-theme-primary)',
+                    color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
                 };
             }
 
diff --git a/src/components/tab-bar/tab-bar.scss b/src/components/tab-bar/tab-bar.scss
index c9705f8c3b..ceae7f01d8 100644
--- a/src/components/tab-bar/tab-bar.scss
+++ b/src/components/tab-bar/tab-bar.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/lime-theme';
 @use '@material/tab-bar/mdc-tab-bar';
 @use '@material/tab-scroller/mdc-tab-scroller';
 @use '@material/tab-indicator/mdc-tab-indicator';
@@ -38,6 +37,8 @@ $tab-separator-background-color: rgb(var(--contrast-600));
     font-family: inherit;
     font-weight: 400;
     letter-spacing: normal;
+    font-size: var(--limel-theme-default-font-size);
+    text-transform: none;
 }
 
 .mdc-tab-indicator {
@@ -147,16 +148,16 @@ $tab-separator-background-color: rgb(var(--contrast-600));
     .mdc-tab__text-label {
         transition: color 0.2s ease;
         padding-left: 0 !important;
-        color: var(--mdc-theme-on-surface);
+        color: var(--limel-theme-on-surface-color);
     }
     &:hover {
         .mdc-tab__text-label {
-            color: var(--mdc-theme-text-primary-on-background);
+            color: var(--limel-theme-text-primary-on-background-color);
         }
     }
     &.mdc-tab--active {
         .mdc-tab__text-label {
-            color: var(--mdc-theme-primary);
+            color: var(--lime-primary-color, var(--limel-theme-primary-color));
         }
     }
 }
diff --git a/src/components/table/partial-styles/tabulator-custom-styles.scss b/src/components/table/partial-styles/tabulator-custom-styles.scss
index da6c2a3464..1d8980da95 100644
--- a/src/components/table/partial-styles/tabulator-custom-styles.scss
+++ b/src/components/table/partial-styles/tabulator-custom-styles.scss
@@ -54,7 +54,7 @@
                 z-index: $table--has-interactive-rows--selectable-row--hover + 1;
                 inset: 0 0 auto 0;
                 border: $width-of-selected-row-indicator solid
-                    var(--mdc-theme-primary);
+                    var(--lime-primary-color, var(--limel-theme-primary-color));
                 border-radius: 1rem;
                 margin-right: -$width-of-selected-row-indicator * 2;
             }
diff --git a/src/components/table/partial-styles/tabulator-paginator.scss b/src/components/table/partial-styles/tabulator-paginator.scss
index 6a5dd54f9e..1682f47136 100644
--- a/src/components/table/partial-styles/tabulator-paginator.scss
+++ b/src/components/table/partial-styles/tabulator-paginator.scss
@@ -37,7 +37,9 @@
                 background-color: transparent; // has to be here, otherwise disabled buttons will also get a background
 
                 &.active {
-                    background-color: var(--mdc-theme-surface);
+                    background-color: var(
+                        --limel-theme-surface-background-color
+                    );
                     box-shadow: var(--button-shadow-inset);
                 }
 
@@ -80,7 +82,7 @@ button.tabulator-page {
                 style: solid;
                 color: transparent;
                 width: 0.25rem 0 0.25rem 0.4rem;
-                left-color: var(--mdc-theme-on-surface);
+                left-color: var(--limel-theme-on-surface-color);
             }
         }
     }
@@ -90,7 +92,7 @@ button.tabulator-page {
         &:before {
             height: 0.5rem;
             width: 0.125rem;
-            background-color: var(--mdc-theme-on-surface);
+            background-color: var(--limel-theme-on-surface-color);
         }
     }
 
diff --git a/src/components/table/table.scss b/src/components/table/table.scss
index 4024b0a6a1..8eda581c16 100644
--- a/src/components/table/table.scss
+++ b/src/components/table/table.scss
@@ -27,9 +27,12 @@ $height-of-aggregations-row: 1.5rem;
     --table-row-background-color--active: var(--contrast-300);
 
     --table-arrow-color: var(--contrast-800);
-    --table-arrow-color--active: var(--mdc-theme-primary);
+    --table-arrow-color--active: var(
+        --lime-primary-color,
+        var(--limel-theme-primary-color)
+    );
 
-    --table-text-color: var(--mdc-theme-text-primary-on-background);
+    --table-text-color: var(--limel-theme-text-primary-on-background-color);
     --limel-chip-size: 1.25rem;
 }
 
diff --git a/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss b/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
index 928e16e0c0..983dcd85f8 100644
--- a/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
+++ b/src/components/text-editor/prosemirror-adapter/plugins/image/view.scss
@@ -64,7 +64,10 @@
 
     &:has(.resize-handle[aria-grabbed='true']) {
         &::before {
-            border-color: var(--mdc-theme-primary);
+            border-color: var(
+                --lime-primary-color,
+                var(--limel-theme-primary-color)
+            );
             opacity: 0.8;
             box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);
         }
@@ -115,7 +118,10 @@
     &:hover,
     &:focus-visible {
         opacity: 1;
-        background-color: var(--mdc-theme-primary);
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
     }
 
     &:hover,
diff --git a/src/components/text-editor/text-editor.scss b/src/components/text-editor/text-editor.scss
index 34968e9939..6df4e9df65 100644
--- a/src/components/text-editor/text-editor.scss
+++ b/src/components/text-editor/text-editor.scss
@@ -151,7 +151,7 @@ $min-height-condensed: calc($min-height / 2);
 
     padding: var(--limel-text-editor-padding);
     font-style: italic;
-    font-size: 0.875rem;
+    font-size: var(--limel-theme-default-font-size);
     color: shared_input-select-picker.$input-placeholder-color;
 }
 
diff --git a/src/components/tooltip/tooltip-content.scss b/src/components/tooltip/tooltip-content.scss
index 4ebcfe222f..7e455c9624 100644
--- a/src/components/tooltip/tooltip-content.scss
+++ b/src/components/tooltip/tooltip-content.scss
@@ -8,7 +8,7 @@
 }
 
 text {
-    font-size: 0.875rem; // 14px
+    font-size: var(--limel-theme-default-font-size); // 14px
     line-height: 1.25;
     display: flex;
     column-gap: 1rem;
diff --git a/src/design-guidelines/action-buttons/examples/action-buttons.scss b/src/design-guidelines/action-buttons/examples/action-buttons.scss
index c9b927bc80..f77d1ac9bf 100644
--- a/src/design-guidelines/action-buttons/examples/action-buttons.scss
+++ b/src/design-guidelines/action-buttons/examples/action-buttons.scss
@@ -23,7 +23,7 @@ $dialog-border-radius: 0.75rem;
     }
 
     p {
-        font-size: 0.875rem;
+        font-size: var(--limel-theme-default-font-size);
         opacity: 0.7;
         align-self: flex-start;
         padding: 0 0.75rem;
diff --git a/src/design-guidelines/color-system/examples/ui-color-palette.scss b/src/design-guidelines/color-system/examples/ui-color-palette.scss
index e555a16ecd..094f5bef24 100644
--- a/src/design-guidelines/color-system/examples/ui-color-palette.scss
+++ b/src/design-guidelines/color-system/examples/ui-color-palette.scss
@@ -18,7 +18,7 @@
 .usage {
     ul {
         padding-inline-start: functions.pxToRem(16);
-        font-size: functions.pxToRem(14);
+        font-size: var(--limel-theme-default-font-size);
         color: rgb(var(--contrast-1300));
         margin: 0 0 functions.pxToRem(16) 0;
     }
diff --git a/src/design-guidelines/shadows/examples/surface-shadows.scss b/src/design-guidelines/shadows/examples/surface-shadows.scss
index 40b0a72cc1..4de6c1a8bd 100644
--- a/src/design-guidelines/shadows/examples/surface-shadows.scss
+++ b/src/design-guidelines/shadows/examples/surface-shadows.scss
@@ -44,7 +44,7 @@
     width: 100%;
     padding: 0 functions.pxToRem(16);
 
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     background-color: var(--lime-elevated-surface-background-color);
     z-index: 1;
 }
diff --git a/src/examples/example-event-printer.scss b/src/examples/example-event-printer.scss
index b83a26df5d..7b592450bd 100644
--- a/src/examples/example-event-printer.scss
+++ b/src/examples/example-event-printer.scss
@@ -9,7 +9,7 @@
 }
 
 details {
-    font-size: 0.875rem; // 14px
+    font-size: var(--limel-theme-default-font-size); // 14px
 }
 
 summary {
diff --git a/src/global/core-styles.scss b/src/global/core-styles.scss
index d3f64356ba..63a40af277 100644
--- a/src/global/core-styles.scss
+++ b/src/global/core-styles.scss
@@ -1,6 +1,5 @@
 // These are exported for external use.
 
-@use '../style/internal/lime-theme';
 @use '../style/_theme-color-variables';
 @use '../style/colors.scss';
 @use '../style/shadows.scss';
@@ -25,6 +24,9 @@
     // background color which interferes with this lightened surface,
     // or provides a poor contrast.
     --lime-elevated-surface-background-color: rgb(var(--contrast-100));
+
+    // The default font size for Lime Elements components.
+    --limel-theme-default-font-size: 0.875rem; //14px
 }
 
 // ⚠️ This section below is commented out.
diff --git a/src/style/_theme-color-variables.scss b/src/style/_theme-color-variables.scss
index d6dfb7a281..feaa95dbe6 100644
--- a/src/style/_theme-color-variables.scss
+++ b/src/style/_theme-color-variables.scss
@@ -1,43 +1,57 @@
 @mixin theme-color-variables() {
+    // ==========================
+    // We need to keep these custom css vars. Because they are unfortunately
+    // used by some consumers as theming or styling hacks.
     --mdc-theme-primary: var(
         --lime-primary-color,
-        rgb(var(--color-teal-default))
-    );
-    --mdc-theme-secondary: var(
-        --lime-secondary-color,
-        rgb(var(--contrast-1100))
+        var(--limel-theme-primary-color)
     );
     --mdc-theme-on-primary: var(
         --lime-on-primary-color,
-        rgb(var(--contrast-100))
-    );
-    --mdc-theme-on-secondary: var(
-        --lime-on-secondary-color,
-        rgb(var(--contrast-100))
+        var(--limel-theme-on-primary-color)
     );
     --mdc-theme-text-disabled-on-background: var(
-        --lime-text-disabled-on-background-color,
-        rgba(var(--contrast-1700), 0.38)
+        --limel-theme-text-disabled-on-background-color
     );
     --mdc-theme-text-primary-on-background: var(
-        --lime-text-primary-on-background-color,
-        rgba(var(--contrast-1700), 0.87)
+        --limel-theme-text-primary-on-background-color
     );
     --mdc-theme-text-secondary-on-background: var(
-        --lime-text-secondary-on-background-color,
-        rgba(var(--contrast-1700), 0.54)
-    );
-    --mdc-theme-error: var(
-        --lime-error-background-color,
-        rgb(var(--color-red-dark))
-    );
-    --lime-error-text-color: rgb(var(--color-red-darker));
-    --mdc-theme-surface: var(
-        --lime-surface-background-color,
-        rgb(var(--contrast-100))
-    );
-    --mdc-theme-on-surface: var(
-        --lime-on-surface-color,
-        rgb(var(--contrast-1500))
-    );
+        --limel-theme-text-secondary-on-background-color
+    );
+    --mdc-theme-surface: var(--limel-theme-surface-background-color);
+    --mdc-theme-on-surface: var(--limel-theme-on-surface-color);
+    // We keep them as safety, even though the consumer should
+    // be encouraged to follow our theming guidelines
+    // and use the publicly declared CSS custom props like
+    // `--lime-primary-color` or `--lime-on-primary-color` instead.
+    //
+    // The "secondary" colors have never been used in the Lime design system,
+    // so we keep them commented out.
+    // --mdc-theme-secondary: var(--limel-theme-secondary-color);
+    // --mdc-theme-on-secondary: var(--limel-theme-on-secondary-color);
+    // ==========================
+
+    --limel-theme-primary-color: rgb(var(--color-teal-default));
+    --limel-theme-on-primary-color: rgb(var(--contrast-100));
+    // We never use secondary colors,
+    // but we keep them just in case.
+    // --limel-theme-secondary-color: rgb(var(--contrast-1100));
+    // --limel-theme-on-secondary-color: rgb(var(--contrast-100));
+    --limel-theme-text-disabled-on-background-color: rgb(
+        var(--contrast-1700),
+        0.38
+    );
+    --limel-theme-text-primary-on-background-color: rgb(
+        var(--contrast-1700),
+        0.87
+    );
+    --limel-theme-text-secondary-on-background-color: rgb(
+        var(--contrast-1700),
+        0.54
+    );
+    --limel-theme-error-color: rgb(var(--color-red-dark));
+    --limel-theme-error-text-color: rgb(var(--color-red-darker));
+    --limel-theme-surface-background-color: rgb(var(--contrast-100));
+    --limel-theme-on-surface-color: rgb(var(--contrast-1500));
 }
diff --git a/src/style/brand-colors.scss b/src/style/brand-colors.scss
deleted file mode 100644
index 169166e97a..0000000000
--- a/src/style/brand-colors.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-$lime-deep-red: #f05750;
-$lime-red: #ff7043;
-$lime-orange: #ffb03b;
-$lime-yellow: #ffcf3d;
-$lime-green: #66bb6a;
-$lime-turquoise: #26a69a;
-$lime-blue: #29b6f6;
-$lime-dark-blue: #57879f;
-$lime-magenta: #ff3195;
-$lime-light-grey: #adadad;
-$lime-dark-grey: #575756;
diff --git a/src/style/internal/codemirror-tooltip.scss b/src/style/internal/codemirror-tooltip.scss
index f3651da70d..5ae2d54e59 100644
--- a/src/style/internal/codemirror-tooltip.scss
+++ b/src/style/internal/codemirror-tooltip.scss
@@ -4,11 +4,16 @@
     transition: opacity 0.4s ease 0s;
     opacity: 0;
 
-    color: var(--mdc-theme-text-primary-on-background);
-    background-color: var(--mdc-theme-on-primary);
+    color: var(--limel-theme-text-primary-on-background-color);
+    background-color: var(
+        --lime-on-primary-color,
+        var(--limel-theme-on-primary-color)
+    );
 
     font-family: monospace;
-    font-size: 0.875rem; // 14px, like the default code editor's font size
+    font-size: var(
+        --limel-theme-default-font-size
+    ); // 14px, like the default code editor's font size
     white-space: pre-wrap;
     // overflow: hidden; // Why `hidden`?
 
diff --git a/src/style/internal/lime-theme.scss b/src/style/internal/lime-theme.scss
deleted file mode 100644
index d28e0a3917..0000000000
--- a/src/style/internal/lime-theme.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-
-@use '../brand-colors';
-@use '../_theme-color-variables';
-
-@use '@material/theme' with (
-    $primary: brand-colors.$lime-turquoise,
-    $secondary: brand-colors.$lime-dark-grey,
-    $background: #fff,
-    $surface: #fff,
-    $error: #b00020,
-    $on-primary: #fff,
-    $on-secondary: #fff,
-    $on-surface: #000,
-    $on-error: #fff,
-    // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
-    // $text-hint-on-light: rgba(0, 0, 0, 0.38),
-    // $text-primary-on-background: rgba(0, 0, 0, 0.87),
-    // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
-    //
-    // The following variables are also available to be set if needed
-    // (note by Ads: they probably aren't available in MDC v11)
-    //
-    // $text-hint-on-background: rgba(0, 0, 0, 0.38),
-    // $text-icon-on-background: rgba(0, 0, 0, 0.38),
-    // $text-primary-on-light: rgba(0, 0, 0, 0.87),
-    // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
-    // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
-    // $text-icon-on-light: rgba(0, 0, 0, 0.38),
-    // $text-primary-on-dark: white,
-    // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-    // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
-    // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
-     // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
-);
-@forward '@material/theme';
-
-@use './lime-typography';
-
-:host {
-    @include theme-color-variables.theme-color-variables;
-}
diff --git a/src/style/internal/lime-typography.scss b/src/style/internal/lime-typography.scss
deleted file mode 100644
index 2c7c3f397a..0000000000
--- a/src/style/internal/lime-typography.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-
-@use '../functions';
-
-@use '@material/typography' with (
-    $styles-headline1: (
-        font-family: inherit,
-        font-size: functions.pxToRem(22),
-        line-height: functions.pxToRem(22),
-    ),
-    $styles-headline2: (
-        font-family: inherit,
-        font-size: functions.pxToRem(16),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline3: (
-        font-family: inherit,
-        font-size: functions.pxToRem(16),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline4: (
-        font-family: inherit,
-        font-size: functions.pxToRem(16),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline5: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-headline6: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-subtitle1: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(18),
-    ),
-    $styles-subtitle2: (
-        font-family: inherit,
-        font-size: functions.pxToRem(13),
-        line-height: functions.pxToRem(18),
-    ),
-    $styles-body1: (
-        font-family: inherit,
-        font-size: functions.pxToRem(13),
-        line-height: functions.pxToRem(24),
-    ),
-    $styles-body2: (
-        font-family: inherit,
-        font-size: functions.pxToRem(13),
-        line-height: functions.pxToRem(26),
-    ),
-    $styles-caption: (
-        font-family: inherit,
-        font-size: functions.pxToRem(11),
-        line-height: functions.pxToRem(14),
-    ),
-    $styles-button: (
-        font-family: inherit,
-        font-size: functions.pxToRem(14),
-        line-height: functions.pxToRem(36),
-        text-transform: none,
-    ),
-    $styles-overline: (
-        font-family: inherit,
-        font-size: functions.pxToRem(11),
-        line-height: functions.pxToRem(14),
-    )
-);
-@forward '@material/typography';
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index 3111388c3b..b0f8ff6740 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -1,8 +1,6 @@
 @use '../../style/internal/z-index';
 @use '../functions';
 
-@use '../../style/internal/lime-theme';
-
 @use '@material/textfield';
 
 // Visual styles that unify the look & feel and behavior of
@@ -10,7 +8,10 @@
 
 $lime-text-field-outline-color: rgba(var(--contrast-700), 0.65);
 $lime-text-field-outline-color--hovered: rgba(var(--contrast-700), 1);
-$lime-text-field-outline-color--focused: var(--mdc-theme-primary);
+$lime-text-field-outline-color--focused: var(
+    --lime-primary-color,
+    var(--limel-theme-primary-color)
+);
 
 $background-color-normal: rgba(var(--contrast-200), 0.5);
 $background-color-hovered: rgba(var(--contrast-200), 1);
@@ -32,7 +33,7 @@ $height-of-mdc-helper-text-block: 0.9375rem;
 $mdc-chip-background-color: rgb(var(--contrast-100));
 
 $height-of-helper-text-pseudo-before: 0.75rem; // There is strange a pseudo before in MD's helper texts, which sets their distance to the element on top of it. Originally in MD, this value is 1rem. In Lime Elements, we need to make it less due to our layout needs.
-$cropped-label-hack--font-size: 0.875rem; //14px
+$cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
 
 @mixin looks-disabled() {
     cursor: not-allowed;
@@ -44,7 +45,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     font-weight: 400;
     letter-spacing: 0.009375em;
     color: $label-color;
@@ -56,7 +57,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
     -webkit-font-smoothing: antialiased;
 
     color: $input-text-color;
-    font-size: functions.pxToRem(14);
+    font-size: var(--limel-theme-default-font-size);
     font-weight: 400;
     letter-spacing: 0.009375em;
 }
@@ -240,7 +241,8 @@ $cropped-label-hack--font-size: 0.875rem; //14px
             }
 
             &:focus-visible {
-                box-shadow: 0 0 0 functions.pxToRem(2) var(--mdc-theme-primary) !important; // has to be `!important` since we're using `box-shadow` insted of `outline` which is also used in `hover` mode
+                box-shadow: 0 0 0 functions.pxToRem(2)
+                    var(--lime-primary-color, var(--limel-theme-primary-color)) !important; // has to be `!important` since we're using `box-shadow` insted of `outline` which is also used in `hover` mode
             }
         }
         &:not(.mdc-text-field--disabled):hover {
@@ -262,7 +264,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
         &.mdc-text-field--invalid {
             i.mdc-text-field__icon.invalid-icon {
                 limel-icon {
-                    color: var(--lime-error-text-color);
+                    color: var(--limel-theme-error-text-color);
                 }
             }
         }
@@ -301,7 +303,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
         &.mdc-text-field--invalid {
             & + .mdc-text-field-helper-line {
                 .mdc-text-field-helper-text--validation-msg {
-                    color: var(--lime-error-text-color);
+                    color: var(--limel-theme-error-text-color);
                 }
             }
         }
diff --git a/src/style/internal/variables.scss b/src/style/internal/variables.scss
deleted file mode 100644
index bdd8ef6544..0000000000
--- a/src/style/internal/variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly used by outside code.
- */
-
-@use '../functions';
-
-$lime-banner-height: functions.pxToRem(52) !default;
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index 4a0d32d559..af91f2cb36 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -72,8 +72,8 @@ $clickable-normal-state-transitions: (
 );
 
 @mixin is-elevated-clickable(
-    $color: var(--mdc-theme-on-surface),
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
@@ -116,11 +116,11 @@ $clickable-normal-state-transitions: (
 }
 
 @mixin is-elevated-inset-clickable(
-    $color: var(--mdc-theme-on-surface),
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color),
-    $background-color--inset: var(--mdc-theme-surface)
+    $background-color--inset: var(--limel-theme-surface-background-color)
 ) {
     transition: $clickable-normal-state-transitions;
 
@@ -162,9 +162,9 @@ $clickable-normal-state-transitions: (
 }
 
 @mixin is-flat-clickable(
-    $color: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
     $background-color: transparent,
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
     transition: $clickable-normal-state-transitions;
@@ -205,11 +205,11 @@ $clickable-normal-state-transitions: (
 }
 
 @mixin is-flat-inset-clickable(
-    $color: var(--mdc-theme-on-surface),
+    $color: var(--limel-theme-on-surface-color),
     $background-color: transparent,
-    $color--hovered: var(--mdc-theme-on-surface),
+    $color--hovered: var(--limel-theme-on-surface-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color),
-    $background-color--inset: var(--mdc-theme-surface)
+    $background-color--inset: var(--limel-theme-surface-background-color)
 ) {
     transition: $clickable-normal-state-transitions;
 
diff --git a/src/style/shadows.scss b/src/style/shadows.scss
index abf736bd54..33ddbdee32 100644
--- a/src/style/shadows.scss
+++ b/src/style/shadows.scss
@@ -8,7 +8,8 @@
 
     // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
-    --shadow-focused-state: 0 0 0 0.125rem var(--mdc-theme-primary);
+    --shadow-focused-state: 0 0 0 0.125rem
+        var(--lime-primary-color, var(--limel-theme-primary-color));
 
     // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.
diff --git a/src/theming.md b/src/theming.md
new file mode 100644
index 0000000000..53fe16b76d
--- /dev/null
+++ b/src/theming.md
@@ -0,0 +1,108 @@
+# Theming
+
+Lime Elements is relatively restrictive about the look and feel of the components. For instance, consumers cannot apply custom spaces around internal elements, change border radiuses, or size of the visual details.
+
+However, you still have lots of theming possibilities, such as setting your desired font, controlling colors on component level, and setting a global accent color.
+
+## Setting desired font family
+
+To achieve a blazing fast rendering, our components' user interface utilizes a default cross-browser sans-serif font stack.
+
+Lime Element is by default font agnostic, and basically relies on the inbuilt font of user's device. So there is no need for the users to download any fonts, while loading Lime Elements on their device.
+
+This also means that the UI would look slightly different on iOS, Android, Windows, Linux, etc… as they all have their own default system UI font.
+
+However, you can easily set your own desired font family. As web components typically inherit font-related styles such as `font-family`, `font-size`, and `color`, we recommend defining these styles at a higher level, such as the `<body>` element.
+
+If you use other libraries in combination with Lime Elements in your project, to maintain consistency with the look & feel demonstrated in this documentation, we suggest incorporating the following styles into your project:
+
+```css
+font-family: ui-sans-serif, system-ui, sans-serif;
+font-size: 0.875rem;
+font-style: normal;
+font-weight: 400;
+color: rgb(var(--contrast-1500));
+```
+
+💡 About the `color` specified above, read more on [our color system](/#/DesignGuidelines/color-system.md/).
+
+Or if you want to customize the font-family and related styles to suit your project's needs, you might prefer a different typeface like below:
+
+```css
+font-family: 'Roboto', Arial, Verdana, sans-serif;
+```
+
+---
+
+## Setting an accent color
+
+An accent color is a distinctive color used throughout a user interface to highlight interactive elements, draw attention to important actions, and reinforce brand identity. In UI libraries, the accent color typically appears on:
+
+- Primary buttons and call-to-action elements
+- Active states of form controls (checkboxes, radio buttons, switches)
+- Progress indicators and loading states
+- Selected items in lists or menus
+- Focus indicators for keyboard navigation
+- Links and other clickable elements
+
+By setting a consistent accent color, you ensure visual cohesion across all components while maintaining your brand's color palette.
+
+To define an accent color, set the `--lime-primary-color` CSS custom property on the `<body>` element or at the `:root` level:
+
+:::note
+You may need to define `--lime-on-primary-color` alongside your primary color to ensure proper contrast and readability. In some component, this property controls the color of text, icons, and other elements that appear on top of your accent color.
+:::
+
+```css
+:root {
+    --lime-primary-color: rgb(var(--color-blue-dark)); /* Your brand color */
+    --lime-on-primary-color: rgb(
+        var(--color-gray-lighter)
+    ); /* Text/icons on primary color */
+}
+```
+
+### Color Selection Guidelines
+
+When choosing your accent color, consider these important factors:
+
+- **Light colors** (pastels, bright tones): Generally provide poor contrast and can harm readability, especially on light backgrounds. If you must use light colors, ensure you set a dark contrasting color for text and icons: `--lime-on-primary-color: rgb(var(--color-gray-darker))` or `--lime-on-primary-color: rgb(0, 0, 0)`
+
+- **Dark colors** (deep blues, charcoal, navy): Work well with light text and icons. Set: `--lime-on-primary-color: rgb(255, 255, 255)` or use our color token: `--lime-on-primary-color: rgb(var(--color-white))`
+
+- **Red and green tones**: Exercise caution when using these colors as accents. Users typically associate red with errors or warnings, and green for success or confirmation. Choose these colors thoughtfully to avoid confusing your users about the intended action or state.
+
+- **Accessibility**: Ensure your accent color meets WCAG contrast requirements (minimum 4.5:1 ratio) when paired with `--lime-on-primary-color`.
+
+### Example
+
+The examples below demonstrate the same button with different accent colors:
+
+_A button with our default primary color_
+
+<limel-example-button-primary />
+
+_A few buttons with customized colors_
+
+<limel-example-button-colors />
+
+---
+
+### Changing the global font size
+
+Lime Elements uses `rem` units for sizing properties, including font sizes, spacing, and component dimensions; based on the standard browser root rem`16px`. This approach provides several benefits:
+
+- **Scalability**: All components scale proportionally when the root font size changes
+- **Consistency**: Maintains proper relationships between text and UI elements at any scale
+- **Accessibility**: Respects user preferences for larger text sizes
+- **Responsive design**: Enables easy scaling across different screen sizes and contexts
+
+To adjust the size of all Lime Elements components and text, modify the root font size:
+
+```css
+html {
+    font-size: 18px; /* Makes 1rem = 18px instead of 16px */
+}
+```
+
+This change will proportionally scale all components while maintaining their visual relationships.