diff --git a/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts b/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
index 44321c5b8..009851c5b 100644
--- a/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
+++ b/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
@@ -63,6 +63,8 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
         const archetypes: Record<string, number> = {};
         const modIcons: Record<string, string> = {};
         let modFullNames: Record<string, string> = {};
+        const brandedIcons: Record<string, boolean|undefined> = {};
+
         sections.forEach((section) => {
             if (!section.modules) {
                 return;
@@ -93,6 +95,8 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
                     modFullNames[mod.modname] = mod.modplural;
                 }
 
+                brandedIcons[mod.modname] = mod.branded;
+
                 // If this is not a theme image, leave it undefined to avoid having specific activity icons.
                 if (CoreUrlUtils.isThemeImageUrl(mod.modicon)) {
                     modIcons[mod.modname] = mod.modicon;
@@ -111,6 +115,7 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
                 iconModName,
                 name: modFullNames[modName],
                 modName,
+                branded: brandedIcons[iconModName],
             });
         }
     }
@@ -149,4 +154,5 @@ type AddonBlockActivityModuleEntry = {
     name: string;
     modName: string;
     iconModName: string;
+    branded?: boolean;
 };
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index 9f27b55a7..0415cb026 100644
--- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -5,7 +5,8 @@
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
-        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false" />
+        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false"
+            [isBranded]="entry.branded" />
         <ion-label>{{ entry.name }}</ion-label>
     </ion-item>
 </core-loading>
diff --git a/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png b/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png
index 9b1bb6e76..0145f0af5 100644
Binary files a/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png and b/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png differ
diff --git a/src/addons/mod/book/tests/behat/snapshots/test-basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png b/src/addons/mod/book/tests/behat/snapshots/test-basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png
index 093b946cc..1a1b3c1de 100644
Binary files a/src/addons/mod/book/tests/behat/snapshots/test-basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png and b/src/addons/mod/book/tests/behat/snapshots/test-basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png differ
diff --git a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png
index 58354f3df..c09abb97e 100644
Binary files a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png and b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png differ
diff --git a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
index 74563dbfb..cc30d26c8 100644
Binary files a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png and b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png differ
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index ae341d2dd..0655146b7 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -136,7 +136,7 @@
                         </ng-container>
                     </ng-container>
 
-                    <ion-button expand="block" type="submit" class="ion-text-wrap ion-margin button-no-uppercase">
+                    <ion-button expand="block" type="submit" class="ion-text-wrap ion-margin">
                         {{ question.submitLabel }}
                     </ion-button>
                     <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
@@ -150,7 +150,7 @@
                     <ion-row class="ion-align-items-center">
                         <ion-col *ngFor="let button of pageButtons" size="12" size-md="6" size-lg="3" col-xl>
                             <ion-button expand="block" fill="outline" [id]="button.id" (click)="buttonClicked(button.data)"
-                                class="ion-text-wrap button-no-uppercase">
+                                class="ion-text-wrap">
                                 {{ button.content }}
                             </ion-button>
                         </ion-col>
@@ -224,7 +224,7 @@
                 <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade">
                     <ion-label>{{ eolData.displayofgrade.message }}</ion-label>
                 </ion-item>
-                <ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin button-no-uppercase"
+                <ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin"
                     (click)="reviewLesson(reviewPageId!)">
                     {{ 'addon.mod_lesson.reviewlesson' | translate }}
                 </ion-button>
@@ -233,7 +233,7 @@
                 </ion-item>
                 <!-- If activity link was successfully formatted, render the button. -->
                 <ion-button *ngIf="activityLink && activityLink.formatted" expand="block" fill="outline" [href]="activityLink.href"
-                    core-link [capture]="true" class="ion-text-wrap ion-margin button-no-uppercase">
+                    core-link [capture]="true" class="ion-text-wrap ion-margin">
                     <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                         [courseId]="courseId" />
                 </ion-button>
diff --git a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png
index 68ea3d383..256874df3 100644
Binary files a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png and b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png differ
diff --git a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png
index e017040c7..658b31fec 100644
Binary files a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png and b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png differ
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 9e61dfed6..dc5ac89b0 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -110,10 +110,9 @@
         flex: 1;
 
         &::part(native) {
-            text-transform: none;
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 20px;
+            font-weight: var(--label-font-weight);
+            font-size: var(--label-lg-font-size);
+            line-height: var(--label-lg-line-height);
             border-radius: var(--core-combobox-radius);
         }
 
diff --git a/src/core/components/empty-box/core-empty-box.html b/src/core/components/empty-box/core-empty-box.html
index 29d45bbee..6d877d502 100644
--- a/src/core/components/empty-box/core-empty-box.html
+++ b/src/core/components/empty-box/core-empty-box.html
@@ -1,4 +1,7 @@
-<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
-<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
+@if (icon) {
+    <ion-icon [name]="icon" aria-hidden="true" />
+} @else if (image) {
+    <img [src]="image" role="presentation" alt="">
+}
 <p *ngIf="message">{{ message }}</p>
 <ng-content />
diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss
index db3208472..4c2566770 100644
--- a/src/core/components/empty-box/empty-box.scss
+++ b/src/core/components/empty-box/empty-box.scss
@@ -1,8 +1,16 @@
 @use "theme/globals" as *;
 
 :host {
-    --image-size: 120px;
-    --icon-color: var(--subdued-text-color);
+    --image-size: 80px;
+    --icon-color: var(--core-empty-box-icon-color);
+
+    &.core-empty-box-clickable {
+        z-index: 0;
+    }
+
+    &.dimmed {
+        --text-color: var(--gray-700);
+    }
 
     display: flex;
     flex-direction: column;
@@ -22,31 +30,16 @@
     img {
         height: var(--image-size);
     }
-    p {
-        font-size: 120%;
-    }
 
-    &.core-empty-box-clickable {
-        z-index: 0;
+    p,
+    ::ng-deep p {
+        font-size: var(--heading-6-font-size);
+        color: var(--text-color);
     }
-
-    &.dimmed {
-        --icon-color: var(--gray-400);
-        --text-color: var(--gray-700);
-    }
-
 }
 
 :host-context(html.dark) {
-
     &.dimmed {
         --text-color: var(--gray-300);
     }
-
-}
-
-@include media-breakpoint-down(sm) {
-    :host {
-        --image-size: 100px;
-    }
 }
diff --git a/src/core/components/empty-box/empty-box.ts b/src/core/components/empty-box/empty-box.ts
index cffaa295a..1507ab73f 100644
--- a/src/core/components/empty-box/empty-box.ts
+++ b/src/core/components/empty-box/empty-box.ts
@@ -25,7 +25,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 @Component({
     selector: 'core-empty-box',
     templateUrl: 'core-empty-box.html',
-    styleUrls: ['empty-box.scss'],
+    styleUrl: 'empty-box.scss',
 })
 export class CoreEmptyBoxComponent {
 
@@ -33,7 +33,10 @@ export class CoreEmptyBoxComponent {
     @Input() dimmed = false; // Wether the box is dimmed or not.
     @Input() icon?: string; // Name of the icon to use.
     @Input() image?: string; // Image source. If an icon is provided, image won't be used.
-    @Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
+    /**
+     * @deprecated since 4.4. Not used anymore.
+     */
+    @Input() flipIconRtl = false;
 
     @HostBinding('class.dimmed')
     get isDimmed(): boolean {
diff --git a/src/core/components/error-info/error-info.scss b/src/core/components/error-info/error-info.scss
index 05c0a69dc..a0723f21f 100644
--- a/src/core/components/error-info/error-info.scss
+++ b/src/core/components/error-info/error-info.scss
@@ -1,7 +1,7 @@
 .core-error-info {
     background: var(--gray-200);
     border-radius: var(--radius-xs);
-    font-size: var(--font-size-sm);
+    font-size: var(--body-font-size-sm);
     color: var(--gray-900);
 
     p:first-child {
@@ -14,7 +14,7 @@
 
     .core-error-info--code {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
-        font-size: var(--font-size-normal);
+        font-size: var(--body-font-size-md);
     }
 
     .core-error-info--details p {
diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss
index f179df22d..af5c1e2fe 100644
--- a/src/core/components/message/message.scss
+++ b/src/core/components/message/message.scss
@@ -34,8 +34,8 @@
         overflow: visible;
 
         &:hover {
-            -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
-            filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
+            -webkit-filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
+            filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
         }
 
         &[tappable]:active {
diff --git a/src/core/components/split-view/split-view.html b/src/core/components/split-view/split-view.html
index df5108b8c..d9fc7aaf0 100644
--- a/src/core/components/split-view/split-view.html
+++ b/src/core/components/split-view/split-view.html
@@ -2,4 +2,4 @@
     <ng-content />
 </ion-content>
 <ion-router-outlet class="content-outlet" />
-<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true" />
+<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" />
diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
index cd1537e63..162d5f1f1 100644
--- a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
+++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
@@ -12,7 +12,7 @@
         --padding-end: 0;
         --border-radius: 2em 0 0 2em;
         height: 56px;
-        --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
+        --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 
         &::part(native) {
             @include core-transition(padding, 200ms);
diff --git a/src/core/features/course/components/course-format/course-format.scss b/src/core/features/course/components/course-format/course-format.scss
index 7975742e0..8fe3690a7 100644
--- a/src/core/features/course/components/course-format/course-format.scss
+++ b/src/core/features/course/components/course-format/course-format.scss
@@ -8,7 +8,6 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        text-transform: none;
         flex: 1;
         margin-left: 4px;
         margin-right: 4px;
diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss
index 8e4d48343..29fe5edd6 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.scss
+++ b/src/core/features/course/components/module-navigation/module-navigation.scss
@@ -25,7 +25,6 @@
             margin: 0;
             --border-radius: 0;
             width: 100%;
-            text-transform: none;
             font-size: 12px;
             font-weight: normal;
             --color: var(--button-color);
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 6ede3c36d..4218d9ec6 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -20,7 +20,7 @@
     --button-size: 44px;
     --button-padding: 10px;
     --button-radius: 50%;
-    --button-background: rgba(255,255,255,0.5);
+    --button-background: rgb(255 255 255 / 50%);
 
     @include media-breakpoint-down(md) {
         --avatar-size: 48px;
@@ -30,7 +30,7 @@
 
 
 :host-context(html.dark) {
-    --button-background: rgba(0, 0, 0, 0.3);
+    --button-background: rgb(0 0 0 / 30%);
 }
 
 // Common styles.
diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss
index 8bf0224bf..7c784402d 100644
--- a/src/core/features/login/pages/site/site.scss
+++ b/src/core/features/login/pages/site/site.scss
@@ -84,7 +84,7 @@
     display: flex;
     align-content: center;
     align-items: center;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgb(255 255 255 / 50%);
     z-index: 1;
     ion-spinner {
         margin: 0 auto;
diff --git a/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png b/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png
index eb9784289..7e3e37007 100644
Binary files a/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png and b/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png differ
diff --git a/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png b/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png
index 7946bd451..1d2c22c52 100644
Binary files a/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png and b/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png differ
diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss
index 4ae53140a..80559f66e 100644
--- a/src/core/features/question/question.scss
+++ b/src/core/features/question/question.scss
@@ -25,7 +25,7 @@
             font-weight: bold;
             line-height: 14px;
             color: var(--white);
-            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+            text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
             background-color: var(--gray-500);
             -webkit-border-radius: 3px;
             border-radius: 3px;
diff --git a/src/core/features/usertours/components/user-tour/user-tour.scss b/src/core/features/usertours/components/user-tour/user-tour.scss
index 84600c0d3..175b55d90 100644
--- a/src/core/features/usertours/components/user-tour/user-tour.scss
+++ b/src/core/features/usertours/components/user-tour/user-tour.scss
@@ -9,7 +9,7 @@
 
     .user-tour-focus {
         position: absolute;
-        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
+        box-shadow: 0 0 0 9999px rgb(0 0 0 / 75%);
     }
 
     .user-tour-overlay {
@@ -18,7 +18,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: rgba(0, 0, 0, 0.75);
+        background: rgb(0 0 0 / 75%);
     }
 
     .user-tour-wrapper {
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 710feebd5..073ad9e58 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -5,11 +5,11 @@
 
 core-format-text {
     --core-format-text-background: var(--background, var(--ion-item-background));
-    --core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
+    --core-format-text-viewer-icon-background: rgb(255 255 255 / 50%);
 }
 
 html.dark core-format-text {
-    --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
+    --core-format-text-viewer-icon-background: rgb(0 0 0 / 50%);
 }
 
 core-format-text {
@@ -646,8 +646,8 @@ core-rich-text-editor .core-rte-editor {
 
     .text-body { color: var(--ion-text-color) !important; }
     .text-muted { color: var(--subdued-text-color) !important; }
-    .text-black-50 { color: rgba(0, 0, 0, .5) !important; }
-    .text-white-50 { color: rgba(255, 255, 255, .5) !important; }
+    .text-black-50 { color: rgb(0 0 0 / 50%) !important; }
+    .text-white-50 { color: rgb(255 255 255 / 50%) !important; }
     .text-decoration-none { text-decoration: none !important; }
     .text-break {
         word-break: break-word !important; // Deprecated, but avoids issues with flex containers
diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss
index 87e419ad9..f62bd6116 100644
--- a/src/theme/helpers/custom.mixins.scss
+++ b/src/theme/helpers/custom.mixins.scss
@@ -198,22 +198,22 @@
 
 @mixin core-headings() {
     h1 {
-        font-size: 26px;
+        font: var(--heading-1-font);
     }
     h2, .item-heading {
-        font-size: 24px;
+        font: var(--heading-2-font);
     }
     h3 {
-        font-size: 22px;
+        font: var(--heading-3-font);
     }
     h4 {
-        font-size: 20px;
+        font: var(--heading-4-font);
     }
     h5 {
-        font-size: 18px;
+        font: var(--heading-5-font);
     }
     h6 {
-        font-size: 16px;
+        font: var(--heading-6-font);
     }
 }
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0203630d7..88c59f68e 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -45,10 +45,6 @@ body {
 .core-big   { font-size: 115%; }
 .invisible { visibility: hidden; }
 
-.button-no-uppercase {
-    text-transform: none;
-}
-
 .flex { display: flex; }
 .inline-block { display: inline-block; }
 .block { display: block; }
@@ -263,6 +259,7 @@ ion-button,
 ion-fab-button,
 button,
 [role="button"] {
+    text-transform: none;
     min-height: var(--a11y-min-target-size);
     min-width: var(--a11y-min-target-size);
 
@@ -273,7 +270,7 @@ button,
 }
 
 ion-fab-button {
-    --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
+    --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 }
 
 ion-button {
@@ -403,7 +400,6 @@ button[disabled] {
 }
 
 ion-button.core-button-as-link {
-    text-transform: none;
     text-decoration: underline;
     font-size: inherit;
     font-weight: normal;
@@ -675,7 +671,7 @@ body.core-iframe-fullscreen ion-router-outlet {
 
     &::part(content) {
         backdrop-filter: blur(12px);
-        --background: rgba(10, 10, 10, 0.2);
+        --background: rgb(10 10 10 / 20%);
 
         ion-content {
             --background: transparent !important;
@@ -705,7 +701,7 @@ body.core-iframe-fullscreen ion-router-outlet {
         height: 100% !important;
         width: calc(100% - var(--modal-lateral-margin));
         max-width: calc(var(--modal-lateral-max-width));
-        box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 28px 48px rgb(0 0 0 / 40%);
     }
 
     &::part(backdrop) {
@@ -943,8 +939,6 @@ ion-card {
         margin: 0 8px 8px 8px;
 
         ion-button {
-            text-transform: none;
-
             &[fill="outline"] {
                 --background: transparent;
             }
@@ -1181,7 +1175,6 @@ ion-button.button.chip {
     line-height: 1.1;
     font-size: 12px;
     min-height: 24px;
-    text-transform: none;
     margin: 4px;
     font-weight: normal;
 
@@ -1226,7 +1219,7 @@ ion-chip {
 
     &.fab-chip {
         padding: 8px 12px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
+        box-shadow: 0 2px 4px rgb(0 0 0 / 40%);
     }
 
     &.ion-color {
@@ -1935,7 +1928,7 @@ swiper-container {
         left: -45%;
         height: 100%;
         width: 45%;
-        background-image: linear-gradient(to left, rgba(var(--loader-shine), .05), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .6), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .05));
+        background-image: linear-gradient(to left, rgb(var(--loader-shine) / 5%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 60%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 5%));
         animation: loading 1s infinite;
         display: block;
         top: 0;
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 58877fed0..c59f05ec1 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -45,11 +45,10 @@ html.dark {
 
     --contrast-background: var(--gray-900);
 
-    --loader-shine: 90, 90, 90;
+    --loader-shine: 90 90 90;
 
-    --drop-shadow-color: 0, 0, 0, 1;
-    --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
-    --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
+    --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
+    --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1);
 
     --ion-card-color: var(--text-color);
     --ion-card-background: var(--ion-item-background);
@@ -98,6 +97,8 @@ html.dark {
 
     --core-progressbar-text-color: var(--gray-100);
 
+    --core-empty-box-icon-color: var(--gray-700);
+
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-icon-color: var(--medium);
     --ion-item-detail-icon-color: var(--dark);
diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss
index 21bf109e1..06fe09b70 100644
--- a/src/theme/theme.design-system.scss
+++ b/src/theme/theme.design-system.scss
@@ -1,13 +1,73 @@
 html {
 
     // Spacing
-    @for $i from 0 to 13 {
+    @for $i from 0 to 6 {
         --spacing-#{$i}: #{$i*4}px;
     }
 
     // Font sizes
+
+    // Body font size
     --font-size-sm: 12px;
-    --font-size-normal: 14px;
+    --font-size-md: 14px;
+    --font-size-lg: 16px;
+
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+
+    --body-font-size-sm: var(--font-size-sm);
+    --body-font-size-md: var(--font-size-md);
+    --body-font-size-lg: var(--font-size-lg);
+    --body-font-weight: var(--font-weight-normal);
+    --body-line-height: 150%;
+
+    --link-sm-font-size: var(--font-size-sm);
+    --link-md-font-size: var(--font-size-md);
+    --link-lg-font-size: var(--font-size-lg);
+    --link-font-weight: var(--font-weight-normal);
+    --link-line-height: 150%;
+
+    // Labels
+    --label-sm-font-size: 10px;
+    --label-md-font-size: 12px;
+    --label-lg-font-size: 14px;
+    --label-font-weight: var(--font-weight-medium);
+
+    --label-sm-line-height: 16px;
+    --label-md-line-height: 16px;
+    --label-lg-line-height: 20px;
+
+    // Subtitles
+    --subtitle-sm-font-size: 14px;
+    --subtitle-md-font-size: 16px;
+    --subtitle-lg-font-size: 20px;
+
+    --subtitle-font-weight: var(--font-weight-medium);
+    --subtitle-line-height: 150%;
+
+    // Headings
+    --heading-1-font-size: 28px;
+    --heading-2-font-size: 24px;
+    --heading-3-font-size: 22px;
+    --heading-4-font-size: 20px;
+    --heading-5-font-size: 18px;
+    --heading-6-font-size: 16px;
+
+    --heading-1-font-weight: var(--font-weight-normal);
+    --heading-2-font-weight: var(--font-weight-normal);
+    --heading-3-font-weight: var(--font-weight-normal);
+    --heading-4-font-weight: var(--font-weight-medium);
+    --heading-5-font-weight: var(--font-weight-medium);
+    --heading-6-font-weight: var(--font-weight-medium);
+
+    --heading-line-height: 130%;
+
+    --heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family);
 
     // Radiuses
     --radius-none: 0px;
@@ -18,15 +78,33 @@ html {
     --radius-xl: 24px;
     --radius-round: 50%;
 
-    /** @deprecated since 4.3 **/
+    // Shadows / Elevation
+    --drop-shadow-color: 40 40 40; //#282828;
+    --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%);
+    --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%);
+    --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%);
+
+    // A11y
+    --a11y-min-target-size: 44px;
+}
+
+/** @deprecated since 4.3 **/
+html {
     --small-radius: var(--radius-xs);
     --medium-radius: var(--radius-sm);
     --big-radius: var(--radius-lg);
     --huge-radius: var(--radius-xl);
-
-
-
-    // A11y
-    --a11y-min-target-size: 44px;
-
+}
+
+/** @deprecated since 4.4 **/
+html {
+    --font-size-normal: var(--font-size-md);
 }
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 34607d160..b45b05b10 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -53,7 +53,7 @@ html {
     --zoom-level: 100%;
 
     --text-color:       #{$text-color};
-    --text-size: var(--font-size-normal);
+    --text-size: var(--body-font-size-md);
     --background-color: #{$background-color};
     --stroke:            var(--gray-300);
 
@@ -78,16 +78,15 @@ html {
 
     --contrast-background: white;
 
-    --loader-background-color: rgba(0, 0, 0, .1);
-    --loader-shine: 251, 251, 251;
+    --loader-background-color: rgb(0 0 0 / 10%);
+    --loader-shine: 251 251 251;
     --loader-radius: var(--radius-xs);
     --loader-display: block;
 
-    --drop-shadow-color: 0, 0, 0, 0.5;
-    --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
-    --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
-    --drop-shadow-end: -2px 0px 5px rgba(var(--drop-shadow-color));
-    --drop-shadow-start: 2px 0px 5px rgba(var(--drop-shadow-color));
+    --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%);
+    --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%);
+    --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
+    --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
 
     --ion-text-color: var(--text-color);
     --ion-text-color-rgb: #{$text-color-rgb};
@@ -273,6 +272,8 @@ html {
     --core-progressbar-text-color: var(--medium);
     --core-progressbar-background: var(--primary-tint);
 
+    --core-empty-box-icon-color: var(--gray-300);
+
     --ion-item-background:        #{$ion-item-background};
     --ion-item-icon-color: var(--medium);
     --ion-item-detail-icon-color: var(--dark);
diff --git a/upgrade.txt b/upgrade.txt
index 155c45e9a..1d41a4d00 100644
--- a/upgrade.txt
+++ b/upgrade.txt
@@ -14,6 +14,7 @@ For more information about upgrading, read the official documentation: https://m
  - CoreAppProvider.isAutomated() has been deprecated, use CorePlatformService.isAutomated() instead.
  - Due to a breaking change in cordova-plugin-file, avoid using FileEntry.toURL(). Use CoreFileProvider.getFileEntryURL instead.
  - FileTransfer service is no longer available, now we recommend use window.FileTransfer instead.
+ - CSS variable --font-size-normal has been deprecated in favor of --font-size-md.
 
 === 4.3.0 ===