diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts
index fc20dfbebe..e537c1471d 100644
--- a/cypress/e2e/room/room-header.spec.ts
+++ b/cypress/e2e/room/room-header.spec.ts
@@ -116,17 +116,7 @@ describe("Room Header", () => {
             const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
 
             for (const name of buttonsHighlighted) {
-                cy.findByRole("button", { name: name })
-                    .click() // Highlight the button
-                    .then(($btn) => {
-                        // Note it is not possible to get CSS values of a pseudo class with "have.css".
-                        const color = $btn[0].ownerDocument.defaultView // get window reference from element
-                            .getComputedStyle($btn[0], "before") // get the pseudo selector
-                            .getPropertyValue("background-color"); // get "background-color" value
-
-                        // Assert the value is equal to $accent == hex #0dbd8b == rgba(13, 189, 139)
-                        expect(color).to.eq("rgb(13, 189, 139)");
-                    });
+                cy.findByRole("button", { name: name }).click(); // Highlight the button
             }
         });
 
diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts
index e57f00a139..c9c822acde 100644
--- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts
+++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts
@@ -299,32 +299,5 @@ describe("Appearance user settings tab", () => {
                 cy.findByLabelText("Use high contrast").should("not.exist");
             },
         );
-
-        it("should support enabling the high contast theme", () => {
-            cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
-
-            cy.get(".mx_GenericEventListSummary").within(() => {
-                // Assert that $primary-content is applied to GELS summary on the light theme
-                // $primary-content on the light theme = #17191c = rgb(23, 25, 28)
-                cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary")
-                    .should("have.css", "color", "rgb(23, 25, 28)")
-                    .should("have.css", "opacity", "0.5");
-            });
-
-            cy.openUserSettings("Appearance")
-                .findByTestId("mx_ThemeChoicePanel")
-                .findByLabelText("Use high contrast")
-                .click({ force: true }); // force click because the size of the checkbox is zero
-
-            cy.closeDialog();
-
-            cy.get(".mx_GenericEventListSummary").within(() => {
-                // Assert that $secondary-content is specified for GELS summary on the high contrast theme
-                // $secondary-content on the high contrast theme = #5e6266 = rgb(94, 98, 102)
-                cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary")
-                    .should("have.css", "color", "rgb(94, 98, 102)")
-                    .should("have.css", "opacity", "1");
-            });
-        });
     });
 });
diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts
index 335c87bc01..a2dc7b02df 100644
--- a/cypress/e2e/threads/threads.spec.ts
+++ b/cypress/e2e/threads/threads.spec.ts
@@ -64,9 +64,6 @@ describe("Threads", () => {
             "Hello there. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt " +
             "ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi";
 
-        // --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
-        // See: _MessageTimestamp.pcss
-        const MessageTimestampColor = "rgb(172, 172, 172)";
         const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
         // Exclude timestamp and read marker from snapshots
         const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }";
@@ -75,13 +72,6 @@ describe("Threads", () => {
             // User sends message
             cy.findByRole("textbox", { name: "Send a message…" }).type("Hello Mr. Bot{enter}");
 
-            // Check the colour of timestamp on the main timeline
-            cy.get(".mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
-                "have.css",
-                "color",
-                MessageTimestampColor,
-            );
-
             // Wait for message to send, get its ID and save as @threadId
             cy.contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
                 .invoke("attr", "data-scroll-tokens")
@@ -151,13 +141,6 @@ describe("Threads", () => {
         cy.get(".mx_ThreadView").within(() => {
             // User responds in thread
             cy.findByRole("textbox", { name: "Send a message…" }).type("Test{enter}");
-
-            // Check the colour of timestamp on EventTile in a thread (mx_ThreadView)
-            cy.get(".mx_EventTile_last[data-layout='group'] .mx_EventTile_line .mx_MessageTimestamp").should(
-                "have.css",
-                "color",
-                MessageTimestampColor,
-            );
         });
 
         // User asserts summary was updated correctly
@@ -307,9 +290,6 @@ describe("Threads", () => {
             // Check the number of the replies
             cy.get(".mx_ThreadPanel_replies_amount").findByText("2").should("exist");
 
-            // Check the colour of timestamp on thread list
-            cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor);
-
             // Make sure the notification dot is visible
             cy.get(".mx_NotificationBadge_visible").should("be.visible");
 
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 7a0528102d..b04c5bc9ea 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -250,7 +250,7 @@ legend {
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
-        border: 1px solid rgba($primary-content, 0.1);
+        border: 1px solid $secondary-hairline-color;
         /* these things should probably not be defined globally */
         margin: 9px;
     }
@@ -263,7 +263,7 @@ legend {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
     .mx_textinput input::placeholder {
-        color: rgba($input-darker-fg-color, 0.75);
+        color: $input-placeholder;
     }
 }
 
@@ -584,9 +584,9 @@ legend {
 
     /* flip colours for the secondary ones */
     font-weight: var(--cpd-font-weight-semibold);
-    border: 1px solid $accent;
+    border: 1px solid currentColor;
     color: $accent;
-    background-color: $button-secondary-bg-color;
+    background-color: transparent;
     font-family: inherit;
 }
 
@@ -808,18 +808,19 @@ legend {
     mask-size: contain;
     height: 18px;
     min-width: 18px;
-    background-color: $secondary-content !important;
+    background-color: $icon-button-color !important;
 }
 
 @define-mixin composerButtonHighLight {
-    background: rgba($accent, 0.25);
+    /* TODO: Refactor as this will break for apps that override the accent color */
+    background: var(--cpd-color-green-300);
     /* make the icon the accent color too */
     &::before {
         background-color: $accent !important;
     }
 }
 
-@define-mixin composerButton $border-radius, $hover-color {
+@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
     --size: 26px;
     position: relative;
     cursor: pointer;
@@ -840,6 +841,7 @@ legend {
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
+        z-index: 2;
     }
 
     &::after {
@@ -855,7 +857,7 @@ legend {
 
     &:hover {
         &::after {
-            background: rgba($hover-color, 0.1);
+            background: $hover-bg;
         }
 
         &::before {
diff --git a/res/css/components/views/context_menus/_KebabContextMenu.pcss b/res/css/components/views/context_menus/_KebabContextMenu.pcss
index 1594420aea..5ab6782653 100644
--- a/res/css/components/views/context_menus/_KebabContextMenu.pcss
+++ b/res/css/components/views/context_menus/_KebabContextMenu.pcss
@@ -16,5 +16,5 @@ limitations under the License.
 
 .mx_KebabContextMenu_icon {
     width: 24px;
-    color: $secondary-content;
+    color: $icon-button-color;
 }
diff --git a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
index b8972d6227..64fb7cfc24 100644
--- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
+++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     background: transparent;
 
     border-radius: 4px;
-    color: $secondary-content;
+    color: $icon-button-color;
 
     --icon-transform: rotate(-90deg);
 
diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
index e161c0b14a..2e4055cfd4 100644
--- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
+++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
@@ -53,7 +53,7 @@ limitations under the License.
 
     &.Inactive {
         --icon-color: $secondary-content;
-        --background-color: $system;
+        --background-color: $panels;
     }
 }
 
diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
index 5a5937b151..5bd1c29ed5 100644
--- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
+++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
@@ -23,7 +23,7 @@ limitations under the License.
 }
 
 .mx_DeviceTypeIcon_deviceIconWrapper {
-    --background-color: $system;
+    --background-color: $panels;
     --icon-color: $secondary-content;
 
     height: 40px;
diff --git a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
index 3bba9d90b3..4101d68f25 100644
--- a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
+++ b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
@@ -26,7 +26,7 @@ limitations under the License.
     padding: 0 $spacing-16;
     margin-bottom: $spacing-32;
 
-    background-color: $system;
+    background-color: $panels;
     border-radius: 8px;
     color: $secondary-content;
 }
diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss
index 07f9eb5a0e..185fb24f3c 100644
--- a/res/css/compound/_Icon.pcss
+++ b/res/css/compound/_Icon.pcss
@@ -29,7 +29,7 @@ limitations under the License.
 }
 
 .mx_Icon_bg-accent-light {
-    background-color: rgba($accent, 0.1);
+    background-color: $accent-300;
 }
 
 .mx_Icon_alert {
diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss
index 9a1ebda894..4ba4ddbcf0 100644
--- a/res/css/structures/_FilePanel.pcss
+++ b/res/css/structures/_FilePanel.pcss
@@ -100,7 +100,8 @@ limitations under the License.
 
                 .mx_MessageTimestamp {
                     text-align: right;
-                    font: var(--cpd-font-body-md-regular);
+                    color: $secondary-content;
+                    font: var(--cpd-font-body-sm-regular);
                 }
             }
         }
diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss
index 9cbffc77d4..390f0e3b20 100644
--- a/res/css/structures/_LeftPanel.pcss
+++ b/res/css/structures/_LeftPanel.pcss
@@ -14,13 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MatrixChat--with-avatar {
-    .mx_LeftPanel,
-    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
-        background-color: transparent;
-    }
-}
-
 .mx_LeftPanel_outerWrapper {
     display: flex;
     flex-direction: column;
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
index b70649029f..73254b7f71 100644
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@@ -258,8 +258,8 @@ limitations under the License.
     height: var(--RoomHeader-indicator-dot-size);
     border-radius: 50%;
     transform: scale(1);
-    background: rgba(var(--RoomHeader-indicator-pulseColor), 1);
-    box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1);
+    background: var(--RoomHeader-indicator-pulseColor);
+    box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
     animation: mx_Indicator_pulse 2s infinite;
     animation-iteration-count: 1;
 
diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index e6f4988aae..76c328fa56 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -368,7 +368,7 @@ limitations under the License.
 
     .mx_UserMenu {
         padding: 0 2px 8px;
-        border-bottom: 1px solid $quinary-content;
+        border-bottom: 1px solid $separator;
         margin: 12px 14px 4px 18px;
         max-width: 226px;
     }
diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
index e2e68746c2..f25c15e48e 100644
--- a/res/css/structures/_UserMenu.pcss
+++ b/res/css/structures/_UserMenu.pcss
@@ -172,7 +172,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-content;
+            background: $icon-button-color;
         }
     }
 
diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss
index 42dd327347..49148cabb2 100644
--- a/res/css/views/beta/_BetaCard.pcss
+++ b/res/css/views/beta/_BetaCard.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_BetaCard {
     padding: $spacing-24;
-    background-color: $system;
+    background-color: $panels;
     border-radius: 8px;
     box-sizing: border-box;
     color: $secondary-content;
diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss
index 126225da5d..eaad0adbb8 100644
--- a/res/css/views/context_menus/_IconizedContextMenu.pcss
+++ b/res/css/views/context_menus/_IconizedContextMenu.pcss
@@ -137,7 +137,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background-color: $secondary-content;
+            background-color: $icon-button-color;
         }
     }
 
diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
index 4531ee1709..abb48b6b7c 100644
--- a/res/css/views/context_menus/_MessageContextMenu.pcss
+++ b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -29,7 +29,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $primary-content;
+            background: $icon-button-color;
         }
     }
 
diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss
index dd5eb764ed..46ef43cd08 100644
--- a/res/css/views/dialogs/_PollCreateDialog.pcss
+++ b/res/css/views/dialogs/_PollCreateDialog.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     .mx_PollCreateDialog_busy {
         position: absolute;
         inset: 0;
-        background-color: rgba($background, 0.6);
+        background-color: $overlay-background;
         z-index: 1;
     }
 
diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss
index e4c00d356f..35a5287fa9 100644
--- a/res/css/views/elements/_AccessibleButton.pcss
+++ b/res/css/views/elements/_AccessibleButton.pcss
@@ -105,7 +105,6 @@ limitations under the License.
 
     &.mx_AccessibleButton_kind_primary_outline {
         color: $accent;
-        background-color: $button-secondary-bg-color;
     }
 
     &.mx_AccessibleButton_kind_secondary {
diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss
index eac9b07139..cfb62d0d37 100644
--- a/res/css/views/elements/_GenericEventListSummary.pcss
+++ b/res/css/views/elements/_GenericEventListSummary.pcss
@@ -110,6 +110,7 @@ limitations under the License.
     /* Make all state events one order smaller than the other events */
     .mx_EventTile {
         font: var(--cpd-font-body-sm-regular);
+        color: $secondary-content;
     }
 }
 
@@ -121,6 +122,7 @@ limitations under the License.
 .mx_TextualEvent.mx_GenericEventListSummary_summary {
     font: var(--cpd-font-body-sm-regular);
     display: inline-flex;
+    color: $secondary-content;
 }
 
 .mx_GenericEventListSummary_avatars {
diff --git a/res/css/views/elements/_SSOButtons.pcss b/res/css/views/elements/_SSOButtons.pcss
index 2a7d3a1157..2de4781c3c 100644
--- a/res/css/views/elements/_SSOButtons.pcss
+++ b/res/css/views/elements/_SSOButtons.pcss
@@ -45,7 +45,7 @@ limitations under the License.
     }
 
     .mx_SSOButton:hover {
-        background-color: $panel-hover;
+        background-color: $panel-actions;
     }
 
     .mx_SSOButton_default {
diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss
index 23dd9de416..cbdcce6171 100644
--- a/res/css/views/elements/_StyledCheckbox.pcss
+++ b/res/css/views/elements/_StyledCheckbox.pcss
@@ -42,8 +42,7 @@ limitations under the License.
             height: $size;
             width: $size;
             size: 0.5rem;
-
-            border: 1px solid rgba($muted-fg-color, 0.5);
+            border: 1px solid $strong-input-border-color;
             box-sizing: border-box;
             border-radius: $border-radius;
 
@@ -68,7 +67,6 @@ limitations under the License.
         }
 
         &:disabled + label {
-            opacity: 0.5;
             cursor: not-allowed;
         }
 
@@ -89,6 +87,10 @@ limitations under the License.
         background: $accent;
         border-color: $accent;
     }
+
+    &:checked:disabled + label > .mx_Checkbox_background {
+        opacity: 0.5;
+    }
 }
 
 .mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss
index f6740ffb39..2f641a39af 100644
--- a/res/css/views/elements/_StyledRadioButton.pcss
+++ b/res/css/views/elements/_StyledRadioButton.pcss
@@ -20,7 +20,7 @@ limitations under the License.
 */
 
 .mx_StyledRadioButton {
-    $radio-circle-color: $quaternary-content;
+    $radio-circle-color: $strong-input-border-color;
     $active-radio-circle-color: $accent;
     position: relative;
 
diff --git a/res/css/views/elements/_ToggleSwitch.pcss b/res/css/views/elements/_ToggleSwitch.pcss
index 4dc7e29436..099be7e8ef 100644
--- a/res/css/views/elements/_ToggleSwitch.pcss
+++ b/res/css/views/elements/_ToggleSwitch.pcss
@@ -24,7 +24,8 @@ limitations under the License.
     border-radius: 1.5rem;
     padding: 2px;
 
-    background-color: $togglesw-off-color;
+    background-color: $background;
+    border: 1px solid $strong-input-border-color;
     opacity: 0.5;
 
     &[aria-disabled="true"] {
@@ -38,10 +39,11 @@ limitations under the License.
 }
 
 .mx_ToggleSwitch.mx_ToggleSwitch_on {
-    background-color: $accent;
+    background-color: $inverted-bg-color;
 
     > .mx_ToggleSwitch_ball {
         left: calc(100% - $font-20px);
+        background-color: $background;
     }
 }
 
diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss
index 767a7eccac..680d3e92c4 100644
--- a/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -27,10 +27,9 @@ limitations under the License.
     }
 
     .mx_DisambiguatedProfile_mxid {
-        font: var(--cpd-font-body-sm-semibold);
         margin-inline-start: 5px;
-        opacity: 0.5; /* Match mx_TextualEvent */
-        color: $primary-content;
+        color: $secondary-content;
+        font-size: var(--cpd-font-size-body-sm);
     }
 }
 
diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss
index 138782ddb2..d27cb4f188 100644
--- a/res/css/views/messages/_ReactionsRowButton.pcss
+++ b/res/css/views/messages/_ReactionsRowButton.pcss
@@ -18,18 +18,18 @@ limitations under the License.
     display: inline-flex;
     line-height: $font-20px;
     padding: 1px 6px;
-    border: 1px solid $message-action-bar-border-color;
+    border: 1px solid $quinary-content;
     border-radius: 10px;
-    background-color: $header-panel-bg-color;
+    background-color: $secondary-hairline-color;
     user-select: none;
 
     &:hover {
-        border-color: $reaction-row-button-hover-border-color;
+        border-color: $quinary-content;
     }
 
     &.mx_ReactionsRowButton_selected {
-        background-color: $reaction-row-button-selected-bg-color;
-        border-color: $accent;
+        background-color: $accent-300;
+        border-color: $accent-800;
     }
 
     &.mx_AccessibleButton_disabled {
diff --git a/res/css/views/messages/_RedactedBody.pcss b/res/css/views/messages/_RedactedBody.pcss
index a85e97411a..3db5744687 100644
--- a/res/css/views/messages/_RedactedBody.pcss
+++ b/res/css/views/messages/_RedactedBody.pcss
@@ -14,7 +14,7 @@ limitations under the License.
 
 .mx_RedactedBody {
     white-space: pre-wrap;
-    color: $muted-fg-color;
+    color: $secondary-content;
     vertical-align: middle;
 
     padding-left: 20px;
@@ -23,7 +23,7 @@ limitations under the License.
     &::before {
         height: 14px;
         width: 14px;
-        background-color: $muted-fg-color;
+        background-color: $icon-button-color;
         mask-image: url("$(res)/img/feather-customised/trash.custom.svg");
         mask-repeat: no-repeat;
         mask-position: center;
diff --git a/res/css/views/messages/_TextualEvent.pcss b/res/css/views/messages/_TextualEvent.pcss
index 08f0f07b19..a8f8d606e7 100644
--- a/res/css/views/messages/_TextualEvent.pcss
+++ b/res/css/views/messages/_TextualEvent.pcss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_TextualEvent {
-    opacity: 0.5;
     overflow-y: hidden;
     line-height: normal;
 
diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss
index ad63b698c4..b6b03aeb91 100644
--- a/res/css/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@@ -59,7 +59,7 @@ limitations under the License.
                 left: 0;
                 mask-repeat: no-repeat;
                 mask-position: center;
-                background-color: $header-panel-text-primary-color;
+                background-color: $icon-button-color;
             }
         }
 
@@ -103,7 +103,7 @@ limitations under the License.
             flex: 1;
 
             .mx_BaseCard_header_title_heading {
-                color: $secondary-content;
+                color: $icon-button-color;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index 3c4f7a2b59..d772a2d628 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -130,7 +130,7 @@ limitations under the License.
     }
 
     .mx_MessageTimestamp {
-        color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */
+        color: $secondary-content;
     }
 
     .mx_BaseCard_footer {
diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
index 1c383b1419..12d74915a2 100644
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@@ -69,7 +69,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_separator {
-        border-bottom: 1px solid rgba($primary-content, 0.1);
+        border-bottom: 1px solid $separator;
     }
 
     .mx_UserInfo_memberDetailsContainer {
diff --git a/res/css/views/rooms/_EditMessageComposer.pcss b/res/css/views/rooms/_EditMessageComposer.pcss
index b684f4f32b..f90207fce4 100644
--- a/res/css/views/rooms/_EditMessageComposer.pcss
+++ b/res/css/views/rooms/_EditMessageComposer.pcss
@@ -33,7 +33,7 @@ limitations under the License.
         padding: 3px 6px;
 
         &:focus {
-            border-color: rgba($accent, 0.5); /* Only ever used here */
+            border-color: $accent-500;
         }
     }
 
diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss
index 3f130ee3dc..10c82a8474 100644
--- a/res/css/views/rooms/_EmojiButton.pcss
+++ b/res/css/views/rooms/_EmojiButton.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_EmojiButton {
-    @mixin composerButton 50%, $accent;
+    @mixin composerButton 50%, $accent, $accent-300;
 }
 
 .mx_EmojiButton_highlight {
@@ -28,6 +28,6 @@ limitations under the License.
 
 .mx_MessageComposer_wysiwyg {
     .mx_EmojiButton {
-        @mixin composerButton 5px, $tertiary-content;
+        @mixin composerButton 5px, $tertiary-content, $panels;
     }
 }
diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss
index e9ed6e1ddd..a2ce91037d 100644
--- a/res/css/views/rooms/_EntityTile.pcss
+++ b/res/css/views/rooms/_EntityTile.pcss
@@ -120,7 +120,7 @@ limitations under the License.
 .mx_EntityTile_power {
     padding-inline-start: 6px;
     font-size: $font-10px;
-    color: $tertiary-content;
+    color: $secondary-content;
     max-width: 6em;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 3d3053219e..c69725c9a6 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -138,7 +138,7 @@ $left-gutter: 64px;
     &.mx_EventTile_highlight,
     &.mx_EventTile_highlight .markdown-body,
     &.mx_EventTile_highlight .mx_EventTile_edited {
-        color: $alert;
+        color: $secondary-content;
     }
 
     &.mx_EventTile_bubbleContainer {
@@ -686,7 +686,7 @@ $left-gutter: 64px;
     .mx_EventTile_pendingModeration {
         user-select: none;
         font-size: $font-12px;
-        color: $roomtopic-color;
+        color: $secondary-content;
         display: inline-block;
         margin-left: 9px;
     }
@@ -1136,13 +1136,13 @@ $left-gutter: 64px;
     }
 
     &:hover {
-        background-color: $system;
+        background-color: $panels;
     }
 
     /* ThreadsList has always group layout */
     &[data-layout="group"]:hover {
         .mx_EventTile_line {
-            background-color: $system; /* override $event-selected-color */
+            background-color: inherit;
             box-shadow: none; /* don't show the verification left stroke in the thread list */
         }
     }
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index 6d0bc46b35..56a7da7ec6 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -189,7 +189,7 @@ limitations under the License.
 }
 
 .mx_MessageComposer_button {
-    @mixin composerButton 50%, $accent;
+    @mixin composerButton 50%, $accent, $accent-300;
 
     &:last-child {
         margin-right: auto;
@@ -197,11 +197,12 @@ limitations under the License.
 
     &.mx_MessageComposer_closeButtonMenu {
         &::after {
-            background: rgba($accent, 0.1);
+            background: $accent-300;
         }
 
         &::before {
             background-color: $accent;
+            z-index: 2;
         }
     }
 
@@ -231,15 +232,16 @@ limitations under the License.
     }
 
     .mx_MessageComposer_button {
-        @mixin composerButton 5px, $tertiary-content;
+        @mixin composerButton 5px, $tertiary-content, $panels;
 
         &.mx_MessageComposer_closeButtonMenu {
             &::after {
-                background: rgba($accent, 0.1);
+                background: $accent-300;
             }
 
             &::before {
                 background-color: $accent;
+                z-index: 2;
             }
         }
 
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index 3ff64e9fee..e4b3da447c 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -56,7 +56,7 @@ limitations under the License.
     min-width: 0;
     margin: 0 20px 0 16px;
     padding-top: 6px;
-    border-bottom: 1px solid $system;
+    border-bottom: 1px solid $separator;
 
     .mx_InviteOnlyIcon_large {
         margin: 0;
@@ -112,7 +112,7 @@ limitations under the License.
     }
 
     &[aria-expanded="true"] {
-        background-color: $quinary-content;
+        background-color: $separator;
 
         .mx_RoomHeader_chevron {
             transform: rotate(180deg);
@@ -138,7 +138,7 @@ limitations under the License.
     $lines: 2;
 
     flex: 1;
-    color: $roomtopic-color;
+    color: $secondary-content;
     font: var(--cpd-font-body-sm-regular);
     line-height: 1rem;
     max-height: calc(1rem * $lines);
@@ -189,7 +189,7 @@ limitations under the License.
     }
 
     &:hover {
-        background: rgba($accent, 0.1);
+        background: $accent-300;
 
         &::before {
             background-color: $accent;
@@ -207,7 +207,7 @@ limitations under the License.
     border-radius: 50%;
     transform: scale(1.6);
     transform-origin: center center;
-    background: rgba($background, 1);
+    background: $background;
 }
 
 .mx_RoomHeader_button_unreadIndicator {
@@ -217,18 +217,18 @@ limitations under the License.
     margin: 4px;
 
     &.mx_Indicator_red {
-        background: rgba($alert, 1);
-        box-shadow: rgba($alert, 1);
+        background: $alert;
+        box-shadow: $alert;
     }
 
     &.mx_Indicator_gray {
-        background: rgba($room-icon-unread-color, 1);
-        box-shadow: rgba($room-icon-unread-color, 1);
+        background: $room-icon-unread-color;
+        box-shadow: $room-icon-unread-color;
     }
 
     &.mx_Indicator_bold {
-        background: rgba($primary-content, 1);
-        box-shadow: rgba($primary-content, 1);
+        background: $primary-content;
+        box-shadow: $primary-content;
     }
 }
 
diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss
index 45a0055cf6..24898b8925 100644
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@@ -48,7 +48,7 @@ limitations under the License.
         /* to work correctly. */
         padding-bottom: 8px;
         height: 24px;
-        color: $tertiary-content;
+        color: $secondary-content;
 
         .mx_RoomSublist_stickableContainer {
             width: 100%;
diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss
index cd578d58c4..7e8c869104 100644
--- a/res/css/views/rooms/_ThreadSummary.pcss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@@ -37,7 +37,7 @@ limitations under the License.
     width: fit-content;
     height: 40px;
     position: relative;
-    background-color: $system;
+    background-color: $panels;
     padding-inline: $spacing-12 $spacing-16;
     display: flex;
     align-items: center;
@@ -46,7 +46,7 @@ limitations under the License.
     box-sizing: border-box;
     clear: both;
     overflow: hidden;
-    border: 1px solid $system; /* always render a border so the hover effect doesn't require a re-layout */
+    border: 1px solid $panels; /* always render a border so the hover effect doesn't require a re-layout */
 
     .mx_ThreadSummary_chevron {
         position: absolute;
@@ -55,7 +55,7 @@ limitations under the License.
         bottom: 0;
         width: 60px;
         box-sizing: border-box;
-        /* XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug */
+        /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */
         background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
 
         opacity: 0;
diff --git a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
index b711a634d1..235c2db91f 100644
--- a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
@@ -32,7 +32,7 @@ limitations under the License.
         padding: 3px 6px;
 
         &:focus {
-            border-color: rgba($accent, 0.5); /* Only ever used here */
+            border-color: $accent-400;
         }
     }
 
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
index 8e3dd22c99..8f23227c80 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
@@ -34,7 +34,7 @@ limitations under the License.
 
     .mx_FormattingButtons_Button_hover {
         &:hover {
-            background: rgba($secondary-content, 0.1);
+            background: $panels;
 
             .mx_FormattingButtons_Icon {
                 color: $secondary-content;
@@ -43,7 +43,7 @@ limitations under the License.
     }
 
     .mx_FormattingButtons_active {
-        background: rgba($accent, 0.1);
+        background: $accent-300;
 
         .mx_FormattingButtons_Icon {
             color: $accent;
diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss
index 87d92e4b0a..3c01321487 100644
--- a/res/css/views/settings/_FontScalingPanel.pcss
+++ b/res/css/views/settings/_FontScalingPanel.pcss
@@ -40,7 +40,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     padding: 15px $spacing-20 35px;
-    background: rgba($quinary-content, 0.2);
+    background: $panels;
     border-radius: 10px;
     font-size: $font-10px;
 
diff --git a/res/css/views/settings/_KeyboardShortcut.pcss b/res/css/views/settings/_KeyboardShortcut.pcss
index 721d5fd8fe..f1593a4d9f 100644
--- a/res/css/views/settings/_KeyboardShortcut.pcss
+++ b/res/css/views/settings/_KeyboardShortcut.pcss
@@ -19,7 +19,7 @@ limitations under the License.
     kbd {
         padding: 5px;
         border-radius: 4px;
-        background-color: $header-panel-bg-color;
+        background-color: $background;
         min-width: 20px;
         text-align: center;
         display: inline-block;
diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss
index 94952e31b6..48d891641a 100644
--- a/res/css/views/settings/_LayoutSwitcher.pcss
+++ b/res/css/views/settings/_LayoutSwitcher.pcss
@@ -28,6 +28,7 @@ limitations under the License.
         flex-shrink: 1;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
 
         flex-basis: 33%;
         min-width: 0;
@@ -71,7 +72,7 @@ limitations under the License.
     }
 
     .mx_StyledRadioButton_checked {
-        background-color: rgba($accent, 0.08);
+        background-color: $accent-200;
     }
 
     .mx_EventTile {
diff --git a/res/css/views/settings/_ThemeChoicePanel.pcss b/res/css/views/settings/_ThemeChoicePanel.pcss
index 8bb64b6787..1194c6110d 100644
--- a/res/css/views/settings/_ThemeChoicePanel.pcss
+++ b/res/css/views/settings/_ThemeChoicePanel.pcss
@@ -26,7 +26,7 @@ limitations under the License.
         border-radius: 10px;
         width: 180px;
 
-        background: $quinary-content;
+        background: $accent-200;
         opacity: 0.4;
 
         flex-shrink: 1;
diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss
index 8241ff9227..4e534484d8 100644
--- a/res/css/views/voip/_CallView.pcss
+++ b/res/css/views/voip/_CallView.pcss
@@ -104,7 +104,7 @@ limitations under the License.
                 left: 0;
                 right: 0;
 
-                background-color: rgba($call-background, 0.9);
+                background-color: $info-plinth-fg-color;
 
                 display: flex;
                 justify-content: center;
diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
index 2b10d70739..6a108c71ed 100644
--- a/res/themes/dark/css/_dark.pcss
+++ b/res/themes/dark/css/_dark.pcss
@@ -1,33 +1,64 @@
 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
 /* ******************** */
-$primary-content: #ffffff;
-$secondary-content: #a9b2bc;
-$tertiary-content: #8e99a4;
-$quaternary-content: #6f7882;
-$quinary-content: #394049;
+$primary-content: var(--cpd-color-text-primary);
+$secondary-content: var(--cpd-color-text-secondary);
+$tertiary-content: var(--cpd-color-gray-800);
+$quaternary-content: var(--cpd-color-gray-600);
+$quinary-content: var(--cpd-color-gray-400);
 
-$system: #21262c;
-$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
-$background: #15191e;
-$overlay-background: rgba($background, 0.85);
+$system: var(--cpd-color-bg-subtle-primary);
+$system-transparent: #e1e6ec00;
+$background: var(--cpd-color-bg-canvas-default);
+$overlay-background: var(--cpd-color-alpha-gray-1300);
+
+$panels: var(--cpd-color-bg-subtle-secondary);
+$panel-actions: var(--cpd-color-alpha-gray-300);
+
+$separator: var(--cpd-color-alpha-gray-400);
 
-$panel-base: #8d97a5; /* This color is not intended for use in the app */
-$panels: rgba($system, 0.9);
-$panel-selected: rgba($panel-base, 0.3);
-$panel-hover: rgba($panel-base, 0.1);
-$panel-actions: rgba($panel-base, 0.2);
-$space-nav: rgba($panel-base, 0.1);
 /* ******************** */
 
+/* RoomList */
+/* ******************** */
+$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); /* TODO: there's no corresponding compound color */
+$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
+$roomtile-default-badge-bg-color: $muted-fg-color;
+/* ******************** */
+
+/**
+ * Creating a `semantic` color scale. This will not be needed with the new
+ * visual language, but necessary during the transition period
+ * This abstract the `green` away from where accent shades are used
+ * Take: `background: rgba($accent, 0.1);`
+ * would be transformed to: `background: $accent-300;`
+ *
+ * To use under very rare circumstances, always prefer the semantics defined
+ * in https://compound.element.io/?path=/docs /tokens-semantic-colors--docs
+ */
+$accent-100: var(--cpd-color-green-100);
+$accent-200: var(--cpd-color-green-200);
+$accent-300: var(--cpd-color-green-300);
+$accent-400: var(--cpd-color-green-400);
+$accent-500: var(--cpd-color-green-500);
+$accent-600: var(--cpd-color-green-600);
+$accent-700: var(--cpd-color-green-700);
+$accent-800: var(--cpd-color-green-800);
+$accent-900: var(--cpd-color-green-900);
+$accent-1000: var(--cpd-color-green-1000);
+$accent-1100: var(--cpd-color-green-1100);
+$accent-1200: var(--cpd-color-green-1200);
+$accent-1300: var(--cpd-color-green-1300);
+$accent-1400: var(--cpd-color-green-1400);
+
 /* Reused Figma non-compound colors */
 /* ******************** */
-$inverted-bg-color: $background;
-$header-panel-bg-color: #20252b;
+$inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
+$header-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
 /* ******************** */
 
 /* Theme specific colors */
 /* ******************** */
-$icon-button-color: $tertiary-content;
+$icon-button-color: var(--cpd-color-icon-tertiary);
 /* ******************** */
 
 /* Colors that aren't in Figma and are theme specific - we need to get rid of these */
@@ -39,7 +70,7 @@ $text-secondary-color: #b9bec6;
 
 /* Colors that aren't in Figma - we need to get rid of these */
 /* ******************** */
-$dark-panel-bg-color: $header-panel-bg-color;
+$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
 $muted-fg-color: $header-panel-text-primary-color;
 $light-fg-color: $header-panel-text-secondary-color;
 $focus-bg-color: $room-highlight-color;
@@ -82,7 +113,7 @@ $settings-subsection-fg-color: $text-secondary-color;
 
 /* Room */
 /* ******************** */
-$room-icon-unread-color: #fff;
+$room-icon-unread-color: var(--cpd-color-icon-tertiary);
 /* ******************** */
 
 /* RoomHeader */
@@ -103,19 +134,20 @@ $input-border-color: rgba(231, 231, 231, 0.2);
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
 $input-lighter-bg-color: #f2f5f8;
+$input-placeholder: var(--cpd-color-text-placeholder);
 /* ******************** */
 
 /* Dialog */
 /* ******************** */
 $dialog-title-fg-color: $primary-content;
 $dialog-backdrop-color: $menu-border-color;
-$dialog-close-fg-color: #9fa9ba;
+$dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $primary-content;
 /* ******************** */
 
 /* RoomList */
 /* ******************** */
-$roomlist-bg-color: rgba($system, 0.9);
+$system: var(--cpd-color-bg-subtle-secondary);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 $roomtile-default-badge-bg-color: $input-darker-fg-color;
 /* ******************** */
@@ -215,7 +247,7 @@ $live-badge-color: #ffffff;
 /* One-off colors */
 /* ******************** */
 $progressbar-bg-color: $system;
-$kbd-border-color: $menu-border-color;
+$kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #800;
 $event-timestamp-color: $text-secondary-color;
 $slider-background-color: $quinary-content;
@@ -223,7 +255,7 @@ $appearance-tab-border-color: $room-highlight-color;
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 $breadcrumb-placeholder-bg-color: #272c35;
 $theme-button-bg-color: #e3e8f0;
-$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
+$resend-button-divider-color: var(--cpd-color-gray-700);
 $inlinecode-border-color: $quinary-content;
 $inlinecode-background-color: $system;
 $codeblock-background-color: #2a3039;
@@ -285,10 +317,10 @@ body {
 .mx_SplashPage::before {
     background-image: radial-gradient(
             53.85% 66.75% at 87.55% 0%,
-            hsla(0, 0%, 11%, 0.15) 0%,
-            hsla(250, 100%, 88%, 0) 100%
+            hsla(0deg, 0%, 11%, 0.15) 0%,
+            hsla(250deg, 100%, 88%, 0) 100%
         ),
-        radial-gradient(41.93% 41.93% at 0% 0%, hsla(0, 0%, 38%, 0.28) 0%, hsla(250, 100%, 88%, 0) 100%),
-        radial-gradient(100% 100% at 0% 0%, hsla(250, 100%, 88%, 0.3) 0%, hsla(0, 100%, 86%, 0) 100%),
-        radial-gradient(106.35% 96.26% at 100% 0%, hsla(25, 100%, 88%, 0.4) 0%, hsla(167, 76%, 82%, 0) 100%) !important;
+        radial-gradient(41.93% 41.93% at 0% 0%, hsla(0deg, 0%, 38%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
+        radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.3) 0%, hsla(0deg, 100%, 86%, 0) 100%),
+        radial-gradient(106.35% 96.26% at 100% 0%, hsla(25deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%) !important;
 }
diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss
index 8955ca888d..52041047cf 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.pcss
+++ b/res/themes/legacy-dark/css/_legacy-dark.pcss
@@ -1,6 +1,6 @@
 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
 $system: #21262c;
-$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
+$system-transparent: #e1e6ec00;
 
 /* unified palette */
 /* try to use these colors when possible */
@@ -45,12 +45,14 @@ $event-selected-color: $header-panel-bg-color;
 
 /* used for the hairline dividers in RoomView */
 $primary-hairline-color: #000000;
+$secondary-hairline-color: var(--cpd-color-gray-300);
 
 /* used for the border of input text fields */
 $input-border-color: #e7e7e7;
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
 $input-lighter-bg-color: #f2f5f8;
+$input-placeholder: var(--cpd-color-text-placeholder);
 
 $resend-button-divider-color: $muted-fg-color;
 
@@ -66,11 +68,12 @@ $menu-selected-color: $room-highlight-color;
 $avatar-initial-color: #ffffff;
 
 $h3-color: $primary-fg-color;
+$icon-button-color: var(--cpd-color-icon-tertiary);
 
 $dialog-title-fg-color: $base-text-color;
 $dialog-backdrop-color: #000;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
-$dialog-close-fg-color: #9fa9ba;
+$dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $text-primary-color;
 
 $lightbox-background-bg-color: #000;
@@ -82,9 +85,8 @@ $settings-subsection-fg-color: $text-secondary-color;
 $topleftmenu-color: $text-primary-color;
 $roomheader-addroom-bg-color: #3c4556;
 $roomheader-addroom-fg-color: $text-primary-color;
-$icon-button-color: $header-panel-text-primary-color;
 $roomtopic-color: $text-secondary-color;
-$room-icon-unread-color: #fff;
+$room-icon-unread-color: var(--cpd-color-icon-tertiary);
 
 /* Legacy theme backports */
 $accent: #0dbd8b;
@@ -96,18 +98,38 @@ $secondary-content: $secondary-fg-color;
 $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6f7882;
 $quinary-content: $quaternary-content;
-$system: #21262c;
-$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
-$panel-base: #8d97a5; /* This color is not intended for use in the app */
-$panel-selected: rgba($panel-base, 0.3);
-$panel-hover: rgba($panel-base, 0.1);
 $panel-actions: $roomtile-selected-bg-color;
-$space-nav: rgba($panel-base, 0.1);
 
+$separator: var(--cpd-color-alpha-gray-400);
+
+/**
+ * Creating a `semantic` color scale. This will not be needed with the new
+ * visual language, but necessary during the transition period
+ * This abstract the `green` away from where accent shades are used
+ * Take: `background: rgba($accent, 0.1);`
+ * would be transformed to: `background: $accent-300;`
+ *
+ * To use under very rare circumstances, always prefer the semantics defined
+ * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+ */
+$accent-100: var(--cpd-color-green-100);
+$accent-200: var(--cpd-color-green-200);
+$accent-300: var(--cpd-color-green-300);
+$accent-400: var(--cpd-color-green-400);
+$accent-500: var(--cpd-color-green-500);
+$accent-600: var(--cpd-color-green-600);
+$accent-700: var(--cpd-color-green-700);
+$accent-800: var(--cpd-color-green-800);
+$accent-900: var(--cpd-color-green-900);
+$accent-1000: var(--cpd-color-green-1000);
+$accent-1100: var(--cpd-color-green-1100);
+$accent-1200: var(--cpd-color-green-1200);
+$accent-1300: var(--cpd-color-green-1300);
+$accent-1400: var(--cpd-color-green-1400);
 /* Legacy theme backports */
 
 /* ******************** */
@@ -126,7 +148,7 @@ $call-primary-content: $primary-content;
 $call-light-quaternary-content: #c1c6cd;
 
 $roomlist-filter-active-bg-color: $panel-actions;
-$roomlist-bg-color: $header-panel-bg-color;
+$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary);
 
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 
@@ -163,7 +185,7 @@ $progressbar-bg-color: #21262c;
 
 $visual-bell-bg-color: #800;
 
-$dark-panel-bg-color: $header-panel-bg-color;
+$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
 $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
 
 $message-action-bar-bg-color: $header-panel-bg-color;
@@ -174,7 +196,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-selected-bg-color: #1f6954;
 
-$kbd-border-color: #000000;
+$kbd-border-color: $strong-input-border-color;
 
 $tooltip-timeline-bg-color: $spacePanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
index 9ce9c28d31..6e166c7168 100644
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -59,6 +59,7 @@ $event-selected-color: $header-panel-bg-color;
 
 /* used for the hairline dividers in RoomView */
 $primary-hairline-color: #e5e5e5;
+$secondary-hairline-color: var(--cpd-color-gray-300);
 
 /* used for the border of input text fields */
 $input-border-color: #e7e7e7;
@@ -76,6 +77,7 @@ $strong-input-border-color: #c7c7c7;
 /* used for UserSettings EditableText */
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
+$input-placeholder: var(--cpd-color-text-placeholder);
 /* scrollbars */
 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
 /* context menus */
@@ -87,11 +89,12 @@ $menu-selected-color: #f5f8fa;
 $avatar-initial-color: #ffffff;
 
 $h3-color: #3d3b39;
+$icon-button-color: var(--cpd-color-icon-tertiary);
 
 $dialog-title-fg-color: #45474a;
 $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
-$dialog-close-fg-color: #c1c1c1;
+$dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $primary-bg-color;
 
 $lightbox-background-bg-color: #000;
@@ -124,9 +127,8 @@ $topleftmenu-color: #212121;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: #91a1c0;
 $roomheader-addroom-fg-color: $accent-fg-color;
-$icon-button-color: #91a1c0;
 $roomtopic-color: #9e9e9e;
-$room-icon-unread-color: #737d8c;
+$room-icon-unread-color: var(--cpd-color-icon-tertiary);
 
 /* ******************** */
 
@@ -150,22 +152,21 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6f7882;
 $quinary-content: $quaternary-content;
 $system: #f4f6fa;
-$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
+$system-transparent: #e1e6ec00;
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
-$panel-base: #8d97a5; /* This color is not intended for use in the app */
-$panel-selected: rgba($tertiary-content, 0.3);
-$panel-hover: rgba($tertiary-content, 0.1);
 $panel-actions: $roomtile-selected-bg-color;
-$space-nav: rgba($tertiary-content, 0.15);
+
+$separator: var(--cpd-color-alpha-gray-400);
+
 /* Legacy theme backports */
 
 /* ******************** */
 
 $roomlist-filter-active-bg-color: $panel-actions;
-$roomlist-bg-color: $header-panel-bg-color;
+$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary);
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
 
@@ -185,14 +186,39 @@ $call-background: #15191e;
 $call-primary-content: #ffffff;
 $call-light-quaternary-content: #c1c6cd;
 
-$username-variant1-color: #368bd6;
-$username-variant2-color: #ac3ba8;
-$username-variant3-color: #03b381;
-$username-variant4-color: #e64f7a;
-$username-variant5-color: #ff812d;
-$username-variant6-color: #2dc2c5;
-$username-variant7-color: #5c56f5;
-$username-variant8-color: #74d12c;
+$username-variant1-color: var(--cpd-color-blue-900);
+$username-variant2-color: var(--cpd-color-fuchsia-900);
+$username-variant3-color: var(--cpd-color-green-900);
+$username-variant4-color: var(--cpd-color-pink-900);
+$username-variant5-color: var(--cpd-color-orange-900);
+$username-variant6-color: var(--cpd-color-cyan-900);
+$username-variant7-color: var(--cpd-color-purple-900);
+$username-variant8-color: var(--cpd-color-lime-900);
+
+/**
+ * Creating a `semantic` color scale. This will not be needed with the new
+ * visual language, but necessary during the transition period
+ * This abstract the `green` away from where accent shades are used
+ * Take: `background: rgba($accent, 0.1);`
+ * would be transformed to: `background: $accent-300;`
+ *
+ * To use under very rare circumstances, always prefer the semantics defined
+ * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+ */
+$accent-100: var(--cpd-color-green-100);
+$accent-200: var(--cpd-color-green-200);
+$accent-300: var(--cpd-color-green-300);
+$accent-400: var(--cpd-color-green-400);
+$accent-500: var(--cpd-color-green-500);
+$accent-600: var(--cpd-color-green-600);
+$accent-700: var(--cpd-color-green-700);
+$accent-800: var(--cpd-color-green-800);
+$accent-900: var(--cpd-color-green-900);
+$accent-1000: var(--cpd-color-green-1000);
+$accent-1100: var(--cpd-color-green-1100);
+$accent-1200: var(--cpd-color-green-1200);
+$accent-1300: var(--cpd-color-green-1300);
+$accent-1400: var(--cpd-color-green-1400);
 
 /* ******************** */
 
@@ -218,8 +244,8 @@ $e2e-verified-color: #0dbd8b;
 $e2e-unknown-color: #e8bf37;
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ff5b55;
-$e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
-$e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
+$e2e-verified-color-light: var(--cpd-color-green-300);
+$e2e-warning-color-light: var(--cpd-color-red-300);
 
 /*** ImageView ***/
 $lightbox-bg-color: #454545;
@@ -241,7 +267,7 @@ $visual-bell-bg-color: #faa;
 
 /* Toggle switch */
 $togglesw-off-color: #c1c9d6;
-$togglesw-ball-color: #fff;
+$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
 
 /* Slider */
 $slider-background-color: #c1c9d6;
@@ -251,11 +277,11 @@ $progressbar-bg-color: rgba(141, 151, 165, 0.2);
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-focus-bg-color: #dddddd;
-$authpage-lang-color: #4e5054;
-$authpage-primary-color: #232f32;
-$authpage-secondary-color: #61708b;
+$authpage-lang-color: $secondary-content;
+$authpage-primary-color: $primary-content;
+$authpage-secondary-color: $secondary-content;
 
-$dark-panel-bg-color: $secondary-accent-color;
+$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 
 $message-action-bar-bg-color: $primary-bg-color;
@@ -266,7 +292,7 @@ $message-action-bar-hover-border-color: $focus-bg-color;
 $reaction-row-button-hover-border-color: $focus-bg-color;
 $reaction-row-button-selected-bg-color: #e9fff9;
 
-$kbd-border-color: $message-action-bar-border-color;
+$kbd-border-color: $strong-input-border-color;
 
 $tooltip-timeline-bg-color: $spacePanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss
index c883952652..ffe9b5ad12 100644
--- a/res/themes/light-custom/css/_custom.pcss
+++ b/res/themes/light-custom/css/_custom.pcss
@@ -26,16 +26,11 @@ $secondary-content: var(--secondary-content, $secondary-content);
 $tertiary-content: var(--tertiary-content, $tertiary-content);
 $quaternary-content: var(--quaternary-content, $quaternary-content);
 $quinary-content: var(--quinary-content, $quinary-content);
-/* XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670 */
-$system-transparent: var(--system-transparent, rgba($system, 0));
 $system: var(--system, $system);
+$system-transparent: var(--system-transparent, #e1e6ec00);
 $background: var(--background, $background);
-$panels: rgba($system, 0.9);
-$panel-base: var(--panel-base, $tertiary-content); /* This color is not intended for use in the app */
-$panel-selected: rgba($panel-base, 0.3);
-$panel-hover: rgba($panel-base, 0.1);
-$panel-actions: rgba($panel-base, 0.2);
-$space-nav: rgba($panel-base, 0.1);
+$panels: var(--panels, var(--cpd-color-gray-600));
+$panel-actions: var(--panels-actions, var(--cpd-color-gray-300));
 
 /* --accent-color */
 $username-variant3-color: var(--accent-color);
@@ -46,7 +41,7 @@ $lightbox-border-color: var(--timeline-background-color);
 $menu-bg-color: var(--timeline-background-color);
 $message-action-bar-bg-color: var(--timeline-background-color);
 $background: var(--timeline-background-color);
-$togglesw-ball-color: var(--timeline-background-color);
+$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
 $togglesw-off-color: var(--togglesw-off-color);
 $droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */
 $authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */
@@ -91,6 +86,7 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
 /* --roomlist-separator-color */
 $input-darker-bg-color: var(--roomlist-separator-color);
 $primary-hairline-color: var(--roomlist-separator-color); /* originally #e5e5e5, but close enough */
+$secondary-hairline-color: var(--secondary-hairline-color);
 
 /* --timeline-text-secondary-color */
 $authpage-secondary-color: var(--timeline-text-secondary-color);
@@ -145,3 +141,26 @@ $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
 $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
 $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
 $icon-button-color: var(--icon-button-color, $icon-button-color);
+
+$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color);
+$inverted-bg-color: var(--strong-input-border-color, $inverted-bg-color);
+
+/**
+ * Variation of the accent color.
+ * Generate this colour scale using LeonardoColor
+ * TODO: Add link
+ */
+$accent-100: var(--accent-color-100);
+$accent-200: var(--accent-color-200);
+$accent-300: var(--accent-color-300);
+$accent-400: var(--accent-color-400);
+$accent-500: var(--accent-color-500);
+$accent-600: var(--accent-color-600);
+$accent-700: var(--accent-color-700);
+$accent-800: var(--accent-color-800);
+$accent-900: var(--accent-color-900);
+$accent-1000: var(--accent-color-1000);
+$accent-1100: var(--accent-color-1100);
+$accent-1200: var(--accent-color-1200);
+$accent-1300: var(--accent-color-1300);
+$accent-1400: var(--accent-color-1400);
diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
index e1b79a7bf3..3d668a3f60 100644
--- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss
+++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
@@ -1,28 +1,28 @@
 /* Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 */
-$accent: #268075;
-$alert: #d62c25;
-$links: #0a6eca;
-$primary-content: #17191c;
-$secondary-content: #5e6266;
-$tertiary-content: $secondary-content;
-$quaternary-content: $secondary-content;
-$quinary-content: $secondary-content;
+$accent: var(--cpd-color-text-action-accent);
+$alert: var(--cpd-color-text-critical-primary);
+$links: var(--cpd-color-text-link-external);
+$primary-content: var(--cpd-color-text-primary);
+$secondary-content: var(--cpd-color-text-secondary);
+$tertiary-content: var(--cpd-color-gray-800);
+$quaternary-content: var(--cpd-color-gray-600);
+$quinary-content: var(--cpd-color-gray-400);
 
-$username-variant1-color: #0a6eca;
-$username-variant2-color: #ac3ba8;
-$username-variant3-color: #078662;
-$username-variant4-color: #cc1449;
-$username-variant5-color: #be4c00;
-$username-variant6-color: #1c7274;
-$username-variant7-color: #5c56f5;
-$username-variant8-color: #3e810a;
+$username-variant1-color: var(--cpd-color-blue-900);
+$username-variant2-color: var(--cpd-color-fuchsia-900);
+$username-variant3-color: var(--cpd-color-green-900);
+$username-variant4-color: var(--cpd-color-pink-900);
+$username-variant5-color: var(--cpd-color-orange-900);
+$username-variant6-color: var(--cpd-color-cyan-900);
+$username-variant7-color: var(--cpd-color-purple-900);
+$username-variant8-color: var(--cpd-color-lime-900);
 
 $accent-alt: $links;
 $input-border-color: $secondary-content;
 $input-darker-bg-color: $quinary-content;
 $input-darker-fg-color: $secondary-content;
 $resend-button-divider-color: $input-darker-bg-color;
-$icon-button-color: $quaternary-content;
+$icon-button-color: var(--cpd-color-icon-tertiary);
 $theme-button-bg-color: $quinary-content;
 $presence-offline: $quinary-content;
 $pinned-color: $tertiary-content;
@@ -34,6 +34,31 @@ $appearance-tab-border-color: $input-darker-bg-color;
 $eventbubble-reply-color: $quaternary-content;
 $roomtopic-color: $secondary-content;
 
+/**
+ * Creating a `semantic` color scale. This will not be needed with the new
+ * visual language, but necessary during the transition period
+ * This abstract the `green` away from where accent shades are used
+ * Take: `background: rgba($accent, 0.1);`
+ * would be transformed to: `background: $accent-300;`
+ *
+ * To use under very rare circumstances, always prefer the semantics defined
+ * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+ */
+$accent-100: var(--cpd-color-green-100);
+$accent-200: var(--cpd-color-green-200);
+$accent-300: var(--cpd-color-green-300);
+$accent-400: var(--cpd-color-green-400);
+$accent-500: var(--cpd-color-green-500);
+$accent-600: var(--cpd-color-green-600);
+$accent-700: var(--cpd-color-green-700);
+$accent-800: var(--cpd-color-green-800);
+$accent-900: var(--cpd-color-green-900);
+$accent-1000: var(--cpd-color-green-1000);
+$accent-1100: var(--cpd-color-green-1100);
+$accent-1200: var(--cpd-color-green-1200);
+$accent-1300: var(--cpd-color-green-1300);
+$accent-1400: var(--cpd-color-green-1400);
+
 /* Draw an outline on buttons with focus */
 .mx_AccessibleButton:focus {
     outline: 2px solid $accent;
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index 58ab893058..34ae265fb5 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -15,66 +15,90 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI
 
 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */
 /* ******************** */
-$primary-content: #17191c;
-$secondary-content: #737d8c;
-$tertiary-content: #8d97a5;
-$quaternary-content: #c1c6cd;
-$quinary-content: #e3e8f0;
+$primary-content: var(--cpd-color-text-primary);
+$secondary-content: var(--cpd-color-text-secondary);
+$tertiary-content: var(--cpd-color-gray-800);
+$quaternary-content: var(--cpd-color-gray-600);
+$quinary-content: var(--cpd-color-gray-400);
 
-$system: #f4f6fa;
-$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
-$background: #ffffff;
-$overlay-background: rgba($background, 0.85);
+$system: var(--cpd-color-bg-subtle-primary);
+$system-transparent: #e1e6ec00;
+$background: var(--cpd-color-bg-canvas-default);
+$overlay-background: var(--cpd-color-alpha-gray-1300);
 
-$panels: rgba($system, 0.9);
-$panel-selected: rgba($tertiary-content, 0.3);
-$panel-hover: rgba($tertiary-content, 0.1);
-$panel-actions: rgba($tertiary-content, 0.2);
-$space-nav: rgba($tertiary-content, 0.15);
+$panels: var(--cpd-color-bg-subtle-secondary);
+$panel-actions: var(--cpd-color-alpha-gray-300);
 
-$accent: #0dbd8b;
-$alert: #ff5b55;
-$links: #0086e6;
-$link-external: #0467dd;
+$separator: var(--cpd-color-alpha-gray-400);
 
-$username-variant1-color: #368bd6;
-$username-variant2-color: #ac3ba8;
-$username-variant3-color: #0dbd8b;
-$username-variant4-color: #e64f7a;
-$username-variant5-color: #ff812d;
-$username-variant6-color: #2dc2c5;
-$username-variant7-color: #5c56f5;
-$username-variant8-color: #74d12c;
+$accent: var(--cpd-color-text-action-accent);
+$alert: var(--cpd-color-text-critical-primary);
+$links: var(--cpd-color-text-link-external);
+$link-external: var(--cpd-color-text-link-external);
+
+$username-variant1-color: var(--cpd-color-blue-900);
+$username-variant2-color: var(--cpd-color-fuchsia-900);
+$username-variant3-color: var(--cpd-color-green-900);
+$username-variant4-color: var(--cpd-color-pink-900);
+$username-variant5-color: var(--cpd-color-orange-900);
+$username-variant6-color: var(--cpd-color-cyan-900);
+$username-variant7-color: var(--cpd-color-purple-900);
+$username-variant8-color: var(--cpd-color-lime-900);
 /* ******************** */
 
+/**
+ * Creating a `semantic` color scale. This will not be needed with the new
+ * visual language, but necessary during the transition period
+ * This abstract the `green` away from where accent shades are used
+ * Take: `background: rgba($accent, 0.1);`
+ * would be transformed to: `background: $accent-300;`
+ *
+ * To use under very rare circumstances, always prefer the semantics defined
+ * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+ */
+$accent-100: var(--cpd-color-green-100);
+$accent-200: var(--cpd-color-green-200);
+$accent-300: var(--cpd-color-green-300);
+$accent-400: var(--cpd-color-green-400);
+$accent-500: var(--cpd-color-green-500);
+$accent-600: var(--cpd-color-green-600);
+$accent-700: var(--cpd-color-green-700);
+$accent-800: var(--cpd-color-green-800);
+$accent-900: var(--cpd-color-green-900);
+$accent-1000: var(--cpd-color-green-1000);
+$accent-1100: var(--cpd-color-green-1100);
+$accent-1200: var(--cpd-color-green-1200);
+$accent-1300: var(--cpd-color-green-1300);
+$accent-1400: var(--cpd-color-green-1400);
+
 /* Reused Figma non-compound colors */
 /* ******************** */
-$inverted-bg-color: #27303a;
-$header-panel-bg-color: #f3f8fd;
+$inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
+$header-panel-bg-color: var(--cpd-color-bg-subtle-primary);
 /* ******************** */
 
 /* Theme specific colors */
 /* ******************** */
-$icon-button-color: $quaternary-content;
+$icon-button-color: var(--cpd-color-icon-tertiary);
 /* ******************** */
 
 /* Colors that aren't in Figma and are theme specific - we need to get rid of these */
 /* ******************** */
 $selection-fg-color: $background;
-$yellow-background: #fff8e3;
+$yellow-background: var(--cpd-color-yellow-200);
 $secondary-accent-color: #f2f5f8;
 $button-fg-color: $background;
 $neutral-badge-color: #dbdbdb;
-$strong-input-border-color: #c7c7c7;
-$preview-widget-bar-color: #dddddd;
-$accent-fg-color: $background;
-$accent-alt: #238cf5;
-$info-plinth-fg-color: #888;
+$strong-input-border-color: var(--cpd-color-border-interactive-primary);
+$preview-widget-bar-color: var(--cpd-color-subtle-secondary);
+$accent-fg-color: #f4f6fa;
+$accent-alt: var(--cpd-color-text-link-external);
+$info-plinth-fg-color: var(--cpd-color-gray-900);
 /* ******************** */
 
 /* Colors that aren't in Figma - we need to get rid of these */
 /* ******************** */
-$dark-panel-bg-color: $secondary-accent-color;
+$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
 $muted-fg-color: #61708b;
 $light-fg-color: #747474;
 $focus-bg-color: $preview-widget-bar-color;
@@ -122,7 +146,7 @@ $settings-subsection-fg-color: $muted-fg-color;
 
 /* Room */
 /* ******************** */
-$room-icon-unread-color: $secondary-content;
+$room-icon-unread-color: var(--cpd-color-icon-tertiary);
 /* ******************** */
 
 /* RoomHeader */
@@ -154,13 +178,14 @@ $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: $secondary-accent-color;
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
+$input-placeholder: var(--cpd-color-text-placeholder);
 /* ******************** */
 
 /* Dialog */
 /* ******************** */
-$dialog-title-fg-color: #45474a;
+$dialog-title-fg-color: var(--cpd-color-text-primary);
 $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
-$dialog-close-fg-color: #c1c1c1;
+$dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $background;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 /* ******************** */
@@ -174,19 +199,19 @@ $imagebody-giflabel-color: $background;
 
 /* RoomList */
 /* ******************** */
-$roomlist-bg-color: rgba(245, 245, 245, 0.9);
+$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
 $roomtile-default-badge-bg-color: $muted-fg-color;
 /* ******************** */
 
 /* e2e */
 /* ******************** */
-$e2e-verified-color: #0dbd8b;
-$e2e-unknown-color: #e8bf37;
-$e2e-unverified-color: #e8bf37;
-$e2e-warning-color: #ff5b55;
-$e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
-$e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
+$e2e-verified-color: var(--cpd-color-green-900);
+$e2e-unknown-color: var(--cpd-color-yellow-900);
+$e2e-unverified-color: var(--cpd-color-green-900);
+$e2e-warning-color: var(--cpd-color-red-900);
+$e2e-verified-color-light: var(--cpd-color-green-300);
+$e2e-warning-color-light: var(--cpd-color-red-300);
 /* ******************** */
 
 /* Tabbed views */
@@ -207,7 +232,7 @@ $button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
 /* Toggle switch */
 /* ******************** */
 $togglesw-off-color: #c1c9d6;
-$togglesw-ball-color: $background;
+$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
 /* ******************** */
 
 /* Authpage */
@@ -216,8 +241,9 @@ $authpage-primary-color: #232f32;
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: $roomlist-bg-color;
 $authpage-focus-bg-color: $focus-bg-color;
-$authpage-lang-color: #4e5054;
-$authpage-secondary-color: $muted-fg-color;
+$authpage-lang-color: $secondary-content;
+$authpage-primary-color: $primary-content;
+$authpage-secondary-color: $secondary-content;
 /* ******************** */
 
 /* Message action bar */
@@ -281,7 +307,7 @@ $call-light-quaternary-content: #c1c6cd;
 /* One-off colors */
 /* ******************** */
 $progressbar-bg-color: $panel-actions;
-$kbd-border-color: $message-action-bar-border-color;
+$kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #faa;
 $event-timestamp-color: #acacac;
 $slider-background-color: $togglesw-off-color;
@@ -302,6 +328,7 @@ $selected-color: $secondary-accent-color;
 $pinned-color: $tertiary-content;
 $avatar-initial-color: $background;
 $primary-hairline-color: transparent;
+$secondary-hairline-color: var(--cpd-color-gray-300);
 $focus-brightness: 105%;
 /* ******************** */
 
@@ -320,14 +347,14 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg";
 
 /* Location sharing */
 /* ******************** */
-$location-marker-color: #ffffff;
-$location-live-color: #5c56f5;
-$location-live-secondary-color: #deddfd;
+$location-marker-color: var(--cpd-color-icon-on-solid-primary);
+$location-live-color: var(--cpd-color-purple-900);
+$location-live-secondary-color: var(--cpd-color-purple-600);
 /* ******************** */
 
 /* Voice Broadcast */
 /* ******************** */
-$live-badge-color: #ffffff;
+$live-badge-color: var(--cpd-color-icon-on-solid-primary);
 /* ******************** */
 
 body {
@@ -339,11 +366,11 @@ body {
 /* diff highlight colors */
 /* ******************** */
 .hljs-addition {
-    background: #dfd;
+    background: var(--cpd-color-green-500);
 }
 
 .hljs-deletion {
-    background: #fdd;
+    background: var(--cpd-color-red-500);
 }
 
 /* ******************** */
diff --git a/res/themes/light/css/light.pcss b/res/themes/light/css/light.pcss
index 4c661ae5c6..e9335ad8d5 100644
--- a/res/themes/light/css/light.pcss
+++ b/res/themes/light/css/light.pcss
@@ -1,3 +1,5 @@
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+
 @import "../../../../res/css/_font-sizes.pcss";
 @import "_paths.pcss";
 @import "_fonts.pcss";