diff --git a/screenshots/00-welcome-desktop.png b/screenshots/00-welcome-desktop.png
index b7fa31b8bf..7cae232dee 100644
Binary files a/screenshots/00-welcome-desktop.png and b/screenshots/00-welcome-desktop.png differ
diff --git a/screenshots/00-welcome-mobile.png b/screenshots/00-welcome-mobile.png
index 0dfbed78fc..26a8b8f24f 100644
Binary files a/screenshots/00-welcome-mobile.png and b/screenshots/00-welcome-mobile.png differ
diff --git a/screenshots/01-register-desktop.png b/screenshots/01-register-desktop.png
index 4da2e71650..9a6463a062 100644
Binary files a/screenshots/01-register-desktop.png and b/screenshots/01-register-desktop.png differ
diff --git a/screenshots/01-register-mobile.png b/screenshots/01-register-mobile.png
index 9cc00f9d0a..eedacc12e4 100644
Binary files a/screenshots/01-register-mobile.png and b/screenshots/01-register-mobile.png differ
diff --git a/screenshots/02-register-confirm-desktop.png b/screenshots/02-register-confirm-desktop.png
index ee591896ce..4749bd020b 100644
Binary files a/screenshots/02-register-confirm-desktop.png and b/screenshots/02-register-confirm-desktop.png differ
diff --git a/screenshots/02-register-confirm-mobile.png b/screenshots/02-register-confirm-mobile.png
index 7015d4e61b..f86e213145 100644
Binary files a/screenshots/02-register-confirm-mobile.png and b/screenshots/02-register-confirm-mobile.png differ
diff --git a/screenshots/03-register-user-number-desktop.png b/screenshots/03-register-user-number-desktop.png
index ec22dfb27e..6f8ef82920 100644
Binary files a/screenshots/03-register-user-number-desktop.png and b/screenshots/03-register-user-number-desktop.png differ
diff --git a/screenshots/03-register-user-number-mobile.png b/screenshots/03-register-user-number-mobile.png
index 48b24cced0..70be48ec10 100644
Binary files a/screenshots/03-register-user-number-mobile.png and b/screenshots/03-register-user-number-mobile.png differ
diff --git a/screenshots/04-recover-method-selector-desktop.png b/screenshots/04-recover-method-selector-desktop.png
index 5f77f22c9a..4fbcac1f82 100644
Binary files a/screenshots/04-recover-method-selector-desktop.png and b/screenshots/04-recover-method-selector-desktop.png differ
diff --git a/screenshots/04-recover-method-selector-mobile.png b/screenshots/04-recover-method-selector-mobile.png
index 777977c9bc..f3aa78020b 100644
Binary files a/screenshots/04-recover-method-selector-mobile.png and b/screenshots/04-recover-method-selector-mobile.png differ
diff --git a/screenshots/05-single-device-warning-desktop.png b/screenshots/05-single-device-warning-desktop.png
index a4a4e2a92c..e4df87ef5f 100644
Binary files a/screenshots/05-single-device-warning-desktop.png and b/screenshots/05-single-device-warning-desktop.png differ
diff --git a/screenshots/05-single-device-warning-mobile.png b/screenshots/05-single-device-warning-mobile.png
index dd3a95c56a..8fdb059144 100644
Binary files a/screenshots/05-single-device-warning-mobile.png and b/screenshots/05-single-device-warning-mobile.png differ
diff --git a/screenshots/06-main-desktop.png b/screenshots/06-main-desktop.png
index d9bf8e79ee..9678fe0636 100644
Binary files a/screenshots/06-main-desktop.png and b/screenshots/06-main-desktop.png differ
diff --git a/screenshots/06-main-mobile.png b/screenshots/06-main-mobile.png
index cb2a01b58f..4231be7b5a 100644
Binary files a/screenshots/06-main-mobile.png and b/screenshots/06-main-mobile.png differ
diff --git a/screenshots/07-welcome-back-desktop.png b/screenshots/07-welcome-back-desktop.png
index 71181ef082..a9e38b0059 100644
Binary files a/screenshots/07-welcome-back-desktop.png and b/screenshots/07-welcome-back-desktop.png differ
diff --git a/screenshots/07-welcome-back-mobile.png b/screenshots/07-welcome-back-mobile.png
index 8beb4e571c..b83dbbcb09 100644
Binary files a/screenshots/07-welcome-back-mobile.png and b/screenshots/07-welcome-back-mobile.png differ
diff --git a/screenshots/08-new-device-flow-selection-desktop.png b/screenshots/08-new-device-flow-selection-desktop.png
index 991fa6d023..92c88087c8 100644
Binary files a/screenshots/08-new-device-flow-selection-desktop.png and b/screenshots/08-new-device-flow-selection-desktop.png differ
diff --git a/screenshots/08-new-device-flow-selection-mobile.png b/screenshots/08-new-device-flow-selection-mobile.png
index 83343c034a..18d341de1e 100644
Binary files a/screenshots/08-new-device-flow-selection-mobile.png and b/screenshots/08-new-device-flow-selection-mobile.png differ
diff --git a/screenshots/09-new-device-instructions-desktop.png b/screenshots/09-new-device-instructions-desktop.png
index 7496695fce..3785acdff8 100644
Binary files a/screenshots/09-new-device-instructions-desktop.png and b/screenshots/09-new-device-instructions-desktop.png differ
diff --git a/screenshots/09-new-device-instructions-mobile.png b/screenshots/09-new-device-instructions-mobile.png
index d856693436..b72211aa80 100644
Binary files a/screenshots/09-new-device-instructions-mobile.png and b/screenshots/09-new-device-instructions-mobile.png differ
diff --git a/screenshots/10-new-device-user-number-desktop.png b/screenshots/10-new-device-user-number-desktop.png
index 3caa53b950..c71b59fbbb 100644
Binary files a/screenshots/10-new-device-user-number-desktop.png and b/screenshots/10-new-device-user-number-desktop.png differ
diff --git a/screenshots/10-new-device-user-number-mobile.png b/screenshots/10-new-device-user-number-mobile.png
index 397d8361ba..3e25b87acc 100644
Binary files a/screenshots/10-new-device-user-number-mobile.png and b/screenshots/10-new-device-user-number-mobile.png differ
diff --git a/screenshots/11-new-device-alias-desktop.png b/screenshots/11-new-device-alias-desktop.png
index 71835a91c8..f9ac61aec5 100644
Binary files a/screenshots/11-new-device-alias-desktop.png and b/screenshots/11-new-device-alias-desktop.png differ
diff --git a/screenshots/11-new-device-alias-mobile.png b/screenshots/11-new-device-alias-mobile.png
index 14be2ff0c3..10c621f28b 100644
Binary files a/screenshots/11-new-device-alias-mobile.png and b/screenshots/11-new-device-alias-mobile.png differ
diff --git a/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png b/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png
index b2f8e6fb4a..a46b029b1e 100644
Binary files a/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png and b/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png differ
diff --git a/screenshots/12-new-device-registration-mode-disabled-instructions-mobile.png b/screenshots/12-new-device-registration-mode-disabled-instructions-mobile.png
index a54d73affe..7d66ec7a65 100644
Binary files a/screenshots/12-new-device-registration-mode-disabled-instructions-mobile.png and b/screenshots/12-new-device-registration-mode-disabled-instructions-mobile.png differ
diff --git a/screenshots/13-new-device-show-verification-code-desktop.png b/screenshots/13-new-device-show-verification-code-desktop.png
index 182dcb1d32..36c626f096 100644
Binary files a/screenshots/13-new-device-show-verification-code-desktop.png and b/screenshots/13-new-device-show-verification-code-desktop.png differ
diff --git a/screenshots/13-new-device-show-verification-code-mobile.png b/screenshots/13-new-device-show-verification-code-mobile.png
index 25355e08e6..d6d0d6334d 100644
Binary files a/screenshots/13-new-device-show-verification-code-mobile.png and b/screenshots/13-new-device-show-verification-code-mobile.png differ
diff --git a/screenshots/14-new-device-enter-verification-code-desktop.png b/screenshots/14-new-device-enter-verification-code-desktop.png
index ac5c0a74e0..7a21124a14 100644
Binary files a/screenshots/14-new-device-enter-verification-code-desktop.png and b/screenshots/14-new-device-enter-verification-code-desktop.png differ
diff --git a/screenshots/14-new-device-enter-verification-code-mobile.png b/screenshots/14-new-device-enter-verification-code-mobile.png
index e3bcbd6237..1bcda6fa4e 100644
Binary files a/screenshots/14-new-device-enter-verification-code-mobile.png and b/screenshots/14-new-device-enter-verification-code-mobile.png differ
diff --git a/screenshots/15-new-device-login-desktop.png b/screenshots/15-new-device-login-desktop.png
index 71181ef082..a9e38b0059 100644
Binary files a/screenshots/15-new-device-login-desktop.png and b/screenshots/15-new-device-login-desktop.png differ
diff --git a/screenshots/15-new-device-login-mobile.png b/screenshots/15-new-device-login-mobile.png
index 70a651ab8b..b83dbbcb09 100644
Binary files a/screenshots/15-new-device-login-mobile.png and b/screenshots/15-new-device-login-mobile.png differ
diff --git a/screenshots/16-new-device-listed-desktop.png b/screenshots/16-new-device-listed-desktop.png
index 5398f0e7f2..238337c017 100644
Binary files a/screenshots/16-new-device-listed-desktop.png and b/screenshots/16-new-device-listed-desktop.png differ
diff --git a/screenshots/16-new-device-listed-mobile.png b/screenshots/16-new-device-listed-mobile.png
index 516545cf14..4c27ba943d 100644
Binary files a/screenshots/16-new-device-listed-mobile.png and b/screenshots/16-new-device-listed-mobile.png differ
diff --git a/screenshots/17-device-settings-desktop.png b/screenshots/17-device-settings-desktop.png
index 1cc167f5ad..ac6a1da28e 100644
Binary files a/screenshots/17-device-settings-desktop.png and b/screenshots/17-device-settings-desktop.png differ
diff --git a/screenshots/17-device-settings-mobile.png b/screenshots/17-device-settings-mobile.png
index 07a2791f29..8f81652a3e 100644
Binary files a/screenshots/17-device-settings-mobile.png and b/screenshots/17-device-settings-mobile.png differ
diff --git a/screenshots/18-about-desktop.png b/screenshots/18-about-desktop.png
index 7d259d4005..290d01727c 100644
Binary files a/screenshots/18-about-desktop.png and b/screenshots/18-about-desktop.png differ
diff --git a/screenshots/18-about-mobile.png b/screenshots/18-about-mobile.png
index 892a0576a2..2a1b31be58 100644
Binary files a/screenshots/18-about-mobile.png and b/screenshots/18-about-mobile.png differ
diff --git a/screenshots/19-after-removal-desktop.png b/screenshots/19-after-removal-desktop.png
index d9bf8e79ee..9678fe0636 100644
Binary files a/screenshots/19-after-removal-desktop.png and b/screenshots/19-after-removal-desktop.png differ
diff --git a/screenshots/19-after-removal-mobile.png b/screenshots/19-after-removal-mobile.png
index b13881da04..4231be7b5a 100644
Binary files a/screenshots/19-after-removal-mobile.png and b/screenshots/19-after-removal-mobile.png differ
diff --git a/screenshots/20-compatibility-notice-desktop.png b/screenshots/20-compatibility-notice-desktop.png
index f38239f2d5..0250451d00 100644
Binary files a/screenshots/20-compatibility-notice-desktop.png and b/screenshots/20-compatibility-notice-desktop.png differ
diff --git a/screenshots/20-compatibility-notice-mobile.png b/screenshots/20-compatibility-notice-mobile.png
index 3492087fd8..525bf831dc 100644
Binary files a/screenshots/20-compatibility-notice-mobile.png and b/screenshots/20-compatibility-notice-mobile.png differ
diff --git a/screenshots/21-faq-desktop.png b/screenshots/21-faq-desktop.png
index b719514b53..8330fdacde 100644
Binary files a/screenshots/21-faq-desktop.png and b/screenshots/21-faq-desktop.png differ
diff --git a/screenshots/21-faq-mobile.png b/screenshots/21-faq-mobile.png
index 0477c15d67..24f71c8dba 100644
Binary files a/screenshots/21-faq-mobile.png and b/screenshots/21-faq-mobile.png differ
diff --git a/screenshots/22-faq-open-desktop.png b/screenshots/22-faq-open-desktop.png
index 4978f2d478..63cbea9dbc 100644
Binary files a/screenshots/22-faq-open-desktop.png and b/screenshots/22-faq-open-desktop.png differ
diff --git a/screenshots/22-faq-open-mobile.png b/screenshots/22-faq-open-mobile.png
index c983e43a8f..72e7ae2001 100644
Binary files a/screenshots/22-faq-open-mobile.png and b/screenshots/22-faq-open-mobile.png differ
diff --git a/screenshots/23-features-warning-desktop.png b/screenshots/23-features-warning-desktop.png
index a94dfd48be..d435505a16 100644
Binary files a/screenshots/23-features-warning-desktop.png and b/screenshots/23-features-warning-desktop.png differ
diff --git a/screenshots/23-features-warning-mobile.png b/screenshots/23-features-warning-mobile.png
index ea84e4c9dd..029b03e201 100644
Binary files a/screenshots/23-features-warning-mobile.png and b/screenshots/23-features-warning-mobile.png differ
diff --git a/screenshots/24-authenticate-known-anchor-desktop.png b/screenshots/24-authenticate-known-anchor-desktop.png
index 622ae1f54a..f7d7acb13a 100644
Binary files a/screenshots/24-authenticate-known-anchor-desktop.png and b/screenshots/24-authenticate-known-anchor-desktop.png differ
diff --git a/screenshots/24-authenticate-known-anchor-mobile.png b/screenshots/24-authenticate-known-anchor-mobile.png
index f85b1751c0..6091774706 100644
Binary files a/screenshots/24-authenticate-known-anchor-mobile.png and b/screenshots/24-authenticate-known-anchor-mobile.png differ
diff --git a/screenshots/25-authenticate-unknown-anchor-desktop.png b/screenshots/25-authenticate-unknown-anchor-desktop.png
index 7852b83934..6f94d189e0 100644
Binary files a/screenshots/25-authenticate-unknown-anchor-desktop.png and b/screenshots/25-authenticate-unknown-anchor-desktop.png differ
diff --git a/screenshots/25-authenticate-unknown-anchor-mobile.png b/screenshots/25-authenticate-unknown-anchor-mobile.png
index 03e8e0ee09..7239e54650 100644
Binary files a/screenshots/25-authenticate-unknown-anchor-mobile.png and b/screenshots/25-authenticate-unknown-anchor-mobile.png differ
diff --git a/screenshots/26-authenticate-derivation-origin-desktop.png b/screenshots/26-authenticate-derivation-origin-desktop.png
index d4b55b78db..65f4745f1c 100644
Binary files a/screenshots/26-authenticate-derivation-origin-desktop.png and b/screenshots/26-authenticate-derivation-origin-desktop.png differ
diff --git a/screenshots/26-authenticate-derivation-origin-mobile.png b/screenshots/26-authenticate-derivation-origin-mobile.png
index ae7b6fcca4..9931097b63 100644
Binary files a/screenshots/26-authenticate-derivation-origin-mobile.png and b/screenshots/26-authenticate-derivation-origin-mobile.png differ
diff --git a/src/frontend/assets/index.html b/src/frontend/assets/index.html
index 805616526d..5765f42244 100644
--- a/src/frontend/assets/index.html
+++ b/src/frontend/assets/index.html
@@ -8,7 +8,7 @@
     <link rel="shortcut icon" type="image/jpg" href="./favicon.ico" />
   </head>
   <body>
-    <main id="pageContent" aria-live="polite"></main>
+    <main id="pageContent" class="l-wrap" aria-live="polite"></main>
     <div id="notification"></div>
     <div id="loaderContainer"></div>
 
diff --git a/src/frontend/src/components/aboutLink.ts b/src/frontend/src/components/aboutLink.ts
deleted file mode 100644
index 72fa35a65d..0000000000
--- a/src/frontend/src/components/aboutLink.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { html } from "lit-html";
-
-export const aboutLink = html`<a
-  id="aboutLink"
-  class="nav-link"
-  href="/about"
-  target="_blank"
-  >About</a
->`;
diff --git a/src/frontend/src/components/compatibilityChart.ts b/src/frontend/src/components/compatibilityChart.ts
index 3ad154e2d4..e08167256a 100644
--- a/src/frontend/src/components/compatibilityChart.ts
+++ b/src/frontend/src/components/compatibilityChart.ts
@@ -19,11 +19,11 @@ export const compatibilityData = {
 };
 
 export const compatibilityChart = html`<p>${compatibilityData.note}</p>
-  <h3>For Desktop</h3>
-  <ul>
+  <h3 class="t-title">For Desktop</h3>
+  <ul class="c-list c-list--bulleted l-section">
     ${compatibilityData.desktop.map((browser) => html`<li>${browser}</li>`)}
   </ul>
-  <h3>For Mobile</h3>
-  <ul>
+  <h3 class="t-title">For Mobile</h3>
+  <ul class="c-list c-list--bulleted l-section">
     ${compatibilityData.mobile.map((browser) => html`<li>${browser}</li>`)}
   </ul>`;
diff --git a/src/frontend/src/components/displayError.ts b/src/frontend/src/components/displayError.ts
index d1778ea7e3..45d24a47c9 100644
--- a/src/frontend/src/components/displayError.ts
+++ b/src/frontend/src/components/displayError.ts
@@ -9,38 +9,28 @@ export type ErrorOptions = {
 };
 
 const pageContent = (options: ErrorOptions) => html`
-  <style>
-    #errorContainer {
-      min-height: 15rem;
-    }
-    .displayErrorDetail {
-      overflow: auto;
-      margin-bottom: 2rem;
-      flex-grow: 1;
-    }
-    .displayErrorMessage {
-      flex-grow: 1;
-    }
-    .warningIcon {
-      align-self: center;
-      width: 3rem;
-      height: 3rem;
-      margin-bottom: 1.5rem;
-    }
-  </style>
-  <div id="errorContainer" class="container">
-    ${warningIcon}
-    <h1>${options.title}</h1>
-    <p class="displayErrorMessage">${options.message}</p>
+  <div
+    id="errorContainer"
+    class="l-container c-card c-card--highlight c-card--warning"
+  >
+    <span class="c-card__icon"> ${warningIcon} </span>
+    <hgroup>
+      <h1 class="t-title t-title--primary">${options.title}</h1>
+      <p class="displayErrorMessage t-lead">${options.message}</p>
+    </hgroup>
     ${options.detail !== undefined
-      ? html` <details class="displayErrorDetail">
-          <summary>Error details</summary>
-          <pre>${options.detail}</pre>
+      ? html`<details class="displayErrorDetail">
+          <summary class="c-summary">
+            <span class="c-summary__link t-link">Error details</span>
+          </summary>
+          <pre class="t-paragraph">${options.detail}</pre>
         </details>`
       : ""}
-    <button id="displayErrorPrimary" class="primary">
-      ${options.primaryButton}
-    </button>
+    <div class="l-section">
+      <button id="displayErrorPrimary" class="c-button c-button--primary">
+        ${options.primaryButton}
+      </button>
+    </div>
   </div>
 `;
 
diff --git a/src/frontend/src/components/faqLink.ts b/src/frontend/src/components/faqLink.ts
deleted file mode 100644
index 38e4463eeb..0000000000
--- a/src/frontend/src/components/faqLink.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { html } from "lit-html";
-
-export const faqLink = html`<a
-  id="faqLink"
-  class="nav-link"
-  href="/faq"
-  target="_blank"
-  >FAQ</a
->`;
diff --git a/src/frontend/src/components/footer.ts b/src/frontend/src/components/footer.ts
index 3cff4815ca..67d2e00bd6 100644
--- a/src/frontend/src/components/footer.ts
+++ b/src/frontend/src/components/footer.ts
@@ -1,8 +1,8 @@
 import { html } from "lit-html";
 
-export const footer = html`<footer>
+export const footer = html`<footer class="l-footer">
   <a
-    class="powered-by-link"
+    class="page-signature"
     aria-label="DFINITY homepage"
     href="https://dfinity.org"
     target="_blank"
diff --git a/src/frontend/src/components/icons.ts b/src/frontend/src/components/icons.ts
index 033e2f7d06..8d3bee4be4 100644
--- a/src/frontend/src/components/icons.ts
+++ b/src/frontend/src/components/icons.ts
@@ -106,6 +106,7 @@ export const warningIcon = html`
     <path
       d="M22.3988 20.0625L12.6488 3.1875C12.5035 2.93672 12.2527 2.8125 11.9996 2.8125C11.7465 2.8125 11.4934 2.93672 11.3504 3.1875L1.6004 20.0625C1.31212 20.5641 1.67305 21.1875 2.24962 21.1875H21.7496C22.3262 21.1875 22.6871 20.5641 22.3988 20.0625ZM11.2496 9.75C11.2496 9.64687 11.334 9.5625 11.4371 9.5625H12.5621C12.6652 9.5625 12.7496 9.64687 12.7496 9.75V14.0625C12.7496 14.1656 12.6652 14.25 12.5621 14.25H11.4371C11.334 14.25 11.2496 14.1656 11.2496 14.0625V9.75ZM11.9996 18C11.7052 17.994 11.4249 17.8728 11.2188 17.6625C11.0128 17.4522 10.8973 17.1695 10.8973 16.875C10.8973 16.5805 11.0128 16.2978 11.2188 16.0875C11.4249 15.8772 11.7052 15.756 11.9996 15.75C12.294 15.756 12.5743 15.8772 12.7804 16.0875C12.9865 16.2978 13.1019 16.5805 13.1019 16.875C13.1019 17.1695 12.9865 17.4522 12.7804 17.6625C12.5743 17.8728 12.294 17.994 11.9996 18V18Z"
       fill="#292A2E"
+      paint-order="stroke"
     />
   </svg>
 `;
diff --git a/src/frontend/src/components/loader.ts b/src/frontend/src/components/loader.ts
index 9d7d5c61b5..98abc6981f 100644
--- a/src/frontend/src/components/loader.ts
+++ b/src/frontend/src/components/loader.ts
@@ -3,6 +3,7 @@ import { html, render } from "lit-html";
 const loader = () => html`<style>
     #loader {
       position: fixed;
+      z-index: var(--vz-loader);
       top: 0;
       left: 0;
       width: 100vw;
diff --git a/src/frontend/src/components/logout.ts b/src/frontend/src/components/logout.ts
index cb5d172c14..a7e9d24f63 100644
--- a/src/frontend/src/components/logout.ts
+++ b/src/frontend/src/components/logout.ts
@@ -6,22 +6,15 @@ import { logoutIcon } from "./icons";
 
 export const logoutSection = (
   alternativeLabel?: string
-): TemplateResult => html`<style>
-    #logoutIcon {
-      position: relative;
-      top: 6px;
-    }
-    #logoutBox {
-      margin-top: 3rem;
-    }
-  </style>
-  <div id="logoutBox">
-    <hr />
-    <button type="button" class="linkStyle" id="logoutButton">
-      ${logoutIcon}
-      ${alternativeLabel !== undefined ? alternativeLabel : "Logout"}
-    </button>
-  </div>`;
+): TemplateResult => html`<div
+  id="logoutBox"
+  class="l-section l-section--spacious"
+>
+  <button type="button" class="t-link" id="logoutButton">
+    <i class="t-link__icon">${logoutIcon}</i>
+    ${alternativeLabel !== undefined ? alternativeLabel : "Logout"}
+  </button>
+</div>`;
 
 export const initLogout = (): void => {
   const logoutButton = document.getElementById("logoutButton") as HTMLElement;
diff --git a/src/frontend/src/components/navbar.ts b/src/frontend/src/components/navbar.ts
index 436af712ce..274d0b39e6 100644
--- a/src/frontend/src/components/navbar.ts
+++ b/src/frontend/src/components/navbar.ts
@@ -1,10 +1,21 @@
 import { html } from "lit-html";
-import { aboutLink } from "../components/aboutLink";
-import { faqLink } from "../components/faqLink";
+import { navigationLink } from "../components/navigationLink";
 
 export const navbar = html` <aside aria-label="General links">
-  <ul class="nav-links">
-    <li>${aboutLink}</li>
-    <li>${faqLink}</li>
+  <ul class="c-nav-links">
+    <li>
+      ${navigationLink({
+        labelText: "About",
+        uuid: "aboutLink",
+        url: "/about",
+      })}
+    </li>
+    <li>
+      ${navigationLink({
+        labelText: "FAQ",
+        uuid: "faqLink",
+        url: "/faq",
+      })}
+    </li>
   </ul>
 </aside>`;
diff --git a/src/frontend/src/components/navigationLink.ts b/src/frontend/src/components/navigationLink.ts
new file mode 100644
index 0000000000..8929fdb50e
--- /dev/null
+++ b/src/frontend/src/components/navigationLink.ts
@@ -0,0 +1,15 @@
+import { html, TemplateResult } from "lit-html";
+
+export const navigationLink = (
+  props = {
+    labelText: "About",
+    uuid: "aboutLink",
+    url: "/about",
+  }
+): TemplateResult => html`<a
+  id="${props.uuid}"
+  class="c-nav-links__link t-link t-link--discreet"
+  href="${props.url}"
+  target="_blank"
+  >${props.labelText}</a
+>`;
diff --git a/src/frontend/src/components/warnBox.ts b/src/frontend/src/components/warnBox.ts
index ca1586a5d9..160dcd17b1 100644
--- a/src/frontend/src/components/warnBox.ts
+++ b/src/frontend/src/components/warnBox.ts
@@ -20,15 +20,19 @@ export const warnBox = ({
   htmlElement = "aside",
 }: warnBoxProps): TemplateResult => {
   const contents: TemplateResult = html`
-    <div class="warnIcon">${warningIcon}</div>
-    <div class="warnContent">
-      <div class="warnTitle">${title}</div>
-      <div class="warnMessage">${message}</div>
+    <span class="c-card__icon" aria-hidden>${warningIcon}</span>
+    <div class="c-card__content">
+      <h3 class="t-title c-card__title">${title}</h3>
+      <div class="t-paragraph c-card__paragraph">${message}</div>
       ${slot}
     </div>
   `;
 
   return html`${htmlElement === "aside"
-    ? html` <aside class="warnBox">${contents}</aside>`
-    : html` <div class="warnBox">${contents}</div> `}`;
+    ? html` <aside class="c-card c-card--narrow c-card--warning">
+        ${contents}
+      </aside>`
+    : html`
+        <div class="c-card c-card--narrow c-card--warning">${contents}</div>
+      `}`;
 };
diff --git a/src/frontend/src/flows/about/index.ts b/src/frontend/src/flows/about/index.ts
index 353cce165e..980eb9a2ab 100644
--- a/src/frontend/src/flows/about/index.ts
+++ b/src/frontend/src/flows/about/index.ts
@@ -3,43 +3,38 @@ import { compatibilityData } from "../../components/compatibilityChart";
 
 // The About page
 const pageContent = html`
-  <div class="about__container">
-    <h1 class="about__title">About</h1>
-    <div class="about__section">
-      <h2 class="about__subtitle">Internet Identity</h2>
-      <div class="about__section-title-underline"></div>
-      <p>
+  <div class="l-container l-container--wide c-card c-card--highlight">
+    <h1 class="t-title t-title--main">About</h1>
+    <div class="l-section">
+      <h2 class="t-title">Internet Identity</h2>
+      <p class="t-paragraph">
         Internet Identity is the identity provider for the Internet Computer: A
         dapp facilitating authentication on the Internet Computer.
-        <br />
-        <br />
-
+      </p>
+      <p class="t-paragraph">
         For frequently asked questions, check the
         <a href="/faq" title="Go to the Internet Identity FAQ page">FAQ page</a
         >.
       </p>
     </div>
-    <div class="about__section">
-      <h2 class="about__subtitle">Compatibility</h2>
-      <div class="about__section-title-underline"></div>
-      <p>${compatibilityData.note}</p>
+    <div class="l-section">
+      <h2 class="t-title">Compatibility</h2>
+      <p class="t-paragraph">${compatibilityData.note}</p>
 
-      <div class="about__compatibility-flexparent">
+      <div class="l-horizontal l-section">
         <div class="about__compatibility-flexchild">
-          <h3 class="about__compatibility-type">For Desktop</h3>
-          <ul class="about__compatibility-list">
+          <h3 class="t-title">For Desktop</h3>
+          <ul class="c-list c-list--bulleted l-section">
             ${compatibilityData.desktop.map(
-              (browser) =>
-                html`<li class="about__compatibility-list-item">${browser}</li>`
+              (browser) => html`<li>${browser}</li>`
             )}
           </ul>
         </div>
         <div class="about__compatibility-flexchild">
-          <h3 class="about__compatibility-type">For Mobile</h3>
-          <ul class="about__compatibility-list">
+          <h3 class="t-title">For Mobile</h3>
+          <ul class="c-list c-list--bulleted l-section">
             ${compatibilityData.mobile.map(
-              (browser) =>
-                html`<li class="about__compatibility-list-item">${browser}</li>`
+              (browser) => html`<li>${browser}</li>`
             )}
           </ul>
         </div>
diff --git a/src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts b/src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts
index d50293f45c..389f3f43ba 100644
--- a/src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts
+++ b/src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts
@@ -7,12 +7,14 @@ import { validateAlias } from "../validateAlias";
 // Bad examples: "2019 macbook!", "2010 macbook_", "space trails at end "
 
 const pageContent = () => html`
-  <div class="container">
-    <h1>New Device</h1>
+  <article class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">New Device</h1>
+      <p class="t-lead">Please provide a name for your new device</p>
+    </hgroup>
     <form id="deviceAliasForm">
-      <p>Please provide a name for your new device</p>
       <input
-        class="inputDeviceAlias"
+        class="c-input inputDeviceAlias"
         aria-label="device name"
         id="deviceAlias"
         placeholder="Device alias"
@@ -22,13 +24,21 @@ const pageContent = () => html`
         pattern="^[A-Za-z0-9]+((-|\\s|_)*[A-Za-z0-9])*$"
         spellcheck="false"
       />
-      <button type="submit" id="deviceAliasContinue" class="primary">
-        Add Device
-      </button>
-      <button type="button" id="deviceAliasCancel">Cancel</button>
+      <div class="l-section">
+        <button type="submit" id="deviceAliasContinue" class="c-button">
+          Add Device
+        </button>
+        <button
+          type="button"
+          id="deviceAliasCancel"
+          class="c-button c-button--secondary"
+        >
+          Cancel
+        </button>
+      </div>
     </form>
     ${logoutSection()}
-  </div>
+  </article>
 `;
 
 /**
diff --git a/src/frontend/src/flows/addDevice/manage/index.ts b/src/frontend/src/flows/addDevice/manage/index.ts
index 196d74d641..fc34e4b93f 100644
--- a/src/frontend/src/flows/addDevice/manage/index.ts
+++ b/src/frontend/src/flows/addDevice/manage/index.ts
@@ -3,44 +3,8 @@ import { networkIcon, securityKeyIcon } from "../../../components/icons";
 import { warnBox } from "../../../components/warnBox";
 
 const pageContent = () => html`
-  <style>
-    .flowChoiceContainer {
-      display: flex;
-      gap: 1rem;
-      margin-top: 1rem;
-    }
-    .flowOption {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-      border: 1px solid gray;
-      border-radius: 4px;
-      width: 100%;
-      padding: 1rem;
-      font-family: "Montserrat", sans-serif;
-      font-size: 1.2rem;
-      margin-bottom: 2rem;
-    }
-    .flowOption:hover,
-    .flowOption:focus {
-      outline: none;
-      box-shadow: none;
-    }
-    .flowIcon {
-      height: 52px;
-    }
-    .flowOptionTitle {
-      font-weight: 500;
-      margin: 0.5rem;
-    }
-    .flowOptionDescription {
-      text-align: center;
-      font-size: 1rem;
-    }
-  </style>
-  <article class="container">
-    <h1>Add New Device</h1>
+  <article class="l-container c-card c-card--highlight">
+    <h1 class="t-title">Add New Device</h1>
     ${warnBox({
       title: "Security Warning",
       message: html`You are in the process of adding a new device. Any device
@@ -53,27 +17,29 @@ const pageContent = () => html`
       message: html`Do not continue if you were prompted to do this by any
         website other than <strong>https://identity.ic0.app</strong>!`,
     })}
-    <p>
+    <p class="t-paragraph">
       Is the device you want to add available on this machine (local device) or
       on a different one (remote device)?
     </p>
-    <div class="flowChoiceContainer">
-      <button class="flowOption" id="local">
+    <div class="l-horizontal l-section">
+      <button class="c-button c-button--secondary" id="local">
         <span class="flowIcon">${securityKeyIcon}</span>
-        <div class="flowOptionTitle">Local Device</div>
-        <div class="flowOptionDescription">
+        <div class="t-strong">Local Device</div>
+        <div class="t-weak">
           Add a new device available on <em>this machine</em>.
         </div>
       </button>
-      <button class="flowOption" id="remote">
+      <button class="c-button c-button--secondary" id="remote">
         <span class="flowIcon">${networkIcon}</span>
-        <div class="flowOptionTitle">Remote Device</div>
-        <div class="flowOptionDescription">
+        <div class="t-strong">Remote Device</div>
+        <div class="t-weak">
           Add a new device available on <em>another machine</em>.
         </div>
       </button>
     </div>
-    <button id="cancelAddDevice" class="linkStyle">Cancel</button>
+    <div class="l-section">
+      <button id="cancelAddDevice" class="c-button">Cancel</button>
+    </div>
   </article>
 `;
 
diff --git a/src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts b/src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts
index c79a72ff6b..c6292e6eb9 100644
--- a/src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts
+++ b/src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts
@@ -11,38 +11,46 @@ import {
 import { displayError } from "../../../components/displayError";
 
 const pageContent = (userNumber: bigint) => html`
-  <div class="container">
-    <h1>Add New Remote Device</h1>
-    <p>
-      Device registration mode enabled for Identity Anchor
-      <strong>${userNumber}</strong>. Please follow these steps to add your new
-      device:
-    </p>
-    <ol class="instruction-steps">
+  <div class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">Add New Remote Device</h1>
+      <p class="t-lead">
+        Device registration mode enabled for Identity Anchor
+        <strong class="t-strong">${userNumber}</strong>. Please follow these
+        steps to add your new device:
+      </p>
+    </hgroup>
+    <ol class="c-list c-list--numbered l-section">
       <li>
         On your <em>new</em> device:<br />
-        Open <strong>https://identity.ic0.app</strong>
+        Open <strong class="t-strong">https://identity.ic0.app</strong>
       </li>
       <li>
         On your <em>new</em> device:<br />
         Chose
-        <b>Already have an anchor but using a new device?</b>
+        <strong class="t-strong"
+          >Already have an anchor but using a new device?</strong
+        >
       </li>
       <li>
         On your <em>new</em> device:<br />
         Enter your Identity Anchor
-        <strong>${userNumber}</strong>
+        <strong class="t-strong">${userNumber}</strong>
       </li>
       <li>
         On your <em>new</em> device:<br />
         Choose an alias for your new device
       </li>
     </ol>
-    <p>
+    <p class="t-paragraph">
       This page will automatically refresh after completing the above steps.
     </p>
-    <p>Time remaining: <span id="timer"></span></p>
-    <button id="cancelAddRemoteDevice" class="linkStyle">Cancel</button>
+    <p class="t-paragraph">
+      Time remaining: <span id="timer" class="t-strong"></span>
+    </p>
+    <button id="cancelAddRemoteDevice" class="c-button c-button--secondary">
+      Cancel
+    </button>
   </div>
 `;
 
diff --git a/src/frontend/src/flows/addDevice/manage/verifyTentativeDevice.ts b/src/frontend/src/flows/addDevice/manage/verifyTentativeDevice.ts
index 88cb59ba14..20ba6ac1a2 100644
--- a/src/frontend/src/flows/addDevice/manage/verifyTentativeDevice.ts
+++ b/src/frontend/src/flows/addDevice/manage/verifyTentativeDevice.ts
@@ -10,8 +10,8 @@ import { setupCountdown } from "../../../utils/countdown";
 import { warnBox } from "../../../components/warnBox";
 
 const pageContent = (alias: string) => html`
-  <div class="container">
-    <h1>Verify New Device</h1>
+  <div class="l-container c-card c-card--highlight">
+    <h1 class="t-title t-title--main">Verify New Device</h1>
     ${warnBox({
       title: "Security Warning",
       message: html`Verifying will add the shown device to your Identity Anchor.
@@ -25,17 +25,32 @@ const pageContent = (alias: string) => html`
         <strong>https://identity.ic0.app</strong>. Do <strong>not</strong> enter
         verification codes that you received any other way.`,
     })}
-    <p>Verify that this is your device:</p>
-    <label>Alias</label>
-    <div class="highlightBox">${alias}</div>
-    <label>Device Verification Code</label>
-    <div id="wrongCodeMessage" class="error-message-hidden">
-      The entered verification code was invalid. Please try again.
+    <h2 class="t-title">Verify that this is your device:</h2>
+    <label class="l-section">
+      <strong class="t-title">Alias</strong>
+      <div class="c-input c-input--readonly t-vip t-vip--small">${alias}</div>
+    </label>
+    <label class="l-section">
+      <strong class="t-title">Device Verification Code</strong>
+      <p id="wrongCodeMessage" class="is-hidden t-paragraph">
+        The entered verification code was invalid. Please try again.
+      </p>
+      <input
+        id="tentativeDeviceCode"
+        class="c-input"
+        placeholder="Verification Code"
+      />
+    </label>
+    <p class="t-paragraph">
+      Time remaining: <span id="timer" class="t-strong"></span>
+    </p>
+
+    <div class="l-section">
+      <button id="verifyDevice" class="c-button">Verify Device</button>
+      <button id="cancelVerifyDevice" class="c-button c-button--secondary">
+        Cancel
+      </button>
     </div>
-    <input id="tentativeDeviceCode" placeholder="Verification Code" />
-    <p>Time remaining: <span id="timer"></span></p>
-    <button id="verifyDevice" class="primary">Verify Device</button>
-    <button id="cancelVerifyDevice" class="linkStyle">Cancel</button>
   </div>
 `;
 
@@ -103,7 +118,7 @@ const init = (
   verifyButton.onclick = async () => {
     if (pinInput.value === "") {
       pinInput.placeholder = "Please enter verification code";
-      pinInput.classList.toggle("errored", true);
+      pinInput.classList.toggle("has-error", true);
       return;
     }
     const result = await withLoader(() =>
diff --git a/src/frontend/src/flows/addDevice/welcomeView/deviceRegistrationModeDisabled.ts b/src/frontend/src/flows/addDevice/welcomeView/deviceRegistrationModeDisabled.ts
index 6cd8de20a6..2ec6af3fd4 100644
--- a/src/frontend/src/flows/addDevice/welcomeView/deviceRegistrationModeDisabled.ts
+++ b/src/frontend/src/flows/addDevice/welcomeView/deviceRegistrationModeDisabled.ts
@@ -6,35 +6,45 @@ import {
 } from "./registerTentativeDevice";
 
 const pageContent = (userNumber: bigint) => html`
-  <div class="container">
-    <h1>Device Registration Not Enabled</h1>
-    <p>
-      Device registration is not enabled for the Identity Anchor
-      <strong>${userNumber}</strong>. To enable device registration do the
-      following:
-    </p>
-    <ol class="instruction-steps">
+  <article class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">Device Registration Not Enabled</h1>
+      <p class="t-lead">
+        Device registration is not enabled for the Identity Anchor
+        <strong class="t-strong">${userNumber}</strong>. To enable device
+        registration do the following:
+      </p>
+    </hgroup>
+    <ol class="c-list c-list--numbered l-section">
       <li>
         On an <em>existing</em> device:<br />
-        Log into <strong>https://identity.ic0.app</strong> with Identity Anchor
-        <strong>${userNumber}</strong>
+        Log into <strong class="t-strong">https://identity.ic0.app</strong> with
+        Identity Anchor
+        <strong class="t-strong">${userNumber}</strong>
       </li>
       <li>
         On the <em>existing</em> device:<br />
-        Click <strong>Add new device</strong>
+        Click <strong class="t-strong">Add new device</strong>
       </li>
       <li>
         On the <em>existing</em> device:<br />
-        Chose <strong>Remote Device</strong>
+        Chose <strong class="t-strong">Remote Device</strong>
       </li>
       <li>
         On <em>this</em> device:<br />
-        Press <strong>Retry</strong>
+        Press <strong class="t-strong">Retry</strong>
       </li>
     </ol>
-    <button id="deviceRegModeDisabledRetry" class="primary">Retry</button>
-    <button id="deviceRegModeDisabledCancel">Cancel</button>
-  </div>
+    <div class="l-section">
+      <button id="deviceRegModeDisabledRetry" class="c-button">Retry</button>
+      <button
+        id="deviceRegModeDisabledCancel"
+        class="c-button c-button--secondary"
+      >
+        Cancel
+      </button>
+    </div>
+  </article>
 `;
 
 /**
diff --git a/src/frontend/src/flows/addDevice/welcomeView/index.ts b/src/frontend/src/flows/addDevice/welcomeView/index.ts
index 93cfd3a51f..5633843d94 100644
--- a/src/frontend/src/flows/addDevice/welcomeView/index.ts
+++ b/src/frontend/src/flows/addDevice/welcomeView/index.ts
@@ -5,22 +5,29 @@ import { toggleErrorMessage } from "../../../utils/errorHelper";
 import { Connection } from "../../../utils/iiConnection";
 
 const pageContent = (userNumber: bigint | null) => html`
-  <div class="container">
-    <h1>New Device</h1>
-    <p>
-      Please provide the Identity Anchor to which you want to add your device.
-    </p>
-    <div id="invalidAnchorMessage" class="error-message-hidden">
-      Please enter a valid Identity Anchor.
-    </div>
+  <div class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">New Device</h1>
+      <p class="t-lead">
+        Please provide the Identity Anchor to which you want to add your device.
+      </p>
+      <p id="invalidAnchorMessage" class="is-hidden">
+        Please enter a valid Identity Anchor.
+      </p>
+    </hgroup>
     <input
+      class="c-input"
       type="text"
       id="addDeviceUserNumber"
       placeholder="Enter Identity Anchor"
       value=${userNumber ?? ""}
     />
-    <button id="addDeviceUserNumberContinue" class="primary">Continue</button>
-    <button id="addDeviceUserNumberCancel">Cancel</button>
+    <button class="c-button" id="addDeviceUserNumberContinue" class="primary">
+      Continue
+    </button>
+    <button class="c-button c-button--secondary" id="addDeviceUserNumberCancel">
+      Cancel
+    </button>
   </div>
 `;
 
diff --git a/src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts b/src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts
index f4e97f2dc4..8aeaebc005 100644
--- a/src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts
+++ b/src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts
@@ -14,23 +14,37 @@ import { toggleErrorMessage } from "../../../utils/errorHelper";
 import { displayError } from "../../../components/displayError";
 
 const pageContent = () => html`
-  <div class="container">
-    <h1>New Device</h1>
-    <p>Please provide an alias for this device.</p>
-    <div id="invalidAliasMessage" class="error-message-hidden">
-      The device alias must not be empty.
-    </div>
+  <article class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">New Device</h1>
+      <p class="t-lead">Please provide an alias for this device.</p>
+      <p id="invalidAliasMessage" class="is-hidden">
+        The device alias must not be empty.
+      </p>
+    </hgroup>
     <input
       type="text"
       id="tentativeDeviceAlias"
       placeholder="Device Alias"
       maxlength="64"
+      class="c-input"
     />
-    <button id="registerTentativeDeviceContinue" class="primary">
-      Continue
-    </button>
-    <button id="registerTentativeDeviceCancel">Cancel</button>
-  </div>
+    <div class="l-section">
+      <button
+        class="c-button"
+        id="registerTentativeDeviceContinue"
+        class="primary"
+      >
+        Continue
+      </button>
+      <button
+        class="c-button c-button--secondary"
+        id="registerTentativeDeviceCancel"
+      >
+        Cancel
+      </button>
+    </div>
+  </article>
 `;
 
 /**
diff --git a/src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts b/src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts
index a4f2940e9c..dd451f948e 100644
--- a/src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts
+++ b/src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts
@@ -17,22 +17,31 @@ const pageContent = (
   alias: string,
   tentativeRegistrationInfo: TentativeRegistrationInfo
 ) => html`
-  <div class="container">
-    <h1>Device Verification Required</h1>
-    <p>
-      This device was added tentatively to the Identity Anchor
-      <strong>${userNumber}</strong>. Log in on an existing device and verify
-      this device using the verification code below. After successful
-      verification this page will automatically refresh.
-    </p>
-    <label>Alias</label>
-    <div class="highlightBox">${alias}</div>
-    <label>Device Verification Code</label>
-    <div id="verificationCode" class="highlightBox">
+  <div class="l-container c-card c-card--highlight">
+    <hgroup>  
+      <h1 class="t-title t-title--main">Device Verification Required</h1>
+      <p class="t-lead">
+        This device was added tentatively to the Identity Anchor
+        <strong>${userNumber}</strong>. Log in on an existing device and verify
+        this device using the verification code below. After successful
+        verification this page will automatically refresh.
+      </p>
+    </hgroup>
+    <h2 class="t-title">Alias</h2>
+    <output class="c-input c-input--readonly t-vip t-vip--small">${alias}</output>
+    <h2 class="t-title">Device Verification Code</hs>
+    <output
+      id="verificationCode"
+      class="c-input c-input--readonly t-vip"
+    >
       ${tentativeRegistrationInfo.verification_code}
+    </output>
+    <div class="l-section">
+      <p>Time remaining: <span id="timer"></span></p>
+      <div class="l-section">
+        <button id="showCodeCancel" class="c-button c-button--secondary">Cancel</button>
+      </div>
     </div>
-    <p>Time remaining: <span id="timer"></span></p>
-    <button id="showCodeCancel">Cancel</button>
   </div>
 `;
 
diff --git a/src/frontend/src/flows/authenticate/index.ts b/src/frontend/src/flows/authenticate/index.ts
index a33cc60414..b69d6ae21a 100644
--- a/src/frontend/src/flows/authenticate/index.ts
+++ b/src/frontend/src/flows/authenticate/index.ts
@@ -29,157 +29,68 @@ const pageContent = (
   hostName: string,
   userNumber?: bigint,
   derivationOrigin?: string
-) => html` <style>
-    .anchorText {
-      font-size: 1.5rem;
-    }
-
-    #userNumberInput {
-      margin: 0;
-      text-align: center;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 0.5rem 2rem;
-    }
-
-    #userNumberInput:focus {
-      box-sizing: border-box;
-      border-style: double;
-      border-width: 2px;
-      border-radius: 4px;
-      border-image-slice: 1;
-      outline: none;
-      border-image-source: linear-gradient(
-        270.05deg,
-        #29abe2 10.78%,
-        #522785 22.2%,
-        #ed1e79 42.46%,
-        #f15a24 59.41%,
-        #fbb03b 77.09%
-      );
-    }
-
-    .childContainer {
-      position: relative;
-      margin-bottom: 0.5rem;
-    }
-
-    #editAnchorButton {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      padding: 0.3rem;
-      margin: 0;
-      width: 2rem;
-      background: transparent;
-      border: none;
-    }
-
-    #registerButton {
-      margin: 0.5rem 0 1rem 0;
-    }
-
-    .hostName {
-      padding: 1rem 0;
-      font-size: 0.8rem;
-      font-weight: 400;
-    }
-
-    .buttonContainer {
-      margin: 0.5rem 0;
-    }
-
-    button.primary {
-      margin-top: 1rem;
-    }
-
-    hr {
-      border: none;
-      border-top-color: var(--grey-050);
-      border-top-style: solid;
-      margin: 0.5rem 0;
-    }
-
-    .anchor-error-message .error-message {
-      margin-bottom: 1rem;
-    }
-
-    .hidden {
-      display: none;
-    }
-
-    .host-name {
-      padding: 1rem 0.5rem;
-    }
-
-    .container {
-      padding: 3.5rem 1rem 2rem;
-    }
-
-    @media (min-width: 512px) {
-      .container {
-        padding: 3.5rem 2.5rem 2rem;
-      }
-    }
-  </style>
-  <div class="container">
-    ${icLogo}
-    <h1>Internet Identity</h1>
-    <p>Authenticate to service:</p>
-    <div class="host-name highlightBox hostName">${hostName}</div>
+) => html` <div class="l-container c-card c-card--highlight">
+    <div class="c-logo">${icLogo}</div>
+    <h1 class="t-title t-title--main">Internet Identity</h1>
+    <p class="t-lead">Authenticate to service:</p>
+    <div class="c-input t-vip t-vip--small c-input--readonly">${hostName}</div>
     ${derivationOrigin !== undefined && derivationOrigin !== hostName
       ? derivationOriginSection(derivationOrigin)
       : ""}
-    <p>Use Identity Anchor:</p>
+    <p class="t-paragraph">Use Identity Anchor:</p>
 
-    <div class="childContainer">
+    <div class="childContainer l-section c-input c-input--readonly">
       <input
         class="anchorText"
         type="text"
         id="userNumberInput"
         placeholder="Enter anchor"
+        class="c-input__input"
         value="${userNumber !== undefined ? userNumber : ""}"
       />
-      <button id="editAnchorButton">${editIcon}</button>
+      <button id="editAnchorButton" class="c-input__button">${editIcon}</button>
     </div>
-    <div
+    <p
       id="invalidAnchorMessage"
-      class="anchor-error-message error-message-hidden"
+      class="anchor-error-message is-hidden t-paragraph t-strong"
     >
       The Identity Anchor is not valid. Please try again.
-    </div>
+    </p>
 
-    <button type="button" id="authorizeButton" class="primary">
+    <button type="button" id="authorizeButton" class="c-button">
       Start Session
     </button>
-    <div id="registerSection">
-      <button type="button" id="registerButton">
+
+    <div id="registerSection" class="l-section">
+      <button
+        type="button"
+        id="registerButton"
+        class="c-button c-button--secondary"
+      >
         Create New Identity Anchor
       </button>
     </div>
-    <div class="textLink">
-      <hr />
-      <div class="buttonContainer">
-        <a id="recoverButton" class="linkStyle">Lost access?</a>
-      </div>
-      <div class="buttonContainer">
-        <a type="button" class="linkStyle" id="manageButton">
-          Manage your Identity Anchor
-        </a>
-      </div>
-      <hr />
-    </div>
+
+    <ul class="c-list l-section">
+      <li>
+        <a id="recoverButton" class="t-link">Lost access?</a>
+      </li>
+      <li>
+        <a class="t-link" id="manageButton">Manage your Identity Anchor</a>
+      </li>
+    </ul>
     ${navbar}
   </div>
   ${footer}`;
 
-const derivationOriginSection = (derivationOrigin: string) => html` <p>
+const derivationOriginSection = (derivationOrigin: string) => html` <p
+    class="t-paragraph"
+  >
     This service is an alias of:
   </p>
-  <div class="host-name highlightBox hostName">${derivationOrigin}</div>`;
+  <output class="c-input c-input--readonly t-vip t-vip--small">
+    ${derivationOrigin}
+  </output>`;
 
 export interface AuthSuccess {
   userNumber: bigint;
@@ -284,18 +195,18 @@ const init = (
 
   // only use non-edit mode if the anchor is set and was previously used successfully (i.e. is in local storage)
   if (userNumber !== undefined && userNumber === getUserNumber()) {
-    userNumberInput.classList.add("highlightBox");
-    registerSection.classList.add("hidden");
+    userNumberInput.classList.add("t-vip");
+    registerSection.classList.add("is-hidden");
     userNumberInput.disabled = true;
     authorizeButton.focus();
   } else {
-    editAnchorButton.classList.add("hidden");
+    editAnchorButton.classList.add("is-hidden");
     userNumberInput.select();
   }
   editAnchorButton.onclick = () => {
-    editAnchorButton.classList.add("hidden");
-    registerSection.classList.remove("hidden");
-    userNumberInput.classList.remove("highlightBox");
+    editAnchorButton.classList.add("is-hidden");
+    registerSection.classList.remove("is-hidden");
+    userNumberInput.classList.remove("t-vip");
     userNumberInput.disabled = false;
     userNumberInput.select();
   };
diff --git a/src/frontend/src/flows/compatibilityNotice.ts b/src/frontend/src/flows/compatibilityNotice.ts
index 5636723365..0e772fb278 100644
--- a/src/frontend/src/flows/compatibilityNotice.ts
+++ b/src/frontend/src/flows/compatibilityNotice.ts
@@ -3,20 +3,15 @@ import { compatibilityChart } from "../components/compatibilityChart";
 
 // Taken from: https://caniuse.com/?search=PublicKeyCredential
 const pageContent = (reason: string) => html`
-  <style>
-    ul {
-      list-style-type: none;
-    }
-  </style>
-  <div class="container">
-    <h1 id="compatibilityNotice">
-      Your browser isn't supported for<br />Internet Identity
+  <div class="l-container c-card c-card--highlight">
+    <h1 class="t-title t-title--main" id="compatibilityNotice">
+      Your browser isn't supported for Internet Identity
     </h1>
-    <p>
+    <p class="t-lead">
       Unfortunately your browser doesn't support the necessary features that
       power your Internet Identity.<br />
     </p>
-    <p>${reason}</p>
+    <p class="t-paragraph">${reason}</p>
     ${compatibilityChart}
   </div>
 `;
diff --git a/src/frontend/src/flows/confirmRegister.ts b/src/frontend/src/flows/confirmRegister.ts
index db6360ba73..66dcb32a81 100644
--- a/src/frontend/src/flows/confirmRegister.ts
+++ b/src/frontend/src/flows/confirmRegister.ts
@@ -15,17 +15,30 @@ import {
 } from "../utils/iiConnection";
 
 const pageContent = html`
-  <div class="container">
-    <h1>Confirm new device</h1>
+  <div class="l-container c-card c-card--highlight">
+    <h1 class="t-title t-title--main">Confirm new device</h1>
     <form id="confirmForm">
       <p class="captcha-status-text">…</p>
-      <img id="captchaImg" />
-      <input id="captchaInput" />
-      <p class="confirm-paragraph">Please confirm to add your device.</p>
-      <button type="submit" class="primary" id="confirmRegisterButton" disabled>
+      <img id="captchaImg" class="c-img-block l-section" alt="captcha image" />
+      <input id="captchaInput" class="c-input" />
+      <p class="t-paragraph confirm-paragraph">
+        Please confirm to add your device.
+      </p>
+      <button
+        type="submit"
+        class="c-button"
+        id="confirmRegisterButton"
+        disabled
+      >
         Confirm
       </button>
-      <button type="button" id="cancelButton">Cancel</button>
+      <button
+        type="button"
+        id="cancelButton"
+        class="c-button c-button--secondary"
+      >
+        Cancel
+      </button>
     </form>
   </div>
 `;
diff --git a/src/frontend/src/flows/displayUserNumber.ts b/src/frontend/src/flows/displayUserNumber.ts
index f416d2710b..20e56b1d4e 100644
--- a/src/frontend/src/flows/displayUserNumber.ts
+++ b/src/frontend/src/flows/displayUserNumber.ts
@@ -2,17 +2,23 @@ import { html, render } from "lit-html";
 import { warnBox } from "../components/warnBox";
 
 const pageContent = (userNumber: bigint) => html`
-  <div class="container">
-    <h1>Congratulations!</h1>
-    <p>Your new Identity Anchor has been created.</p>
+  <div class="l-container c-card">
+    <hgroup>
+      <h1 class="t-title t-title--main">Congratulations!</h1>
+      <p class="t-paragraph">Your new Identity Anchor has been created.</p>
+    </hgroup>
     ${warnBox({
       title: "Record Your Identity Anchor",
       message:
         "Please record your new Identity Anchor. Keep a backup on a storage medium and write it down. You will need it later to use Internet Identity or to add additional devices. If you lose your Identity Anchor, you will no longer be able to use this identity to authenticate to dApps.",
     })}
-    <label>Identity Anchor:</label>
-    <div class="highlightBox">${userNumber}</div>
-    <button id="displayUserContinue" class="primary">Continue</button>
+    <h2 class="t-title">Identity Anchor:</h2>
+
+    <div class="c-input c-input--readonly t-vip" data-usernumber>
+      ${userNumber}
+    </div>
+
+    <button id="displayUserContinue" class="c-button">Continue</button>
   </div>
 `;
 
diff --git a/src/frontend/src/flows/faq/index.ts b/src/frontend/src/flows/faq/index.ts
index 5a5e09dfb7..bfc41d2225 100644
--- a/src/frontend/src/flows/faq/index.ts
+++ b/src/frontend/src/flows/faq/index.ts
@@ -24,7 +24,7 @@ export const questions = {
     priority: 10,
     question: "Does Internet Identity support Windows Hello?",
     anchor: "windows-hello",
-    answer: html`<p>
+    answer: html`<p class="t-paragraph">
       Yes! Internet Identity supports authenticating via
       ${mkExternalLink({
         href: "https://support.microsoft.com/en-us/windows/learn-about-windows-hello-and-set-it-up-dae28983-8242-bb2a-d3d1-87c9d265a5f0",
@@ -80,12 +80,12 @@ export const questions = {
       'Why do I get "Invalid Seedphrase" when I try to recover my Identity Anchor?',
     anchor: "invalid-seedphrase",
     answer: html`
-      <p>
+      <p class="t-paragraph">
         Most likely, it means that the recovery phrase (also known as seed
         phrase) is not BIP39 compatible.
       </p>
 
-      <p>
+      <p class="t-paragraph">
         A recovery phrase generated by Internet Identity will contain an anchor
         number followed by some words. For instance, "135033 squirrel soccer
         ...". The number is the anchor for which the recovery phrase is
@@ -94,7 +94,7 @@ export const questions = {
         humans!
       </p>
 
-      <p>
+      <p class="t-paragraph">
         What Internet Identity will check, on the other hand, is that the
         remainder (the seed phrase without the anchor) is BIP39-compatible. Do
         note that some BIP39 backup solutions only allow storing the first 4
@@ -116,7 +116,7 @@ export const questions = {
     question: "Is Internet Identity opensource? Can I contribute?",
     anchor: "opensource",
     answer: html`
-      <p>
+      <p class="t-paragraph">
         Both the frontend code and the canister code of Internet Identity are
         opensource! The code is hosted on GitHub:
         ${mkExternalLink({
@@ -131,7 +131,7 @@ export const questions = {
         })}.
       </p>
 
-      <p>
+      <p class="t-paragraph">
         If you'd like to contribute to Internet Identity, please head over to
         the
         ${mkExternalLink({
@@ -151,9 +151,9 @@ export const questions = {
     question: "Should I add a recovery mechanism?",
     anchor: "what-is-recovery",
     answer: html`
-      <p>Yes!</p>
+      <p class="t-paragraph">Yes!</p>
 
-      <p>
+      <p class="t-paragraph">
         Internet Identity uses the
         ${mkExternalLink({
           href: "https://webauthn.guide/",
@@ -169,7 +169,7 @@ export const questions = {
         your Internet Identity anchor.
       </p>
 
-      <p>
+      <p class="t-paragraph">
         Recovery mechanisms are meant to prevent you from losing access to your
         anchor <em>even if</em> you lose the WebAuthn cryptographic material.
         There are two types of recovery mechanisms: recovery phrases (also
@@ -184,16 +184,16 @@ export const questions = {
     question: "Is a recovery phrase as safe as a recovery FIDO device?",
     anchor: "pick-recovery-device",
     answer: html`
-      <p>No.</p>
+      <p class="t-paragraph">No.</p>
 
-      <p>
+      <p class="t-paragraph">
         A recovery phrase can be stolen much more easily. Because the recovery
         phrase transits through your browser — when you first generate it and
         when you input it to recover your device — there is room for it to be
         stolen either by your browser, by your OS, or by someone seeing it.
       </p>
 
-      <p>
+      <p class="t-paragraph">
         In contrast, when using a FIDO device like a YubiKey or a Ledger Nano,
         the actual key (the private material) never leaves the device. Instead,
         the device cryptographically proves that it has the private material
@@ -205,7 +205,7 @@ export const questions = {
         the actual FIDO device needs to be physically stolen.
       </p>
 
-      <p>
+      <p class="t-paragraph">
         There can be legitimate worries that the FIDO device will stop working
         (water damage, etc), in which case you wouldn't be able to recover your
         anchor. Some devices (like
@@ -229,13 +229,15 @@ export const questionsArray = Object.values(questions)
 
 // The rendered (list item) question
 function renderQuestion(faq: Question) {
-  return html`<li class="faq__question">
+  return html`<li class="faq__question c-card">
     <details id=${faq.anchor}>
-      <summary class="faq__question-summary">
-        <span class="faq__question-summary-text"> ${faq.question} </span>
+      <summary class="faq__question-summary c-summary">
+        <span class="faq__question-summary-text t-link c-summary__link"
+          >${faq.question}</span
+        >
         <div class="faq__question-underline"></div>
       </summary>
-      <div>
+      <div class="l-section">
         <p class="faq__answer">
           ${faq.answer instanceof TemplateResult
             ? faq.answer
@@ -250,7 +252,7 @@ function renderQuestion(faq: Question) {
 }
 
 function renderFaqLinks(links: Link[]) {
-  return html` <ul class="faq__answer-links">
+  return html` <ul class="c-list c-list--bulleted l-section">
     ${Object.values(links)
       .sort((a, b) => {
         return a.link < b.link ? -1 : 1;
@@ -258,7 +260,6 @@ function renderFaqLinks(links: Link[]) {
       .map(
         (link) =>
           html`<li>
-            &middot;
             ${mkExternalLink({ href: link.link, text: `${link.name}` })}
           </li>`
       )}
@@ -273,7 +274,7 @@ export function mkExternalLink(link: {
   return html`<a
     rel="noopener noreferrer"
     href="${link.href}"
-    class="faq__answer-link"
+    class="faq__answer-link t-link"
     target="_blank"
     >${link.text} &#8599;</a
   >`;
@@ -304,9 +305,11 @@ const pageContent = html`
       animation-duration: 3000ms;
     }
   </style>
-  <div class="faq__container">
-    <h1 class="faq__title">FAQ</h1>
-    <ul class="faq__questions">
+  <div
+    class="faq__container l-container l-container--wide c-card c-card--highlight"
+  >
+    <h1 class="faq__title t-title t-title--main">FAQ</h1>
+    <ul class="faq__questions c-list l-section">
       ${questionsArray.map((faq) => renderQuestion(faq))}
     </ul>
   </div>
diff --git a/src/frontend/src/flows/login/knownAnchor.ts b/src/frontend/src/flows/login/knownAnchor.ts
index 2f0fe73dc4..1733be842d 100644
--- a/src/frontend/src/flows/login/knownAnchor.ts
+++ b/src/frontend/src/flows/login/knownAnchor.ts
@@ -9,27 +9,29 @@ import { loginUnknownAnchor } from "./unknownAnchor";
 import { apiResultToLoginFlowResult, LoginFlowResult } from "./flowResult";
 import { useRecovery } from "../recovery/useRecovery";
 
-const pageContent = (userNumber: bigint) => html` <style>
-    .spacer {
-      height: 2rem;
-    }
-  </style>
-  <div class="container">
-    ${icLogo}
-    <h1>Welcome back!</h1>
-    <p>Authenticate using Internet Identity.</p>
-    <div class="highlightBox">${userNumber}</div>
-    <button type="button" id="login" class="primary">Authenticate</button>
-    <p style="text-align: center;">Or</p>
-    <button type="button" id="loginDifferent">
+const pageContent = (userNumber: bigint) => html`
+  <div class="l-container c-card c-card--highlight">
+    <div class="c-logo">${icLogo}</div>
+    <hgroup class="l-section">
+      <h1 class="t-title t-title--main">Welcome back!</h1>
+      <p class="t-lead">Authenticate using Internet Identity.</p>
+    <hgroup>
+    <output class="c-input c-input--readonly t-vip" aria-label="User Number" data-usernumber>${userNumber}</output>
+    <button type="button" id="login" class="c-button">Authenticate</button>
+    <div class="l-divider l-divider--text" aria-label="Other Options">
+      <span class="l-divider__label" aria-hidden>Or</span>
+    </div>
+    <button type="button" id="loginDifferent" class="c-button c-button--secondary">
       Use a different Identity Anchor
     </button>
-    <div class="spacer"></div>
-    <div class="textLink">
-      Lost access
-      <a id="recoverButton" class="linkStyle">and want to recover?</a>
+    <div class="l-section">
+      <p>
+        Lost access
+        <a id="recoverButton" class="t-link">and want to recover?</a>
+      </p>
     </div>
-    ${logoutSection("Clear Identity Anchor from browser")} ${navbar}
+    ${logoutSection("Clear Identity Anchor from browser")}
+    ${navbar}
   </div>
   ${footer}`;
 
diff --git a/src/frontend/src/flows/login/unknownAnchor.ts b/src/frontend/src/flows/login/unknownAnchor.ts
index 8482839d95..41b7bbe5e8 100644
--- a/src/frontend/src/flows/login/unknownAnchor.ts
+++ b/src/frontend/src/flows/login/unknownAnchor.ts
@@ -10,76 +10,42 @@ import { apiResultToLoginFlowResult, LoginFlowResult } from "./flowResult";
 import { addRemoteDevice } from "../addDevice/welcomeView";
 import { registerIfAllowed } from "../../utils/registerAllowedCheck";
 
-const pageContent = () => html` <style>
-    #registerUserNumber:focus {
-      box-sizing: border-box;
-      border-style: double;
-      border-width: 2px;
-      border-radius: 4px;
-      border-image-slice: 1;
-      outline: none;
-      border-image-source: linear-gradient(
-        270.05deg,
-        #29abe2 10.78%,
-        #522785 22.2%,
-        #ed1e79 42.46%,
-        #f15a24 59.41%,
-        #fbb03b 77.09%
-      );
-    }
-
-    #registerSection {
-      margin-top: 4rem;
-    }
-
-    .spacer {
-      height: 2rem;
-    }
-
-    .list-reset li {
-      list-style: none;
-    }
-    .input {
-      box-sizing: border-box;
-    }
-    .input--fullwidth {
-      width: 100%;
-    }
-  </style>
-  <section class="container" aria-label="Authentication">
-    ${icLogo}
-
-    <article>
-      <h1 id="loginWelcome">Welcome to<br />Internet Identity</h1>
-      <p>Provide an Identity Anchor to authenticate.</p>
+const pageContent = () => html`
+  <section class="l-container c-card c-card--highlight" aria-label="Authentication">
+    <div class="c-logo">${icLogo}</div>
+    <article class="l-section">
+      <hgroup>
+        <h1 id="loginWelcome" class="t-title t-title--main">Welcome to<br />Internet Identity</h1>
+        <p class="t-lead">Provide an Identity Anchor to authenticate.</p>
+      <hgroup>
       <input
         type="text"
-        class="input input--fullwidth"
+        class="c-input c-input--vip"
         id="registerUserNumber"
         placeholder="Enter Identity Anchor"
       />
-      <button type="button" id="loginButton" class="primary">
+      <button type="button" id="loginButton" class="c-button">
         Authenticate
       </button>
     </article>
 
-    <aside aria-label="Other actions">
-      <ul class="list-reset">
+    <aside class="l-section l-section--spacious" aria-label="Other actions">
+      <ul class="t-discreet c-list">
         <li class="textLink" id="registerSection">
           New?
-          <a id="registerButton" class="linkStyle">
-            Create an Internet Identity Anchor.
-          </a>
+          <a id="registerButton" class="t-link">Create an Internet Identity Anchor.</a>
         </li>
         <li class="textLink">
           Already have an anchor
-          <a id="addNewDeviceButton" class="linkStyle">
+          <a id="addNewDeviceButton" class="t-link">
             but using a new device?
           </a>
         </li>
         <li class="textLink">
           Lost access
-          <a id="recoverButton" class="linkStyle"> and want to recover? </a>
+          <a id="recoverButton" class="t-link">
+            and want to recover?
+          </a>
         </li>
       </ul>
     </aside>
diff --git a/src/frontend/src/flows/manage/deviceSettings.ts b/src/frontend/src/flows/manage/deviceSettings.ts
index 1be490a971..79eae360d7 100644
--- a/src/frontend/src/flows/manage/deviceSettings.ts
+++ b/src/frontend/src/flows/manage/deviceSettings.ts
@@ -23,35 +23,43 @@ const pageContent = (
   device: DeviceData,
   isOnlyDevice: boolean
 ) => html`
-  <article id="deviceSettings" class="container">
-    <h1 style="margin: 0 0 1.5rem">
+  <article id="deviceSettings" class="l-container c-card c-card--highlight">
+    <h1 class="t-title">
       ${isRecovery(device) ? "" : "Device"} ${device.alias}
     </h1>
 
-    ${shouldOfferToProtect(device)
-      ? html` <p>
-            By making your recovery phrase protected, you will need to input
-            your recovery phrase to delete it.
-          </p>
-          <button data-action="protect">Protect</button>
-          <hr />`
-      : ""}
-    ${!isOnlyDevice
-      ? html`<button data-action="remove">
-          Delete ${isRecovery(device) ? "Recovery" : "Device"}
-        </button>`
-      : ""}
-    ${!isOnlyDevice && isProtected(device)
-      ? html`<p>
-          This ${isRecovery(device) ? device.alias : "device"} is protected and
-          you will be prompted to authenticate with it before removal.
-        </p>`
-      : ""}
-    ${isOnlyDevice
-      ? html`<p>This is your last device. You cannot remove it.</p>
-          <p>Without devices your anchor would be inaccessible.</p>`
-      : ""}
-    <button data-action="back">Back</button>
+    <div class="l-section">
+      ${shouldOfferToProtect(device)
+        ? html` <p class="t-paragraph">
+              By making your recovery phrase protected, you will need to input
+              your recovery phrase to delete it.
+            </p>
+            <button data-action="protect" class="c-button">Protect</button>
+            <hr />`
+        : ""}
+      ${!isOnlyDevice
+        ? html`<button data-action="remove" class="c-button c-button--warning">
+            Delete ${isRecovery(device) ? "Recovery" : "Device"}
+          </button>`
+        : ""}
+      ${!isOnlyDevice && isProtected(device)
+        ? html`<p class="t-paragraph">
+            This ${isRecovery(device) ? device.alias : "device"} is protected
+            and you will be prompted to authenticate with it before removal.
+          </p>`
+        : ""}
+      ${isOnlyDevice
+        ? html`<p class="t-paragraph">
+              This is your last device. You cannot remove it.
+            </p>
+            <p class="t-paragraph">
+              Without devices your anchor would be inaccessible.
+            </p>`
+        : ""}
+      <div class="l-section">
+        <button data-action="back" class="c-button">Back</button>
+      </div>
+    </div>
   </article>
   ${footer}
 `;
diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
index 38c898acd8..8c640dd64a 100644
--- a/src/frontend/src/flows/manage/index.ts
+++ b/src/frontend/src/flows/manage/index.ts
@@ -36,114 +36,6 @@ const numAuthenticators = (devices: DeviceData[]) =>
   devices.filter((device) => hasOwnProperty(device.purpose, "authentication"))
     .length;
 
-// The styling of the page
-
-const style = () => html`<style>
-  .labelWithAction {
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .labelWithAction button {
-    text-align: right;
-  }
-
-  .labelWithAction .labelWithAction {
-    margin: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .labelWithAction .labelWithAction span {
-    /* global span selector is set to 1.2rem (...), which is too big */
-    font-size: 1rem;
-  }
-
-  .labelWithAction .labelWithAction span.addedDevicesCounter {
-    /* we can't just select the class because the previous selector is more specific */
-    font-size: 0.7rem;
-  }
-
-  .labelAction {
-    padding: 0;
-    border: none;
-    display: inline;
-    width: auto;
-    margin: 0;
-    cursor: pointer;
-  }
-
-  .labelActionText {
-    font-size: 12px;
-    font-family: "Montserrat", sans-serif;
-    text-align: right;
-    font-weight: 600;
-    color: #1f6ef4;
-  }
-
-  .addedDevices {
-    font-weight: 500;
-    font-size: 1rem;
-    margin: 0 0 0.2rem;
-  }
-
-  .labelActionText::before {
-    content: "+";
-    margin-right: 3px;
-  }
-
-  .labelAction:disabled .labelActionText {
-    color: var(--grey-100);
-  }
-
-  .tooltip {
-    visibility: hidden;
-    opacity: 0;
-    display: inline-block;
-    max-width: 200px;
-    font-size: 12px;
-    position: absolute;
-    z-index: 1;
-    background: var(--grey-100);
-    padding: 10px;
-    border-radius: 10px;
-    text-align: center;
-  }
-
-  .labelAction:disabled:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s ease-in;
-  }
-  .addedDevicesCounter {
-    margin-left: 0.1em;
-  }
-
-  .addedDevicesCounter:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s ease-in;
-  }
-
-  .label {
-    font-size: 1.2rem;
-    font-weight: 500;
-    margin: 0;
-  }
-
-  .highlightBox {
-    margin-top: 1rem;
-  }
-
-  .labelAddedDevices {
-    flex-grow: 1;
-    display: flex;
-  }
-</style> `;
-
 // Actual page content. We display the Identity Anchor and the list of
 // (non-recovery) devices. Additionally, if the user does _not_ have any
 // recovery devices, we display a warning "nag box" and suggest to the user
@@ -151,68 +43,82 @@ const style = () => html`<style>
 // recovery device, then we do not display a "nag box", but we list the
 // recovery devices.
 const pageContent = (userNumber: bigint, devices: DeviceData[]) => html`
-  ${style()}
-  <section class="container">
-    <h1>Anchor Management</h1>
-    <p>
-      You can view and manage this Identity Anchor and its added devices here.
-    </p>
+  <section class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">Anchor Management</h1>
+      <p class="t-lead">
+        You can view and manage this Identity Anchor and its added devices here.
+      </p>
+    </hgroup>
     ${!hasRecoveryDevice(devices) ? recoveryNag() : undefined}
-    <aside>
-      <h2 class="label">Identity Anchor</h2>
-      <div class="highlightBox">${userNumber}</div>
+    <aside class="l-section">
+      <h2 class="t-title">Identity Anchor</h2>
+      <output class="c-input c-input--readonly t-vip" aria-label="User Number" data-usernumber>${userNumber}</output>
     </aside>
 
-    <aside>
-      <div class="labelWithAction">
-        <div class="labelAddedDevices">
-          <h2 class="label addedDevices">Added devices</h2>
-          <span class="addedDevicesCounter"
-            ><span class="tooltip"
-              >You can register up to ${MAX_AUTHENTICATORS} authenticator
-              devices (recovery devices excluded)</span
-            >(${numAuthenticators(devices)}/${MAX_AUTHENTICATORS})</span
-          >
-        </div>
+    <aside class="l-section">
+      <div class="t-title t-title--complications">
+        <h2 class="t-title">Added devices</h2>
+        <span class="t-title__complication c-tooltip">
+          <span class="c-tooltip__message c-card c-card--narrow">
+            You can register up to ${MAX_AUTHENTICATORS} authenticator
+            devices (recovery devices excluded)</span>
+            (${numAuthenticators(devices)}/${MAX_AUTHENTICATORS})
+          </span>
+        </span>
         <button
           ?disabled=${numAuthenticators(devices) >= MAX_AUTHENTICATORS}
-          class="labelAction"
+          class="t-title__complication t-title__complication--end c-tooltip c-tooltip--onDisabled"
           id="addAdditionalDevice"
         >
-          <span class="tooltip"
+          <span class="c-tooltip__message c-tooltip__message--right c-card c-card--narrow"
             >You can register up to ${MAX_AUTHENTICATORS} authenticator devices.
             Remove a device before you can add a new one.</span
           >
-          <span class="labelActionText">ADD NEW DEVICE</span>
+          <span class="t-link t-link--discreet">
+            <i class="t-link__icon" aria-hidden>+</i>
+            Add new device
+          </span>
         </button>
       </div>
-      <div id="deviceList"></div>
+
+      <div id="deviceList" class="c-action-list"></div>
     </aside>
-    <aside>
-      ${!hasRecoveryDevice(devices)
-        ? undefined
-        : html`
-            <div class="labelWithAction">
-              <h2 class="label">Recovery mechanisms</h2>
-              <button class="labelAction" id="addRecovery">
-                <span class="labelActionText">ADD RECOVERY MECHANISM</span>
-              </button>
-            </div>
-            <div id="recoveryList"></div>
-          `}
+
+    <aside class="l-section">
+      ${
+        !hasRecoveryDevice(devices)
+          ? undefined
+          : html`
+              <div class="t-title t-title--complications">
+                <h2>Recovery mechanisms</h2>
+                <button
+                  class="t-title__complication t-title__complication--end"
+                  id="addRecovery"
+                >
+                  <i class="t-link__icon" aria-hidden>+</i>
+                  <span class="t-link t-link--discreet"
+                    >Add recovery mechanism</span
+                  >
+                </button>
+              </div>
+              <div id="recoveryList" class="c-action-list"></div>
+            `
+      }
     </aside>
+    
     ${logoutSection()} ${navbar}
   </section>
   ${footer}
 `;
 
 const deviceListItem = (device: DeviceData) => html`
-  <div class="deviceItemAlias">${device.alias}</div>
+  <div class="c-action-list__label">${device.alias}</div>
   <button
     type="button"
     aria-label="settings"
     data-action="settings"
-    class="deviceItemAction"
+    class="c-action-list__action"
   >
     ${settingsIcon}
   </button>
@@ -222,9 +128,7 @@ const recoveryNag = () =>
   warnBox({
     title: "Recovery Mechanism",
     message: "Add a recovery mechanism to help protect this Identity Anchor.",
-    slot: html`<button id="addRecovery" class="primary warnButton">
-      Add Recovery
-    </button>`,
+    slot: html`<button id="addRecovery" class="c-button">Add Recovery</button>`,
   });
 
 // Get the list of devices from canister and actually display the page
@@ -315,7 +219,7 @@ const renderDevices = async (
 
   devices.forEach((device) => {
     const identityElement = document.createElement("li");
-    identityElement.className = "deviceItem";
+    identityElement.className = "c-action-list__item";
 
     render(deviceListItem(device), identityElement);
     const buttonSettings = identityElement.querySelector(
diff --git a/src/frontend/src/flows/promptUserNumber.ts b/src/frontend/src/flows/promptUserNumber.ts
index 31b633c782..459390aeab 100644
--- a/src/frontend/src/flows/promptUserNumber.ts
+++ b/src/frontend/src/flows/promptUserNumber.ts
@@ -2,17 +2,22 @@ import { html, render } from "lit-html";
 import { parseUserNumber } from "../utils/userNumber";
 
 const pageContent = (title: string, userNumber: bigint | null) => html`
-  <div class="container">
-    <h1>${title}</h1>
-    <p>Please provide an Identity Anchor.</p>
+  <div class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">${title}</h1>
+      <p class="t-lead">Please provide an Identity Anchor.</p>
+    </hgroup>
     <input
       type="text"
       id="userNumberInput"
+      class="c-input c-input--vip"
       placeholder="Enter Identity Anchor"
       value=${userNumber ?? ""}
     />
-    <button id="userNumberContinue" class="primary">Continue</button>
-    <button id="userNumberCancel">Cancel</button>
+    <button id="userNumberContinue" class="c-button">Continue</button>
+    <button id="userNumberCancel" class="c-button c-button--secondary">
+      Cancel
+    </button>
   </div>
 `;
 
@@ -44,7 +49,7 @@ export const promptUserNumber = async (
       if (userNumber !== null) {
         resolve(userNumber);
       } else {
-        userNumberInput.classList.toggle("errored", true);
+        userNumberInput.classList.toggle("has-error", true);
         userNumberInput.placeholder = "Please enter an Identity Anchor first";
       }
     };
diff --git a/src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts b/src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts
index b8a0478c0a..70e321477b 100644
--- a/src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts
+++ b/src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts
@@ -3,81 +3,38 @@ import { DeviceData } from "../../../generated/internet_identity_types";
 import { securityKeyIcon, seedPhraseIcon } from "../../components/icons";
 
 const pageContent = (devices: DeviceData[]) => html`
-  <style>
-    #skipRecovery {
-      margin-top: 3.5rem;
-      font-weight: 600;
-      font-size: 1rem;
-    }
-    .recoveryContainer {
-      display: flex;
-      gap: 1rem;
-      margin-top: 1rem;
-    }
-    .recoveryOption {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 1px solid gray;
-      border-radius: 4px;
-      width: 100%;
-      padding: 1rem;
-      font-family: "Montserrat", sans-serif;
-      font-size: 1.2rem;
-      margin-bottom: 2rem;
-    }
-    .recoveryOption:disabled div {
-      color: gray;
-    }
-    .recoveryOption:disabled svg {
-      filter: invert(93%) sepia(0%) saturate(33%) hue-rotate(255deg)
-        brightness(94%) contrast(79%);
-    }
-    .recoveryOption:disabled:hover,
-    .recoveryOption:disabled:focus {
-      outline: none;
-      box-shadow: none;
-    }
-    .recoveryIcon {
-      height: 52px;
-    }
-    .recoveryTitle {
-      font-weight: 500;
-      margin: 0.5rem;
-    }
-    .recoveryDescription {
-      text-align: center;
-      font-size: 1rem;
-    }
-  </style>
-  <article class="container">
-    <h1>Recovery Mechanism</h1>
-    <p>
-      You can use a recovery mechanism to recover your anchor if your other
-      device(s) are lost. We recommend adding one as a seed phrase or portable
-      backup now.
-    </p>
-    <div class="recoveryContainer">
+  <article class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">Recovery Mechanism</h1>
+      <p class="t-lead">
+        You can use a recovery mechanism to recover your anchor if your other
+        device(s) are lost. We recommend adding one as a seed phrase or portable
+        backup now.
+      </p>
+    </hgroup>
+    <div class="l-horizontal l-section">
       <button
         ?disabled=${hasRecoveryPhrase(devices)}
-        class="recoveryOption"
+        class="c-button c-button--secondary"
         id="seedPhrase"
       >
-        <span class="recoveryIcon" aria-hidden>${seedPhraseIcon}</span>
-        <div class="recoveryTitle">Seed Phrase</div>
-        <div class="recoveryDescription">Use your own storage</div>
+        <span aria-hidden>${seedPhraseIcon}</span>
+        <div class="t-strong">Seed Phrase</div>
+        <div class="t-weak">Use your own storage</div>
       </button>
       <button
         ?disabled=${hasRecoveryKey(devices)}
-        class="recoveryOption"
+        class="c-button c-button--secondary"
         id="securityKey"
       >
-        <span class="recoveryIcon" aria-hidden>${securityKeyIcon}</span>
-        <div class="recoveryTitle">Security Key</div>
-        <div class="recoveryDescription">Use an extra security key</div>
+        <span aria-hidden>${securityKeyIcon}</span>
+        <div class="t-strong">Security Key</div>
+        <div class="t-weak">Use an extra security key</div>
       </button>
     </div>
-    <button id="skipRecovery" class="linkStyle">Add recovery later</button>
+    <div class="l-section">
+      <button id="skipRecovery" class="c-button">Add recovery later</button>
+    </div>
   </article>
 `;
 
diff --git a/src/frontend/src/flows/recovery/displaySafariWarning.ts b/src/frontend/src/flows/recovery/displaySafariWarning.ts
index 7e3d895552..ea49eccba6 100644
--- a/src/frontend/src/flows/recovery/displaySafariWarning.ts
+++ b/src/frontend/src/flows/recovery/displaySafariWarning.ts
@@ -4,52 +4,38 @@ import { setupRecovery } from "./setupRecovery";
 import { AuthenticatedConnection } from "../../utils/iiConnection";
 
 const pageContent = () => html`
-  <style>
-    #warningContainer {
-      min-height: 15rem;
-    }
-    .warningIcon {
-      align-self: center;
-      width: 3rem;
-      height: 3rem;
-      margin-bottom: 1.5rem;
-    }
-    #warningHeading {
-      text-align: center;
-    }
-    #warningContainer p {
-      font-size: 1.2rem;
-    }
-    #warningContainer a {
-      margin-bottom: 1rem;
-    }
-    .spacer {
-      min-height: 48px;
-    }
-  </style>
-  <div id="warningContainer" class="container">
-    ${warningIcon}
-    <h1 id="warningHeading">Warning</h1>
-    <p>It looks like you are using Safari or iOS.</p>
-    <p>
+  <article
+    id="warningContainer"
+    class="l-container c-card c-card--highlight c-card--warning"
+  >
+    <hgroup>
+      <div aria-hidden class="c-card__icon">${warningIcon}</div>
+      <h1 id="warningHeading" class="t-title t-title--main">Warning</h1>
+      <p class="t-lead">It looks like you are using Safari or iOS.</p>
+    </hgroup>
+    <p class="t-paragraph">
       If you “Clear History and Website Data” via system preferences, all web
       authentication keys will be <em>deleted</em> from this device. This means
       that you will no longer have access to your identity anchor (and all
       associated resources and tokens) with this device.
     </p>
-    <p>
+    <p class="t-paragraph">
       As a best practice, we recommend you assign multiple devices to an
       Identity Anchor and add at least one recovery mechanism such as an
       external key fob or a seedphrase
     </p>
-    <button id="displayWarningAddRecovery" class="primary">
-      Add a recovery mechanism to an Identity Anchor
-    </button>
-    <button id="displayWarningRemindLater" class="primary">
-      Skip, I understand the risks
-    </button>
-    <div class="spacer"></div>
-  </div>
+    <div class="l-section">
+      <button id="displayWarningAddRecovery" class="c-button">
+        Add a recovery mechanism to an Identity Anchor
+      </button>
+      <button
+        id="displayWarningRemindLater"
+        class="c-button c-button--secondary"
+      >
+        Skip, I understand the risks
+      </button>
+    </div>
+  </article>
 `;
 
 export const displaySafariWarning = async (
diff --git a/src/frontend/src/flows/recovery/displaySeedPhrase.ts b/src/frontend/src/flows/recovery/displaySeedPhrase.ts
index 109b69a1a1..df3b430178 100644
--- a/src/frontend/src/flows/recovery/displaySeedPhrase.ts
+++ b/src/frontend/src/flows/recovery/displaySeedPhrase.ts
@@ -2,27 +2,36 @@ import { html, render } from "lit-html";
 import { checkmarkIcon, warningIcon } from "../../components/icons";
 
 const pageContent = (seedPhrase: string) => html`
-  <style>
-    #seedPhrase {
-      font-size: 1rem;
-    }
-  </style>
-  <article class="container">
-    <h1>Seedphrase</h1>
-    <p>Your seed phrase makes it easy to recover this Identity Anchor.</p>
-    <aside class="warningBox" aria-label="warning">
-      <span class="warningIcon">${warningIcon}</span>
-      <div class="warningMessage">
-        Do <b>NOT</b> forget to save this seed phrase. Save a backup on a
-        storage medium and write it down.<br />
+  <article class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--lead">Seedphrase</h1>
+      <p class="t-lead">
+        Your seed phrase makes it easy to recover this Identity Anchor.
+      </p>
+    </hgroup>
+    <aside class="c-card c-card--icon c-card--warning" aria-label="Warning">
+      <span class="c-card__icon">${warningIcon}</span>
+      <p class="c-card__content">
+        Do <b class="t-strong">NOT</b> forget to save this seed phrase. Save a
+        backup on a storage medium and write it down.<br />
         Keep it secret &mdash; knowledge of the seed phrase will enable access
         to this Identity Anchor!
-      </div>
+      </p>
     </aside>
-    <label>Your seed phrase</label>
-    <div id="seedPhrase" translate="no" class="highlightBox">${seedPhrase}</div>
-    <button id="seedCopy" data-clipboard-target="#seedPhrase">Copy</button>
-    <button id="displaySeedPhraseContinue" class="primary hidden">
+
+    <h2 class="t-title">Your seed phrase</h2>
+    <output
+      id="seedPhrase"
+      data-seenPhrase
+      translate="no"
+      class="c-input c-input--readonly"
+      >${seedPhrase}</output
+    >
+
+    <button id="seedCopy" data-clipboard-target="#seedPhrase" class="c-button">
+      Copy
+    </button>
+    <button id="displaySeedPhraseContinue" class="c-button is-hidden">
       Continue
     </button>
   </article>
@@ -61,7 +70,7 @@ const init = (): Promise<void> =>
           const seedPhraseDiv = document.getElementById("seedPhrase");
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           selectText(seedPhraseDiv!);
-          displaySeedPhraseContinue.classList.toggle("hidden", false);
+          displaySeedPhraseContinue.classList.toggle("is-hidden", false);
           render(checkmarkIcon, seedCopy);
           seedCopy.title = "copied";
         })
diff --git a/src/frontend/src/flows/recovery/displaySingleDeviceWarning.ts b/src/frontend/src/flows/recovery/displaySingleDeviceWarning.ts
index 1e92155954..6849e27e65 100644
--- a/src/frontend/src/flows/recovery/displaySingleDeviceWarning.ts
+++ b/src/frontend/src/flows/recovery/displaySingleDeviceWarning.ts
@@ -4,51 +4,39 @@ import { setupRecovery } from "./setupRecovery";
 import { AuthenticatedConnection } from "../../utils/iiConnection";
 
 const pageContent = () => html`
-  <style>
-    #warningContainer {
-      min-height: 15rem;
-    }
-    .warningIcon {
-      display: block;
-      width: 3rem;
-      height: 3rem;
-      margin: 0 auto 1.5rem;
-    }
-    #warningHeading {
-      text-align: center;
-    }
-    #warningContainer p {
-      font-size: 1.2rem;
-    }
-    #warningContainer a {
-      margin-bottom: 1rem;
-    }
-    .spacer {
-      min-height: 48px;
-    }
-  </style>
-  <article id="warningContainer" class="container">
-    <div aria-hidden>${warningIcon}</div>
-    <h1 id="warningHeading">Warning</h1>
-    <p>
-      If you lose all the devices assigned to your Internet Identity anchor,
-      then you will <em>lose access</em> to the anchor, and all associated
-      resources and tokens, unless you have a recovery mechanism setup. This can
-      be an external key fob or a secure seedphrase, which you must make sure is
-      not stolen.
-    </p>
-    <p>
+  <article
+    id="warningContainer"
+    class="l-container c-card c-card--highlight c-card--warning"
+  >
+    <hgroup>
+      <div aria-hidden class="c-card__icon">${warningIcon}</div>
+      <h1 id="warningHeading" class="t-title t-title--main c-card__title">
+        Warning
+      </h1>
+      <p class="t-lead">
+        If you lose all the devices assigned to your Internet Identity anchor,
+        then you will <em>lose access</em> to the anchor, and all associated
+        resources and tokens, unless you have a recovery mechanism setup. This
+        can be an external key fob or a secure seedphrase, which you must make
+        sure is not stolen.
+      </p>
+    </hgroup>
+    <p class="t-paragraph">
       As a best practice, we recommend you assign multiple devices to an
       Identity Anchor and add <em>at least</em> one recovery mechanism such as
       an external key fob or a seedphrase.
     </p>
-    <button id="displayWarningAddRecovery" class="primary">
-      Add a recovery mechanism to an Identity Anchor
-    </button>
-    <button id="displayWarningRemindLater" class="primary">
-      Skip, I understand the risks
-    </button>
-    <div class="spacer"></div>
+    <div class="l-section">
+      <button id="displayWarningAddRecovery" class="c-button">
+        Add a recovery mechanism to an Identity Anchor
+      </button>
+      <button
+        id="displayWarningRemindLater"
+        class="c-button c-button--secondary"
+      >
+        Skip, I understand the risks
+      </button>
+    </div>
   </article>
 `;
 
diff --git a/src/frontend/src/flows/recovery/pickRecoveryDevice.ts b/src/frontend/src/flows/recovery/pickRecoveryDevice.ts
index cfac3c4b71..ed90300e62 100644
--- a/src/frontend/src/flows/recovery/pickRecoveryDevice.ts
+++ b/src/frontend/src/flows/recovery/pickRecoveryDevice.ts
@@ -2,10 +2,12 @@ import { html, render } from "lit-html";
 import { DeviceData } from "../../../generated/internet_identity_types";
 
 const pageContent = () => html`
-  <div class="container">
-    <h1>Choose a device</h1>
-    <label>Recovery devices</label>
-    <div id="deviceList"></div>
+  <div class="l-container c-card c-card--highlight c-card--highlight">
+    <h1 class="t-title t-title--main">Choose a device</h1>
+    <div class="l-section">
+      <h2 class="t-title">Recovery devices</div>
+      <ol class="c-list l-section" id="deviceList"></ol>
+    </div>
   </div>
 `;
 
@@ -28,7 +30,9 @@ export const init = (devices: DeviceData[]): Promise<DeviceData> =>
       const identityElement = document.createElement("li");
       identityElement.className = "deviceItem";
       render(
-        html`<div class="deviceItemAlias">${device.alias}</div>`,
+        html`<li class="deviceItemAlias">
+          <button class="c-button c-button--secondary">${device.alias}</button>
+        </li>`,
         identityElement
       );
       identityElement.onclick = () => resolve(device);
diff --git a/src/frontend/src/flows/recovery/recoverWith/device.ts b/src/frontend/src/flows/recovery/recoverWith/device.ts
index ce84722d10..a3477e0d34 100644
--- a/src/frontend/src/flows/recovery/recoverWith/device.ts
+++ b/src/frontend/src/flows/recovery/recoverWith/device.ts
@@ -16,7 +16,7 @@ const pageContent = (userNumber: bigint) => html`
       width: 100%;
     }
   </style>
-  <div class="container full-width">
+  <div class="l-container c-card c-card--highlight full-width">
     <h1>Recovery for ${userNumber}</h1>
     <p>
       You are about to recover your anchor using a recovery device. Please click
diff --git a/src/frontend/src/flows/recovery/recoverWith/phrase.ts b/src/frontend/src/flows/recovery/recoverWith/phrase.ts
index be2e2f9354..40c00fef33 100644
--- a/src/frontend/src/flows/recovery/recoverWith/phrase.ts
+++ b/src/frontend/src/flows/recovery/recoverWith/phrase.ts
@@ -20,7 +20,6 @@ import { questions } from "../../faq";
 
 const pageContent = (userNumber: bigint, message?: string) => html`
   <style>
-
     /* Flash the warnings box if warnings were generated */
     @keyframes flash-warnings {
       0% {
@@ -35,78 +34,28 @@ const pageContent = (userNumber: bigint, message?: string) => html`
       }
     }
 
-    .visible {
-      visibility: unset;
+    .is-visible {
       animation-name: flash-warnings;
       animation-duration: 600ms;
     }
-
-    .hidden {
-      visibility: hidden;
-    }
-
-    #inputSeedPhrase {
-      width: 100%;
-      height: 6rem;
-      box-sizing: border-box;
-      margin-bottom: 0;
-      font-size: 1rem;
-      font-weight: 400;
-    }
-
-    .full-width {
-      width: 100%;
-    }
-
-    .warnings-box {
-      border: 1px var(--grey-200) solid;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      padding: 1rem;
-      margin-top: 0.5rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .warnings-box-summary {
-        padding-left: 1em;
-    }
-
-    .warning {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        padding: 0.5rem;
-    }
-
-    .warning-message {
-        display: flex;
-        align-items: center;
-    }
-
-    .warning-message p {
-        margin: 0;
-    }
-
   </style>
-  <article class="container">
+  <article class="l-container c-card c-card--highlight">
     <hgroup>
-      <h1>Your seed phrase</h1>
-      <p>${
+      <h1 class="t-title t-title--main">Your seed phrase</h1>
+      <p class="t-lead">${
         message !== undefined ? message : "Please provide your seed phrase"
       }</p>
     </hgroup>
-    <textarea id="inputSeedPhrase" placeholder="${
+    <textarea id="inputSeedPhrase" class="c-input" placeholder="${
       userNumber + " above squirrel ..."
     }"></textarea>
-    <details class="warnings-box hidden">
+    <details data-id="phrase-warnings" class="c-card c-card--highlight is-hidden">
         <summary><span class="warnings-box-summary">Phrase may not be valid<span></summary>
         <div id="warnings"></div>
     </details>
-    <div>
-      <button id="inputSeedPhraseContinue" class="primary">Continue</button>
-      <button id="inputSeedPhraseCancel">Cancel</button>
+    <div class="l-section">
+      <button id="inputSeedPhraseContinue" class="c-button">Continue</button>
+      <button id="inputSeedPhraseCancel" class="c-button c-button--secondary">Cancel</button>
     </div>
   </article>
 `;
@@ -140,7 +89,7 @@ const init = (
     // time and the user may have left the page; we may effectively pick up the wrong element.
     const warningsDiv = document.getElementById("warnings") as HTMLDivElement;
     const warningsBox = document.querySelector(
-      "details.warnings-box"
+      "details[data-id=phrase-warnings]"
     ) as HTMLDetailsElement;
 
     // Debounce the warning generation as not to spam the user
@@ -156,8 +105,8 @@ const init = (
         );
 
         if (warnings.length >= 1) {
-          warningsBox.classList.add("visible");
-          warningsBox.classList.remove("hidden");
+          warningsBox.classList.add("is-visible");
+          warningsBox.classList.remove("is-hidden");
 
           // Actually generate the warnings
           for (const warning of warnings) {
@@ -166,8 +115,8 @@ const init = (
             warningsDiv.appendChild(div);
           }
         } else {
-          warningsBox.classList.add("hidden");
-          warningsBox.classList.remove("visible");
+          warningsBox.classList.add("is-hidden");
+          warningsBox.classList.remove("is-visible");
         }
       }, 500);
     };
@@ -247,8 +196,9 @@ export const warningMessage = (
     }
 
     case "bad_anchor": {
-      return html`Recovering anchor <strong>${userNumber}</strong>, but recovery
-        phrase suggests anchor <strong>${warning.anchor}</strong>`;
+      return html`Recovering anchor
+        <strong class="t-strong">${userNumber}</strong>, but recovery phrase
+        suggests anchor <strong class="t-strong">${warning.anchor}</strong>`;
     }
 
     case "bad_word_count": {
@@ -270,7 +220,10 @@ export const warningMessage = (
         This does not look like a seed phrase generated by Internet Identity,
         please make sure to copy the full seedphrase and try again. For more
         information, please see
-        <a target="_blank" href="/faq#${questions.invalidSeedphrase.anchor}"
+        <a
+          target="_blank"
+          class="t-link"
+          href="/faq#${questions.invalidSeedphrase.anchor}"
           >${questions.invalidSeedphrase.question}</a
         >
       `;
@@ -279,10 +232,10 @@ export const warningMessage = (
 };
 
 const mkWarningDiv = (warningMessage: string | TemplateResult) => html` <div
-  class="warning"
+  class="c-card c-card--highlight c-card--warning c-card--icon"
 >
-  <span class="warningIcon">${warningIcon}</span>
-  <div class="warning-message">
-    <p>${warningMessage}</p>
+  <span class="c-card__icon">${warningIcon}</span>
+  <div class="c-card__content">
+    <p class="t-paragraph">${warningMessage}</p>
   </div>
 </div>`;
diff --git a/src/frontend/src/flows/register.ts b/src/frontend/src/flows/register.ts
index 8e3e1ed615..ec9d4014d7 100644
--- a/src/frontend/src/flows/register.ts
+++ b/src/frontend/src/flows/register.ts
@@ -17,10 +17,14 @@ import { icLogo } from "../components/icons";
 import { validateAlias } from "./addDevice/validateAlias";
 
 const pageContent = html`
-  <div class="container">
-    <h1>Create a new Internet Identity Anchor</h1>
-    <form id="registerForm">
-      <p>Please provide a name for your device.</p>
+  <div class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">
+        Create a new Internet Identity Anchor
+      </h1>
+      <p class="t-lead">Please provide a name for your device.</p>
+    </hgroup>
+    <form id="registerForm" class="l-section">
       <input
         id="registerAlias"
         placeholder="Device name"
@@ -30,18 +34,29 @@ const pageContent = html`
         maxlength="30"
         pattern="^[A-Za-z0-9]+((-|\\s|_)*[A-Za-z0-9])*$"
         spellcheck="false"
+        class="c-input"
       />
-      <button type="submit" class="primary">Create</button>
-      <button id="registerCancel" type="button">Cancel</button>
+      <div class="l-section">
+        <button type="submit" class="c-button">Create</button>
+        <button
+          id="registerCancel"
+          type="button"
+          class="c-button c-button--secondary"
+        >
+          Cancel
+        </button>
+      </div>
     </form>
   </div>
 `;
 
 const constructingContent = html`
-  <div class="container flex center">
-    <h1>Constructing new Identity Anchor</h1>
-    ${icLogo}
-    <p>This may take a while. Please wait and do not refresh the page.</p>
+  <div class="l-container c-card c-card--highlight">
+    <h1 class="t-title t-title--main">Constructing new Identity Anchor</h1>
+    <div class="c-logo">${icLogo}</div>
+    <p class="t-paragraph">
+      This may take a while. Please wait and do not refresh the page.
+    </p>
   </div>
 `;
 
diff --git a/src/frontend/src/flows/registerDisabled.ts b/src/frontend/src/flows/registerDisabled.ts
index 9517bfe467..a043a4eb53 100644
--- a/src/frontend/src/flows/registerDisabled.ts
+++ b/src/frontend/src/flows/registerDisabled.ts
@@ -2,7 +2,7 @@ import { html, render } from "lit-html";
 import { warnBox } from "../components/warnBox";
 
 const pageContent = html`
-  <div class="container">
+  <div class="l-container c-card c-card--highlight">
     <h1>Create a new Internet Identity Anchor</h1>
     ${warnBox({
       title: "Registration Disabled",
diff --git a/src/frontend/src/flows/successfulDeviceAddition.ts b/src/frontend/src/flows/successfulDeviceAddition.ts
index fd68916f16..9936f496da 100644
--- a/src/frontend/src/flows/successfulDeviceAddition.ts
+++ b/src/frontend/src/flows/successfulDeviceAddition.ts
@@ -4,12 +4,14 @@ import { AuthenticatedConnection } from "../utils/iiConnection";
 import { renderManage } from "./manage";
 
 const pageContent = (name: string) => html`
-  <div class="container">
-    <h1>Success!</h1>
-    <p>You have successfully added your new device.</p>
-    <label>Device name:</label>
-    <div class="highlightBox">${name}</div>
-    <button id="manageDevicesButton" class="primary">Manage devices</button>
+  <div class="l-container c-card c-card--highlight">
+    <h1 class="t-title t-title--main">Success!</h1>
+    <p class="t-lead">You have successfully added your new device.</p>
+    <div class="l-section">
+      <h2 class="t-title">Device name:</h2>
+      <output class="c-input c-input--readonly t-vip">${name}</output>
+      <button id="manageDevicesButton" class="c-button">Manage devices</button>
+    </div>
     ${logoutSection()}
   </div>
 `;
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
index 81ff8073d0..14012a23a0 100644
--- a/src/frontend/src/styles/main.css
+++ b/src/frontend/src/styles/main.css
@@ -1,676 +1,919 @@
+/*
+                                    _  _____  __    __   __
+                                   | |  | |  / /`  ( (` ( (`
+                                   |_|  |_|  \_\_, _)_) _)_)
+
+                                          `-.` '.-'
+                                       `-.    A   .-'.
+                                    `-.    -./_\.-    .-'
+                                        -.  /___\  .-
+                                    `-.   `/__|__\'   .-'.
+                                 `-.    -./.-"^"-.\.-      '
+                                    `-.  / <`(o)*> \  .-'
+                                 .-   .`/__`-...-'__\'   .-
+                                ,...`-./_/____|____\_\.-'.,.
+                                   ,-'    ,` . . ',   `-,
+                               _,-' /____/____.____\____\ `-,_
+                                       ,      |      .
+                                      /     ,.+.,     \
+
+   -<# ITCSS (Inverted Triangle CSS) -> (https://csswizardry.com/2018/11/itcss-and-skillshare/) #>-
+  __________________________________________________________________________________________________
+   \---------------------------/------------                          Generic CSS (Low specificity)
+    \                         /  I)   Settings (Design)                            Y
+     \-----------------------/----------------                                     |
+      \                     /    II)  Theme Settings                               |
+       \-------------------/--------------------                                   |
+        \                 /      III) Generic                                      |
+         \---------------/------------------------                                 |
+          \             /        IV)  Elements                                     |
+           \-----------/----------------------------                               |
+            \         /          V)   Objects                                      |
+             \-------/--------------------------------                             |
+              \     /            VI)  Components                                   |
+               \---/------------------------------------                           |
+                \ /              VII) Utilities (Trumps)                           V
+                 V                                                   Explicit CSS (High specificity)
+                 
+  I)   Settings:             Global variables, config switches.
+  II)  Theme Settings:       DarkMode, LightMode, Product Specific stuff
+  III) Generic:              Ground-zero styles (Normalize.css, resets, box-sizing).
+  IV)  Base:                 Un-classed HTML elements (type selectors).
+  V)   Objects:              Cosmetic-free design patterns (grids, layouts, etc).
+  VI)  Components:           Designed components, chunks of UI.
+  VII) Utilities/Trumps:     Helpers and overrides. (hidden, error classes, etc)
+
+*/
+
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
 
+/* I) Settings: Global variables, config switches. */
+
 :root {
-  font-family: "Montserrat", sans-serif;
-  font-size: 16px;
-  --flamingo-500: #f15a24;
-  --grey-050: #efefef;
-  --grey-100: #d9d9da;
-  --grey-200: #c3c3c4;
-  --grey-300: #adadaf;
-  --grey-400: #979799;
-  --grey-500: #818284;
-  --grey-600: #6b6c6e;
-  --grey-700: #555659;
-  --grey-800: #3f4043;
-  --grey-900: #292a2e;
-
-  --text-color: var(--grey-900);
-  --background-color: #fff;
-  --primary: black;
-  --secondary: #cdcdcd;
-  --accent: #323232;
-  --rainbow-orange: rgba(237, 186, 152, 1);
-
-  background: var(--background-color);
-  color: var(--text-color);
-  box-sizing: border-box;
+  /* 
+   * value tokens 
+   *
+   * raw basic values that should not be used within your components.
+   * they control the design system on a higher level and should be used only 
+   * in the root element.
+   *
+   */
+
+  /* value tokens: colors (--vc => valueColor) */
+  --vc-raven: #202124;
+  --vc-snow: #ffffff;
+
+  --vc-vapour: rgba(255, 255, 255, 0.5);
+  --vc-shadow: rgba(32, 33, 36, 0.6);
+
+  --vc-silver: #d9d9d9;
+
+  --vc-brand-orange: #f15a24;
+  --vc-brand-yellow: #fbb03b;
+  --vc-brand-pink: #ed1e79;
+  --vc-brand-purple: #522785;
+  --vc-brand-blue: #29abe2;
+  --vc-brand-blue--dark: #1f6ef4;
+
+  /**
+   * value tokens: sizes (--vs => valueSize)
+   * 1) general purpose spacer unit
+   * 2) vertical spaces outside of an element
+   * 3) horizontal spaces outside of an element
+   * 4) space inside an element (usually used for padding)
+   * 5) borders and lines (using PX here because we don't want lines to scale)
+  **/
+  --vs-gutter: 0.5rem; /* 1 */
+  --vs-stack: calc(var(--vs-gutter) * 2); /* 2 */
+  --vs-inline: calc(var(--vs-gutter) * 2); /* 3 */
+  --vs-bezel: calc(var(--vs-gutter) * 2); /* 4 */
+  --vs-line: 1px; /* 5 */
+
+  /* value tokens: z-index (--vz => valueZindex) */
+
+  --vz-backdrop: -1;
+  --vz-background: 1;
+  --vz-foreground: 2;
+  --vz-tooltip: 10;
+  --vz-modal: 20;
+  --vz-loader: 30;
+
+  /*
+   * reference tokens
+   * 
+   * pointers to value tokens or other reference tokens. They control the actual
+   * design rules.
+   *
+   */
+
+  /* reference tokens: colors (--rc => referenceColor) */
+  --rc-dark: var(--vc-raven);
+  --rc-light: var(--vc-snow);
+
+  --rc-dark-transparent: var(--vc-shadow);
+  --rc-light-transparent: var(--vc-vapour);
+
+  --rc-text: var(--rc-dark);
+  --rc-text--disabled: var(--vc-shadow);
+
+  --rc-background: var(--rc-light);
+  --rc-background-transparent: var(--rc-light-transparent);
+
+  --rc-line: var(--rc-light);
+  --rc-line: var(--vc-silver);
+  --rc-line-inverted: var(--rc-dark);
+
+  --rc-interaction: var(--vc-brand-blue);
+  --rc-interaction-text: var(--vc-brand-blue--dark);
+
+  --rc-button: var(--rc-dark);
+  --rc-onButton: var(--rc-light);
+
+  --rc-warning: var(--vc-brand-pink);
+  --rc-onWarning: var(--vc-snow);
+
+  --rc-input: var(--rc-light);
+  --rc-onInput: var(--rc-dark);
+
+  --rc-input-readonly: var(--vc-silver);
+  --rc-input-onReadonly: var(--rc-dark);
+
+  /* reference tokens: gradients */
+  --rg-brand: var(--vc-brand-yellow) 10%, var(--vc-brand-orange) 40%,
+    var(--vc-brand-pink) 50%, var(--vc-brand-purple) 90%;
+
+  /* reference tokens: sizes */
+  --rs-footer-stack: calc(var(--vs-stack) * 1.5);
+
+  --rs-footer-gutter: var(--vs-gutter);
+  --rs-logo-stack: calc(var(--vs-gutter) * 8);
+
+  --rs-card-bezel: calc(var(--vs-gutter) * 5);
+  --rs-card-bezel-x: calc(var(--vs-gutter) * 7);
+
+  --rs-card-stack: calc(var(--vs-stack) * 1.5);
+  --rs-card-bezel-narrow: calc(var(--rs-card-bezel) * 0.75);
+
+  --rs-button-bezel: var(--rs-card-bezel-narrow);
+  --rs-button-stack: var(--vs-stack);
+
+  --rs-input-bezel: var(--rs-button-bezel);
+  --rs-input-stack: var(--rs-button-stack);
+
+  --vs-line-height: 1.35;
 }
 
-html,
-body {
-  margin: 0;
-  width: 100vw;
+/* II) Theme Settings: DarkMode, LightMode, Product Specific stuff */
+
+/***
+ * III) Generic: Ground-zero styles (Normalize.css, resets, box-sizing)
+ *
+ * The new CSS reset - version 1.7.2 (last updated 23.6.2022)
+ * GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+- The "symbol *" part is to solve Firefox SVG sprite bug
+*/
+*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
+  all: unset;
+  display: revert;
 }
 
-footer {
-  padding: 1em 2em 0.5rem;
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
-@media (min-width: 512px) {
-  footer {
-    padding: 2em 2em 1rem;
-  }
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
 }
 
-.powered-by-link {
-  padding: 0.5em;
-  display: inline-block;
-  transition: background 0.2s;
+/* Remove list styles (bullets/numbers) */
+ol,
+ul,
+menu {
+  list-style: none;
 }
-.powered-by-link img {
+
+/* For images to not be able to exceed their container */
+img {
   max-width: 100%;
 }
 
-.powered-by-link:hover,
-.powered-by-link:focus {
-  background: var(--grey-050);
-  border-radius: 0.3em;
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
 }
 
-p,
-.instruction-steps {
-  line-height: 22px;
-  color: var(--grey-700);
-  font-size: 1rem;
-  margin: 1rem 0;
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+  -webkit-user-select: auto;
 }
 
-input,
-button,
-div,
-section,
-span {
-  font-size: 1.2rem;
-  color: var(--text-color);
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
 }
 
-input {
-  margin-bottom: 1rem;
-  padding: 0.4rem 1rem;
-  border-radius: 4px;
-  border: 2px var(--grey-100) solid;
-  width: auto;
-  background-color: var(--background-color);
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
 
-  line-height: 1.25rem;
-  letter-spacing: 0.005em;
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
 }
 
-input.errored {
-  border: double 2px var(--flamingo-500);
+/* fix the feature of 'hidden' attribute.
+display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
 }
-input.errored::placeholder {
-  color: var(--flamingo-500);
+
+/* revert for bug in Chromium browsers
+- fix for the content editable attribute will work properly.
+- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
 }
 
-.error-message-hidden {
-  visibility: hidden;
-  height: 0;
-  margin: 0;
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
 }
 
-.error-message {
-  color: var(--flamingo-500);
-  margin: 0 0 0.5rem;
-  font-size: 1rem;
+/* (not included in vanilla reset) Hide carets in summary/details on Safari */
+
+::-webkit-details-marker {
+  display: none;
 }
 
-textarea {
-  width: 100%;
-  height: 6rem;
-  box-sizing: border-box;
-  margin-bottom: 1rem;
-  font-weight: 400;
-  font-family: inherit;
-  resize: none;
-  padding: 0.3rem;
-  text-align: center;
+/**
+ * IV) Base: Un-classed HTML elements (type selectors)
+ *
+ * Internet Identity Styles
+ **/
+
+:root {
+  /* general styles */
+  font-family: "Montserrat", sans-serif;
+  font-size: 62.5%; /* 10px */
+
+  background: var(--rc-background);
+  color: var(--rc-text);
 }
 
-h1 {
-  margin-top: 0;
+body {
+  font-size: 1.6rem;
+  line-height: var(--vs-line-height);
+}
+
+/**
+ * V) Objects: Cosmetic-free design patterns
+ * 
+ * We generally use the BEM methodology.
+ * http://getbem.com/
+ *
+ * We prefix classes with the following convention:
+ * - `.c-` component
+ * - `.l-` layout
+ * - `.t-` typography
+ *
+ * We avoid element, id and attribute selectors when it is sane to do so¹. 
+ * Use classes when possible. 
+ *
+ * ¹ For example when needing to style the paths of an SVG it might be difficult
+ * to do because the SVG are made by people with little to no XML know-how. 
+ */
+
+.t-strong {
+  font-weight: bold;
+}
+
+.t-weak {
+  font-weight: normal;
+  font-size: 0.8em;
+}
+
+.t-title {
+  font-weight: bold;
   font-size: 1.8rem;
-  margin: auto;
+  line-height: 1.1;
+  margin-top: 1em;
 }
-@media (min-width: 1024px) {
-  h1 {
-    margin: inherit;
-  }
+
+.t-title:first-child {
+  margin-top: 0;
+}
+
+.t-title--complications {
+  display: flex;
+  align-items: center;
+  gap: 0.2em;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0 0 1rem;
+.t-title__complication {
+  font-weight: 300;
+  font-size: 0.8em;
+  flex-grow: 1;
 }
 
-details summary {
-  cursor: pointer;
+.t-title__complication:disabled {
+  color: var(--rc-text--disabled);
 }
 
-summary::marker {
-  content: none;
+.t-title__complication--end {
+  flex-grow: 0;
+  text-align: right;
 }
 
-button {
-  border: 1px solid var(--grey-200);
-  background: var(--background-color);
-  display: flex;
-  width: 100%;
+.t-title--main {
+  font-size: 2.8rem;
+  margin-top: 0.5em;
+}
+
+.t-lead {
+  font-size: 1.6rem;
+}
+
+.t-title + .t-lead {
+  margin-top: 0.75em;
+}
+
+.t-paragraph {
+  margin-top: 1em;
+}
+
+.t-paragraph:first-child {
+  margin-top: 0;
+}
+
+.t-vip {
+  font-size: 2.4rem;
+  font-weight: 600;
   text-align: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-  padding: 0.6rem 1rem;
-  border-radius: 4px;
+}
 
-  line-height: 1.25rem;
-  letter-spacing: 0.005em;
+.t-vip--small {
+  font-size: 1.5rem;
 }
 
-button:not([disabled]):hover,
-button:not([disabled]):focus,
-a:focus,
-.linkStyle:hover {
-  opacity: 0.9;
-  box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #29abe2;
-  outline: 2px dotted transparent;
-  outline-offset: 2px;
-  border-radius: 4px;
+.t-discreet {
+  font-size: 0.8em;
 }
 
-.linkStyle:hover {
+a,
+.t-link {
+  display: inline;
+  color: var(--rc-interaction-text);
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
   cursor: pointer;
 }
 
-#captchaImg {
-  height: 120px;
-  width: 220px;
-  min-width: 0px;
-  max-width: 220px;
-  display: block;
-  margin: auto;
+.t-link:disabled,
+:disabled .t-link {
+  pointer-events: none;
 }
 
-ul {
-  width: 100%;
-  padding: 0;
+.t-link--discreet {
+  font-weight: normal;
+  text-decoration: none;
 }
 
-form,
-label {
-  display: flex;
+a:focus,
+a:hover,
+.t-link:not([disabled]):focus,
+.t-link:not([disabled]):hover {
+  text-decoration: none;
 }
 
-form {
-  margin-bottom: 2rem;
-  flex-direction: column;
+.t-link--discreet:not([disabled]):focus,
+.t-link--discreet:not([disabled]):hover {
+  text-decoration: underline;
 }
 
-button:disabled.primary {
-  background-color: grey;
+.t-link__icon {
+  display: inline-block;
+  position: relative;
+  height: calc(1em * var(--vs-line-height));
+  aspect-ratio: 1;
+  vertical-align: middle;
 }
 
-button.primary {
-  background-color: var(--primary);
-  color: var(--background-color);
-  border: none;
+.t-link__icon svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) translateY(-0.1em);
+  width: 100%;
 }
 
-button.linkStyle {
-  cursor: pointer;
-  display: inline;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: auto;
+#pageContent,
+.l-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: var(--rs-card-bezel);
 }
 
-label {
-  font-size: 1rem;
-  font-weight: 500;
-  flex-direction: column;
-  margin-bottom: 0.5rem;
+.l-container {
+  position: relative;
+  font-size: 1.6rem;
+  min-width: 30rem;
+  max-width: 40rem;
+  margin: 0 auto;
 }
 
-main::before,
-main::after {
-  content: "";
+.l-container--wide {
+  max-width: 60rem;
+}
+
+.l-divider {
   display: block;
-  flex-grow: 1;
-  height: 24px;
+  margin-top: calc(var(--vs-stack) * 2);
+  margin-bottom: calc(var(--vs-stack) * 2);
+  border-top: var(--vs-line) var(--rc-line) solid;
 }
 
-main {
-  height: 100vh;
+.l-divider--text {
   display: flex;
-  flex-direction: column;
+  gap: calc(var(--vs-gutter) * 2);
   align-items: center;
+  margin-top: calc(var(--vs-stack) * 2);
+  margin-bottom: calc(var(--vs-stack) * 2);
+  border-top: none;
+  height: calc(1em * var(--vs-line-height));
 }
 
-@media (min-width: 512px) {
-  main {
-    height: auto;
-    min-height: 100vh;
-  }
+.l-divider--text::before,
+.l-divider--text::after {
+  content: "";
+  flex-grow: 1;
+  border-top: var(--vs-line) var(--rc-line) solid;
+}
+
+.l-divider__label {
+  display: inline-block;
+}
+
+.l-section {
+  display: block;
+  margin-top: calc(var(--vs-stack) * 3);
+}
+.l-section--spacious {
+  margin-top: calc(var(--vs-stack) * 5);
 }
 
-.container {
-  padding: 3.5rem 1rem 2rem;
-  width: min(calc(100vw), 365px);
-  flex: 0 0 auto;
+.l-horizontal {
   display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+  gap: var(--vs-inline);
 }
 
-@media (min-width: 512px) {
-  .container {
-    padding: 3.5rem 2.5rem 2rem;
-    border: 2px var(--grey-100) solid;
-    border-radius: 4px;
-    box-sizing: inherit;
-  }
+/**
+ * Title with counter and Actions 
+ */
+
+/**
+ * Card components
+ */
+
+.c-card {
+  display: block;
+  position: relative;
+  padding: var(--rs-card-bezel) var(--rs-card-bezel-x);
+  border: var(--vs-line) solid var(--rc-line);
+  background-color: var(--rc-background);
+  border-radius: 0.4rem;
+  margin-top: var(--rs-card-stack);
 }
 
-.hidden {
-  visibility: hidden;
+.c-card--narrow {
+  padding: var(--rs-card-bezel-narrow);
 }
 
-#timer {
-  font-size: 1rem;
+.c-card--outline {
+  border: var(--vs-line) var(--rc-line-inverted) solid;
 }
 
-#logout-button {
-  display: flex;
-  padding: 8px;
-  margin: 1rem 1rem 1rem auto;
-  font-size: 0.8rem;
-  width: auto;
+@media (max-width: 512px) {
+  .c-card--highlight {
+    border: none;
+  }
 }
 
-.highlightBox {
-  background-color: var(--grey-100);
-  padding: 0.7rem 0.5rem;
-  text-align: center;
-  border-radius: 4px;
-  margin-bottom: 1rem;
-  overflow-wrap: break-word;
-  font-size: 1.5rem;
-  font-weight: 500;
+.c-card__icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 10%;
+  aspect-ratio: 1;
+  z-index: var(--vz-background);
+  transform: translate(40%, -40%);
 }
 
-.warningBox {
-  border: 1px var(--grey-200) solid;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  margin-bottom: 2rem;
+.c-card__icon svg {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.warningIcon {
-  height: 2rem;
-  width: 2rem;
+
+.c-card__icon svg * {
+  fill: var(--rc-background);
+  stroke-width: 3px;
+  stroke: var(--rc-warning);
 }
-.warningMessage {
-  font-size: 1rem;
+
+.c-card__content {
+  position: relative;
+  z-index: var(--vz-foreground);
 }
 
-.textLink {
-  margin-bottom: 0.7rem;
-  font-size: 0.95rem;
+.c-card__title {
+  /* 
+    approximation: to make sure the title 
+    does not collide with the icon on the left
+  */
+  padding-right: 10%;
 }
-.textLink a {
-  font-size: 0.95rem;
-  font-weight: 600;
-  text-decoration: none;
-  color: black;
+
+.c-card__paragraph {
+  margin-top: calc(var(--vs-stack) * 0.75);
 }
 
-@media (min-width: 512px) {
-  .textLink {
-    white-space: nowrap;
-  }
+.c-card--warning {
+  border-style: double;
+  border-width: calc(var(--vs-line) * 2);
+  border-radius: 4px;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(270deg, var(--rg-brand));
 }
 
-hr {
-  margin: 1rem auto;
-  width: 60%;
-  border-top: 1px solid var(--grey-100);
+/**
+ *  logo component 
+ */
+.c-logo {
+  display: block;
+  overflow: hidden;
+  margin: var(--rs-logo-stack) 0 calc(var(--rs-logo-stack) * 1.5);
 }
 
-#icLogo {
-  width: 45%;
-  align-self: center;
-  margin: 0.5rem auto 3.25rem;
+.c-logo svg {
+  display: block;
+  width: 50%;
+  margin: 0 auto;
 }
 
-nav {
-  margin-top: 1.5em;
+.t-title + .c-logo {
+  margin: var(--rs-logo-stack) 0;
 }
-@media (min-width: 512px) {
-  nav {
-    margin-top: 2em;
-  }
+
+/**
+ *  Forms and Buttons 
+ */
+
+.c-button {
+  background: var(--rc-button);
+  color: var(--rc-onButton);
+  padding: var(--rs-button-bezel);
+  margin-top: var(--rs-button-stack);
+  display: block;
+  width: 100%;
+  text-align: center;
+  border-radius: 0.4rem;
 }
 
-.nav-links {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  list-style: none;
+.c-button svg * {
+  fill: currentColor;
 }
 
-.nav-links li + li::before {
-  content: "·";
-  margin: 0 0.5rem;
+.c-button--secondary {
+  background: var(--rc-onButton);
+  color: var(--rc-button);
+  border: var(--vs-line) solid var(--rc-line);
 }
 
-.nav-link {
-  text-decoration: none;
-  color: var(--grey-600);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 0 0.5em;
+.c-button:not([disabled]):focus,
+.c-button:not([disabled]):hover {
+  opacity: 0.9;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px var(--rc-interaction);
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
 }
 
-.nav-link:hover,
-.nav-link:focus {
-  border-bottom: 2px solid var(--grey-100);
-  text-decoration: none;
-  color: var(--grey-800);
-  font-size: 0.875rem;
+.c-button[disabled],
+.c-button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.deviceItem {
-  display: flex;
+.c-button--warning {
+  background: var(--rc-warning);
+  color: var(--rc-onWarning);
+}
+
+.c-input {
+  position: relative;
+  display: block;
   width: 100%;
+  padding: var(--rs-input-bezel);
+  margin-top: var(--rs-input-stack);
+  background: var(--rc-input);
+  color: var(--rc-onInput);
+  border: calc(var(--vs-line) * 2) solid var(--rc-line);
 }
 
-.deviceItemAlias {
-  border: 1px solid var(--grey-200);
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  flex: 1 1 100%;
-  margin-right: 0.5rem;
-  margin-bottom: 16px;
-  padding: 0.5rem 1rem;
-  overflow: auto;
-  word-break: break-word;
-  line-height: 1.5;
-}
-
-.deviceItemAction {
-  border-radius: 2px;
-  padding: 0;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.c-input.has-error,
+.c-input.has-error:focus {
+  color: var(--rc-warning);
+  box-shadow: inset 0 0 0 calc(var(--vs-line) * 2) var(--rc-warning);
+  border-image: none;
 }
 
-/* FAQ related stuff */
-
-.faq__questions {
-  padding: 0;
-  list-style-type: none;
-}
-
-.faq__question-underline {
-  background: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(#29abe2),
-    color-stop(33%, #fbb03b),
-    color-stop(66%, #f15a24),
-    to(#ed1e79)
-  );
-  background: linear-gradient(
-    90deg,
-    #29abe2,
-    #fbb03b 33%,
-    #f15a24 66%,
-    #ed1e79
-  );
-  height: 1px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0.3rem auto;
+.c-input:focus {
+  opacity: 0.9;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px var(--rc-interaction);
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
 }
 
-.faq__question-summary {
-  letter-spacing: -0.01rem;
-  font-weight: 300;
-  font-size: 1.25rem;
+.c-input--vip:focus {
+  border-style: double;
+  border-width: calc(var(--vs-line) * 2);
+  border-radius: 4px;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(270deg, var(--rg-brand));
+  outline: none;
+  box-shadow: none;
 }
 
-.faq__question-summary-text {
-  display: list-item;
-  list-style-position: outside;
-  padding-left: 1rem;
+.c-input--readonly {
+  background: var(--rc-input-readonly);
+  color: var(--rc-input-onReadonly);
+  border: var(--vs-line) var(--rc-line) solid;
 }
 
-.faq__title {
-  color: rgba(55, 65, 81, 1);
-  font-weight: 700;
-  font-size: 4.5rem;
-  line-height: 1;
-  text-align: center;
-  letter-spacing: 0.025em;
-  margin: 1rem 0 7rem 0;
+.c-input__input {
+  position: absolute;
+  display: block;
+  width: 100%;
+  background: transparent;
+  height: 100%;
+  inset: 0;
 }
 
-@media only screen and (max-width: 512px) {
-  .faq__title {
-    margin: 1rem 0 0 0;
-  }
+.c-input__button {
+  position: absolute;
+  top: 50%;
+  right: var(--rs-input-bezel);
+  transform: translateY(-50%);
 }
 
-.faq__question-details-container {
-  height: max-content;
+.c-summary {
+  list-style: none;
 }
 
-.faq__answer {
-  line-height: 2rem;
-  font-weight: 200;
-  padding: 1.2em;
-  margin: auto 0;
+.c-summary__link {
+  display: block;
+  position: relative;
 }
 
-.faq__question {
-  margin: 2.5rem 1.2rem;
+.c-summary__link::before {
+  position: absolute;
+  content: "▶";
+  font-size: 0.75em;
+  line-height: 2;
+  left: calc(-1 * var(--vs-inline));
+  text-decoration: none;
+  transform: translateX(-100%);
+  transition: 200ms cubic-bezier(0.3, 0.7, 0, 1);
 }
 
-.faq__answer-links {
-  padding: 1rem;
-  list-style-type: none;
-  width: auto;
-  font-size: 0.9rem;
+[open] .c-summary__link::before {
+  transform: translateX(-100%) rotate(90deg);
 }
 
-.faq__answer-link {
-  color: rgba(31, 41, 55, 1);
+/**
+ *  Footer component
+ */
+
+.l-footer {
+  padding: var(--rs-footer-gutter);
+  margin-top: var(--rs-footer-stack);
 }
 
-.faq__container {
-  background-color: rgba(243, 244, 246, 1);
-  max-width: 42rem;
+/**
+ *  Footer Navigation component
+ *  1) radial shadow underneath the line below the links
+ */
+
+.c-nav-links {
+  position: relative;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: calc(var(--vs-gutter) * 10);
+  border-top: var(--vs-line) var(--rc-line) solid;
+  padding-top: var(--vs-bezel);
+  overflow: hidden;
+}
+
+.c-nav-links::before {
+  /* 1 */
+  content: "";
+  display: block;
   height: 100%;
+  width: 100%;
+  position: absolute;
+  opacity: 0.5;
+  top: 0;
+  background: radial-gradient(var(--rc-line), transparent);
+  background-size: 80% 160%;
+  background-repeat: no-repeat;
+  background-position: center 170%;
+  pointer-events: none;
 }
 
-@media only screen and (max-width: 512px) {
-  .faq__container {
-    padding: 0 0.6rem;
-  }
+.c-nav-links li {
+  position: relative;
+  padding: 0 var(--vs-inline);
 }
-@media only screen and (min-width: 512px) {
-  .faq__container {
-    padding: 0 4rem;
-  }
+
+.c-nav-links li + li::before {
+  position: absolute;
+  content: "·";
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%);
 }
 
-.faq__question summary {
-  padding: 0.5rem 1rem;
+.page-signature {
+  display: block;
+  padding: var(--rs-footer-gutter);
+  transition: background 0.2s;
 }
 
-/* ABOUT stuff */
+.page-signature img {
+  display: block;
+  max-width: 100%;
+}
 
-.about__container {
-  background-color: rgba(243, 244, 246, 1);
-  max-width: 42rem;
-  height: 100%;
+.page-signature:hover,
+.page-signature:focus {
+  background: var(--grey-050);
 }
 
-@media only screen and (max-width: 512px) {
-  .about_container {
-    padding: 0 0.6rem;
-  }
+.c-list li + li {
+  margin-top: var(--vs-stack);
 }
-@media only screen and (min-width: 512px) {
-  .about__container {
-    padding: 0 4rem;
-  }
+
+.c-list--bulleted {
+  list-style-type: disc;
 }
 
-.about__title {
-  color: rgba(55, 65, 81, 1);
-  font-weight: 700;
-  font-size: 4.5rem;
-  line-height: 1;
-  text-align: center;
-  letter-spacing: 0.025em;
-  margin: 1rem 0 7rem 0;
+.c-list--bulleted li,
+.c-list--numbered li {
+  margin-left: calc(var(--vs-inline) * 2);
 }
 
-@media only screen and (max-width: 512px) {
-  .about__title {
-    margin: 1rem 0 0 0;
-  }
+.c-list--numbered {
+  list-style-type: decimal;
 }
 
-.about__section-title-underline {
-  background: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(#29abe2),
-    color-stop(33%, #fbb03b),
-    color-stop(66%, #f15a24),
-    to(#ed1e79)
-  );
-  background: linear-gradient(
-    90deg,
-    #29abe2,
-    #fbb03b 33%,
-    #f15a24 66%,
-    #ed1e79
-  );
-  height: 1px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0.3rem auto;
+/** 
+ *  Tooltip component
+ *  This is a CSS only tooltip that shows on hover
+ *  The element that triggers the tooltip must have a .c-tooltip class
+ *  and the element that appears on hover must have a .c-tooltip__content class.
+ *  
+ *  In some cases tooltips are only shown when the element is disabled.
+ *  in those cases you can use the `.c-tooltip--onDisabled` modifier
+ */
+
+.c-tooltip {
+  position: relative;
 }
 
-.about__section {
-  margin: 2.5rem 1.2rem;
+.c-tooltip:hover .c-tooltip__message {
+  visibility: visible;
+  opacity: 1;
 }
 
-.about__subtitle {
-  letter-spacing: -0.01rem;
-  font-weight: 300;
-  font-size: 1.25rem;
+.c-tooltip--onDisabled:hover .c-tooltip__message {
+  visibility: hidden;
+  opacity: 0;
 }
 
-.about__compatibility-type {
-  letter-spacing: -0.01rem;
-  font-weight: 500;
-  font-size: 1rem;
-  margin: 0;
-  text-align: center;
+.c-tooltip--onDisabled:disabled:hover .c-tooltip__message {
+  visibility: visible;
+  opacity: 1;
 }
 
-.about__compatibility-list {
-  padding: 1rem;
-  margin: 0;
-  list-style-type: none;
-  width: auto;
-  font-size: 0.9rem;
+.c-tooltip__message {
+  position: absolute;
+  left: 0;
+
+  opacity: 0;
+  color: var(--rc-text);
+  visibility: hidden;
+  z-index: var(--vz-tooltip);
+  text-align: left;
+  min-width: 15rem;
+  max-width: 20rem;
+  transition: opacity 0.2s ease-in;
 }
 
-.about__compatibility-list-item {
-  letter-spacing: -0.01rem;
-  font-weight: 300;
-  font-size: 1rem;
-  color: rgba(31, 41, 55, 1);
+.c-tooltip__message--right {
+  right: 0;
+  left: auto;
 }
 
-.about__compatibility-flexparent {
+.c-action-list {
+  margin-top: 1rem;
+}
+
+.c-action-list__item {
   display: flex;
-  flex-flow: wrap;
-  justify-content: center;
-  background-color: var(--rainbow-orange);
-  border-radius: 0.5rem;
+  gap: var(--vs-gutter);
 }
 
-.about__compatibility-flexchild {
-  min-width: 1rem;
-  padding: 1rem;
+.c-action-list__item + .c-action-list__item {
+  margin-top: var(--vs-gutter);
 }
 
-.warnBox {
+.c-action-list__label {
+  flex-grow: 1;
+}
+
+.c-action-list__action,
+.c-action-list__label {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  margin-bottom: 2rem;
-  box-sizing: border-box;
-  border-style: double;
-  border-width: 2px;
+  border: var(--vs-line) solid var(--rc-line);
   border-radius: 4px;
-  border-image-slice: 1;
-  outline: none;
-  border-image-source: linear-gradient(
-    270.05deg,
-    #29abe2 10.78%,
-    #522785 22.2%,
-    #ed1e79 42.46%,
-    #f15a24 59.41%,
-    #fbb03b 77.09%
-  );
-}
-.warnIcon {
-  align-self: flex-start;
+  padding: var(--rs-button-bezel);
+  background: var(--rc-background);
+  transition: 200ms border-color linear;
 }
 
-.warnContent {
-  display: flex;
-  flex-direction: column;
+.c-action-list__action svg {
+  transition: 200ms opacity linear;
 }
-.warnTitle {
-  font-weight: 600;
-  font-size: 1.1rem;
-  margin: 0;
+
+.c-action-list__action:hover {
+  border-color: var(--rc-button);
 }
-.warnMessage {
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  font-size: 1rem;
+
+.c-action-list__action:hover svg {
+  opacity: 0.8;
 }
-.warnButton {
-  padding: 0.2rem 0.4rem;
-  border-radius: 2px;
-  width: fit-content;
-  align-self: flex-end;
-  margin: 0;
+
+.c-img-block {
+  width: 100%;
+  display: block;
 }
 
-button[data-action="protect"] {
-  margin-bottom: 0;
+/** responsiveness */
+
+@media (max-width: 512px) {
+  #pageContent,
+  .l-wrap {
+    justify-content: flex-start;
+    padding: 0;
+  }
+  .l-container {
+    max-width: 100%;
+    padding: calc(var(--rs-card-bezel) * 0.8) calc(var(--rs-card-bezel-x) * 0.8);
+  }
 }
 
-.container h1 {
-  word-break: break-word;
+/* VII) Utilities/Trumps:     Helpers and overrides. (hidden, error classes, */
+.is-hidden {
+  display: none !important;
 }
 
-input.inputDeviceAlias {
-  line-height: 1;
+.is-visible {
+  display: block !important;
 }
diff --git a/src/frontend/src/test-e2e/selenium.test.ts b/src/frontend/src/test-e2e/selenium.test.ts
index 38fb9c4fc0..01f5f76091 100644
--- a/src/frontend/src/test-e2e/selenium.test.ts
+++ b/src/frontend/src/test-e2e/selenium.test.ts
@@ -922,7 +922,7 @@ test("Should not issue delegation when derivationOrigin is missing from /.well-k
       `"${TEST_APP_CANONICAL_URL}" is not a valid derivation origin for "https://nice-name.com"`
     );
     expect(await errorView.getErrorDetail()).toEqual(
-      '"https://nice-name.com" is not listed in the list of allowed alternative origins. Allowed alternative origins: '
+      '"https://nice-name.com" is not listed in the list of allowed alternative origins. Allowed alternative origins:'
     );
   });
 }, 300_000);
diff --git a/src/frontend/src/test-e2e/views.ts b/src/frontend/src/test-e2e/views.ts
index 9fb088257d..49a408d52e 100644
--- a/src/frontend/src/test-e2e/views.ts
+++ b/src/frontend/src/test-e2e/views.ts
@@ -73,7 +73,7 @@ export class RegisterView extends View {
   }
 
   async registerGetIdentity(): Promise<string> {
-    return await this.browser.$(".highlightBox").getText();
+    return await this.browser.$("[data-usernumber]").getText();
   }
 
   async registerConfirmIdentity(): Promise<void> {
@@ -81,7 +81,7 @@ export class RegisterView extends View {
   }
 
   async registerIdentityFixup(): Promise<void> {
-    const elem = await this.browser.$(".highlightBox");
+    const elem = await this.browser.$("[data-usernumber]");
     await this.browser.execute(
       "arguments[0].innerText = arguments[1];",
       elem,
@@ -185,7 +185,7 @@ export class MainView extends View {
   }
 
   async fixup(): Promise<void> {
-    const elem = await this.browser.$(".highlightBox");
+    const elem = await this.browser.$("[data-usernumber]");
     await this.browser.execute(
       "arguments[0].innerText = arguments[1];",
       elem,
@@ -405,7 +405,7 @@ export class WelcomeBackView extends View {
   }
 
   async getIdentityAnchor(): Promise<string> {
-    return await this.browser.$(".highlightBox").getText();
+    return await this.browser.$("[data-usernumber]").getText();
   }
 
   async login(): Promise<void> {
@@ -413,7 +413,7 @@ export class WelcomeBackView extends View {
   }
 
   async fixup(): Promise<void> {
-    const elem = await this.browser.$(".highlightBox");
+    const elem = await this.browser.$("[data-usernumber]");
     await this.browser.execute(
       "arguments[0].innerText = arguments[1];",
       elem,
diff --git a/src/frontend/src/utils/errorHelper.ts b/src/frontend/src/utils/errorHelper.ts
index 9494d0b522..700403b3ce 100644
--- a/src/frontend/src/utils/errorHelper.ts
+++ b/src/frontend/src/utils/errorHelper.ts
@@ -10,8 +10,8 @@ export function toggleErrorMessage(
   show: boolean
 ): void {
   const errorMessage = document.getElementById(errorMessageId) as HTMLElement;
-  errorMessage.classList.toggle("error-message-hidden", !show);
+  errorMessage.classList.toggle("is-hidden", !show);
   errorMessage.classList.toggle("error-message", show);
   const input = document.getElementById(inputElementId) as HTMLElement;
-  input.classList.toggle("errored", show);
+  input.classList.toggle("has-error", show);
 }