From 8e2852b9d48de7c26df71a31554e58cd13b352ce Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@users.noreply.github.com>
Date: Fri, 11 Aug 2023 15:59:49 -0400
Subject: [PATCH] Upgrade to SDS v2 (#938)

* Breaking changes fixed

* Replace old color variables
---
 extension/package.json                        |   2 +-
 extension/public/index.html                   |   2 +-
 extension/src/popup/basics/Forms/styles.scss  |   2 +-
 .../src/popup/basics/InfoBlock/index.tsx      |  44 -----
 .../src/popup/basics/InfoBlock/styles.scss    |  20 ---
 .../src/popup/basics/InfoTooltip/index.tsx    |  29 ++++
 .../src/popup/basics/InfoTooltip/styles.scss  |  33 ++++
 .../src/popup/basics/ListNavLink/styles.scss  |   2 +-
 .../basics/LoadingBackground/styles.scss      |   2 +-
 .../basics/TransactionHeading/styles.scss     |   2 +-
 .../src/popup/basics/buttons/Button/index.tsx |  54 ------
 .../popup/basics/buttons/Button/styles.scss   |  20 ---
 .../popup/basics/buttons/PillButton/index.tsx |   6 +-
 .../basics/buttons/PillButton/styles.scss     |  10 --
 .../src/popup/components/AutoSave/index.tsx   |   4 +-
 .../popup/components/BottomNav/styles.scss    |   2 +-
 .../src/popup/components/Header/styles.scss   |   2 +-
 .../src/popup/components/ModalInfo/index.tsx  |   2 +-
 .../popup/components/ModalInfo/styles.scss    |   4 +-
 .../popup/components/Onboarding/styles.scss   |   2 +-
 .../components/PunycodedDomain/styles.scss    |   4 +-
 .../popup/components/SlideupModal/styles.scss |   2 +-
 .../components/SubviewHeader/styles.scss      |   2 +-
 .../components/WarningMessages/index.tsx      |  43 +++--
 .../components/WarningMessages/styles.scss    |  32 ++--
 .../account/AccountAssets/styles.scss         |   6 +-
 .../account/AccountHeader/index.tsx           |   6 +-
 .../account/AccountHeader/styles.scss         |   6 +-
 .../account/AccountHeaderModal/index.tsx      |   2 +-
 .../account/AccountHeaderModal/styles.scss    |   7 +-
 .../account/AccountList/styles.scss           |   2 +-
 .../components/account/AssetDetail/index.tsx  |   7 +-
 .../account/AssetDetail/styles.scss           |   4 +-
 .../account/NotFundedMessage/index.tsx        |  11 +-
 .../account/NotFundedMessage/styles.scss      |   4 +-
 .../AssetNetworkInfo/styles.scss              |   2 +-
 .../accountHistory/HistoryItem/index.tsx      |   4 +-
 .../accountHistory/HistoryItem/styles.scss    |   6 +-
 .../TransactionDetail/index.tsx               |   8 +-
 .../TransactionDetail/styles.scss             |   6 +-
 .../hardwareConnect/LedgerSign/index.tsx      |  10 +-
 .../hardwareConnect/LedgerSign/styles.scss    |   6 +-
 .../AccountListIdenticon/styles.scss          |   6 +-
 .../identicons/KeyIdenticon/styles.scss       |   4 +-
 .../manageAssets/AddAsset/index.tsx           |  14 +-
 .../manageAssets/AddToken/index.tsx           |   8 +-
 .../manageAssets/ChooseAsset/index.tsx        |   9 +-
 .../manageAssets/ChooseAsset/styles.scss      |   2 +-
 .../manageAssets/ManageAssetRows/styles.scss  |   6 +-
 .../manageAssets/SearchAsset/index.tsx        |  11 +-
 .../manageAssets/SearchAsset/styles.scss      |   4 +-
 .../manageAssets/SelectAssetRows/styles.scss  |   6 +-
 .../manageAssets/TrustlineError/index.tsx     |  41 +++--
 .../manageAssets/TrustlineError/styles.scss   |   2 +-
 .../manageNetwork/NetworkForm/index.tsx       |  44 +++--
 .../manageNetwork/NetworkForm/styles.scss     |   2 +-
 .../manageNetwork/NetworkModal/index.tsx      |  35 ++--
 .../manageNetwork/NetworkModal/styles.scss    |  19 --
 .../manageNetwork/NetworkSettings/index.tsx   |   7 +-
 .../mnemonicPhrase/CheckButton/styles.scss    |   6 +-
 .../ConfirmMnemonicPhrase/index.tsx           |   9 +-
 .../ConfirmMnemonicPhrase/styles.scss         |   4 +-
 .../DisplayMnemonicPhrase/index.tsx           |  20 ++-
 .../DisplayMnemonicPhrase/styles.scss         |   6 +-
 .../mnemonicPhrase/MnemonicDisplay/index.tsx  |   6 +-
 .../MnemonicDisplay/styles.scss               |   2 +-
 .../SendAmount/AssetSelect/styles.scss        |   6 +-
 .../sendPayment/SendAmount/SendType/index.tsx |  27 ++-
 .../SendAmount/SendType/styles.scss           |   2 +-
 .../sendPayment/SendAmount/index.tsx          |  38 ++--
 .../SendConfirm/SubmitResult/index.tsx        | 108 ++++++------
 .../SendConfirm/SubmitResult/styles.scss      |  14 +-
 .../SendConfirm/TransactionDetails/index.tsx  |  17 +-
 .../TransactionDetails/styles.scss            |  16 +-
 .../SendSettings/Slippage/index.tsx           |  38 ++--
 .../SendSettings/TransactionFee/index.tsx     |  40 +++--
 .../sendPayment/SendSettings/index.tsx        | 104 ++++++-----
 .../components/sendPayment/SendTo/index.tsx   |  45 +++--
 .../popup/components/sendPayment/styles.scss  |  16 +-
 .../src/popup/components/signBlob/index.tsx   |   8 +-
 .../signTransaction/Operations/styles.scss    |  10 +-
 .../signTransaction/Transaction/styles.scss   |   2 +-
 .../TransactionInfo/styles.scss               |   4 +-
 extension/src/popup/react-app-env.d.ts        |   8 +
 extension/src/popup/styles/global.scss        |  26 ++-
 extension/src/popup/views/About/index.tsx     |   2 +-
 extension/src/popup/views/About/styles.scss   |   4 +-
 extension/src/popup/views/Account/index.tsx   |  16 +-
 extension/src/popup/views/Account/styles.scss |   2 +-
 .../src/popup/views/AccountCreator/index.tsx  |  20 ++-
 .../popup/views/AccountHistory/styles.scss    |   6 +-
 .../views/AddAccount/AddAccount/index.tsx     |   8 +-
 .../views/AddAccount/ImportAccount/index.tsx  |  45 ++---
 .../connect/ConnectWallet/styles.scss         |   4 +-
 .../connect/LedgerConnect/index.tsx           |  17 +-
 .../connect/LedgerConnect/styles.scss         |   4 +-
 .../AddAccount/connect/PluginWallet/index.tsx |  21 ++-
 .../connect/PluginWallet/styles.scss          |   4 +-
 .../popup/views/DisplayBackupPhrase/index.tsx |  16 +-
 .../views/DisplayBackupPhrase/styles.scss     |   4 +-
 .../views/FullscreenSuccessMessage/index.tsx  |  22 ++-
 .../FullscreenSuccessMessage/styles.scss      |  25 +--
 extension/src/popup/views/GrantAccess.tsx     |  11 +-
 .../src/popup/views/PinExtension/styles.scss  |   4 +-
 .../src/popup/views/Preferences/styles.scss   |   2 +-
 .../src/popup/views/RecoverAccount/index.tsx  |  23 ++-
 .../popup/views/RecoverAccount/styles.scss    |   2 +-
 extension/src/popup/views/Settings/index.tsx  |  12 +-
 .../src/popup/views/Settings/styles.scss      |   2 +-
 .../views/SignTransaction/SignBlob/index.tsx  |  23 ++-
 .../views/SignTransaction/SignTx/index.tsx    |  31 ++--
 .../popup/views/SignTransaction/styles.scss   |   6 +-
 .../src/popup/views/UnlockAccount/index.tsx   |  16 +-
 .../src/popup/views/UnlockAccount/styles.scss |   2 +-
 .../src/popup/views/VerifyAccount/index.tsx   |   8 +-
 .../src/popup/views/VerifyAccount/styles.scss |   2 +-
 .../src/popup/views/ViewPublicKey/index.tsx   |   9 +-
 .../src/popup/views/ViewPublicKey/styles.scss |   6 +-
 extension/src/popup/views/Welcome/index.tsx   |  14 +-
 extension/src/popup/views/Welcome/styles.scss |   4 +-
 yarn.lock                                     | 162 +++++++++++-------
 121 files changed, 909 insertions(+), 876 deletions(-)
 delete mode 100644 extension/src/popup/basics/InfoBlock/index.tsx
 delete mode 100644 extension/src/popup/basics/InfoBlock/styles.scss
 create mode 100644 extension/src/popup/basics/InfoTooltip/index.tsx
 create mode 100644 extension/src/popup/basics/InfoTooltip/styles.scss
 delete mode 100644 extension/src/popup/basics/buttons/Button/index.tsx
 delete mode 100644 extension/src/popup/basics/buttons/Button/styles.scss
 delete mode 100644 extension/src/popup/basics/buttons/PillButton/styles.scss

diff --git a/extension/package.json b/extension/package.json
index 56af63b4be..615c882d84 100755
--- a/extension/package.json
+++ b/extension/package.json
@@ -22,7 +22,7 @@
     "@shared/api": "1.0.0",
     "@shared/constants": "1.0.0",
     "@shared/helpers": "1.0.0",
-    "@stellar/design-system": "^0.8.1",
+    "@stellar/design-system": "^1.0.0-beta.14",
     "@stellar/wallet-sdk": "^0.8.0",
     "@testing-library/react": "^10.4.8",
     "@testing-library/user-event": "^7.1.2",
diff --git a/extension/public/index.html b/extension/public/index.html
index a1b1713dbf..02f0d95bc8 100644
--- a/extension/public/index.html
+++ b/extension/public/index.html
@@ -14,7 +14,7 @@
     </style>
     <title>Freighter</title>
   </head>
-  <body class="dark-mode">
+  <body class="sds-theme-dark">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="modal-root"></div>
diff --git a/extension/src/popup/basics/Forms/styles.scss b/extension/src/popup/basics/Forms/styles.scss
index 0b66fed7df..b4e3b94ce3 100644
--- a/extension/src/popup/basics/Forms/styles.scss
+++ b/extension/src/popup/basics/Forms/styles.scss
@@ -9,7 +9,7 @@
 }
 
 .FormError {
-  color: var(--pal-error);
+  color: var(--color-red-60);
   font-size: 0.8125rem;
   padding: 0.25rem 0 0.75rem;
   line-height: 1;
diff --git a/extension/src/popup/basics/InfoBlock/index.tsx b/extension/src/popup/basics/InfoBlock/index.tsx
deleted file mode 100644
index 1175f9a865..0000000000
--- a/extension/src/popup/basics/InfoBlock/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import { InfoBlock as SDSInfoBlock } from "@stellar/design-system";
-import IconWarning from "popup/assets/icon-warning-red.svg";
-
-import "./styles.scss";
-
-enum InfoBlockVariant {
-  info = "info",
-  success = "success",
-  error = "error",
-  warning = "warning",
-}
-
-interface InfoBlockProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  className?: string;
-  variant?: InfoBlockVariant;
-  children: string | React.ReactNode;
-}
-
-// TODO - reconcile with SDS, for now using local triangle icon for error info blocks
-const ErrorInfoBlock = ({
-  children,
-}: {
-  children: string | React.ReactNode;
-}) => (
-  <div className="InfoBlock InfoBlock--error">
-    <div className="InfoBlock__icon">
-      <img src={IconWarning} alt="warning" />
-    </div>
-    {children}
-  </div>
-);
-
-export const InfoBlock = ({ children, className, variant }: InfoBlockProps) => (
-  <div className={`BasicInfoBlock ${className}`}>
-    {variant === InfoBlockVariant.error ? (
-      <ErrorInfoBlock>{children}</ErrorInfoBlock>
-    ) : (
-      <SDSInfoBlock variant={variant}>{children}</SDSInfoBlock>
-    )}
-  </div>
-);
-
-InfoBlock.variant = InfoBlockVariant;
diff --git a/extension/src/popup/basics/InfoBlock/styles.scss b/extension/src/popup/basics/InfoBlock/styles.scss
deleted file mode 100644
index a65e8179b7..0000000000
--- a/extension/src/popup/basics/InfoBlock/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.BasicInfoBlock {
-  .InfoBlock {
-    border: none;
-    border-radius: 0.5rem;
-    display: flex;
-    font-size: var(--font-size-secondary);
-    gap: 0.5rem;
-    padding: 0.875rem;
-
-    &__icon {
-      position: static;
-    }
-    &--warning {
-      background-color: rgba(241, 165, 50, 0.32);
-    }
-    &--error {
-      background-color: rgba(241, 50, 50, 0.32);
-    }
-  }
-}
diff --git a/extension/src/popup/basics/InfoTooltip/index.tsx b/extension/src/popup/basics/InfoTooltip/index.tsx
new file mode 100644
index 0000000000..a3218ee4b4
--- /dev/null
+++ b/extension/src/popup/basics/InfoTooltip/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { FloaterPlacement, Icon, Tooltip } from "@stellar/design-system";
+import "./styles.scss";
+
+interface InfoTooltipProps {
+  children: React.ReactNode;
+  infoText: React.ReactNode;
+  placement?: FloaterPlacement;
+}
+
+export const InfoTooltip = ({
+  children,
+  infoText,
+  placement = "right",
+}: InfoTooltipProps) => (
+  <div className="InfoTooltip">
+    {children}
+    <Tooltip
+      triggerEl={
+        <div className="InfoTooltip__button">
+          <Icon.Info />
+        </div>
+      }
+      placement={placement}
+    >
+      {infoText}
+    </Tooltip>
+  </div>
+);
diff --git a/extension/src/popup/basics/InfoTooltip/styles.scss b/extension/src/popup/basics/InfoTooltip/styles.scss
new file mode 100644
index 0000000000..a0ca22a4e1
--- /dev/null
+++ b/extension/src/popup/basics/InfoTooltip/styles.scss
@@ -0,0 +1,33 @@
+.InfoTooltip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  position: relative;
+
+  // Make sure tooltip covers other info buttons
+  &:has(.trigger--active) {
+    z-index: var(--z-index-tooltip);
+  }
+
+  &__button {
+    width: 0.875rem;
+    height: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: var(--color-gray-60);
+
+    svg {
+      display: block;
+      width: 0.75rem;
+      height: 0.75rem;
+      fill: currentColor;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--color-gray-70);
+      }
+    }
+  }
+}
diff --git a/extension/src/popup/basics/ListNavLink/styles.scss b/extension/src/popup/basics/ListNavLink/styles.scss
index 18e73173aa..267e8d3149 100644
--- a/extension/src/popup/basics/ListNavLink/styles.scss
+++ b/extension/src/popup/basics/ListNavLink/styles.scss
@@ -3,7 +3,7 @@
 
   a {
     align-items: center;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     display: flex;
     justify-content: space-between;
   }
diff --git a/extension/src/popup/basics/LoadingBackground/styles.scss b/extension/src/popup/basics/LoadingBackground/styles.scss
index 0c4f111ef3..04cef2782b 100644
--- a/extension/src/popup/basics/LoadingBackground/styles.scss
+++ b/extension/src/popup/basics/LoadingBackground/styles.scss
@@ -10,7 +10,7 @@
   transition-delay: 0.1s;
 
   &--active {
-    background-color: rgba(var(--pal-shadow-rbg), 0.6);
+    background-color: rgba(var(--color-shadow-rgb), 0.6);
     opacity: 1;
     z-index: 1;
   }
diff --git a/extension/src/popup/basics/TransactionHeading/styles.scss b/extension/src/popup/basics/TransactionHeading/styles.scss
index af46772524..85e83b4079 100644
--- a/extension/src/popup/basics/TransactionHeading/styles.scss
+++ b/extension/src/popup/basics/TransactionHeading/styles.scss
@@ -1,5 +1,5 @@
 .TransactionHeading {
-  border-bottom: 1px solid var(--pal-border-secondary);
+  border-bottom: 1px solid var(--color-gray-30);
   font-size: 0.875rem;
   font-weight: var(--font-weight-medium);
   line-height: 0.72rem;
diff --git a/extension/src/popup/basics/buttons/Button/index.tsx b/extension/src/popup/basics/buttons/Button/index.tsx
deleted file mode 100644
index a51ea28689..0000000000
--- a/extension/src/popup/basics/buttons/Button/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import { Button as SDSButton } from "@stellar/design-system";
-
-import "./styles.scss";
-
-// override SDS Button css with freighter design
-
-enum ButtonVariant {
-  primary = SDSButton.variant.primary,
-  tertiary = SDSButton.variant.tertiary,
-}
-
-interface ButtonComponent {
-  variant: typeof ButtonVariant;
-}
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-  isLoading?: boolean;
-  fullWidth?: boolean;
-  variant?: ButtonVariant;
-}
-
-export const Button: React.FC<ButtonProps> & ButtonComponent = ({
-  children,
-  isLoading,
-  fullWidth,
-  variant = ButtonVariant.primary,
-  ...props
-}: ButtonProps) => {
-  const sdsVariant =
-    variant === ButtonVariant.primary
-      ? SDSButton.variant.primary
-      : SDSButton.variant.tertiary;
-  const sds = SDSButton({
-    variant: sdsVariant,
-    fullWidth,
-    children,
-  });
-
-  return (
-    <SDSButton
-      className={`BasicButton BasicButton--${variant} ${sds?.props?.className}`}
-      isLoading={isLoading}
-      fullWidth={fullWidth}
-      variant={sdsVariant}
-      {...props}
-    >
-      {children}
-    </SDSButton>
-  );
-};
-
-Button.variant = ButtonVariant;
diff --git a/extension/src/popup/basics/buttons/Button/styles.scss b/extension/src/popup/basics/buttons/Button/styles.scss
deleted file mode 100644
index f00559095f..0000000000
--- a/extension/src/popup/basics/buttons/Button/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.Button.BasicButton {
-  border-radius: 0.5rem;
-  box-shadow: none;
-  padding: 1rem 0;
-
-  &--primary {
-    border-color: var(--button-bg--primary);
-    background: var(--button-bg--primary);
-  }
-
-  &--tertiary {
-    border-color: var(--button-bg--tertiary);
-    background: var(--button-bg--tertiary);
-
-    &:hover {
-      background-color: var(--background-color);
-      border: 1px var(--button-bg--tertiary) solid;
-    }
-  }
-}
diff --git a/extension/src/popup/basics/buttons/PillButton/index.tsx b/extension/src/popup/basics/buttons/PillButton/index.tsx
index b48542e4f8..23eca321a7 100644
--- a/extension/src/popup/basics/buttons/PillButton/index.tsx
+++ b/extension/src/popup/basics/buttons/PillButton/index.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { Button } from "@stellar/design-system";
 
-import "./styles.scss";
-
 interface PillButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
@@ -18,9 +16,11 @@ export const PillButton = ({
 }: PillButtonProps) => (
   <div className="PillButton">
     <Button
+      size="md"
       disabled={disabled}
       isLoading={isLoading}
-      variant={Button.variant.tertiary}
+      variant="secondary"
+      isPill
       {...props}
     >
       {children}
diff --git a/extension/src/popup/basics/buttons/PillButton/styles.scss b/extension/src/popup/basics/buttons/PillButton/styles.scss
deleted file mode 100644
index 4943ebe7c1..0000000000
--- a/extension/src/popup/basics/buttons/PillButton/styles.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.PillButton {
-  .Button {
-    background: var(--button-bg--tertiary);
-    border-color: var(--button-bg--tertiary);
-    border-radius: 10rem;
-    font-size: var(--font-size-secondary);
-    padding: 0.25rem 0.75rem;
-    text-transform: uppercase;
-  }
-}
diff --git a/extension/src/popup/components/AutoSave/index.tsx b/extension/src/popup/components/AutoSave/index.tsx
index f6c36adb83..ba273361ff 100644
--- a/extension/src/popup/components/AutoSave/index.tsx
+++ b/extension/src/popup/components/AutoSave/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useFormikContext } from "formik";
-import { StatusBar } from "@stellar/design-system";
+import { Banner } from "@stellar/design-system";
 import debounce from "lodash/debounce";
 
 import "./styles.scss";
@@ -55,7 +55,7 @@ export const AutoSaveFields = ({ debounceMs = 500 }: AutoSaveFieldsProps) => {
         didSaveFail ? "AutoSave--status--failed" : ""
       }`}
     >
-      <StatusBar variant={StatusBar.variant.error}>Save failed!</StatusBar>
+      <Banner variant="error">Save failed!</Banner>
     </div>
   );
 };
diff --git a/extension/src/popup/components/BottomNav/styles.scss b/extension/src/popup/components/BottomNav/styles.scss
index 5133d6bb22..5ab45235f6 100644
--- a/extension/src/popup/components/BottomNav/styles.scss
+++ b/extension/src/popup/components/BottomNav/styles.scss
@@ -1,5 +1,5 @@
 .BottomNav {
-  border-top: solid 1px var(--pal-example-details);
+  border-top: solid 1px var(--color-gray-40);
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/extension/src/popup/components/Header/styles.scss b/extension/src/popup/components/Header/styles.scss
index cc21b269c9..0c663b5d31 100644
--- a/extension/src/popup/components/Header/styles.scss
+++ b/extension/src/popup/components/Header/styles.scss
@@ -1,5 +1,5 @@
 .Header {
-  border-bottom: 1px solid var(--pal-border-primary);
+  border-bottom: 1px solid var(--color-gray-30);
   padding: 1.5rem 0;
 
   &__popup {
diff --git a/extension/src/popup/components/ModalInfo/index.tsx b/extension/src/popup/components/ModalInfo/index.tsx
index cc64dafb1d..e56abde37f 100644
--- a/extension/src/popup/components/ModalInfo/index.tsx
+++ b/extension/src/popup/components/ModalInfo/index.tsx
@@ -20,7 +20,7 @@ export const ModalInfo = ({
 }: ModalInfoProps) => (
   <>
     <div className="ModalInfo--card">
-      <Card variant={Card.variant.highlight}>
+      <Card variant="secondary">
         <PunycodedDomain domain={domain} domainTitle={domainTitle} />
         <div className="ModalInfo--subject">{subject}</div>
         {children}
diff --git a/extension/src/popup/components/ModalInfo/styles.scss b/extension/src/popup/components/ModalInfo/styles.scss
index f05fce6be8..b2262af85d 100644
--- a/extension/src/popup/components/ModalInfo/styles.scss
+++ b/extension/src/popup/components/ModalInfo/styles.scss
@@ -1,7 +1,7 @@
 .ModalInfo {
   &--subject {
-    border-bottom: 1px solid var(--pal-border-secondary);
-    color: var(--pal-text-primary);
+    border-bottom: 1px solid var(--color-gray-30);
+    color: var(--color-gray-90);
     line-height: 1.5rem;
     margin-bottom: 1.5rem;
     padding-bottom: 1.5rem;
diff --git a/extension/src/popup/components/Onboarding/styles.scss b/extension/src/popup/components/Onboarding/styles.scss
index 002e801b64..80536f763f 100644
--- a/extension/src/popup/components/Onboarding/styles.scss
+++ b/extension/src/popup/components/Onboarding/styles.scss
@@ -11,7 +11,7 @@
 .OnboardingHeader {
   font-size: 2.5rem;
   line-height: 120%;
-  color: var(--pal-text-primary);
+  color: var(--color-gray-90);
 }
 
 .OnboardingScreen {
diff --git a/extension/src/popup/components/PunycodedDomain/styles.scss b/extension/src/popup/components/PunycodedDomain/styles.scss
index ed53626068..c039d24709 100644
--- a/extension/src/popup/components/PunycodedDomain/styles.scss
+++ b/extension/src/popup/components/PunycodedDomain/styles.scss
@@ -17,11 +17,11 @@
   }
 
   &__domain {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__title {
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     font-size: 0.875rem;
   }
 
diff --git a/extension/src/popup/components/SlideupModal/styles.scss b/extension/src/popup/components/SlideupModal/styles.scss
index 243967fd8f..b75aa63280 100644
--- a/extension/src/popup/components/SlideupModal/styles.scss
+++ b/extension/src/popup/components/SlideupModal/styles.scss
@@ -1,5 +1,5 @@
 .SlideupModal {
-  background: var(--background-color);
+  background: var(--background-color--overlay);
   border-radius: 1.5rem 1.5rem 0 0;
   box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.24);
   position: absolute;
diff --git a/extension/src/popup/components/SubviewHeader/styles.scss b/extension/src/popup/components/SubviewHeader/styles.scss
index 9c19b3534c..bac2af24f2 100644
--- a/extension/src/popup/components/SubviewHeader/styles.scss
+++ b/extension/src/popup/components/SubviewHeader/styles.scss
@@ -1,6 +1,6 @@
 .SubviewHeader {
   align-items: center;
-  color: var(--pal-brand-primary-on);
+  color: var(--color-white);
   display: flex;
   height: var(--subview--header--height);
   padding-bottom: 2rem;
diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx
index b457c605e7..c7d4e3cec0 100644
--- a/extension/src/popup/components/WarningMessages/index.tsx
+++ b/extension/src/popup/components/WarningMessages/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { createPortal } from "react-dom";
-import { Icon } from "@stellar/design-system";
+import { Button, Icon, Notification } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 import { POPUP_HEIGHT } from "constants/dimensions";
 import StellarSdk, { Account } from "stellar-sdk";
@@ -10,8 +10,6 @@ import { ActionStatus } from "@shared/api/types";
 
 import { xlmToStroop } from "helpers/stellar";
 import { AppDispatch } from "popup/App";
-import { Button } from "popup/basics/buttons/Button";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import {
   signFreighterTransaction,
   submitFreighterTransaction,
@@ -84,7 +82,7 @@ export const WarningMessage = ({
       data-testid="WarningMessage"
     >
       <div className="WarningMessage__header">
-        <Icon.AlertTriangle className="WarningMessage__icon" />
+        <Icon.Warning className="WarningMessage__icon" />
         <div>{header}</div>
         {headerChildren}
       </div>
@@ -97,8 +95,9 @@ export const WarningMessage = ({
         <WarningInfoBlock />
         <div className="WarningMessage__children-wrapper">{children}</div>
         <Button
-          variant={Button.variant.tertiary}
-          fullWidth
+          size="md"
+          variant="secondary"
+          isFullWidth
           type="button"
           onClick={() =>
             handleCloseClick ? handleCloseClick() : setIsWarningActive(false)
@@ -236,7 +235,7 @@ export const BackupPhraseWarningMessage = () => {
     <div className="WarningMessage__backup">
       <div className="WarningMessage__infoBlock">
         <div className="WarningMessage__header">
-          <Icon.AlertTriangle className="WarningMessage__icon" />
+          <Icon.Warning className="WarningMessage__icon" />
           <div>{t("IMPORTANT")}</div>
         </div>
 
@@ -364,15 +363,15 @@ export const ScamAssetWarning = ({
         <div className="ScamAssetWarning__bottom-content">
           <div>
             {isSendWarning ? (
-              <InfoBlock variant={InfoBlock.variant.error}>
+              <Notification variant="error" title={t("Not recommended asset")}>
                 <p>
                   {t(
                     "Trading or sending this asset is not recommended. Projects related to this asset may be fraudulent even if the creators say otherwise.",
                   )}
                 </p>
-              </InfoBlock>
+              </Notification>
             ) : (
-              <InfoBlock variant={InfoBlock.variant.error}>
+              <Notification variant="error" title={t("Blocked asset")}>
                 <div>
                   <p>
                     {isValidatingSafeAssetsEnabled
@@ -392,13 +391,14 @@ export const ScamAssetWarning = ({
                     <strong>{t("Settings > Preferences")}</strong>
                   </p>
                 </div>
-              </InfoBlock>
+              </Notification>
             )}
           </div>
           <div className="ScamAssetWarning__btns">
             <Button
-              fullWidth
-              variant={Button.variant.tertiary}
+              size="md"
+              isFullWidth
+              variant="secondary"
               type="button"
               onClick={closeOverlay}
             >
@@ -406,9 +406,11 @@ export const ScamAssetWarning = ({
             </Button>
             {isSendWarning && (
               <Button
-                fullWidth
+                size="md"
+                isFullWidth
                 onClick={onContinue}
                 type="button"
+                variant="primary"
                 isLoading={
                   isSubmitting || submitStatus === ActionStatus.PENDING
                 }
@@ -418,9 +420,11 @@ export const ScamAssetWarning = ({
             )}
             {!isValidatingSafeAssetsEnabled && !isSendWarning && (
               <Button
-                fullWidth
+                size="md"
+                isFullWidth
                 onClick={handleSubmit}
                 type="button"
+                variant="primary"
                 isLoading={
                   isSubmitting || submitStatus === ActionStatus.PENDING
                 }
@@ -603,15 +607,18 @@ export const NewAssetWarning = ({
           </div>
           <div className="NewAssetWarning__btns">
             <Button
-              fullWidth
-              variant={Button.variant.tertiary}
+              size="md"
+              isFullWidth
+              variant="secondary"
               type="button"
               onClick={closeOverlay}
             >
               {t("Cancel")}
             </Button>
             <Button
-              fullWidth
+              size="md"
+              isFullWidth
+              variant="primary"
               onClick={handleSubmit}
               type="button"
               isLoading={isSubmitting}
diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss
index e0ecacbdd4..6f46611de8 100644
--- a/extension/src/popup/components/WarningMessages/styles.scss
+++ b/extension/src/popup/components/WarningMessages/styles.scss
@@ -34,7 +34,7 @@
     background: #32275f;
     border: none;
     border-radius: 0.5rem;
-    color: var(--pal-brand-primary-on) !important;
+    color: var(--color-white) !important;
     font-size: 0.875rem;
     margin-bottom: 1rem;
     padding: 0.875rem;
@@ -80,7 +80,7 @@
   }
 
   p {
-    color: var(--pal-brand-primary-on) !important;
+    color: var(--color-white) !important;
     font-size: var(--font-size-secondary);
     line-height: 1.375rem;
   }
@@ -89,7 +89,7 @@
     flex-grow: 1;
 
     a {
-      color: var(--pal-brand-primary-on);
+      color: var(--color-white);
     }
   }
 }
@@ -122,7 +122,7 @@
     font-weight: var(--font-weight-medium);
     font-size: 1rem;
     line-height: 1.5rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     margin-top: 0.5rem;
   }
 
@@ -142,13 +142,13 @@
     justify-content: space-between;
 
     &__code {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       flex-grow: 1;
       line-height: 1.5rem;
     }
 
     &__domain {
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
       font-size: var(--font-size-secondary);
       line-height: 1.375rem;
     }
@@ -159,17 +159,17 @@
     column-gap: 1rem;
     margin-top: 1rem;
 
-    // TODO - use new SDS button when ready
+    // TODO: replace with SDS error button
     .BasicButton--primary {
-      --Button-color-background: #e5484d;
-      --Button-color-border: #e5484d;
+      --Button-color-background: var(--color-red-60);
+      --Button-color-border: var(--color-red-50);
       background: var(--Button-color-background);
       border-color: var(--Button-color-border);
     }
 
     .BasicButton--primary:hover {
-      border-color: #e5484d;
-      background-color: var(--pal-error);
+      border-color: var(--color-red-50);
+      background-color: var(var(--color-red-70));
     }
   }
 }
@@ -198,7 +198,7 @@
 
   &__header {
     text-transform: uppercase;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     font-weight: var(--font-weight-medium);
     margin-bottom: 0.5rem;
   }
@@ -215,13 +215,13 @@
     justify-content: space-between;
 
     &__code {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       flex-grow: 1;
       line-height: 1.5rem;
     }
 
     &__domain {
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
       font-size: var(--font-size-secondary);
       line-height: 1.375rem;
     }
@@ -230,7 +230,7 @@
   &__list-divider {
     border: none;
     height: 1px;
-    background: var(--pal-border-secondary);
+    background: var(--color-gray-30);
     border-radius: 1rem;
     margin: 1.5rem 0;
   }
@@ -240,7 +240,7 @@
     margin-bottom: 1.5rem;
     column-gap: 0.875rem;
     &__header {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       margin-bottom: 0.25rem;
     }
     &__description {
diff --git a/extension/src/popup/components/account/AccountAssets/styles.scss b/extension/src/popup/components/account/AccountAssets/styles.scss
index 7711c2d607..f5472bbb62 100644
--- a/extension/src/popup/components/account/AccountAssets/styles.scss
+++ b/extension/src/popup/components/account/AccountAssets/styles.scss
@@ -5,7 +5,7 @@ $loader-light-color: #444961;
   &__asset {
     align-items: center;
     display: flex;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     font-size: 1rem;
     line-height: 1.5rem;
 
@@ -28,14 +28,14 @@ $loader-light-color: #444961;
     &--soroban-token {
       height: 32px;
       width: 32px;
-      background: var(--pal-background-secondary);
+      background: var(--color-gray-10);
       border-radius: 2rem;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1rem;
       line-height: 1.5rem;
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
 
     &--error {
diff --git a/extension/src/popup/components/account/AccountHeader/index.tsx b/extension/src/popup/components/account/AccountHeader/index.tsx
index 112866478a..b008a1fd16 100644
--- a/extension/src/popup/components/account/AccountHeader/index.tsx
+++ b/extension/src/popup/components/account/AccountHeader/index.tsx
@@ -111,7 +111,7 @@ export const AccountHeader = ({
               }}
             >
               <div className="AccountHeader__account-list-item__icon">
-                <Icon.PlusCircle />
+                <Icon.AddCircle />
               </div>
               <span className="AccountHeader__account-list-item__link-copy">
                 {t("Create a new Stellar address")}
@@ -184,7 +184,7 @@ export const AccountHeader = ({
               to={ROUTES.addNetwork}
             >
               <div className="AccountHeader__account-list-item__icon">
-                <Icon.PlusCircle />
+                <Icon.AddCircle />
               </div>
               <span className="AccountHeader__account-list-item__link-copy">
                 {t("Add custom network")}
@@ -197,7 +197,7 @@ export const AccountHeader = ({
               to={ROUTES.networkSettings}
             >
               <div className="AccountHeader__account-list-item__icon">
-                <Icon.Tool />
+                <Icon.Settings />
               </div>
               <span className="AccountHeader__account-list-item__link-copy">
                 {t("Manage network settings")}
diff --git a/extension/src/popup/components/account/AccountHeader/styles.scss b/extension/src/popup/components/account/AccountHeader/styles.scss
index a43e74a3f5..4fa85772f2 100644
--- a/extension/src/popup/components/account/AccountHeader/styles.scss
+++ b/extension/src/popup/components/account/AccountHeader/styles.scss
@@ -55,7 +55,7 @@
     padding: 0;
 
     li::before {
-      content: none;
+      content: none !important;
     }
   }
 
@@ -63,7 +63,7 @@
     padding-bottom: 0.5rem;
 
     &__link {
-      color: var(--pal-text-secondary);
+      color: var(--color-gray-60);
       display: flex;
       align-items: center;
     }
@@ -92,7 +92,7 @@
   &__list-divider {
     border: none;
     height: 1px;
-    background: var(--pal-border-secondary);
+    background: var(--color-gray-30);
     border-radius: 1rem;
     margin: 1.2rem 0;
   }
diff --git a/extension/src/popup/components/account/AccountHeaderModal/index.tsx b/extension/src/popup/components/account/AccountHeaderModal/index.tsx
index 9516767f48..c73c929bd0 100644
--- a/extension/src/popup/components/account/AccountHeaderModal/index.tsx
+++ b/extension/src/popup/components/account/AccountHeaderModal/index.tsx
@@ -25,7 +25,7 @@ export const AccountHeaderModal = ({
 
   return (
     <div ref={dropdownRef} className="AccountHeaderModal">
-      {children}
+      <div className="AccountHeaderModal__content">{children}</div>
     </div>
   );
 };
diff --git a/extension/src/popup/components/account/AccountHeaderModal/styles.scss b/extension/src/popup/components/account/AccountHeaderModal/styles.scss
index 16479a0bae..94a108226f 100644
--- a/extension/src/popup/components/account/AccountHeaderModal/styles.scss
+++ b/extension/src/popup/components/account/AccountHeaderModal/styles.scss
@@ -1,9 +1,8 @@
 .AccountHeaderModal {
   width: calc(100% - 2rem);
   margin: 0.5rem 1rem;
-  padding: 0.25rem 1rem;
   border-radius: 0.5rem;
-  background: var(--background-color);
+  background: var(--background-color--overlay);
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -13,4 +12,8 @@
 
   // default max-height on page load
   max-height: 0;
+
+  &__content {
+    padding: 0.25rem 1rem;
+  }
 }
diff --git a/extension/src/popup/components/account/AccountList/styles.scss b/extension/src/popup/components/account/AccountList/styles.scss
index 8db6918a5c..3f0ed751c1 100644
--- a/extension/src/popup/components/account/AccountList/styles.scss
+++ b/extension/src/popup/components/account/AccountList/styles.scss
@@ -11,7 +11,7 @@
     }
 
     .AccountListIdenticon__active-wrapper.active {
-      border-color: var(--pal-brand-primary-on);
+      border-color: var(--color-white);
     }
 
     &::before {
diff --git a/extension/src/popup/components/account/AssetDetail/index.tsx b/extension/src/popup/components/account/AssetDetail/index.tsx
index 57791bdb39..be6193ea13 100644
--- a/extension/src/popup/components/account/AssetDetail/index.tsx
+++ b/extension/src/popup/components/account/AssetDetail/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import { BigNumber } from "bignumber.js";
 import { useTranslation } from "react-i18next";
-import { IconButton, Icon } from "@stellar/design-system";
+import { IconButton, Icon, Notification } from "@stellar/design-system";
 
 import { HorizonOperation, AssetType } from "@shared/api/types";
 import { NetworkDetails } from "@shared/constants/stellar";
@@ -43,7 +43,6 @@ import {
 } from "popup/ducks/transactionSubmission";
 import { AppDispatch } from "popup/App";
 import { useIsOwnedScamAsset } from "popup/helpers/useIsOwnedScamAsset";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import StellarLogo from "popup/assets/stellar-logo.png";
 
 import "./styles.scss";
@@ -212,7 +211,7 @@ export const AssetDetail = ({
         <SimpleBarWrapper>
           <div className="AssetDetail__scam-warning">
             {isOwnedScamAsset && (
-              <InfoBlock variant={InfoBlock.variant.error}>
+              <Notification variant="error" title={t("Error")}>
                 <div>
                   <p>
                     This asset was tagged as fraudulent by stellar.expert, a
@@ -224,7 +223,7 @@ export const AssetDetail = ({
                     say otherwise.
                   </p>
                 </div>
-              </InfoBlock>
+              </Notification>
             )}
           </div>
 
diff --git a/extension/src/popup/components/account/AssetDetail/styles.scss b/extension/src/popup/components/account/AssetDetail/styles.scss
index 480b17b7a8..ee1754fd8a 100644
--- a/extension/src/popup/components/account/AssetDetail/styles.scss
+++ b/extension/src/popup/components/account/AssetDetail/styles.scss
@@ -26,7 +26,7 @@
       height: 0.75rem;
 
       svg {
-        stroke: rgba(255, 255, 255, 0.6);
+        fill: rgba(255, 255, 255, 0.6);
       }
     }
   }
@@ -114,7 +114,7 @@
     }
 
     &__total-available-row {
-      border-top: 1px solid var(--button-bg--tertiary);
+      border-top: 1px solid var(--color-gray-30);
       color: #fff;
       display: flex;
       justify-content: space-between;
diff --git a/extension/src/popup/components/account/NotFundedMessage/index.tsx b/extension/src/popup/components/account/NotFundedMessage/index.tsx
index 841220f0bb..ad14206fe9 100644
--- a/extension/src/popup/components/account/NotFundedMessage/index.tsx
+++ b/extension/src/popup/components/account/NotFundedMessage/index.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { useDispatch } from "react-redux";
 import { Formik, Form } from "formik";
-import { Icon } from "@stellar/design-system";
+import { Button, Icon } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { fundAccount } from "popup/ducks/accountServices";
 
 import "./styles.scss";
@@ -55,7 +54,13 @@ export const NotFundedMessage = ({
         <Formik initialValues={{}} onSubmit={handleFundAccount}>
           {({ isSubmitting }) => (
             <Form className="NotFunded__form">
-              <Button fullWidth isLoading={isSubmitting} type="submit">
+              <Button
+                variant="primary"
+                size="md"
+                isFullWidth
+                isLoading={isSubmitting}
+                type="submit"
+              >
                 {t("Fund with Friendbot")}
               </Button>
             </Form>
diff --git a/extension/src/popup/components/account/NotFundedMessage/styles.scss b/extension/src/popup/components/account/NotFundedMessage/styles.scss
index 5192314843..8c33ee4873 100644
--- a/extension/src/popup/components/account/NotFundedMessage/styles.scss
+++ b/extension/src/popup/components/account/NotFundedMessage/styles.scss
@@ -7,7 +7,7 @@
   &__header {
     display: flex;
     align-items: center;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     font-size: 0.875rem;
     line-height: 1.5rem;
     font-weight: var(--font-weight-medium);
@@ -27,7 +27,7 @@
     padding-top: 0.5rem;
 
     a {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       text-decoration: underline;
     }
   }
diff --git a/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss b/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss
index ab65df3ce4..20604c8be9 100644
--- a/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss
+++ b/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss
@@ -9,7 +9,7 @@
     margin-top: 0.75rem;
 
     &__icon {
-      background: var(--pal-brand-primary);
+      background: var(--color-purple-60);
       border-radius: 10rem;
       height: var(--TransactionDetail--icon-dimension);
       width: var(--TransactionDetail--icon-dimension);
diff --git a/extension/src/popup/components/accountHistory/HistoryItem/index.tsx b/extension/src/popup/components/accountHistory/HistoryItem/index.tsx
index 16d4d1609f..de3a538192 100644
--- a/extension/src/popup/components/accountHistory/HistoryItem/index.tsx
+++ b/extension/src/popup/components/accountHistory/HistoryItem/index.tsx
@@ -95,7 +95,9 @@ export const HistoryItem = ({
   let paymentDifference = "";
   let rowText = "";
   let dateText = date;
-  let IconComponent = <Icon.Shuffle className="HistoryItem__icon--default" />;
+  let IconComponent = (
+    <Icon.RefreshVert className="HistoryItem__icon--default" />
+  );
   let PaymentComponent = null as React.ReactElement | null;
   // TODO should be combined with isPayment
   const isSorobanTx = typeI === 24;
diff --git a/extension/src/popup/components/accountHistory/HistoryItem/styles.scss b/extension/src/popup/components/accountHistory/HistoryItem/styles.scss
index c88716fa3e..10c61c63af 100644
--- a/extension/src/popup/components/accountHistory/HistoryItem/styles.scss
+++ b/extension/src/popup/components/accountHistory/HistoryItem/styles.scss
@@ -1,5 +1,5 @@
 .HistoryItem {
-  color: var(--pal-text-primary);
+  color: var(--color-gray-90);
   cursor: pointer;
 
   &__row {
@@ -7,7 +7,7 @@
   }
 
   &__icon {
-    border: 1px solid var(--pal-border-primary);
+    border: 1px solid var(--color-gray-30);
     border-radius: 2rem;
     display: flex;
     align-items: center;
@@ -26,7 +26,7 @@
     }
 
     &--received {
-      color: var(--pal-success);
+      color: var(--color-green-60);
     }
   }
 
diff --git a/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx b/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx
index 58f583ab97..4627e655a9 100644
--- a/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx
+++ b/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
-
-import { Button } from "popup/basics/buttons/Button";
+import { Button } from "@stellar/design-system";
 
 import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon";
 import { SubviewHeader } from "popup/components/SubviewHeader";
@@ -147,12 +146,13 @@ export const TransactionDetail = ({
       </div>
       {!isCustomNetwork(networkDetails) ? (
         <Button
-          fullWidth
+          size="md"
+          variant="secondary"
+          isFullWidth
           onClick={() => {
             emitMetric(METRIC_NAMES.historyOpenItem);
             openTab(externalUrl);
           }}
-          variant={Button.variant.tertiary}
         >
           {t("View on")} stellar.expert
         </Button>
diff --git a/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss b/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss
index 26dbaceeb4..80ffbabc12 100644
--- a/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss
+++ b/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss
@@ -9,8 +9,8 @@
   padding: var(--popup-vertical-padding) var(--popup--side-padding);
 
   &__header {
-    border-bottom: 1px solid var(--pal-example-details);
-    color: var(--pal-brand-primary-on);
+    border-bottom: 1px solid var(--color-gray-40);
+    color: var(--color-white);
     font-size: 2rem;
     font-weight: var(--font-weight-light);
     padding-bottom: 1.5rem;
@@ -35,7 +35,7 @@
       justify-content: space-between;
 
       div:nth-child(2) {
-        color: var(--pal-success-on);
+        color: var(--color-white);
       }
     }
   }
diff --git a/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx b/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx
index 7962654e22..f062d56135 100644
--- a/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx
+++ b/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx
@@ -3,13 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
 import LedgerApi from "@ledgerhq/hw-app-str";
-import { Icon } from "@stellar/design-system";
+import { Button, Icon } from "@stellar/design-system";
 import { handleSignedHwTransaction } from "@shared/api/internal";
 
 import { POPUP_HEIGHT } from "constants/dimensions";
 
 import { AppDispatch } from "popup/App";
-import { Button } from "popup/basics/buttons/Button";
 import { SubviewHeader } from "popup/components/SubviewHeader";
 import Ledger from "popup/assets/ledger.png";
 import LedgerSigning from "popup/assets/ledger-signing.png";
@@ -125,7 +124,7 @@ export const LedgerSign = () => {
       <div className="LedgerSign__wrapper" ref={ledgerConnectRef}>
         <SubviewHeader
           customBackAction={closeOverlay}
-          customBackIcon={<Icon.X />}
+          customBackIcon={<Icon.Close />}
           title="Connect Ledger"
         />
         <div className="LedgerSign__content">
@@ -149,8 +148,9 @@ export const LedgerSign = () => {
           {isDetectBtnDirty && <LedgerErrorBlock error={connectError} />}
           {!ledgerConnectSuccessful && (
             <Button
-              fullWidth
-              variant={Button.variant.tertiary}
+              size="md"
+              variant="secondary"
+              isFullWidth
               onClick={() => {
                 setIsDetectBtnDirty(true);
                 handleSign();
diff --git a/extension/src/popup/components/hardwareConnect/LedgerSign/styles.scss b/extension/src/popup/components/hardwareConnect/LedgerSign/styles.scss
index b601818b9b..f1375b99d0 100644
--- a/extension/src/popup/components/hardwareConnect/LedgerSign/styles.scss
+++ b/extension/src/popup/components/hardwareConnect/LedgerSign/styles.scss
@@ -7,7 +7,7 @@
   left: 0;
 
   &__success {
-    color: var(--pal-success);
+    color: var(--color-green-60);
     font-size: 0.875rem;
     line-height: 1.375rem;
   }
@@ -25,7 +25,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: var(--background-color);
+    background: var(--background-color--overlay);
 
     // TODO - make a single reusable var when removing PopupWrapper
     padding: var(--popup-vertical-padding) var(--account-view-padding-side) 1rem
@@ -50,7 +50,7 @@
       span {
         font-size: 0.875rem;
         line-height: 1.5rem;
-        color: var(--pal-text-primary);
+        color: var(--color-gray-90);
       }
       img {
         width: 16.875rem;
diff --git a/extension/src/popup/components/identicons/AccountListIdenticon/styles.scss b/extension/src/popup/components/identicons/AccountListIdenticon/styles.scss
index b3fac984a4..e55b07a11b 100644
--- a/extension/src/popup/components/identicons/AccountListIdenticon/styles.scss
+++ b/extension/src/popup/components/identicons/AccountListIdenticon/styles.scss
@@ -7,7 +7,7 @@
     border-radius: 2rem;
     border-width: 1.5px;
     border-style: solid;
-    border-color: var(--pal-border-primary);
+    border-color: var(--color-gray-30);
 
     &.active {
       border-color: rgba(61, 204, 152, 1);
@@ -15,7 +15,7 @@
   }
 
   &__identicon-wrapper {
-    background: var(--pal-brand-primary-on);
+    background: var(--color-white);
     border-radius: 2rem;
     height: 2rem;
     width: 2rem;
@@ -37,7 +37,7 @@
   }
 
   &__account-name {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     margin: 0 0 0.1875rem 0;
     max-height: 1.2rem;
     overflow: hidden;
diff --git a/extension/src/popup/components/identicons/KeyIdenticon/styles.scss b/extension/src/popup/components/identicons/KeyIdenticon/styles.scss
index 616ddfcd5e..8bdee3f071 100644
--- a/extension/src/popup/components/identicons/KeyIdenticon/styles.scss
+++ b/extension/src/popup/components/identicons/KeyIdenticon/styles.scss
@@ -6,8 +6,8 @@
   display: flex;
 
   &--icon {
-    background: var(--pal-info-on);
-    border: 1px solid var(--pal-text-secondary);
+    background: var(--color-white);
+    border: 1px solid var(--color-gray-60);
     border-radius: 2rem;
     display: flex;
     margin-right: 0.5rem;
diff --git a/extension/src/popup/components/manageAssets/AddAsset/index.tsx b/extension/src/popup/components/manageAssets/AddAsset/index.tsx
index a6c7013113..81cbfbed53 100644
--- a/extension/src/popup/components/manageAssets/AddAsset/index.tsx
+++ b/extension/src/popup/components/manageAssets/AddAsset/index.tsx
@@ -1,12 +1,10 @@
 import React, { useRef, useState } from "react";
 import { useSelector } from "react-redux";
-import { Input } from "@stellar/design-system";
+import { Button, Input, Notification } from "@stellar/design-system";
 import { Form, Formik, Field, FieldProps } from "formik";
 import StellarSdk from "stellar-sdk";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { FormRows } from "popup/basics/Forms";
 
 import { settingsNetworkDetailsSelector } from "popup/ducks/settings";
@@ -93,6 +91,7 @@ export const AddAsset = () => {
                 <Field name="assetDomain">
                   {({ field }: FieldProps) => (
                     <Input
+                      fieldSize="md"
                       autoComplete="off"
                       id="assetDomain"
                       placeholder={`${t("Asset domain")}, e.g. “centre.io”`}
@@ -108,7 +107,10 @@ export const AddAsset = () => {
               </div>
               <div className="AddAsset__results">
                 {isCurrencyNotFound ? (
-                  <InfoBlock>{t("Asset not found")}</InfoBlock>
+                  <Notification
+                    variant="primary"
+                    title={t("Asset not found")}
+                  />
                 ) : null}
                 {assetRows.length ? (
                   <>
@@ -132,7 +134,9 @@ export const AddAsset = () => {
               </div>
               <div>
                 <Button
-                  fullWidth
+                  size="md"
+                  variant="primary"
+                  isFullWidth
                   type="submit"
                   isLoading={isSubmitting}
                   disabled={!(dirty && isValid)}
diff --git a/extension/src/popup/components/manageAssets/AddToken/index.tsx b/extension/src/popup/components/manageAssets/AddToken/index.tsx
index 640c84dd28..bab685fca2 100644
--- a/extension/src/popup/components/manageAssets/AddToken/index.tsx
+++ b/extension/src/popup/components/manageAssets/AddToken/index.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Input } from "@stellar/design-system";
+import { Button, Input } from "@stellar/design-system";
 import { Field, Form, Formik, FieldProps } from "formik";
 import { useTranslation } from "react-i18next";
 
 import { ROUTES } from "popup/constants/routes";
 import { METRIC_NAMES } from "popup/constants/metricsNames";
-import { Button } from "popup/basics/buttons/Button";
 import { AppDispatch } from "popup/App";
 import { navigateTo } from "popup/helpers/navigate";
 import { emitMetric } from "helpers/metrics";
@@ -52,6 +51,7 @@ export const AddToken = () => {
                 <Field name="tokenId">
                   {({ field }: FieldProps) => (
                     <Input
+                      fieldSize="md"
                       autoComplete="off"
                       id="tokenId-input"
                       placeholder={t("Enter Token ID")}
@@ -67,7 +67,9 @@ export const AddToken = () => {
                 </Field>
                 <SubmitButtonWrapper>
                   <Button
-                    fullWidth
+                    size="md"
+                    variant="primary"
+                    isFullWidth
                     disabled={!(dirty && isValid)}
                     isLoading={isSubmitting}
                     type="submit"
diff --git a/extension/src/popup/components/manageAssets/ChooseAsset/index.tsx b/extension/src/popup/components/manageAssets/ChooseAsset/index.tsx
index 5e8e2a2c56..e080d821fd 100644
--- a/extension/src/popup/components/manageAssets/ChooseAsset/index.tsx
+++ b/extension/src/popup/components/manageAssets/ChooseAsset/index.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
-import { Icon, Loader } from "@stellar/design-system";
+import { Button, Icon, Loader } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { ROUTES } from "popup/constants/routes";
 import { sortBalances } from "popup/helpers/account";
 import {
@@ -135,7 +134,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
       )}
       <SubviewHeader
         title="Choose Asset"
-        customBackIcon={!managingAssets ? <Icon.X /> : undefined}
+        customBackIcon={!managingAssets ? <Icon.Close /> : undefined}
       />
       <div className="ChooseAsset__wrapper">
         <div
@@ -165,7 +164,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
             {isExperimentalModeEnabled ? (
               <div className="ChooseAsset__button">
                 <Link to={ROUTES.addToken}>
-                  <Button fullWidth variant={Button.variant.tertiary}>
+                  <Button size="md" isFullWidth variant="secondary">
                     {t("Add Soroban token")}
                   </Button>
                 </Link>
@@ -173,7 +172,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
             ) : null}
             <div className="ChooseAsset__button">
               <Link to={ROUTES.searchAsset}>
-                <Button fullWidth variant={Button.variant.tertiary}>
+                <Button size="md" isFullWidth variant="secondary">
                   {t("Add another asset")}
                 </Button>
               </Link>
diff --git a/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss b/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss
index 1bb1cf2e73..904b9d4fb1 100644
--- a/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss
+++ b/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss
@@ -37,7 +37,7 @@
 
   &__button {
     a {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
   }
 }
diff --git a/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss b/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss
index 2ff13cce04..6dd3eb3661 100644
--- a/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss
+++ b/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss
@@ -24,7 +24,7 @@
     justify-content: space-between;
 
     &__info {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       flex-grow: 1;
       line-height: 1.5rem;
       &__header {
@@ -38,13 +38,13 @@
   }
 
   &__bullet {
-    background: var(--pal-brand-primary);
+    background: var(--color-purple-60);
     height: 1.5rem;
     width: 1.5rem;
   }
 
   &__domain {
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     font-size: var(--font-size-secondary);
     line-height: 1.375rem;
   }
diff --git a/extension/src/popup/components/manageAssets/SearchAsset/index.tsx b/extension/src/popup/components/manageAssets/SearchAsset/index.tsx
index fe0250ca91..32aba40d87 100644
--- a/extension/src/popup/components/manageAssets/SearchAsset/index.tsx
+++ b/extension/src/popup/components/manageAssets/SearchAsset/index.tsx
@@ -2,12 +2,10 @@ import React, { useEffect, useCallback, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link, Redirect } from "react-router-dom";
 import { Formik, Form, Field, FieldProps } from "formik";
-import { Input, Loader } from "@stellar/design-system";
+import { Button, Input, Loader, Notification } from "@stellar/design-system";
 import debounce from "lodash/debounce";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { FormRows } from "popup/basics/Forms";
 
 import { ROUTES } from "popup/constants/routes";
@@ -47,7 +45,7 @@ const ResultsHeader = () => {
 
   return (
     <div className="SearchAsset__InfoBlock">
-      <InfoBlock>
+      <Notification variant="primary" title={t("Multiple assets")}>
         <div>
           {t(
             "Multiple assets have a similar code, please check the domain before adding.",
@@ -62,7 +60,7 @@ const ResultsHeader = () => {
             </a>
           </div>
         </div>
-      </InfoBlock>
+      </Notification>
     </div>
   );
 };
@@ -150,6 +148,7 @@ export const SearchAsset = () => {
                 <Field name="asset">
                   {({ field }: FieldProps) => (
                     <Input
+                      fieldSize="md"
                       autoFocus
                       autoComplete="off"
                       id="asset"
@@ -198,7 +197,7 @@ export const SearchAsset = () => {
               {!dirty && hasNoResults ? (
                 <div>
                   <Link to={ROUTES.addAsset}>
-                    <Button fullWidth variant={Button.variant.tertiary}>
+                    <Button size="md" isFullWidth variant="secondary">
                       {t("Add asset manually")}
                     </Button>
                   </Link>
diff --git a/extension/src/popup/components/manageAssets/SearchAsset/styles.scss b/extension/src/popup/components/manageAssets/SearchAsset/styles.scss
index fea0e654d7..a8499a9d26 100644
--- a/extension/src/popup/components/manageAssets/SearchAsset/styles.scss
+++ b/extension/src/popup/components/manageAssets/SearchAsset/styles.scss
@@ -18,7 +18,7 @@
   &__InfoBlock {
     padding-bottom: 1.625rem;
     a {
-      color: var(--pal-brand-primary-on);
+      color: var(--color-white);
       text-decoration: underline;
     }
   }
@@ -46,7 +46,7 @@
     text-align: center;
 
     a {
-      color: var(--pal-brand-primary-on);
+      color: var(--color-white);
       text-decoration: underline;
     }
   }
diff --git a/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss b/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss
index 95f582648f..a2d50f21f9 100644
--- a/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss
+++ b/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss
@@ -22,7 +22,7 @@
     cursor: pointer;
 
     &__info {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       flex-grow: 1;
       line-height: 1.5rem;
       &__header {
@@ -36,13 +36,13 @@
   }
 
   &__bullet {
-    background: var(--pal-brand-primary);
+    background: var(--color-purple-60);
     height: 1.5rem;
     width: 1.5rem;
   }
 
   &__domain {
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     font-size: var(--font-size-secondary);
     line-height: 1.375rem;
   }
diff --git a/extension/src/popup/components/manageAssets/TrustlineError/index.tsx b/extension/src/popup/components/manageAssets/TrustlineError/index.tsx
index 019146b573..0090ced3c2 100644
--- a/extension/src/popup/components/manageAssets/TrustlineError/index.tsx
+++ b/extension/src/popup/components/manageAssets/TrustlineError/index.tsx
@@ -3,9 +3,8 @@ import { useHistory, Link } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import BigNumber from "bignumber.js";
 import { useTranslation } from "react-i18next";
+import { Button, Icon, Notification } from "@stellar/design-system";
 
-import { Button } from "popup/basics/buttons/Button";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import {
   resetSubmission,
   transactionSubmissionSelector,
@@ -59,7 +58,7 @@ const RenderedError = ({
   switch (errorState) {
     case TRUSTLINE_ERROR_STATES.NOT_ENOUGH_LUMENS:
       return (
-        <InfoBlock variant={InfoBlock.variant.error}>
+        <Notification variant="error" title={t("Error")}>
           <div>
             <p className="TrustlineError__title">{t("Not enough lumens")}</p>
             <p>0.500001 XLM {t("are required to add a new asset.")}</p>
@@ -73,16 +72,16 @@ const RenderedError = ({
               </Link>
             </p>
           </div>
-        </InfoBlock>
+        </Notification>
       );
     case TRUSTLINE_ERROR_STATES.ASSET_HAS_BALANCE:
       return (
         <>
-          <InfoBlock variant={InfoBlock.variant.warning}>
-            <p className="TrustlineError__title">
-              {t("This asset has a balance")}
-            </p>
-          </InfoBlock>
+          <Notification
+            variant="warning"
+            title={t("This asset has a balance")}
+            icon={<Icon.Warning />}
+          />
           <p className="TrustlineError__subtitle">
             {t("This asset has a balance of")} <strong>{assetBalance}</strong>.{" "}
             {t("You must have a balance of")} <strong>0</strong>{" "}
@@ -94,18 +93,16 @@ const RenderedError = ({
     default:
       return (
         <>
-          <InfoBlock variant={InfoBlock.variant.error}>
-            <div>
-              <p className="TrustlineError__title">
-                {t("This transaction could not be completed.")}
+          <Notification
+            variant="error"
+            title={t("This transaction could not be completed.")}
+          >
+            {resultCodes ? (
+              <p className="TrustlineError__subtitle">
+                {t("Error code")}: {resultCodes}
               </p>
-              {resultCodes ? (
-                <p className="TrustlineError__subtitle">
-                  {t("Error code")}: {resultCodes}
-                </p>
-              ) : null}
-            </div>
-          </InfoBlock>
+            ) : null}
+          </Notification>
         </>
       );
   }
@@ -156,7 +153,9 @@ export const TrustlineError = ({
       </div>
       <div className="TrustlineError__button">
         <Button
-          fullWidth
+          size="md"
+          isFullWidth
+          variant="primary"
           onClick={() => {
             dispatch(resetSubmission());
             history.goBack();
diff --git a/extension/src/popup/components/manageAssets/TrustlineError/styles.scss b/extension/src/popup/components/manageAssets/TrustlineError/styles.scss
index 904b8e94d5..6bab627d67 100644
--- a/extension/src/popup/components/manageAssets/TrustlineError/styles.scss
+++ b/extension/src/popup/components/manageAssets/TrustlineError/styles.scss
@@ -27,7 +27,7 @@
     }
 
     a {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       text-decoration: underline;
     }
   }
diff --git a/extension/src/popup/components/manageNetwork/NetworkForm/index.tsx b/extension/src/popup/components/manageNetwork/NetworkForm/index.tsx
index 80f5250dca..14f15d66a6 100644
--- a/extension/src/popup/components/manageNetwork/NetworkForm/index.tsx
+++ b/extension/src/popup/components/manageNetwork/NetworkForm/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Checkbox, Input } from "@stellar/design-system";
+import { Button, Checkbox, Input } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 import { Field, FieldProps, Form, Formik } from "formik";
 import { object as YupObject, string as YupString } from "yup";
@@ -8,7 +8,6 @@ import { useHistory, useLocation } from "react-router-dom";
 
 import { AppDispatch } from "popup/App";
 import { SimpleBarWrapper } from "popup/basics/SimpleBarWrapper";
-import { Button } from "popup/basics/buttons/Button";
 import { PillButton } from "popup/basics/buttons/PillButton";
 import { ROUTES } from "popup/constants/routes";
 
@@ -190,9 +189,10 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
 
   const CloseModalButton = () => (
     <Button
+      size="md"
       type="button"
-      fullWidth
-      variant={Button.variant.tertiary}
+      isFullWidth
+      variant="secondary"
       onClick={() => {
         setIsNetworkInUse(false);
         setIsNetworkUrlValid(false);
@@ -205,16 +205,19 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
   const ConfirmRemovalButtons = () => (
     <div className="NetworkForm__removal-buttons">
       <Button
-        fullWidth
+        size="md"
+        isFullWidth
         type="button"
-        variant={Button.variant.tertiary}
+        variant="secondary"
         onClick={() => setIsConfirmingRemoval(false)}
       >
         {t("Cancel")}
       </Button>
       <div className="NetworkForm__remove-button">
         <Button
-          fullWidth
+          size="md"
+          isFullWidth
+          variant="primary"
           type="button"
           onClick={() => {
             handleRemoveNetwork();
@@ -235,17 +238,20 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
     !isEditingDefaultNetworks ? (
       <div className="NetworkForm__editing-buttons">
         <Button
+          size="md"
           onClick={() => history.goBack()}
           type="button"
-          variant={Button.variant.tertiary}
-          fullWidth
+          variant="secondary"
+          isFullWidth
         >
           {t("Cancel")}
         </Button>
         <Button
+          size="md"
+          variant="primary"
           disabled={!isValid}
           isLoading={isSubmitting}
-          fullWidth
+          isFullWidth
           type="submit"
         >
           {t("Save")}
@@ -313,6 +319,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
           {({ dirty, errors, isSubmitting, isValid, touched }) => (
             <Form className="NetworkForm__form">
               <Input
+                fieldSize="md"
                 disabled={isEditingDefaultNetworks}
                 id="networkName"
                 autoComplete="off"
@@ -328,6 +335,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                 placeholder={t("Enter network name")}
               />
               <Input
+                fieldSize="md"
                 disabled={isEditingDefaultNetworks}
                 id="networkUrl"
                 autoComplete="off"
@@ -342,6 +350,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                 placeholder={t("Enter network URL")}
               />
               <Input
+                fieldSize="md"
                 disabled={isEditingDefaultNetworks}
                 id="networkPassphrase"
                 autoComplete="off"
@@ -356,6 +365,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                 placeholder={t("Enter passphrase")}
               />
               <Input
+                fieldSize="md"
                 disabled={isEditingDefaultNetworks}
                 id="friendbotUrl"
                 autoComplete="off"
@@ -373,6 +383,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                 <Field name="isAllowHttpSelected">
                   {({ field }: FieldProps) => (
                     <Checkbox
+                      fieldSize="md"
                       checked={field.value}
                       id="isAllowHttpSelected-input"
                       error={
@@ -381,11 +392,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                           ? errors.isAllowHttpSelected
                           : null
                       }
-                      label={
-                        <span>
-                          {t("Allow connecting to non-HTTPS networks")}
-                        </span>
-                      }
+                      label={t("Allow connecting to non-HTTPS networks")}
                       {...field}
                     />
                   )}
@@ -413,6 +420,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                 <Field name="isSwitchSelected">
                   {({ field }: FieldProps) => (
                     <Checkbox
+                      fieldSize="md"
                       autoComplete="off"
                       id="isSwitchSelected-input"
                       error={
@@ -420,7 +428,7 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
                           ? errors.isSwitchSelected
                           : null
                       }
-                      label={<span>{t("Switch to this network")}</span>}
+                      label={t("Switch to this network")}
                       {...field}
                     />
                   )}
@@ -431,8 +439,10 @@ export const NetworkForm = ({ isEditing }: NetworkFormProps) => {
               ) : (
                 <div className="NetworkForm__add-button">
                   <Button
+                    size="md"
+                    variant="primary"
                     disabled={!(isValid && dirty)}
-                    fullWidth
+                    isFullWidth
                     isLoading={isSubmitting}
                     type="submit"
                   >
diff --git a/extension/src/popup/components/manageNetwork/NetworkForm/styles.scss b/extension/src/popup/components/manageNetwork/NetworkForm/styles.scss
index 3a06032f28..04acb8c6fc 100644
--- a/extension/src/popup/components/manageNetwork/NetworkForm/styles.scss
+++ b/extension/src/popup/components/manageNetwork/NetworkForm/styles.scss
@@ -13,7 +13,7 @@
 
   &__modal {
     &__title {
-      color: var(--pal-brand-primary-on);
+      color: var(--color-white);
       font-weight: var(--font-weight-medium);
       text-transform: uppercase;
     }
diff --git a/extension/src/popup/components/manageNetwork/NetworkModal/index.tsx b/extension/src/popup/components/manageNetwork/NetworkModal/index.tsx
index bfba00bf58..62cf212de5 100644
--- a/extension/src/popup/components/manageNetwork/NetworkModal/index.tsx
+++ b/extension/src/popup/components/manageNetwork/NetworkModal/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
+import { Notification } from "@stellar/design-system";
+import { useTranslation } from "react-i18next";
 
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { LoadingBackground } from "popup/basics/LoadingBackground";
 
 import "./styles.scss";
@@ -15,19 +16,21 @@ export const NetworkModal = ({
   children,
   buttonComponent,
   isConfirmation,
-}: NetworkModalProps) => (
-  <div className="NetworkModal">
-    <LoadingBackground isActive />
-    <div className="NetworkModal__content">
-      <InfoBlock
-        variant={InfoBlock.variant.warning}
-        className={`NetworkModal__infoBlock ${
-          isConfirmation ? "NetworkModal__infoBlock--confirmation" : ""
-        }`}
-      >
-        {children}
-      </InfoBlock>
-      <div className="NetworkModal__button-row">{buttonComponent}</div>
+}: NetworkModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="NetworkModal">
+      <LoadingBackground isActive />
+      <div className="NetworkModal__content">
+        <Notification
+          variant={isConfirmation ? "warning" : "error"}
+          title={t("Network")}
+        >
+          {children}
+        </Notification>
+        <div className="NetworkModal__button-row">{buttonComponent}</div>
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/extension/src/popup/components/manageNetwork/NetworkModal/styles.scss b/extension/src/popup/components/manageNetwork/NetworkModal/styles.scss
index d0fdddb6d5..337ae5a371 100644
--- a/extension/src/popup/components/manageNetwork/NetworkModal/styles.scss
+++ b/extension/src/popup/components/manageNetwork/NetworkModal/styles.scss
@@ -5,25 +5,6 @@
     z-index: calc(var(--z-index-tooltip) + 1);
     width: calc(100% - (var(--popup--side-padding) * 2));
   }
-  &__infoBlock {
-    .InfoBlock--warning {
-      background: rgba(84, 27, 31, 1);
-
-      svg {
-        stroke: rgba(242, 85, 90, 1);
-      }
-    }
-
-    &--confirmation {
-      .InfoBlock--warning {
-        background: rgba(74, 41, 0, 1);
-
-        svg {
-          stroke: rgba(255, 178, 36, 1);
-        }
-      }
-    }
-  }
 
   &__button-row {
     position: absolute;
diff --git a/extension/src/popup/components/manageNetwork/NetworkSettings/index.tsx b/extension/src/popup/components/manageNetwork/NetworkSettings/index.tsx
index cecb296b8b..a9dcc8dbb9 100644
--- a/extension/src/popup/components/manageNetwork/NetworkSettings/index.tsx
+++ b/extension/src/popup/components/manageNetwork/NetworkSettings/index.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
+import { Button } from "@stellar/design-system";
 
 import { SimpleBarWrapper } from "popup/basics/SimpleBarWrapper";
 import { ROUTES } from "popup/constants/routes";
 import { ListNavLink, ListNavLinkWrapper } from "popup/basics/ListNavLink";
-import { Button } from "popup/basics/buttons/Button";
 
 import { isActiveNetwork } from "helpers/stellar";
 import { navigateTo } from "popup/helpers/navigate";
@@ -64,8 +64,9 @@ export const NetworkSettings = () => {
       </SimpleBarWrapper>
       <div className="NetworkSettings__bottom">
         <Button
-          fullWidth
-          variant={Button.variant.tertiary}
+          size="md"
+          isFullWidth
+          variant="secondary"
           onClick={() => navigateTo(ROUTES.addNetwork)}
         >
           {t("Add custom network")}
diff --git a/extension/src/popup/components/mnemonicPhrase/CheckButton/styles.scss b/extension/src/popup/components/mnemonicPhrase/CheckButton/styles.scss
index 1c405d2c29..98022977c3 100644
--- a/extension/src/popup/components/mnemonicPhrase/CheckButton/styles.scss
+++ b/extension/src/popup/components/mnemonicPhrase/CheckButton/styles.scss
@@ -1,7 +1,7 @@
 .ButtonLabel {
-  border: 1px solid var(--pal-background-secondary);
+  border: 1px solid var(--color-gray-10);
   border-radius: 6.25rem;
-  color: var(--pal-text-primary);
+  color: var(--color-gray-90);
   cursor: pointer;
   display: inline-block;
   font-weight: var(--font-weight-medium);
@@ -15,7 +15,7 @@
   display: none;
 
   &:checked + label {
-    background: var(--pal-background-secondary);
+    background: var(--color-gray-10);
     color: white;
   }
 }
diff --git a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/index.tsx b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/index.tsx
index 08fda31f34..e6e82a0c39 100644
--- a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Form, Formik, FormikHelpers, FormikValues } from "formik";
 import { useSelector, useDispatch } from "react-redux";
-import { Card } from "@stellar/design-system";
+import { Button, Card } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -9,7 +9,6 @@ import {
   authErrorSelector,
 } from "popup/ducks/accountServices";
 import { FormError, SubmitButtonWrapper } from "popup/basics/Forms";
-import { Button } from "popup/basics/buttons/Button";
 
 import {
   OnboardingScreen,
@@ -84,7 +83,7 @@ export const ConfirmMnemonicPhrase = ({
           {({ dirty, isSubmitting, handleChange }) => (
             <Form className="ConfirmMnemonicPhrase--form-wrapper">
               <div className="ConfirmMnemonicPhrase__selected-words-wrapper">
-                <Card variant={Card.variant.highlight}>
+                <Card variant="secondary">
                   <ul
                     className="ConfirmMnemonicPhrase__selected-words-text"
                     onCopy={(e) => e.preventDefault()}
@@ -111,8 +110,10 @@ export const ConfirmMnemonicPhrase = ({
               </div>
               <SubmitButtonWrapper>
                 <Button
+                  size="md"
                   data-testid="display-mnemonic-phrase-confirm-btn"
-                  fullWidth
+                  isFullWidth
+                  variant="primary"
                   type="submit"
                   disabled={!dirty && !!joinSelectedWords().length}
                   isLoading={isSubmitting}
diff --git a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
index f700505fb3..d445e804e8 100644
--- a/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
+++ b/extension/src/popup/components/mnemonicPhrase/ConfirmMnemonicPhrase/styles.scss
@@ -13,7 +13,7 @@
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: var(--font-weight-normal);
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     text-align: center;
 
     p {
@@ -38,7 +38,7 @@
     font-weight: var(--font-weight-medium);
     font-size: 1rem;
     line-height: 1.5rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     list-style-type: none;
     padding: 0;
   }
diff --git a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
index e2578e1edd..1905051773 100644
--- a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/index.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Button, Icon, Notification } from "@stellar/design-system";
 
-import { InfoBlock } from "popup/basics/InfoBlock";
-import { Button } from "popup/basics/buttons/Button";
 import { ROUTES } from "popup/constants/routes";
 import { navigateTo } from "popup/helpers/navigate";
 
@@ -49,16 +48,19 @@ export const DisplayMnemonicPhrase = ({
           </div>
         </OnboardingHalfScreen>
         <OnboardingHalfScreen className="DisplayMnemonicPhrase__half-screen">
-          <InfoBlock variant={InfoBlock.variant.warning}>
-            <div>
-              <strong>{t("IMPORTANT WARNING")}</strong>
-              <p>{t("Never disclose your recovery phrase")}!</p>
-            </div>
-          </InfoBlock>
+          <Notification
+            variant="warning"
+            title={t("IMPORTANT WARNING")}
+            icon={<Icon.Warning />}
+          >
+            {t("Never disclose your recovery phrase")}!
+          </Notification>
           <MnemonicDisplay mnemonicPhrase={mnemonicPhrase} />
           <Button
+            size="md"
             data-testid="display-mnemonic-phrase-next-btn"
-            fullWidth
+            isFullWidth
+            variant="primary"
             onClick={() => {
               navigateTo(ROUTES.mnemonicPhraseConfirm);
             }}
diff --git a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/styles.scss b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/styles.scss
index e9ef0cf516..e93adeaded 100644
--- a/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/styles.scss
+++ b/extension/src/popup/components/mnemonicPhrase/DisplayMnemonicPhrase/styles.scss
@@ -14,7 +14,7 @@
     }
 
     strong {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
   }
 
@@ -53,10 +53,10 @@
 
   .IconButton {
     &__label {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
     svg {
-      stroke: var(--pal-text-primary);
+      fill: var(--color-gray-90);
     }
   }
 }
diff --git a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
index a145adb2a6..bbd822b08f 100644
--- a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
+++ b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/index.tsx
@@ -14,8 +14,8 @@ export const generateMnemonicPhraseDisplay = ({
   mnemonicPhrase,
 }: generateMnemonicPhraseDisplayProps) =>
   mnemonicPhrase.split(" ").map((word: string) => {
-    /* 
-      As a security measure, we want to prevent writing the mnemonic phrase to the DOM. 
+    /*
+      As a security measure, we want to prevent writing the mnemonic phrase to the DOM.
       The browser can leak this string into memory where a hacker could possibly access it.
       A solution here is to insert random, hidden words into the string so the browser is
       only has an obfuscated menemonic phrase that can leak into memory.
@@ -62,7 +62,7 @@ export const MnemonicDisplay = ({
   isPopupView,
 }: MnemonicDisplayProps) => (
   <div className="MnemonicDisplay">
-    <Card variant={Card.variant.highlight}>
+    <Card variant="secondary">
       <ol
         onCopy={(e) => e.preventDefault()}
         className={`MnemonicDisplay__ordered-list ${
diff --git a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss
index 6dd0b63872..6c9a836dac 100644
--- a/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss
+++ b/extension/src/popup/components/mnemonicPhrase/MnemonicDisplay/styles.scss
@@ -24,7 +24,7 @@
     padding-left: 1rem;
 
     &::before {
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
       content: none;
     }
   }
diff --git a/extension/src/popup/components/sendPayment/SendAmount/AssetSelect/styles.scss b/extension/src/popup/components/sendPayment/SendAmount/AssetSelect/styles.scss
index 2c2a7f4f2c..b2fdbb7f1f 100644
--- a/extension/src/popup/components/sendPayment/SendAmount/AssetSelect/styles.scss
+++ b/extension/src/popup/components/sendPayment/SendAmount/AssetSelect/styles.scss
@@ -1,7 +1,7 @@
 .AssetSelect {
   &__wrapper {
     height: 3.5rem;
-    border: solid 1px var(--pal-background-secondary);
+    border: solid 1px var(--color-gray-10);
     border-radius: 0.5rem;
     width: 100%;
     display: flex;
@@ -28,14 +28,14 @@
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: var(--font-weight-medium);
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__light-copy {
     font-size: 0.875rem;
     line-height: 1rem;
     font-weight: var(--font-weight-normal);
-    color: var(--pal-text-secondary);
+    color: var(--color-gray-60);
 
     &__label {
       min-width: 2rem;
diff --git a/extension/src/popup/components/sendPayment/SendAmount/SendType/index.tsx b/extension/src/popup/components/sendPayment/SendAmount/SendType/index.tsx
index 9223e65ba2..c05fdc2848 100644
--- a/extension/src/popup/components/sendPayment/SendAmount/SendType/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendAmount/SendType/index.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Field, Form, Formik } from "formik";
-import { DetailsTooltip, Icon, TextLink } from "@stellar/design-system";
+import { Button, Icon, Link } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { navigateTo } from "popup/helpers/navigate";
 import { emitMetric } from "helpers/metrics";
 import { METRIC_NAMES } from "popup/constants/metricsNames";
@@ -17,6 +16,7 @@ import {
 } from "popup/ducks/transactionSubmission";
 
 import "./styles.scss";
+import { InfoTooltip } from "popup/basics/InfoTooltip";
 
 enum PAYMENT_TYPES {
   REGULAR = "REGULAR",
@@ -44,7 +44,9 @@ const RadioCheck = ({
     <label className="SendType--label SendType--radio-label">
       <div className="SendType__content-wrapper">
         <div className="SendType__content-wrapper__title">
-          {title}
+          <InfoTooltip infoText={tooltipDetails} placement="bottom-start">
+            {title}
+          </InfoTooltip>
           {subtext && (
             <span className="SendType__content-wrapper__subtext">
               {subtext}
@@ -59,12 +61,6 @@ const RadioCheck = ({
         />
       </div>
     </label>
-    <DetailsTooltip
-      tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM_START}
-      details={tooltipDetails}
-    >
-      <span></span>
-    </DetailsTooltip>
     <div
       className={`SendType--radio-check ${
         selected ? "SendType--radio-check--active" : ""
@@ -100,7 +96,7 @@ export const SendType = () => {
       <SubviewHeader
         title={t("Send Type")}
         customBackAction={() => navigateTo(ROUTES.sendPaymentAmount)}
-        customBackIcon={<Icon.X />}
+        customBackIcon={<Icon.Close />}
       />
       <Formik
         initialValues={{
@@ -137,22 +133,23 @@ export const SendType = () => {
                   {t(
                     "The destination account can receive a different asset, the received amount is defined by the available conversion rates",
                   )}{" "}
-                  <TextLink
-                    variant={TextLink.variant.secondary}
+                  <Link
+                    variant="secondary"
                     href="https://www.ledger.com/stellar-wallet"
                     rel="noreferrer"
                     target="_blank"
                   >
                     {t("Learn more")}
-                  </TextLink>
+                  </Link>
                 </span>
               }
               selected={values.paymentType === PAYMENT_TYPES.PATH_PAYMENT}
             />
             <div className="SendPayment__btn-continue">
               <Button
-                fullWidth
-                variant={Button.variant.tertiary}
+                size="md"
+                isFullWidth
+                variant="secondary"
                 onClick={() => submitForm(values)}
               >
                 {t("Done")}
diff --git a/extension/src/popup/components/sendPayment/SendAmount/SendType/styles.scss b/extension/src/popup/components/sendPayment/SendAmount/SendType/styles.scss
index ea0028f57d..ded7d33080 100644
--- a/extension/src/popup/components/sendPayment/SendAmount/SendType/styles.scss
+++ b/extension/src/popup/components/sendPayment/SendAmount/SendType/styles.scss
@@ -21,7 +21,7 @@
       flex-direction: column;
     }
     &__subtext {
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
     }
   }
 
diff --git a/extension/src/popup/components/sendPayment/SendAmount/index.tsx b/extension/src/popup/components/sendPayment/SendAmount/index.tsx
index 1a0c1aea9f..fc040dde92 100644
--- a/extension/src/popup/components/sendPayment/SendAmount/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendAmount/index.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import debounce from "lodash/debounce";
 import { BigNumber } from "bignumber.js";
 import { useFormik } from "formik";
-import { Icon, Loader } from "@stellar/design-system";
+import { Button, Icon, Loader, Notification } from "@stellar/design-system";
 import StellarSdk from "stellar-sdk";
 import { useTranslation } from "react-i18next";
 
@@ -12,8 +12,6 @@ import {
   AssetSelect,
   PathPayAssetSelect,
 } from "popup/components/sendPayment/SendAmount/AssetSelect";
-import { InfoBlock } from "popup/basics/InfoBlock";
-import { Button } from "popup/basics/buttons/Button";
 import { PillButton } from "popup/basics/buttons/PillButton";
 import { LoadingBackground } from "popup/basics/LoadingBackground";
 import { ROUTES } from "popup/constants/routes";
@@ -348,29 +346,34 @@ export const SendAmount = ({
     }
     if (formik.errors.amount === AMOUNT_ERROR.TOO_HIGH) {
       return (
-        <InfoBlock variant={InfoBlock.variant.error}>
-          {t("Entered amount is higher than your balance")}
-        </InfoBlock>
+        <Notification
+          variant="error"
+          title={t("Entered amount is higher than your balance")}
+        />
       );
     }
     if (formik.errors.amount === AMOUNT_ERROR.DEC_MAX) {
       return (
-        <InfoBlock variant={InfoBlock.variant.error}>
-          7 {t("digits after the decimal allowed")}
-        </InfoBlock>
+        <Notification
+          variant="error"
+          title={`7 ${t("digits after the decimal allowed")}`}
+        />
       );
     }
     if (formik.errors.amount === AMOUNT_ERROR.SEND_MAX) {
       return (
-        <InfoBlock variant={InfoBlock.variant.error}>
-          {t("Entered amount is higher than the maximum send amount")} (
-          {formatAmountPreserveCursor(
+        <Notification
+          variant="error"
+          title={`${t(
+            "Entered amount is higher than the maximum send amount",
+          )} (
+          ${formatAmountPreserveCursor(
             TX_SEND_MAX,
             formik.values.amount,
             getAssetDecimals(asset, tokenBalances, isToken),
           )}
-          )
-        </InfoBlock>
+          )`}
+        />
       );
     }
     return null;
@@ -403,7 +406,7 @@ export const SendAmount = ({
                 onClick={() => navigateTo(ROUTES.sendPaymentType)}
                 className="SendAmount__icon-slider"
               >
-                <Icon.Sliders />
+                <Icon.MoreHoriz />
               </button>
             )
           }
@@ -522,6 +525,7 @@ export const SendAmount = ({
             </SimpleBarWrapper>
             <div className="SendAmount__btn-continue">
               <Button
+                size="md"
                 disabled={
                   loadingRate ||
                   formik.values.amount === "0" ||
@@ -530,8 +534,8 @@ export const SendAmount = ({
                   (showSourceAndDestAsset && !destinationAmount)
                 }
                 data-testid="send-amount-btn-continue"
-                fullWidth
-                variant={Button.variant.tertiary}
+                isFullWidth
+                variant="secondary"
                 type="submit"
               >
                 {t("Continue")}
diff --git a/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/index.tsx b/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/index.tsx
index 8acfd506f2..c5a31100a7 100644
--- a/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import get from "lodash/get";
-import { Icon, TextLink } from "@stellar/design-system";
+import { Button, Icon, Link, Notification } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 import StellarSdk, { Account } from "stellar-sdk";
 import { AppDispatch } from "popup/App";
@@ -9,9 +9,6 @@ import { AppDispatch } from "popup/App";
 import { AssetIcons, ErrorMessage } from "@shared/api/types";
 import { stellarSdkServer } from "@shared/api/helpers/stellarSdkServer";
 
-import { InfoBlock } from "popup/basics/InfoBlock";
-import { Button } from "popup/basics/buttons/Button";
-
 import { getAssetFromCanonical, xlmToStroop } from "helpers/stellar";
 import { navigateTo } from "popup/helpers/navigate";
 import { RESULT_CODES, getResultCodes } from "popup/helpers/parseTransaction";
@@ -171,7 +168,7 @@ export const SubmitSuccess = ({ viewDetails }: { viewDetails: () => void }) => {
         {formatAmount(amount)} {sourceAsset.code}
       </div>
       <div className="SubmitResult__icon SubmitResult__success">
-        <Icon.ArrowDownCircle />
+        <Icon.ArrowCircleDown />
       </div>
       <div className="SubmitResult__identicon">
         {isSwap ? (
@@ -189,7 +186,7 @@ export const SubmitSuccess = ({ viewDetails }: { viewDetails: () => void }) => {
       </div>
       <div className="SubmitResult__suggest-remove-tl">
         {suggestRemoveTrustline && (
-          <InfoBlock>
+          <Notification variant="primary" title={t("Remove trustline")}>
             <span className="remove-tl-contents">
               <p>
                 Your {sourceAsset.code} balance is now empty. Would you like to
@@ -203,14 +200,16 @@ export const SubmitSuccess = ({ viewDetails }: { viewDetails: () => void }) => {
                 Remove Trustline
               </button>
             </span>
-          </InfoBlock>
+          </Notification>
         )}
       </div>
       <div className="SubmitResult__button-rows__success">
-        <Button variant={Button.variant.tertiary} onClick={() => viewDetails()}>
+        <Button size="md" variant="secondary" onClick={() => viewDetails()}>
           {t("Details")}
         </Button>
         <Button
+          size="md"
+          variant="primary"
           onClick={() => {
             navigateTo(ROUTES.account);
           }}
@@ -259,55 +258,57 @@ export const SubmitFail = () => {
       case RESULT_CODES.tx_insufficient_fee:
         errorDetails.title = t("Insufficient Fee");
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
+          <Notification variant="error" title={t("Network fees")}>
             <div>
               {t(
                 "Fees can vary depending on the network congestion. Please try using the suggested fee and try again.",
               )}
-              <TextLink
-                underline
-                variant={TextLink.variant.secondary}
+              <Link
+                isUnderline
+                variant="secondary"
                 href="https://developers.stellar.org/docs/glossary/fees/"
                 rel="noreferrer"
                 target="_blank"
               >
                 {t("Learn more about fees")}
-              </TextLink>
+              </Link>
             </div>
-          </InfoBlock>
+          </Notification>
         );
         break;
       case RESULT_CODES.op_underfunded:
         errorDetails.title = t("Insufficient Balance");
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
-            <div>
-              {t(
-                "Your account balance is not sufficient for this transaction. Please review the transaction and try again.",
-              )}
-            </div>
-          </InfoBlock>
+          <Notification
+            variant="error"
+            title={t(
+              "Your account balance is not sufficient for this transaction. Please review the transaction and try again.",
+            )}
+          />
         );
         break;
       case RESULT_CODES.op_no_destination:
         errorDetails.title = t("Destination account doesn’t exist");
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
+          <Notification
+            variant="error"
+            title={t("The destination account doesn’t exist")}
+          >
             <div>
               {t(
                 "The destination account doesn’t exist. Make sure it is a funded Stellar account and try again.",
               )}
-              <TextLink
-                underline
-                variant={TextLink.variant.secondary}
+              <Link
+                isUnderline
+                variant="secondary"
                 href="https://developers.stellar.org/docs/tutorials/create-account/#create-account"
                 rel="noreferrer"
                 target="_blank"
               >
                 {t("Learn more about account funding")}
-              </TextLink>
+              </Link>
             </div>
-          </InfoBlock>
+          </Notification>
         );
         break;
       case RESULT_CODES.op_no_trust:
@@ -315,62 +316,67 @@ export const SubmitFail = () => {
           "Destination account does not accept this asset",
         );
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
+          <Notification
+            variant="error"
+            title={t(
+              "The destination account does not accept the asset you’re sending",
+            )}
+          >
             <div>
               {t(
                 "The destination account does not accept the asset you’re sending. The destination account must opt to accept this asset before receiving it.",
               )}
-              <TextLink
-                underline
-                variant={TextLink.variant.secondary}
+              <Link
+                isUnderline
+                variant="secondary"
                 href="https://developers.stellar.org/docs/issuing-assets/anatomy-of-an-asset/#trustlines"
                 rel="noreferrer"
                 target="_blank"
               >
                 {t("Learn more about trustlines")}
-              </TextLink>
+              </Link>
             </div>
-          </InfoBlock>
+          </Notification>
         );
         break;
       case RESULT_CODES.op_under_dest_min:
         errorDetails.title = t("Conversion rate changed");
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
+          <Notification variant="error" title={t("Conversion rate")}>
             <div>
               {t("Please check the new rate and try again.")}
-              <TextLink
-                underline
-                variant={TextLink.variant.secondary}
+              <Link
+                isUnderline
+                variant="secondary"
                 href="https://developers.stellar.org/docs/start/list-of-operations/#path-payment-strict-send"
                 rel="noreferrer"
                 target="_blank"
               >
                 {t("Learn more about conversion rates")}
-              </TextLink>
+              </Link>
             </div>
-          </InfoBlock>
+          </Notification>
         );
         break;
       case RESULT_CODES.op_low_reserve:
         errorDetails.title = t("Account minimum balance is too low");
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
+          <Notification variant="error" title={t("New account")}>
             <div>
               {t(
                 "To create a new account you need to send at least 1 XLM to it.",
               )}
-              <TextLink
-                underline
-                variant={TextLink.variant.secondary}
+              <Link
+                isUnderline
+                variant="secondary"
                 href="https://developers.stellar.org/docs/start/list-of-operations/#path-payment-strict-send"
                 rel="noreferrer"
                 target="_blank"
               >
                 {t("Learn more about conversion rates")}
-              </TextLink>
+              </Link>
             </div>
-          </InfoBlock>
+          </Notification>
         );
         break;
       default:
@@ -379,9 +385,10 @@ export const SubmitFail = () => {
           isSwap ? t("Swap failed") : t("Transaction failed")
         }`;
         errorDetails.errorBlock = (
-          <InfoBlock variant={InfoBlock.variant.error}>
-            <div>{t("One or more operations in this transaction failed.")}</div>
-          </InfoBlock>
+          <Notification
+            variant="error"
+            title={t("One or more operations in this transaction failed.")}
+          />
         );
     }
     return errorDetails;
@@ -404,8 +411,9 @@ export const SubmitFail = () => {
       <div className="SubmitResult__error-block">{errorDetails.errorBlock}</div>
       <div className="SubmitResult__button-rows__fail">
         <Button
-          fullWidth
-          variant={Button.variant.tertiary}
+          isFullWidth
+          variant="secondary"
+          size="md"
           onClick={() => {
             navigateTo(ROUTES.account);
           }}
diff --git a/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/styles.scss b/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/styles.scss
index 6ae6db37f7..6f5be83d92 100644
--- a/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/styles.scss
+++ b/extension/src/popup/components/sendPayment/SendConfirm/SubmitResult/styles.scss
@@ -23,7 +23,7 @@
   &__amount {
     font-size: 1.5rem;
     line-height: 2.25rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     margin-bottom: 1.5rem;
     text-align: center;
   }
@@ -40,20 +40,20 @@
 
   &__success {
     svg {
-      stroke: var(--pal-success);
+      fill: var(--color-green-60);
     }
   }
 
   &__fail {
     svg {
-      stroke: var(--pal-error);
+      fill: var(--color-red-60);
     }
   }
 
   &__identicon {
     display: flex;
     align-items: center;
-    border: 1px solid var(--pal-background-secondary);
+    border: 1px solid var(--color-gray-10);
     border-radius: 100px;
     padding: 0.25rem 0.5rem;
 
@@ -66,7 +66,7 @@
 
     .IdenticonImg {
       @extend %identiconImg;
-      background: var(--pal-brand-primary-on);
+      background: var(--color-white);
     }
 
     .AccountAssets__asset--logo {
@@ -82,7 +82,7 @@
     }
 
     span {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       font-size: 0.875rem;
       line-height: 1.375rem;
     }
@@ -154,7 +154,7 @@
   align-items: center;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--pal-text-primary);
+  color: var(--color-gray-90);
 
   svg {
     width: 1rem;
diff --git a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
index 79681b7ad0..4a0c08b526 100644
--- a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
@@ -5,7 +5,7 @@ import BigNumber from "bignumber.js";
 import StellarSdk, { Asset } from "stellar-sdk";
 import * as SorobanClient from "soroban-client";
 import { Types } from "@stellar/wallet-sdk";
-import { Card, Loader, Icon } from "@stellar/design-system";
+import { Card, Loader, Icon, Button } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { SorobanContext } from "popup/SorobanContext";
@@ -25,7 +25,6 @@ import { AssetIcons, ActionStatus } from "@shared/api/types";
 import { getIconUrlFromIssuer } from "@shared/api/helpers/getIconUrlFromIssuer";
 import { accountIdentifier, numberToI128 } from "@shared/api/helpers/soroban";
 
-import { Button } from "popup/basics/buttons/Button";
 import { AppDispatch } from "popup/App";
 import { ROUTES } from "popup/constants/routes";
 import {
@@ -440,8 +439,9 @@ export const TransactionDetails = ({ goBack }: { goBack: () => void }) => {
   const StellarExpertButton = () =>
     !isCustomNetwork(networkDetails) && !isToken ? (
       <Button
-        fullWidth
-        variant={Button.variant.tertiary}
+        size="md"
+        isFullWidth
+        variant="secondary"
         onClick={() =>
           openTab(
             `${getStellarExpertUrl(networkDetails)}/tx/${transactionHash}`,
@@ -477,7 +477,9 @@ export const TransactionDetails = ({ goBack }: { goBack: () => void }) => {
           }
           customBackAction={goBack}
           customBackIcon={
-            submission.submitStatus === ActionStatus.SUCCESS ? <Icon.X /> : null
+            submission.submitStatus === ActionStatus.SUCCESS ? (
+              <Icon.Close />
+            ) : null
           }
         />
         {!(isPathPayment || isSwap) && (
@@ -578,7 +580,8 @@ export const TransactionDetails = ({ goBack }: { goBack: () => void }) => {
           ) : (
             <div className="TransactionDetails__bottom-wrapper__buttons">
               <Button
-                variant={Button.variant.tertiary}
+                size="md"
+                variant="secondary"
                 onClick={() => {
                   navigateTo(ROUTES.account);
                 }}
@@ -586,6 +589,8 @@ export const TransactionDetails = ({ goBack }: { goBack: () => void }) => {
                 {t("Cancel")}
               </Button>
               <Button
+                size="md"
+                variant="primary"
                 disabled={isSubmitDisabled}
                 onClick={handleSend}
                 isLoading={hwStatus === ShowOverlayStatus.IN_PROGRESS}
diff --git a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss
index c8fbb7e415..9691da790d 100644
--- a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss
+++ b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/styles.scss
@@ -32,7 +32,7 @@
     justify-content: space-between;
 
     &__right {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       overflow-y: hidden;
       max-width: 10rem;
     }
@@ -54,7 +54,7 @@
 
     &__header {
       display: flex;
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       font-weight: var(--font-weight-medium);
       align-items: center;
       span {
@@ -76,7 +76,7 @@
       width: 1rem;
       height: 1rem;
       border-radius: 1rem;
-      background: var(--pal-brand-primary-on);
+      background: var(--color-white);
       margin-right: 0.5rem;
     }
   }
@@ -119,12 +119,12 @@
   display: flex;
   flex-direction: column;
   border-radius: 0.5rem;
-  border: 1px solid var(--pal-background-secondary);
+  border: 1px solid var(--color-gray-10);
   position: relative;
   margin-bottom: 1.5rem;
 
   &__row:first-child {
-    border-bottom: 1px solid var(--pal-background-secondary);
+    border-bottom: 1px solid var(--color-gray-10);
   }
 
   &__row {
@@ -138,12 +138,12 @@
       display: flex;
       align-items: center;
       font-weight: var(--font-weight-medium);
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
 
     &__right {
       font-weight: var(--font-weight-medium);
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
   }
 
@@ -153,7 +153,7 @@
     left: calc((100% - 2.5rem) / 2);
     width: 2.5rem;
     height: 2.5rem;
-    border: 1px solid var(--pal-background-secondary);
+    border: 1px solid var(--color-gray-10);
     border-radius: 2.5rem;
     z-index: 2;
     display: flex;
diff --git a/extension/src/popup/components/sendPayment/SendSettings/Slippage/index.tsx b/extension/src/popup/components/sendPayment/SendSettings/Slippage/index.tsx
index 8338b5baa8..4a641138c4 100644
--- a/extension/src/popup/components/sendPayment/SendSettings/Slippage/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendSettings/Slippage/index.tsx
@@ -3,15 +3,8 @@ import { useDispatch, useSelector } from "react-redux";
 import { Field, Form, Formik, FieldProps } from "formik";
 import { object as YupObject, number as YupNumber } from "yup";
 import { useTranslation } from "react-i18next";
-import {
-  Input,
-  Icon,
-  TextLink,
-  Card,
-  DetailsTooltip,
-} from "@stellar/design-system";
+import { Input, Icon, Link, Card, Button } from "@stellar/design-system";
 
-import { Button } from "popup/basics/buttons/Button";
 import {
   transactionDataSelector,
   saveAllowedSlippage,
@@ -19,6 +12,7 @@ import {
 import { navigateTo } from "popup/helpers/navigate";
 import { ROUTES } from "popup/constants/routes";
 import { PopupWrapper } from "popup/basics/PopupWrapper";
+import { InfoTooltip } from "popup/basics/InfoTooltip";
 import { SubviewHeader } from "popup/components/SubviewHeader";
 
 import "./styles.scss";
@@ -43,19 +37,19 @@ export const SendSettingsSlippage = ({ previous }: { previous: ROUTES }) => {
       <SubviewHeader
         title="Allowed Slippage"
         customBackAction={() => navigateTo(previous)}
-        customBackIcon={<Icon.X />}
+        customBackIcon={<Icon.Close />}
         rightButton={
-          <DetailsTooltip
+          <InfoTooltip
             // TODO - add link to FAQ when added
-            details={
+            infoText={
               <span>
                 {t("Allowed downward variation in the destination amount")}
               </span>
             }
-            tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
+            placement="bottom"
           >
-            <span></span>
-          </DetailsTooltip>
+            <></>
+          </InfoTooltip>
         }
       />
       <div className="Slippage">
@@ -120,6 +114,7 @@ export const SendSettingsSlippage = ({ previous }: { previous: ROUTES }) => {
                 <Field name="customSlippage">
                   {({ field }: FieldProps) => (
                     <Input
+                      fieldSize="md"
                       id="custom-input"
                       placeholder={`${t("Custom")} %`}
                       type="number"
@@ -133,21 +128,24 @@ export const SendSettingsSlippage = ({ previous }: { previous: ROUTES }) => {
                   )}
                 </Field>
               </div>
-              <TextLink
-                underline
-                variant={TextLink.variant.secondary}
+              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+              <Link
+                isUnderline
+                variant="secondary"
+                role="button"
                 onClick={() => {
                   setFieldValue("presetSlippage", defaultSlippage);
                   setFieldValue("customSlippage", "");
                 }}
               >
                 {t("Set default")}
-              </TextLink>
+              </Link>
               <div className="SendPayment__btn-continue">
                 <Button
-                  fullWidth
+                  size="md"
+                  isFullWidth
                   disabled={!values.presetSlippage && !values.customSlippage}
-                  variant={Button.variant.tertiary}
+                  variant="secondary"
                   type="submit"
                 >
                   {t("Done")}
diff --git a/extension/src/popup/components/sendPayment/SendSettings/TransactionFee/index.tsx b/extension/src/popup/components/sendPayment/SendSettings/TransactionFee/index.tsx
index eaf67590bc..377381ebeb 100644
--- a/extension/src/popup/components/sendPayment/SendSettings/TransactionFee/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendSettings/TransactionFee/index.tsx
@@ -3,15 +3,15 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { Formik, Form, Field, FieldProps } from "formik";
 import { object as YupObject, number as YupNumber } from "yup";
-import { Input, Icon, TextLink, DetailsTooltip } from "@stellar/design-system";
+import { Input, Icon, Link, Button } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { navigateTo } from "popup/helpers/navigate";
 import { useNetworkFees } from "popup/helpers/useNetworkFees";
 import { ROUTES } from "popup/constants/routes";
 import { PopupWrapper } from "popup/basics/PopupWrapper";
 import { FormRows } from "popup/basics/Forms";
+import { InfoTooltip } from "popup/basics/InfoTooltip";
 import { SubviewHeader } from "popup/components/SubviewHeader";
 import {
   saveTransactionFee,
@@ -31,26 +31,26 @@ export const SendSettingsFee = ({ previous }: { previous: ROUTES }) => {
       <SubviewHeader
         title="Transaction Fee"
         customBackAction={() => navigateTo(previous)}
-        customBackIcon={<Icon.X />}
+        customBackIcon={<Icon.Close />}
         rightButton={
-          <DetailsTooltip
-            tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
-            details={
+          <InfoTooltip
+            infoText={
               <span>
                 {t("Maximum network transaction fee to be paid")}{" "}
-                <TextLink
-                  variant={TextLink.variant.secondary}
+                <Link
+                  variant="secondary"
                   href="https://developers.stellar.org/docs/glossary/fees/#base-fee"
                   rel="noreferrer"
                   target="_blank"
                 >
                   {t("Learn more")}
-                </TextLink>
+                </Link>
               </span>
             }
+            placement="bottom"
           >
-            <span></span>
-          </DetailsTooltip>
+            <></>
+          </InfoTooltip>
         }
       />
       <div className="TransactionFee">
@@ -74,6 +74,7 @@ export const SendSettingsFee = ({ previous }: { previous: ROUTES }) => {
                   {({ field }: FieldProps) => (
                     <>
                       <Input
+                        fieldSize="md"
                         id="transaction-fee-input"
                         className="SendTo__input"
                         type="number"
@@ -81,16 +82,18 @@ export const SendSettingsFee = ({ previous }: { previous: ROUTES }) => {
                         error={errors.transactionFee}
                       />
                       <div className="TransactionFee__row">
-                        <TextLink
-                          underline
-                          disabled={field.value === recommendedFee}
-                          variant={TextLink.variant.secondary}
+                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                        <Link
+                          isUnderline
+                          isDisabled={field.value === recommendedFee}
+                          variant="secondary"
+                          role="button"
                           onClick={() =>
                             setFieldValue("transactionFee", recommendedFee)
                           }
                         >
                           {t("Set recommended")}
-                        </TextLink>
+                        </Link>
                         <span>
                           {networkCongestion} {t("congestion")}
                         </span>
@@ -101,8 +104,9 @@ export const SendSettingsFee = ({ previous }: { previous: ROUTES }) => {
               </FormRows>
               <div className="SendPayment__btn-continue">
                 <Button
-                  fullWidth
-                  variant={Button.variant.tertiary}
+                  size="md"
+                  isFullWidth
+                  variant="secondary"
                   disabled={!values.transactionFee || !isValid}
                   type="submit"
                 >
diff --git a/extension/src/popup/components/sendPayment/SendSettings/index.tsx b/extension/src/popup/components/sendPayment/SendSettings/index.tsx
index fc616b16ad..88440f5bcc 100644
--- a/extension/src/popup/components/sendPayment/SendSettings/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendSettings/index.tsx
@@ -1,15 +1,9 @@
 import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Formik, Form, Field, FieldProps } from "formik";
-import {
-  Icon,
-  Textarea,
-  DetailsTooltip,
-  TextLink,
-} from "@stellar/design-system";
+import { Icon, Textarea, Link, Button } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { navigateTo } from "popup/helpers/navigate";
 import { useNetworkFees } from "popup/helpers/useNetworkFees";
 import { useIsSwap } from "popup/helpers/useIsSwap";
@@ -26,6 +20,7 @@ import {
 } from "popup/ducks/transactionSubmission";
 
 import "../styles.scss";
+import { InfoTooltip } from "popup/basics/InfoTooltip";
 
 export const SendSettings = ({
   previous,
@@ -85,33 +80,32 @@ export const SendSettings = ({
                 {!isToken ? (
                   <div className="SendSettings__row">
                     <div className="SendSettings__row__left">
-                      <span
-                        className="SendSettings__row__title SendSettings__clickable"
-                        onClick={() => {
-                          submitForm();
-                          handleTxFeeNav();
-                        }}
-                      >
-                        {t("Transaction fee")}
-                      </span>
-                      <DetailsTooltip
-                        tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
-                        details={
+                      <InfoTooltip
+                        infoText={
                           <span>
                             {t("Maximum network transaction fee to be paid")}{" "}
-                            <TextLink
-                              variant={TextLink.variant.secondary}
+                            <Link
+                              variant="secondary"
                               href="https://developers.stellar.org/docs/glossary/fees/#base-fee"
                               rel="noreferrer"
                               target="_blank"
                             >
                               {t("Learn more")}
-                            </TextLink>
+                            </Link>
                           </span>
                         }
+                        placement="bottom"
                       >
-                        <span></span>
-                      </DetailsTooltip>
+                        <span
+                          className="SendSettings__row__title SendSettings__clickable"
+                          onClick={() => {
+                            submitForm();
+                            handleTxFeeNav();
+                          }}
+                        >
+                          {t("Transaction fee")}
+                        </span>
+                      </InfoTooltip>
                     </div>
                     <div
                       className="SendSettings__row__right SendSettings__clickable"
@@ -131,35 +125,34 @@ export const SendSettings = ({
                 {showSlippage && (
                   <div className="SendSettings__row">
                     <div className="SendSettings__row__left">
-                      <span
-                        className="SendSettings__row__title SendSettings__clickable"
-                        onClick={() => {
-                          submitForm();
-                          handleSlippageNav();
-                        }}
-                      >
-                        {t("Allowed slippage")}
-                      </span>
-                      <DetailsTooltip
-                        tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
-                        details={
+                      <InfoTooltip
+                        infoText={
                           <span>
                             {t(
                               "Allowed downward variation in the destination amount",
                             )}{" "}
-                            <TextLink
-                              variant={TextLink.variant.secondary}
+                            <Link
+                              variant="secondary"
                               href="https://www.freighter.app/faq"
                               rel="noreferrer"
                               target="_blank"
                             >
                               {t("Learn more")}
-                            </TextLink>
+                            </Link>
                           </span>
                         }
+                        placement="bottom"
                       >
-                        <span></span>
-                      </DetailsTooltip>
+                        <span
+                          className="SendSettings__row__title SendSettings__clickable"
+                          onClick={() => {
+                            submitForm();
+                            handleSlippageNav();
+                          }}
+                        >
+                          {t("Allowed slippage")}
+                        </span>
+                      </InfoTooltip>
                     </div>
                     <div
                       className="SendSettings__row__right SendSettings__clickable"
@@ -179,29 +172,26 @@ export const SendSettings = ({
                   <>
                     <div className="SendSettings__row">
                       <div className="SendSettings__row__left">
-                        <span className="SendSettings__row__title">
-                          {t("Memo")}
-                        </span>{" "}
-                        <DetailsTooltip
-                          tooltipPosition={
-                            DetailsTooltip.tooltipPosition.BOTTOM
-                          }
-                          details={
+                        <InfoTooltip
+                          infoText={
                             <span>
                               {t("Include a custom memo to this transaction")}{" "}
-                              <TextLink
-                                variant={TextLink.variant.secondary}
+                              <Link
+                                variant="secondary"
                                 href="https://developers.stellar.org/docs/glossary/transactions/#memo"
                                 rel="noreferrer"
                                 target="_blank"
                               >
                                 {t("Learn more")}
-                              </TextLink>
+                              </Link>
                             </span>
                           }
+                          placement="bottom"
                         >
-                          <span></span>
-                        </DetailsTooltip>
+                          <span className="SendSettings__row__title">
+                            {t("Memo")}
+                          </span>
+                        </InfoTooltip>
                       </div>
                       <div className="SendSettings__row__right">
                         <span></span>
@@ -210,6 +200,7 @@ export const SendSettings = ({
                     <Field name="memo">
                       {({ field }: FieldProps) => (
                         <Textarea
+                          fieldSize="md"
                           id="mnemonic-input"
                           placeholder={t("Memo (optional)")}
                           {...field}
@@ -221,9 +212,10 @@ export const SendSettings = ({
 
                 <div className="SendPayment__btn-continue">
                   <Button
-                    fullWidth
+                    size="md"
+                    isFullWidth
                     type="submit"
-                    variant={Button.variant.tertiary}
+                    variant="secondary"
                     onClick={() => navigateTo(next)}
                     data-testid="send-settings-btn-continue"
                   >
diff --git a/extension/src/popup/components/sendPayment/SendTo/index.tsx b/extension/src/popup/components/sendPayment/SendTo/index.tsx
index a3181affc0..06f781ee8b 100644
--- a/extension/src/popup/components/sendPayment/SendTo/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendTo/index.tsx
@@ -4,7 +4,14 @@ import debounce from "lodash/debounce";
 import { Asset, StrKey, MuxedAccount, FederationServer } from "stellar-sdk";
 import { useFormik } from "formik";
 import BigNumber from "bignumber.js";
-import { Input, Loader, TextLink } from "@stellar/design-system";
+import {
+  Button,
+  Input,
+  Loader,
+  Link,
+  Notification,
+  Icon,
+} from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -16,7 +23,6 @@ import {
 import { AppDispatch } from "popup/App";
 import { SubviewHeader } from "popup/components/SubviewHeader";
 import { IdenticonImg } from "popup/components/identicons/IdenticonImg";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { FormRows } from "popup/basics/Forms";
 import { emitMetric } from "helpers/metrics";
 import { navigateTo } from "popup/helpers/navigate";
@@ -24,7 +30,6 @@ import { METRIC_NAMES } from "popup/constants/metricsNames";
 import { ROUTES } from "popup/constants/routes";
 import { SimpleBarWrapper } from "popup/basics/SimpleBarWrapper";
 import { PopupWrapper } from "popup/basics/PopupWrapper";
-import { Button } from "popup/basics/buttons/Button";
 import { settingsNetworkDetailsSelector } from "popup/ducks/settings";
 import {
   saveDestination,
@@ -53,21 +58,24 @@ export const AccountDoesntExistWarning = () => {
 
   return (
     <div className="SendTo__info-block">
-      <InfoBlock className="SendTo__info-block">
+      <Notification
+        variant="primary"
+        title={t("The destination account doesn’t exist")}
+      >
         <div>
           {t(
             "The destination account doesn’t exist. Send at least 1 XLM to create account.",
           )}{" "}
-          <TextLink
-            variant={TextLink.variant.secondary}
+          <Link
+            variant="secondary"
             href="https://developers.stellar.org/docs/tutorials/create-account/#create-account"
             rel="noreferrer"
             target="_blank"
           >
             {t("Learn more about account creation")}
-          </TextLink>
+          </Link>
         </div>
-      </InfoBlock>
+      </Notification>
     </div>
   );
 };
@@ -77,14 +85,13 @@ const InvalidAddressWarning = () => {
 
   return (
     <div className="SendTo__info-block">
-      <InfoBlock variant={InfoBlock.variant.warning}>
-        <div>
-          <strong>{t("INVALID STELLAR ADDRESS")}</strong>
-          <p>
-            {t("Addresses are uppercase and begin with letters “G“ or “M“.")}
-          </p>
-        </div>
-      </InfoBlock>
+      <Notification
+        variant="warning"
+        icon={<Icon.Warning />}
+        title={t("INVALID STELLAR ADDRESS")}
+      >
+        {t("Addresses are uppercase and begin with letters “G“ or “M“.")}
+      </Notification>
     </div>
   );
 };
@@ -217,6 +224,7 @@ export const SendTo = ({ previous }: { previous: ROUTES }) => {
       />
       <FormRows>
         <Input
+          fieldSize="md"
           autoComplete="off"
           id="destination-input"
           name="destination"
@@ -298,8 +306,9 @@ export const SendTo = ({ previous }: { previous: ROUTES }) => {
 
                     <div className="SendPayment__btn-continue">
                       <Button
-                        fullWidth
-                        variant={Button.variant.tertiary}
+                        size="md"
+                        isFullWidth
+                        variant="secondary"
                         onClick={() => formik.submitForm()}
                         data-testid="send-to-btn-continue"
                       >
diff --git a/extension/src/popup/components/sendPayment/styles.scss b/extension/src/popup/components/sendPayment/styles.scss
index 2fd05a79b7..909edd2cee 100644
--- a/extension/src/popup/components/sendPayment/styles.scss
+++ b/extension/src/popup/components/sendPayment/styles.scss
@@ -65,7 +65,7 @@
   &__asset-copy {
     font-size: 0.875rem;
     line-height: 1.375rem;
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     margin-bottom: 1rem;
   }
 
@@ -94,7 +94,7 @@
     font-size: 2.5rem;
     line-height: 4.5rem;
     font-weight: var(--font-weight-light);
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     background: none;
     border: none;
     text-align: center;
@@ -137,7 +137,7 @@
       font-size: 0.875rem;
       line-height: 1.375rem;
       height: 1.375rem;
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
     }
   }
 
@@ -167,14 +167,14 @@
     font-size: 0.875rem;
     line-height: 1.375rem;
     font-weight: var(--font-weight-medium);
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
   }
 
   &__subsection-copy {
     font-size: 0.875rem;
     line-height: 1.375rem;
     margin-top: 0.75rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__recent-accts-ul {
@@ -192,7 +192,7 @@
   &__subheading-identicon {
     font-size: 0.875rem;
     line-height: 1.375rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     font-weight: var(--font-weight-medium);
     background: none;
     border: 0;
@@ -206,7 +206,7 @@
       width: 0.75rem;
       height: 0.75rem;
       border-radius: 1rem;
-      background: var(--pal-brand-primary-on);
+      background: var(--color-white);
     }
 
     span {
@@ -234,7 +234,7 @@
     width: 100%;
 
     &__title {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
 
     &__right {
diff --git a/extension/src/popup/components/signBlob/index.tsx b/extension/src/popup/components/signBlob/index.tsx
index 871761043f..ec422b050d 100644
--- a/extension/src/popup/components/signBlob/index.tsx
+++ b/extension/src/popup/components/signBlob/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, Heading4 } from "@stellar/design-system";
+import { Card, Heading } from "@stellar/design-system";
 
 import "./index.scss";
 
@@ -8,8 +8,10 @@ interface BlobProps {
 }
 
 export const Blob = (props: BlobProps) => (
-  <Card variant={Card.variant.highlight}>
-    <Heading4>Signing data:</Heading4>
+  <Card variant="secondary">
+    <Heading size="md" as="h4">
+      Signing data:
+    </Heading>
     <div className="Blob">{props.blob}</div>
   </Card>
 );
diff --git a/extension/src/popup/components/signTransaction/Operations/styles.scss b/extension/src/popup/components/signTransaction/Operations/styles.scss
index fde5078c2a..00ffa5c28e 100644
--- a/extension/src/popup/components/signTransaction/Operations/styles.scss
+++ b/extension/src/popup/components/signTransaction/Operations/styles.scss
@@ -5,7 +5,7 @@
   margin-bottom: 1.5rem;
 
   &--header {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     line-height: 1.5rem;
     margin-bottom: 1rem;
   }
@@ -17,7 +17,7 @@
 
     & > .Operations__pair {
       align-items: center;
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
       display: flex;
       justify-content: space-between;
       line-height: 1.5rem;
@@ -31,13 +31,13 @@
       }
 
       & > :nth-child(2) {
-        color: var(--pal-text-primary);
+        color: var(--color-gray-90);
       }
     }
   }
 
   &__scValue {
-    background: var(--pal-example-details);
+    background: var(--color-gray-40);
     border-radius: 0.5rem;
     font-size: 0.875rem;
     height: 7rem;
@@ -51,7 +51,7 @@
     gap: 0.5rem;
 
     &--item {
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
       font-size: 0.75rem;
       line-height: 1.5rem;
       flex-direction: column;
diff --git a/extension/src/popup/components/signTransaction/Transaction/styles.scss b/extension/src/popup/components/signTransaction/Transaction/styles.scss
index 286b76ee25..608a526113 100644
--- a/extension/src/popup/components/signTransaction/Transaction/styles.scss
+++ b/extension/src/popup/components/signTransaction/Transaction/styles.scss
@@ -1,6 +1,6 @@
 .Transaction {
   &--title {
-    border-bottom: 1px solid var(--pal-border-secondary);
+    border-bottom: 1px solid var(--color-gray-30);
     font-size: 0.875rem;
     line-height: 0.72rem;
     margin-bottom: 1.5rem;
diff --git a/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss b/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss
index d5fafee58d..d74e0c8342 100644
--- a/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss
+++ b/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss
@@ -4,11 +4,11 @@
   gap: 1rem;
 
   & > div {
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     line-height: 1.5rem;
 
     & > :nth-child(2) {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       margin-top: 0.25rem;
     }
   }
diff --git a/extension/src/popup/react-app-env.d.ts b/extension/src/popup/react-app-env.d.ts
index d11dbceb32..9a338fb193 100755
--- a/extension/src/popup/react-app-env.d.ts
+++ b/extension/src/popup/react-app-env.d.ts
@@ -1,2 +1,10 @@
 // <reference types="react-scripts" />
 declare module "*.png";
+
+declare module "*.svg" {
+  import React = require("react");
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
diff --git a/extension/src/popup/styles/global.scss b/extension/src/popup/styles/global.scss
index 86f8da4f29..5088703949 100644
--- a/extension/src/popup/styles/global.scss
+++ b/extension/src/popup/styles/global.scss
@@ -19,13 +19,13 @@
   --back--button-dimension: 1rem;
   --back--button-z-index: 2;
 
-  // TODO: migrate to SDS
-  --background-color: #1f212a;
-  --button-bg--tertiary: #303448;
-  --button-bg--primary: #6432f1;
-  --secondary-text: #797a7f;
+  --background-color: var(--color-gray-00);
+  --background-color--overlay: var(--color-gray-10);
+  --secondary-text: var(--color-gray-70);
 
   --dropdown-animation: 0.3s ease-out;
+
+  --color-shadow-rgb: 0, 0, 0;
 }
 
 body {
@@ -48,6 +48,15 @@ a {
 #root {
   position: relative;
   height: 100%;
+
+  // TODO: fix in SDS
+  ul {
+    padding-left: 0;
+  }
+
+  li::before {
+    content: none;
+  }
 }
 
 .simplebar-content {
@@ -69,15 +78,14 @@ a {
 }
 
 * {
-  scrollbar-color: rgba(var(--pal-shadow-rbg), 0.25)
-    var(--pal-background-primary);
+  scrollbar-color: rgba(var(--color-shadow-rgb), 0.25) var(--color-gray-00);
 
   &::-webkit-scrollbar {
-    background-color: var(--pal-background-primary);
+    background-color: var(--color-gray-00);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(var(--pal-shadow-rbg), 0.25);
+    background: rgba(var(--color-shadow-rgb), 0.25);
     border-radius: 0.5rem;
   }
 }
diff --git a/extension/src/popup/views/About/index.tsx b/extension/src/popup/views/About/index.tsx
index 26c321719c..9031282783 100644
--- a/extension/src/popup/views/About/index.tsx
+++ b/extension/src/popup/views/About/index.tsx
@@ -15,7 +15,7 @@ interface AboutLinkProps {
 
 const AboutLink = ({ children, url }: AboutLinkProps) => (
   <div className="About__link">
-    <Icon.Link2 />
+    <Icon.Link />
     <a target="_blank" rel="noreferrer" href={`https://${url}`}>
       {children || url}
     </a>
diff --git a/extension/src/popup/views/About/styles.scss b/extension/src/popup/views/About/styles.scss
index 76b6c105ab..d354eb701c 100644
--- a/extension/src/popup/views/About/styles.scss
+++ b/extension/src/popup/views/About/styles.scss
@@ -10,7 +10,7 @@
   }
 
   &__info {
-    color: var(--pal-brand-primary-on);
+    color: var(--color-white);
     line-height: 1.375rem;
     margin: 1rem 0 2rem 0;
   }
@@ -27,7 +27,7 @@
     gap: 0.5rem;
 
     a {
-      color: var(--pal-brand-primary-on);
+      color: var(--color-white);
     }
 
     &:not(:last-child) {
diff --git a/extension/src/popup/views/Account/index.tsx b/extension/src/popup/views/Account/index.tsx
index 9b23ddfef0..0e38074e60 100644
--- a/extension/src/popup/views/Account/index.tsx
+++ b/extension/src/popup/views/Account/index.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { CopyText, Icon, NavButton } from "@stellar/design-system";
+import { Button, CopyText, Icon, NavButton } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { getAccountHistory } from "@shared/api/internal";
@@ -11,7 +11,6 @@ import {
 } from "@shared/api/types";
 
 import { SimpleBarWrapper } from "popup/basics/SimpleBarWrapper";
-import { Button } from "popup/basics/buttons/Button";
 import {
   settingsNetworkDetailsSelector,
   settingsSelector,
@@ -191,14 +190,10 @@ export const Account = () => {
               >
                 {currentAccountName}
               </div>
-              <CopyText
-                textToCopy={publicKey}
-                showTooltip
-                tooltipPosition={CopyText.tooltipPosition.RIGHT}
-              >
+              <CopyText textToCopy={publicKey} tooltipPlacement="right">
                 <div className="AccountView__account-num">
                   {truncatedPublicKey(publicKey)}
-                  <Icon.Copy />
+                  <Icon.ContentCopy />
                 </div>
               </CopyText>
             </div>
@@ -240,8 +235,9 @@ export const Account = () => {
           )}
           {isFunded ? (
             <Button
-              fullWidth
-              variant={Button.variant.tertiary}
+              size="md"
+              isFullWidth
+              variant="secondary"
               onClick={() => {
                 dispatch(saveAssetSelectType(AssetSelectType.MANAGE));
                 navigateTo(ROUTES.manageAssets);
diff --git a/extension/src/popup/views/Account/styles.scss b/extension/src/popup/views/Account/styles.scss
index 179e297560..f5c0d99d38 100644
--- a/extension/src/popup/views/Account/styles.scss
+++ b/extension/src/popup/views/Account/styles.scss
@@ -45,7 +45,7 @@
   }
 
   &__account-name {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     width: 100%;
     font-weight: var(--font-weight-medium);
   }
diff --git a/extension/src/popup/views/AccountCreator/index.tsx b/extension/src/popup/views/AccountCreator/index.tsx
index 5c3489d083..923052d1df 100644
--- a/extension/src/popup/views/AccountCreator/index.tsx
+++ b/extension/src/popup/views/AccountCreator/index.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Input, Checkbox, TextLink } from "@stellar/design-system";
+import { Input, Checkbox, Link, Button } from "@stellar/design-system";
 import { Field, FieldProps, Formik, Form } from "formik";
 import { object as YupObject } from "yup";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { ROUTES } from "popup/constants/routes";
 import { navigateTo } from "popup/helpers/navigate";
 import {
@@ -87,6 +86,7 @@ export const AccountCreator = () => {
                     <Field name="password">
                       {({ field }: FieldProps) => (
                         <Input
+                          fieldSize="md"
                           autoComplete="off"
                           id="new-password-input"
                           placeholder={t("New password")}
@@ -104,6 +104,7 @@ export const AccountCreator = () => {
                     <Field name="confirmPassword">
                       {({ field }: FieldProps) => (
                         <Input
+                          fieldSize="md"
                           autoComplete="off"
                           id="confirm-password-input"
                           placeholder={t("Confirm password")}
@@ -124,19 +125,20 @@ export const AccountCreator = () => {
                     <Field name="termsOfUse">
                       {({ field }: FieldProps) => (
                         <Checkbox
+                          fieldSize="md"
                           autoComplete="off"
                           error={touched.termsOfUse ? errors.termsOfUse : null}
                           id="termsOfUse-input"
                           label={
-                            <span>
+                            <>
                               {t("I have read and agree to")}{" "}
-                              <TextLink
-                                variant={TextLink.variant.secondary}
+                              <Link
+                                variant="secondary"
                                 href="https://stellar.org/terms-of-service"
                               >
                                 {t("Terms of Use")}
-                              </TextLink>
-                            </span>
+                              </Link>
+                            </>
                           }
                           {...field}
                         />
@@ -145,7 +147,9 @@ export const AccountCreator = () => {
                   </div>
                   <SubmitButtonWrapper>
                     <Button
-                      fullWidth
+                      size="md"
+                      isFullWidth
+                      variant="primary"
                       type="submit"
                       isLoading={isSubmitting}
                       disabled={!(dirty && isValid)}
diff --git a/extension/src/popup/views/AccountHistory/styles.scss b/extension/src/popup/views/AccountHistory/styles.scss
index ae7a7f2a05..6cbd64a194 100644
--- a/extension/src/popup/views/AccountHistory/styles.scss
+++ b/extension/src/popup/views/AccountHistory/styles.scss
@@ -22,7 +22,7 @@
   }
 
   &__selector {
-    border-bottom: 1px solid var(--pal-example-details);
+    border-bottom: 1px solid var(--color-gray-40);
     display: flex;
     gap: 1rem;
     margin: 0.5rem 0 1.5rem;
@@ -36,8 +36,8 @@
       text-transform: uppercase;
 
       &--active {
-        border-bottom: 2px solid var(--pal-brand-primary);
-        color: var(--pal-brand-primary-on);
+        border-bottom: 2px solid var(--color-purple-60);
+        color: var(--color-white);
       }
     }
   }
diff --git a/extension/src/popup/views/AddAccount/AddAccount/index.tsx b/extension/src/popup/views/AddAccount/AddAccount/index.tsx
index 13ade708e1..0c85e3aee3 100644
--- a/extension/src/popup/views/AddAccount/AddAccount/index.tsx
+++ b/extension/src/popup/views/AddAccount/AddAccount/index.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Input } from "@stellar/design-system";
+import { Button, Input } from "@stellar/design-system";
 import { Field, Form, Formik, FieldProps } from "formik";
 import { useTranslation } from "react-i18next";
 
 import { ROUTES } from "popup/constants/routes";
 import { METRIC_NAMES } from "popup/constants/metricsNames";
-import { Button } from "popup/basics/buttons/Button";
 import { AppDispatch } from "popup/App";
 import { navigateTo } from "popup/helpers/navigate";
 import { emitMetric } from "helpers/metrics";
@@ -65,6 +64,7 @@ export const AddAccount = () => {
                 <Field name="password">
                   {({ field }: FieldProps) => (
                     <Input
+                      fieldSize="md"
                       autoComplete="off"
                       id="password-input"
                       placeholder={t("Enter Password")}
@@ -81,7 +81,9 @@ export const AddAccount = () => {
                 </Field>
                 <SubmitButtonWrapper>
                   <Button
-                    fullWidth
+                    size="md"
+                    isFullWidth
+                    variant="primary"
                     disabled={!(dirty && isValid)}
                     isLoading={isSubmitting}
                     type="submit"
diff --git a/extension/src/popup/views/AddAccount/ImportAccount/index.tsx b/extension/src/popup/views/AddAccount/ImportAccount/index.tsx
index 0cb6430f27..e85ce8258c 100644
--- a/extension/src/popup/views/AddAccount/ImportAccount/index.tsx
+++ b/extension/src/popup/views/AddAccount/ImportAccount/index.tsx
@@ -2,7 +2,13 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Form, Field, FieldProps, Formik } from "formik";
 import { bool as YupBool, object as YupObject, string as YupString } from "yup";
-import { Checkbox, Input } from "@stellar/design-system";
+import {
+  Button,
+  Checkbox,
+  Icon,
+  Input,
+  Notification,
+} from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { ROUTES } from "popup/constants/routes";
@@ -10,9 +16,7 @@ import { METRIC_NAMES } from "popup/constants/metricsNames";
 import { AppDispatch } from "popup/App";
 import { navigateTo } from "popup/helpers/navigate";
 import { emitMetric } from "helpers/metrics";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { FormRows } from "popup/basics/Forms";
-import { Button } from "popup/basics/buttons/Button";
 import { importAccount, authErrorSelector } from "popup/ducks/accountServices";
 
 import { SubviewHeader } from "popup/components/SubviewHeader";
@@ -63,20 +67,15 @@ export const ImportAccount = () => {
     <div className="ImportAccount">
       <SubviewHeader title={t("Import Stellar Secret Key")} />
       <div className="ImportAccount__warning-block">
-        <InfoBlock variant={InfoBlock.variant.warning}>
-          <div>
-            <div className="ImportAccount__warning-header">
-              {t("read before importing your key")}
-            </div>
-            <div className="ImportAccount__warning-copy">
-              <p>
-                {t(
-                  "Freighter can’t recover your imported secret key using your recovery phrase. Storing your secret key is your responsibility. Freighter will never ask for your secret key outside of the extension.",
-                )}
-              </p>
-            </div>
-          </div>
-        </InfoBlock>
+        <Notification
+          variant="warning"
+          icon={<Icon.Warning />}
+          title={t("read before importing your key")}
+        >
+          {t(
+            "Freighter can’t recover your imported secret key using your recovery phrase. Storing your secret key is your responsibility. Freighter will never ask for your secret key outside of the extension.",
+          )}
+        </Notification>
       </div>
       <Formik
         initialValues={initialValues}
@@ -89,6 +88,7 @@ export const ImportAccount = () => {
               <Field name="privateKey">
                 {({ field }: FieldProps) => (
                   <Input
+                    fieldSize="md"
                     autoComplete="off"
                     id="privateKey-input"
                     type="password"
@@ -101,6 +101,7 @@ export const ImportAccount = () => {
               <Field name="password">
                 {({ field }: FieldProps) => (
                   <Input
+                    fieldSize="md"
                     autoComplete="off"
                     id="password-input"
                     type="password"
@@ -113,6 +114,7 @@ export const ImportAccount = () => {
               <Field name="authorization">
                 {({ field }: FieldProps) => (
                   <Checkbox
+                    fieldSize="md"
                     autoComplete="off"
                     id="authorization-input"
                     label={t(
@@ -125,14 +127,17 @@ export const ImportAccount = () => {
             </FormRows>
             <div className="ImportAccount__btn-row">
               <Button
-                fullWidth
-                variant={Button.variant.tertiary}
+                size="md"
+                isFullWidth
+                variant="secondary"
                 onClick={() => navigateTo(ROUTES.account)}
               >
                 {t("Cancel")}
               </Button>
               <Button
-                fullWidth
+                size="md"
+                isFullWidth
+                variant="primary"
                 type="submit"
                 isLoading={isSubmitting}
                 disabled={!(dirty && isValid)}
diff --git a/extension/src/popup/views/AddAccount/connect/ConnectWallet/styles.scss b/extension/src/popup/views/AddAccount/connect/ConnectWallet/styles.scss
index fd43a60f3a..10a7ec8d10 100644
--- a/extension/src/popup/views/AddAccount/connect/ConnectWallet/styles.scss
+++ b/extension/src/popup/views/AddAccount/connect/ConnectWallet/styles.scss
@@ -19,7 +19,7 @@
     width: 19.5rem;
     height: 3.5rem;
     border-radius: 0.5rem;
-    border: 1px solid var(--pal-background-secondary);
+    border: 1px solid var(--color-gray-10);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -30,7 +30,7 @@
   }
 
   &__option:hover {
-    background: var(--pal-background-secondary);
+    background: var(--color-gray-10);
   }
 
   li::before {
diff --git a/extension/src/popup/views/AddAccount/connect/LedgerConnect/index.tsx b/extension/src/popup/views/AddAccount/connect/LedgerConnect/index.tsx
index a5fb886e86..c058595a4d 100644
--- a/extension/src/popup/views/AddAccount/connect/LedgerConnect/index.tsx
+++ b/extension/src/popup/views/AddAccount/connect/LedgerConnect/index.tsx
@@ -4,12 +4,11 @@ import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
 import LedgerApi from "@ledgerhq/hw-app-str";
-import { InfoBlock } from "@stellar/design-system";
+import { Button, Notification } from "@stellar/design-system";
 import { WalletType } from "@shared/constants/hardwareWallet";
 
 import { AppDispatch } from "popup/App";
 import { FullscreenStyle } from "popup/components/FullscreenStyle";
-import { Button } from "popup/basics/buttons/Button";
 import Ledger from "popup/assets/ledger.png";
 import LedgerConnected from "popup/assets/ledger-connected.png";
 import { importHardwareWallet } from "popup/ducks/accountServices";
@@ -71,7 +70,9 @@ export const LedgerErrorBlock = ({ error }: { error: LEDGER_ERROR }) => {
     return null;
   }
   return (
-    <InfoBlock variant={InfoBlock.variant.warning}>{errorMessage}</InfoBlock>
+    <Notification variant="error" title="Error">
+      {errorMessage}
+    </Notification>
   );
 };
 
@@ -116,8 +117,9 @@ export const LedgerConnect = () => {
     if (ledgerConnectSuccessful) {
       return (
         <Button
-          fullWidth
-          variant={Button.variant.tertiary}
+          size="md"
+          isFullWidth
+          variant="secondary"
           onClick={() => window.close()}
         >
           Done
@@ -126,8 +128,9 @@ export const LedgerConnect = () => {
     }
     return (
       <Button
-        fullWidth
-        variant={Button.variant.tertiary}
+        size="md"
+        isFullWidth
+        variant="secondary"
         onClick={handleConnect}
         isLoading={isDetecting}
       >
diff --git a/extension/src/popup/views/AddAccount/connect/LedgerConnect/styles.scss b/extension/src/popup/views/AddAccount/connect/LedgerConnect/styles.scss
index 5f6c3119ea..021aaf60fb 100644
--- a/extension/src/popup/views/AddAccount/connect/LedgerConnect/styles.scss
+++ b/extension/src/popup/views/AddAccount/connect/LedgerConnect/styles.scss
@@ -8,7 +8,7 @@
   &__header {
     font-size: 2.5rem;
     line-height: 3rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     margin-bottom: 1rem;
   }
 
@@ -16,7 +16,7 @@
     font-size: 0.875rem;
     line-height: 1.5rem;
     margin-bottom: 7.5rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__img {
diff --git a/extension/src/popup/views/AddAccount/connect/PluginWallet/index.tsx b/extension/src/popup/views/AddAccount/connect/PluginWallet/index.tsx
index 68077b604b..5ac6bd81c3 100644
--- a/extension/src/popup/views/AddAccount/connect/PluginWallet/index.tsx
+++ b/extension/src/popup/views/AddAccount/connect/PluginWallet/index.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from "react";
-import { Checkbox, Input, TextLink } from "@stellar/design-system";
+import { Button, Checkbox, Input, Link } from "@stellar/design-system";
 import { WalletType } from "@shared/constants/hardwareWallet";
 
 import { newTabHref } from "helpers/urls";
-import { Button } from "popup/basics/buttons/Button";
 import { navigateTo, openTab } from "popup/helpers/navigate";
 import { ROUTES } from "popup/constants/routes";
 import { SubviewHeader } from "popup/components/SubviewHeader";
@@ -28,20 +27,21 @@ export const PluginWallet = () => {
         <p>
           Make sure your Ledger wallet is connected to your computer and the
           Stellar app is open on the Ledger wallet.{" "}
-          <TextLink
-            variant={TextLink.variant.secondary}
+          <Link
+            variant="secondary"
             href="https://www.ledger.com/stellar-wallet"
             rel="noreferrer"
             target="_blank"
           >
             Learn more about using Ledger
-          </TextLink>
+          </Link>
         </p>
         <div className="PluginWallet__bottom">
           {!useDefault && (
             <div>
               <div className="PluginWallet__caption">ENTER BIP PATH</div>
               <Input
+                fieldSize="md"
                 autoComplete="off"
                 id="bipPath"
                 value={bipPath}
@@ -52,18 +52,17 @@ export const PluginWallet = () => {
             </div>
           )}
           <Checkbox
+            fieldSize="md"
             defaultChecked
             autoComplete="off"
             id="useDefault-input"
-            label={
-              <span className="PluginWallet__checkbox-label">
-                Use default account
-              </span>
-            }
+            label="Use default account"
             onClick={() => setUseDefault(!useDefault)}
           />
           <Button
-            fullWidth
+            size="md"
+            isFullWidth
+            variant="primary"
             onClick={() => {
               openTab(newTabHref(ROUTES.connectLedger, `bipPath=${bipPath}`));
             }}
diff --git a/extension/src/popup/views/AddAccount/connect/PluginWallet/styles.scss b/extension/src/popup/views/AddAccount/connect/PluginWallet/styles.scss
index e906eaef8d..ff0db9bc25 100644
--- a/extension/src/popup/views/AddAccount/connect/PluginWallet/styles.scss
+++ b/extension/src/popup/views/AddAccount/connect/PluginWallet/styles.scss
@@ -15,7 +15,7 @@
     font-size: 0.875rem;
     font-weight: var(--font-weight-medium);
     line-height: 1.375rem;
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
   }
 
   &__bottom {
@@ -26,6 +26,6 @@
   }
 
   &__checkbox-label {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 }
diff --git a/extension/src/popup/views/DisplayBackupPhrase/index.tsx b/extension/src/popup/views/DisplayBackupPhrase/index.tsx
index 486dcf5af3..4e04946811 100644
--- a/extension/src/popup/views/DisplayBackupPhrase/index.tsx
+++ b/extension/src/popup/views/DisplayBackupPhrase/index.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { Input } from "@stellar/design-system";
+import { Button, Input } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 import { Field, Form, Formik } from "formik";
 
 import { showBackupPhrase } from "@shared/api/internal";
 
 import { ROUTES } from "popup/constants/routes";
-import { Button } from "popup/basics/buttons/Button";
 import { navigateTo } from "popup/helpers/navigate";
 import { emitMetric } from "helpers/metrics";
 import { useMnemonicPhrase } from "popup/helpers/useMnemonicPhrase";
@@ -71,7 +70,12 @@ export const DisplayBackupPhrase = () => {
             <MnemonicDisplay mnemonicPhrase={mnemonicPhrase} isPopupView />
           </div>
           <div className="DisplayBackupPhrase__button">
-            <Button fullWidth onClick={() => navigateTo(ROUTES.account)}>
+            <Button
+              size="md"
+              isFullWidth
+              variant="primary"
+              onClick={() => navigateTo(ROUTES.account)}
+            >
               {t("Done")}
             </Button>
           </div>
@@ -83,6 +87,7 @@ export const DisplayBackupPhrase = () => {
             {({ dirty, isSubmitting, isValid }) => (
               <Form className="DisplayBackupPhrase__form">
                 <Input
+                  fieldSize="md"
                   id="password"
                   autoComplete="off"
                   error={errorMessage}
@@ -93,11 +98,12 @@ export const DisplayBackupPhrase = () => {
                 />
 
                 <Button
+                  size="md"
                   disabled={!(isValid && dirty)}
-                  fullWidth
+                  isFullWidth
                   isLoading={isSubmitting}
                   type="submit"
-                  variant={Button.variant.tertiary}
+                  variant="secondary"
                 >
                   {t("Show recovery phrase")}
                 </Button>
diff --git a/extension/src/popup/views/DisplayBackupPhrase/styles.scss b/extension/src/popup/views/DisplayBackupPhrase/styles.scss
index 2b84b84bfd..1f862e76aa 100644
--- a/extension/src/popup/views/DisplayBackupPhrase/styles.scss
+++ b/extension/src/popup/views/DisplayBackupPhrase/styles.scss
@@ -20,10 +20,10 @@
 
   .IconButton {
     &__label {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
     }
     svg {
-      stroke: var(--pal-text-primary);
+      fill: var(--color-gray-90);
     }
   }
 }
diff --git a/extension/src/popup/views/FullscreenSuccessMessage/index.tsx b/extension/src/popup/views/FullscreenSuccessMessage/index.tsx
index 08b1b51e21..624b920ff0 100644
--- a/extension/src/popup/views/FullscreenSuccessMessage/index.tsx
+++ b/extension/src/popup/views/FullscreenSuccessMessage/index.tsx
@@ -1,18 +1,17 @@
 import React from "react";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Button, Icon, Notification } from "@stellar/design-system";
 
 import { emitMetric } from "helpers/metrics";
 
 import { ROUTES } from "popup/constants/routes";
 import { METRIC_NAMES } from "popup/constants/metricsNames";
 import { navigateTo } from "popup/helpers/navigate";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { SubmitButtonWrapper } from "popup/basics/Forms";
 import { FullscreenStyle } from "popup/components/FullscreenStyle";
 import { Header } from "popup/components/Header";
 import { OnboardingHeader } from "popup/components/Onboarding";
-import { Button } from "popup/basics/buttons/Button";
 import SuccessIllo from "popup/assets/illo-success-screen.svg";
 import ExtensionIllo from "popup/assets/illo-extension.png";
 
@@ -28,11 +27,12 @@ const AvoidScamsWarningBlock = () => {
 
   return (
     <div className="FullscreenSuccessMessage__infoBlock">
-      <InfoBlock variant={InfoBlock.variant.warning}>
+      <Notification
+        variant="warning"
+        icon={<Icon.Warning />}
+        title={t("Avoid scams and keep your account safe")}
+      >
         <div className="InfoBlock__content">
-          <div className="InfoBlock__header">
-            {t("Avoid scams and keep your account safe")}
-          </div>
           <ul className="FullscreenSuccessMessage__infoBlock__list">
             <li>
               {t(
@@ -51,7 +51,7 @@ const AvoidScamsWarningBlock = () => {
             </li>
           </ul>
         </div>
-      </InfoBlock>
+      </Notification>
     </div>
   );
 };
@@ -71,7 +71,9 @@ const MnemonicPhraseConfirmedMessage = () => {
       <AvoidScamsWarningBlock />
       <SubmitButtonWrapper>
         <Button
-          fullWidth
+          size="md"
+          isFullWidth
+          variant="primary"
           onClick={() => {
             emitMetric(METRIC_NAMES.accountCreatorFinished);
             if (isChrome()) {
@@ -120,7 +122,9 @@ const RecoverAccountSuccessMessage = () => {
       )}
       <SubmitButtonWrapper>
         <Button
-          fullWidth
+          size="md"
+          isFullWidth
+          variant="primary"
           onClick={() => {
             emitMetric(METRIC_NAMES.recoverAccountFinished);
             if (isChrome()) {
diff --git a/extension/src/popup/views/FullscreenSuccessMessage/styles.scss b/extension/src/popup/views/FullscreenSuccessMessage/styles.scss
index 6631093816..8b2589ab57 100644
--- a/extension/src/popup/views/FullscreenSuccessMessage/styles.scss
+++ b/extension/src/popup/views/FullscreenSuccessMessage/styles.scss
@@ -1,6 +1,6 @@
 .InfoBlock {
   &__header {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     display: inline-block;
     font-weight: var(--font-weight-bold);
     font-size: 1.1rem;
@@ -44,7 +44,7 @@
     flex-direction: column;
     justify-content: start;
     padding: 0 0 2rem 0;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     max-width: 24rem;
   }
 
@@ -54,27 +54,6 @@
     &__list {
       margin-top: -0.25rem;
     }
-
-    .BasicInfoBlock .InfoBlock--warning {
-      border: 1px solid rgba(255, 153, 0, 1);
-      padding: 1rem;
-
-      .InfoBlock {
-        &__icon {
-          display: none;
-        }
-
-        &__header {
-          font-size: 1rem;
-          font-weight: var(--font-weight-medium);
-          line-height: 1.375rem;
-          margin-bottom: -0.25rem;
-          padding: 0;
-          text-transform: uppercase;
-          white-space: nowrap;
-        }
-      }
-    }
   }
 
   &__illo-container {
diff --git a/extension/src/popup/views/GrantAccess.tsx b/extension/src/popup/views/GrantAccess.tsx
index d8f4bfbf77..ab12b806f8 100644
--- a/extension/src/popup/views/GrantAccess.tsx
+++ b/extension/src/popup/views/GrantAccess.tsx
@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Button } from "@stellar/design-system";
 
 import { getUrlHostname, parsedSearchParam } from "helpers/urls";
 
-import { Button } from "popup/basics/buttons/Button";
 import { rejectAccess, grantAccess } from "popup/ducks/access";
 import { publicKeySelector } from "popup/ducks/accountServices";
 
@@ -65,14 +65,17 @@ export const GrantAccess = () => {
       </ModalWrapper>
       <ButtonsContainer>
         <Button
-          fullWidth
-          variant={Button.variant.tertiary}
+          size="md"
+          isFullWidth
+          variant="secondary"
           onClick={rejectAndClose}
         >
           {t("Reject")}
         </Button>
         <Button
-          fullWidth
+          size="md"
+          isFullWidth
+          variant="primary"
           isLoading={isGranting}
           onClick={() => grantAndClose()}
         >
diff --git a/extension/src/popup/views/PinExtension/styles.scss b/extension/src/popup/views/PinExtension/styles.scss
index 42c188199d..68d93f14c2 100644
--- a/extension/src/popup/views/PinExtension/styles.scss
+++ b/extension/src/popup/views/PinExtension/styles.scss
@@ -13,13 +13,13 @@
     font-size: 1.5rem;
     line-height: 2.25rem;
     text-align: center;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__caption {
     line-height: 1.5rem;
     margin: 2rem 0;
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
   }
 
   &__img {
diff --git a/extension/src/popup/views/Preferences/styles.scss b/extension/src/popup/views/Preferences/styles.scss
index 9110adf70b..a3a611a615 100644
--- a/extension/src/popup/views/Preferences/styles.scss
+++ b/extension/src/popup/views/Preferences/styles.scss
@@ -17,7 +17,7 @@
     padding-right: var(--popup-vertical-padding);
 
     &--title {
-      color: var(--pal-text-tertiary);
+      color: var(--color-gray-60);
       font-weight: var(--font-weight-medium);
       text-transform: uppercase;
     }
diff --git a/extension/src/popup/views/RecoverAccount/index.tsx b/extension/src/popup/views/RecoverAccount/index.tsx
index c2500552cd..458c5204e4 100644
--- a/extension/src/popup/views/RecoverAccount/index.tsx
+++ b/extension/src/popup/views/RecoverAccount/index.tsx
@@ -2,10 +2,9 @@ import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Field, Form, Formik, FieldProps } from "formik";
 import { object as YupObject } from "yup";
-import { Input, Checkbox, Icon, TextLink } from "@stellar/design-system";
+import { Input, Checkbox, Icon, Link, Button } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { Onboarding } from "popup/components/Onboarding";
 import { FormError, FormRows, SubmitButtonWrapper } from "popup/basics/Forms";
 import { FullscreenStyle } from "popup/components/FullscreenStyle";
@@ -44,6 +43,7 @@ const PhraseInput = ({
   return (
     <div key={phraseInput} className="RecoverAccount__phrase-input">
       <Input
+        fieldSize="md"
         autoComplete="off"
         id={phraseInput}
         name={phraseInput}
@@ -60,7 +60,7 @@ const PhraseInput = ({
         className="RecoverAccount__password-toggle"
         onClick={() => setIsTextShowing(!isTextShowing)}
       >
-        {isTextShowing ? <Icon.Eye /> : <Icon.EyeOff />}
+        {isTextShowing ? <Icon.Show /> : <Icon.Hide />}
       </div>
     </div>
   );
@@ -166,6 +166,7 @@ export const RecoverAccount = () => {
                 <div className="RecoverAccount__half-screen">
                   <FormRows>
                     <Input
+                      fieldSize="md"
                       autoComplete="off"
                       customInput={<Field />}
                       id="password-input"
@@ -179,6 +180,7 @@ export const RecoverAccount = () => {
                       }
                     />
                     <Input
+                      fieldSize="md"
                       autoComplete="off"
                       customInput={<Field />}
                       id="confirm-password-input"
@@ -195,6 +197,7 @@ export const RecoverAccount = () => {
                     <Field name="termsOfUse">
                       {({ field }: FieldProps) => (
                         <Checkbox
+                          fieldSize="md"
                           autoComplete="off"
                           id="termsOfUse-input"
                           error={
@@ -203,15 +206,15 @@ export const RecoverAccount = () => {
                               : null
                           }
                           label={
-                            <span>
+                            <>
                               {t("I have read and agree to")}{" "}
-                              <TextLink
-                                variant={TextLink.variant.secondary}
+                              <Link
+                                variant="secondary"
                                 href="https://stellar.org/terms-of-service"
                               >
                                 {t("Terms of Use")}
-                              </TextLink>
-                            </span>
+                              </Link>
+                            </>
                           }
                           {...field}
                         />
@@ -220,7 +223,9 @@ export const RecoverAccount = () => {
                   </FormRows>
                   <SubmitButtonWrapper>
                     <Button
-                      fullWidth
+                      size="md"
+                      isFullWidth
+                      variant="primary"
                       isLoading={isSubmitting}
                       disabled={
                         !(
diff --git a/extension/src/popup/views/RecoverAccount/styles.scss b/extension/src/popup/views/RecoverAccount/styles.scss
index b584429402..db70580979 100644
--- a/extension/src/popup/views/RecoverAccount/styles.scss
+++ b/extension/src/popup/views/RecoverAccount/styles.scss
@@ -8,7 +8,7 @@
     font-size: 2.5rem;
     line-height: 3rem;
     font-weight: var(--font-weight-normal);
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     text-align: left;
     margin-bottom: 1.5rem;
   }
diff --git a/extension/src/popup/views/Settings/index.tsx b/extension/src/popup/views/Settings/index.tsx
index 858a01263f..59b6083484 100644
--- a/extension/src/popup/views/Settings/index.tsx
+++ b/extension/src/popup/views/Settings/index.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { Heading5 } from "@stellar/design-system";
+import { Button, Heading } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { ROUTES } from "popup/constants/routes";
 
 import { navigateTo } from "popup/helpers/navigate";
-import { Button } from "popup/basics/buttons/Button";
 import { ListNavLink, ListNavLinkWrapper } from "popup/basics/ListNavLink";
 
 import { BottomNav } from "popup/components/BottomNav";
@@ -32,7 +31,9 @@ export const Settings = () => {
       <nav className="Settings">
         <div>
           <div className="Settings__header">
-            <Heading5>Settings</Heading5>
+            <Heading as="h5" size="md">
+              Settings
+            </Heading>
             <div className="Settings__version">{packageJson.version}</div>
           </div>
           <ListNavLinkWrapper>
@@ -54,8 +55,9 @@ export const Settings = () => {
         </div>
         <div className="Settings__logout">
           <Button
-            fullWidth
-            variant={Button.variant.tertiary}
+            size="md"
+            isFullWidth
+            variant="secondary"
             onClick={(e) => signOutAndClose(e)}
           >
             {t("Log Out")}
diff --git a/extension/src/popup/views/Settings/styles.scss b/extension/src/popup/views/Settings/styles.scss
index bf590038b5..4a304bedff 100644
--- a/extension/src/popup/views/Settings/styles.scss
+++ b/extension/src/popup/views/Settings/styles.scss
@@ -9,7 +9,7 @@
   }
 
   &__version {
-    color: var(--pal-text-tertiary);
+    color: var(--color-gray-60);
     font-size: 0.875rem;
   }
 
diff --git a/extension/src/popup/views/SignTransaction/SignBlob/index.tsx b/extension/src/popup/views/SignTransaction/SignBlob/index.tsx
index 7957b97894..c0f263cf66 100644
--- a/extension/src/popup/views/SignTransaction/SignBlob/index.tsx
+++ b/extension/src/popup/views/SignTransaction/SignBlob/index.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-import { Card, Icon } from "@stellar/design-system";
+import { Button, Card, Icon, Notification } from "@stellar/design-system";
 import { useTranslation, Trans } from "react-i18next";
 
 import { truncatedPublicKey } from "helpers/stellar";
-import { Button } from "popup/basics/buttons/Button";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { signBlob } from "popup/ducks/access";
 import { confirmPassword } from "popup/ducks/accountServices";
 
@@ -161,7 +159,7 @@ export const SignBlobBody = ({
           </WarningMessage>
           {!isDomainListedAllowed ? <FirstTimeWarningMessage /> : null}
           <div className="SignBlob__info">
-            <Card variant={Card.variant.highlight}>
+            <Card variant="secondary">
               <PunycodedDomain domain={domain} isRow />
               <div className="SignBlob__subject">
                 {t("is requesting approval to sign a blob of data")}
@@ -194,13 +192,17 @@ export const SignBlobBody = ({
             </Card>
             {accountNotFound && accountToSign ? (
               <div className="SignBlob__account-not-found">
-                <InfoBlock variant={InfoBlock.variant.warning}>
+                <Notification
+                  variant="warning"
+                  icon={<Icon.Warning />}
+                  title={t("Account not available")}
+                >
                   {t("The application is requesting a specific account")} (
                   {truncatedPublicKey(accountToSign)}),{" "}
                   {t(
                     "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request.",
                   )}
-                </InfoBlock>
+                </Notification>
               </div>
             ) : null}
           </div>
@@ -208,14 +210,17 @@ export const SignBlobBody = ({
         </ModalWrapper>
         <ButtonsContainer>
           <Button
-            fullWidth
-            variant={Button.variant.tertiary}
+            size="md"
+            isFullWidth
+            variant="secondary"
             onClick={() => rejectAndClose()}
           >
             {t("Reject")}
           </Button>
           <Button
-            fullWidth
+            size="md"
+            isFullWidth
+            variant="primary"
             isLoading={isConfirming}
             onClick={() => _handleApprove()}
           >
diff --git a/extension/src/popup/views/SignTransaction/SignTx/index.tsx b/extension/src/popup/views/SignTransaction/SignTx/index.tsx
index fc9cccafc3..9b624707e3 100644
--- a/extension/src/popup/views/SignTransaction/SignTx/index.tsx
+++ b/extension/src/popup/views/SignTransaction/SignTx/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from "react";
-import { Card, Icon } from "@stellar/design-system";
+import { Button, Card, Icon, Notification } from "@stellar/design-system";
 import StellarSdk, { FederationServer, MuxedAccount } from "stellar-sdk";
 import * as SorobanSdk from "soroban-client";
 import { useTranslation, Trans } from "react-i18next";
@@ -13,8 +13,6 @@ import {
   truncatedPublicKey,
 } from "helpers/stellar";
 import { decodeMemo } from "popup/helpers/parseTransaction";
-import { Button } from "popup/basics/buttons/Button";
-import { InfoBlock } from "popup/basics/InfoBlock";
 import { TransactionHeading } from "popup/basics/TransactionHeading";
 import { signTransaction } from "popup/ducks/access";
 
@@ -123,10 +121,10 @@ export const SignTxBody = ({
     flaggedKeys,
   } = tx;
 
-  /* 
-  Reconstruct the tx from xdr as passing a tx through extension contexts 
-  loses custom prototypes associated with some values. This is fine for most cases 
-  where we just need a high level overview of the tx, like just a list of operations.  
+  /*
+  Reconstruct the tx from xdr as passing a tx through extension contexts
+  loses custom prototypes associated with some values. This is fine for most cases
+  where we just need a high level overview of the tx, like just a list of operations.
   But in this case, we will need the hostFn prototype associated with Soroban tx operations.
   */
 
@@ -309,7 +307,7 @@ export const SignTxBody = ({
             <FirstTimeWarningMessage />
           ) : null}
           <div className="SignTransaction__info">
-            <Card variant={Card.variant.highlight}>
+            <Card variant="secondary">
               <PunycodedDomain domain={domain} isRow />
               <div className="SignTransaction__subject">
                 {t("is requesting approval to a")}{" "}
@@ -344,13 +342,17 @@ export const SignTxBody = ({
             </Card>
             {accountNotFound && accountToSign ? (
               <div className="SignTransaction__account-not-found">
-                <InfoBlock variant={InfoBlock.variant.warning}>
+                <Notification
+                  variant="warning"
+                  icon={<Icon.Warning />}
+                  title={t("Account not available")}
+                >
                   {t("The application is requesting a specific account")} (
                   {truncatedPublicKey(accountToSign)}),{" "}
                   {t(
                     "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this transaction.",
                   )}
-                </InfoBlock>
+                </Notification>
               </div>
             ) : null}
           </div>
@@ -379,15 +381,18 @@ export const SignTxBody = ({
         </ModalWrapper>
         <ButtonsContainer>
           <Button
-            fullWidth
-            variant={Button.variant.tertiary}
+            size="md"
+            isFullWidth
+            variant="secondary"
             onClick={() => rejectAndClose()}
           >
             {t("Reject")}
           </Button>
           <Button
+            size="md"
             disabled={isSubmitDisabled}
-            fullWidth
+            isFullWidth
+            variant="primary"
             isLoading={isConfirming}
             onClick={() => _handleApprove()}
           >
diff --git a/extension/src/popup/views/SignTransaction/styles.scss b/extension/src/popup/views/SignTransaction/styles.scss
index 53e41144bb..a20f16939e 100644
--- a/extension/src/popup/views/SignTransaction/styles.scss
+++ b/extension/src/popup/views/SignTransaction/styles.scss
@@ -14,7 +14,7 @@
   }
 
   &__inner-transaction {
-    border: 1px solid var(--pal-border-primary);
+    border: 1px solid var(--color-gray-30);
     border-radius: 0.5rem;
     height: 10rem;
     opacity: 0.7;
@@ -28,8 +28,8 @@
   }
 
   &__subject {
-    border-bottom: 1px solid var(--pal-border-secondary);
-    color: var(--pal-text-primary);
+    border-bottom: 1px solid var(--color-gray-30);
+    color: var(--color-gray-90);
     font-size: 0.875rem;
     line-height: 1.5rem;
     margin-bottom: 1rem;
diff --git a/extension/src/popup/views/UnlockAccount/index.tsx b/extension/src/popup/views/UnlockAccount/index.tsx
index 494537e87b..685c5a9f34 100644
--- a/extension/src/popup/views/UnlockAccount/index.tsx
+++ b/extension/src/popup/views/UnlockAccount/index.tsx
@@ -3,10 +3,9 @@ import get from "lodash/get";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useHistory } from "react-router-dom";
 import { Field, Form, Formik, FieldProps } from "formik";
-import { Input, TextLink } from "@stellar/design-system";
+import { Button, Input, Link } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "popup/basics/buttons/Button";
 import { ROUTES } from "popup/constants/routes";
 import { openTab } from "popup/helpers/navigate";
 import { newTabHref } from "helpers/urls";
@@ -58,6 +57,7 @@ export const UnlockAccount = () => {
                 <Field name="password">
                   {({ field }: FieldProps) => (
                     <Input
+                      fieldSize="md"
                       autoComplete="off"
                       id="password-input"
                       placeholder={t("Enter Password")}
@@ -75,7 +75,9 @@ export const UnlockAccount = () => {
               </FormRows>
               <SubmitButtonWrapper>
                 <Button
-                  fullWidth
+                  size="md"
+                  isFullWidth
+                  variant="primary"
                   type="submit"
                   isLoading={isSubmitting}
                   disabled={!(dirty && isValid)}
@@ -90,14 +92,16 @@ export const UnlockAccount = () => {
       <div className="UnlockAccount__import-account">
         <div>{t("Want to add another account?")}</div>
         <div>
-          <TextLink
-            variant={TextLink.variant.secondary}
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link
+            variant="secondary"
+            role="button"
             onClick={() => {
               openTab(newTabHref(ROUTES.recoverAccount));
             }}
           >
             {t("Import using account seed phrase")}
-          </TextLink>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/extension/src/popup/views/UnlockAccount/styles.scss b/extension/src/popup/views/UnlockAccount/styles.scss
index 8fac1c2796..69373c8830 100644
--- a/extension/src/popup/views/UnlockAccount/styles.scss
+++ b/extension/src/popup/views/UnlockAccount/styles.scss
@@ -9,7 +9,7 @@
     padding: 5rem 0 3rem;
     font-size: 2rem;
     line-height: 2.4rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     max-width: 17rem;
   }
 
diff --git a/extension/src/popup/views/VerifyAccount/index.tsx b/extension/src/popup/views/VerifyAccount/index.tsx
index 99d595a6ef..fb5ed06ae3 100644
--- a/extension/src/popup/views/VerifyAccount/index.tsx
+++ b/extension/src/popup/views/VerifyAccount/index.tsx
@@ -5,7 +5,7 @@ import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { Formik, Form, Field, FieldProps } from "formik";
-import { Input } from "@stellar/design-system";
+import { Button, Input } from "@stellar/design-system";
 
 import { ROUTES } from "popup/constants/routes";
 import { navigateTo } from "popup/helpers/navigate";
@@ -14,7 +14,6 @@ import {
   authErrorSelector,
 } from "popup/ducks/accountServices";
 import { PopupWrapper } from "popup/basics/PopupWrapper";
-import { Button } from "popup/basics/buttons/Button";
 import { SubviewHeader } from "popup/components/SubviewHeader";
 
 import "./styles.scss";
@@ -65,6 +64,7 @@ export const VerifyAccount = ({
             <Field name="password">
               {({ field }: FieldProps) => (
                 <Input
+                  fieldSize="md"
                   id="password-input"
                   type="password"
                   placeholder={t("Enter password")}
@@ -78,7 +78,9 @@ export const VerifyAccount = ({
             </Field>
             <div className="VerifyAccount__btn-continue">
               <Button
-                fullWidth
+                size="md"
+                isFullWidth
+                variant="primary"
                 isLoading={isSubmitting}
                 disabled={!(dirty && isValid)}
               >
diff --git a/extension/src/popup/views/VerifyAccount/styles.scss b/extension/src/popup/views/VerifyAccount/styles.scss
index 5113a437e7..7c83d84f0d 100644
--- a/extension/src/popup/views/VerifyAccount/styles.scss
+++ b/extension/src/popup/views/VerifyAccount/styles.scss
@@ -1,6 +1,6 @@
 .VerifyAccount {
   &__copy {
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     font-size: var(--font-size);
     line-height: 1.5rem;
     margin-bottom: 1.5rem;
diff --git a/extension/src/popup/views/ViewPublicKey/index.tsx b/extension/src/popup/views/ViewPublicKey/index.tsx
index 6998936551..933e16d414 100644
--- a/extension/src/popup/views/ViewPublicKey/index.tsx
+++ b/extension/src/popup/views/ViewPublicKey/index.tsx
@@ -3,11 +3,10 @@ import { useDispatch, useSelector } from "react-redux";
 import QrCode from "qrcode.react";
 import { Formik, Field, FieldProps, Form, useFormikContext } from "formik";
 import { object as YupObject, string as YupString } from "yup";
-import { Icon, Input, CopyText } from "@stellar/design-system";
+import { Icon, Input, CopyText, Button } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { PillButton } from "popup/basics/buttons/PillButton";
-import { Button } from "popup/basics/buttons/Button";
 
 import { emitMetric } from "helpers/metrics";
 import { truncatedPublicKey, isCustomNetwork } from "helpers/stellar";
@@ -91,6 +90,7 @@ export const ViewPublicKey = () => {
                       <Field name="accountName">
                         {({ field }: FieldProps) => (
                           <Input
+                            fieldSize="md"
                             autoComplete="off"
                             id="accountName"
                             placeholder={accountName}
@@ -139,8 +139,9 @@ export const ViewPublicKey = () => {
         <div className="ViewPublicKey__external-link">
           {!isCustomNetwork(networkDetails) ? (
             <Button
-              fullWidth
-              variant={Button.variant.tertiary}
+              size="md"
+              isFullWidth
+              variant="secondary"
               onClick={() => {
                 openTab(
                   `https://stellar.expert/explorer/${networkDetails.network.toLowerCase()}/account/${publicKey}`,
diff --git a/extension/src/popup/views/ViewPublicKey/styles.scss b/extension/src/popup/views/ViewPublicKey/styles.scss
index 1f39da4efb..023a358fae 100644
--- a/extension/src/popup/views/ViewPublicKey/styles.scss
+++ b/extension/src/popup/views/ViewPublicKey/styles.scss
@@ -17,7 +17,7 @@
     height: 2rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
     font-weight: var(--font-weight-medium);
     width: 100%;
     display: flex;
@@ -70,7 +70,7 @@
   &__qr-code {
     height: 11.5rem;
     width: 11.5rem;
-    background: var(--pal-brand-primary-on);
+    background: var(--color-white);
     border-radius: 0.5rem;
     display: flex;
     align-items: center;
@@ -88,7 +88,7 @@
   &__address-copy {
     font-size: 1rem;
     line-height: 1.5rem;
-    color: var(--pal-text-primary);
+    color: var(--color-gray-90);
   }
 
   &__copy-btn {
diff --git a/extension/src/popup/views/Welcome/index.tsx b/extension/src/popup/views/Welcome/index.tsx
index 47719489a7..2d5e310b2e 100644
--- a/extension/src/popup/views/Welcome/index.tsx
+++ b/extension/src/popup/views/Welcome/index.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { Card } from "@stellar/design-system";
+import { Button, Card } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { ROUTES } from "popup/constants/routes";
 import { navigateTo } from "popup/helpers/navigate";
-import { Button } from "popup/basics/buttons/Button";
 import { FullscreenStyle } from "popup/components/FullscreenStyle";
 import { Header } from "popup/components/Header";
 
@@ -25,14 +24,16 @@ export const Welcome = () => {
         </div>
         <div className="Welcome__row-screen">
           <div className="Welcome__half-screen">
-            <Card variant={Card.variant.highlight}>
+            <Card variant="secondary">
               <div className="Welcome__heading--small">{t("I’m new!")}</div>
               <div className="Welcome__text">
                 {t("I’m going to need a seed phrase")}
               </div>
               <div className="Welcome__button-container">
                 <Button
-                  fullWidth
+                  size="md"
+                  isFullWidth
+                  variant="primary"
                   onClick={() => navigateTo(ROUTES.accountCreator)}
                 >
                   {t("CREATE WALLET")}
@@ -50,8 +51,9 @@ export const Welcome = () => {
               </div>
               <div className="Welcome__button-container">
                 <Button
-                  fullWidth
-                  variant={Button.variant.tertiary}
+                  size="md"
+                  isFullWidth
+                  variant="secondary"
                   onClick={() => navigateTo(ROUTES.recoverAccount)}
                 >
                   {t("IMPORT WALLET")}
diff --git a/extension/src/popup/views/Welcome/styles.scss b/extension/src/popup/views/Welcome/styles.scss
index d0084a7a6f..c2324863f9 100644
--- a/extension/src/popup/views/Welcome/styles.scss
+++ b/extension/src/popup/views/Welcome/styles.scss
@@ -24,7 +24,7 @@
 
   &__heading {
     &--large {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       font-size: 2.5rem;
       line-height: 3rem;
       margin-bottom: 2.5rem;
@@ -33,7 +33,7 @@
     }
 
     &--small {
-      color: var(--pal-text-primary);
+      color: var(--color-gray-90);
       font-size: 1.125rem;
       font-weight: var(--font-weight-medium);
       margin-bottom: 0.75rem;
diff --git a/yarn.lock b/yarn.lock
index cea05c3a14..af5d4e52e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3085,6 +3085,26 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/dom@^1.2.5":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
+
 "@hapi/hoek@^9.0.0":
   version "9.1.0"
   resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.0.tgz"
@@ -3392,6 +3412,14 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.5.tgz#a3bb4d5c6825aab0d281268f47f6ad5853431e91"
+  integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
@@ -3640,11 +3668,6 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.11.2":
-  version "2.11.2"
-  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz"
-  integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
-
 "@reduxjs/toolkit@^1.5.0":
   version "1.5.0"
   resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz"
@@ -3778,17 +3801,16 @@
     p-map "^4.0.0"
     webpack-sources "^3.2.2"
 
-"@stellar/design-system@^0.8.1":
-  version "0.8.1"
-  resolved "https://registry.npmjs.org/@stellar/design-system/-/design-system-0.8.1.tgz"
-  integrity sha512-fvdmWkN848U0YA52ueDqKCktyoEfg3VkzCHFv6ek9fVYkQaIhQid97M0dGaLuvOMHvAqyp6+EOjLVyqdt/juVQ==
+"@stellar/design-system@^1.0.0-beta.14":
+  version "1.0.0-beta.14"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-1.0.0-beta.14.tgz#56914f4d575eb93b65129ec280f077e845fb6cce"
+  integrity sha512-51MpT/bg1ShJmbYnB17bphd8jSHCgqfTqudNInXGEM2BcXwH8PQWFDIgQ07jD6wIvOGhRAktyYNE7wQv1X2O2w==
   dependencies:
-    "@popperjs/core" "^2.11.2"
-    bignumber.js "^9.0.2"
-    configurable-date-input-polyfill "^3.1.3"
-    react-copy-to-clipboard "^5.0.4"
-    stellar-identicon-js "^1.0.0"
-    tslib "^2.3.1"
+    "@floating-ui/dom" "^1.2.5"
+    bignumber.js "^9.1.1"
+    configurable-date-input-polyfill "^3.1.5"
+    react-copy-to-clipboard "^5.1.0"
+    tslib "^2.5.0"
 
 "@stellar/eslint-config@^1.0.3":
   version "1.0.5"
@@ -5039,6 +5061,11 @@ acorn@^8.5.0:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.8.2:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+
 address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/address/-/address-1.1.2.tgz"
@@ -5671,11 +5698,6 @@ bignumber.js@^4.0.0:
   resolved "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.1.0.tgz"
   integrity sha512-eJzYkFYy9L4JzXsbymsFn3p54D+llV27oTQ+ziJG7WFRheJcNZilgVXMG0LoZtlQSKBsJdWtLFqOD0u+U0jZKA==
 
-bignumber.js@^9.0.2:
-  version "9.0.2"
-  resolved "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.2.tgz"
-  integrity sha512-GAcQvbpsM0pUb0zw1EI0KhQEZ+lRwR5fYaAp3vPOYuP7aDvGy6cVN6XHLauvF8SOga2y0dcLcjt3iQDTSEliyw==
-
 bignumber.js@^9.1.1:
   version "9.1.1"
   resolved "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz"
@@ -6002,7 +6024,7 @@ bytes@3.1.2:
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-cacache@^12.0.2, cacache@^12.0.3:
+cacache@^12.0.3:
   version "12.0.4"
   resolved "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz"
   integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
@@ -6637,10 +6659,10 @@ configstore@^5.0.1:
     write-file-atomic "^3.0.0"
     xdg-basedir "^4.0.0"
 
-configurable-date-input-polyfill@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/configurable-date-input-polyfill/-/configurable-date-input-polyfill-3.1.3.tgz"
-  integrity sha512-H/EyTkqrMxYvlPfOrV6WoCi0Ui4JsiXSMvD1XV/THfUedDvItFt9noXDOB+sBgLpZk4kAtg4XpNGiszkyxJTlw==
+configurable-date-input-polyfill@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/configurable-date-input-polyfill/-/configurable-date-input-polyfill-3.1.5.tgz#97b03a20862e8222272c1572df9593748b3bb288"
+  integrity sha512-N077aVhmGm6naVPdSyOes+YrFds4CBrCBcWN4zq52Fz7vzQB62iGdkHRNSQE3KFjtMbSMoUrWzbh2oWHXf39og==
 
 confusing-browser-globals@^1.0.9:
   version "1.0.10"
@@ -6740,6 +6762,13 @@ copy-to-clipboard@^3:
   dependencies:
     toggle-selection "^1.0.6"
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^11.0.0:
   version "11.0.0"
   resolved "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz"
@@ -7832,7 +7861,7 @@ err-code@^2.0.2:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
-errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.3:
   version "0.1.7"
   resolved "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz"
   integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
@@ -10212,11 +10241,6 @@ is-word-character@^1.0.0:
   resolved "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz"
   integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
 
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
-
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
@@ -10725,6 +10749,15 @@ jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jest-worker@^28.1.3:
   version "28.1.3"
   resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz"
@@ -13145,7 +13178,7 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-prop-types@^15.6.1:
+prop-types@^15.6.1, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -13366,7 +13399,7 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
-react-copy-to-clipboard@^5.0.2, react-copy-to-clipboard@^5.0.4:
+react-copy-to-clipboard@^5.0.2:
   version "5.0.4"
   resolved "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz"
   integrity sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==
@@ -13374,6 +13407,14 @@ react-copy-to-clipboard@^5.0.2, react-copy-to-clipboard@^5.0.4:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
+react-copy-to-clipboard@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
+  integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
+  dependencies:
+    copy-to-clipboard "^3.3.1"
+    prop-types "^15.8.1"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
@@ -14300,7 +14341,7 @@ schema-utils@^3.1.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.2.0:
+schema-utils@^3.1.1, schema-utils@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
   integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
@@ -14424,7 +14465,7 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0:
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz"
   integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
@@ -15421,22 +15462,18 @@ terminal-link@^2.0.0:
     ansi-escapes "^4.2.1"
     supports-hyperlinks "^2.0.0"
 
-terser-webpack-plugin@^1.4.3, terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7:
-  version "1.4.5"
-  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz"
-  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
+terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7:
+  version "5.3.9"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
+  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
   dependencies:
-    cacache "^12.0.2"
-    find-cache-dir "^2.1.0"
-    is-wsl "^1.1.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^4.0.0"
-    source-map "^0.6.1"
-    terser "^4.1.2"
-    webpack-sources "^1.4.0"
-    worker-farm "^1.7.0"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.8"
 
-terser@^4.1.2, terser@^4.6.3:
+terser@^4.6.3:
   version "4.8.1"
   resolved "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz"
   integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
@@ -15455,6 +15492,16 @@ terser@^5.10.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+terser@^5.16.8:
+  version "5.19.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.2.tgz#bdb8017a9a4a8de4663a7983f45c506534f9234e"
+  integrity sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"
@@ -15700,10 +15747,10 @@ tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
-tslib@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+tslib@^2.5.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
+  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
 
 tsutils@^3.17.1:
   version "3.17.1"
@@ -16557,7 +16604,7 @@ webpack-merge@^5.8.0:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
-webpack-sources@^1.1.0, webpack-sources@^1.4.0:
+webpack-sources@^1.1.0:
   version "1.4.3"
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
@@ -16793,13 +16840,6 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-worker-farm@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz"
-  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
-  dependencies:
-    errno "~0.1.7"
-
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"