diff --git a/packages/fxa-content-server/app/styles/_variables.scss b/packages/fxa-content-server/app/styles/_variables.scss
index 4b682cb3bc..92bd7054db 100644
--- a/packages/fxa-content-server/app/styles/_variables.scss
+++ b/packages/fxa-content-server/app/styles/_variables.scss
@@ -1,4 +1,6 @@
-@import '~photon-colors/colors.scss';
+@use "sass:color";
+
+@import './photon-colors.scss';
 
 // Font Variables
 $default-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
@@ -88,7 +90,7 @@ $button-text-color-primary: #fff;
 $content-background-color: $color-white;
 $cropper-background-color: $color-black;
 $faint-text-color: $color-grey-faint-text;
-$horizontal-rule-color: darken($color-grey-light, 5);
+$horizontal-rule-color: color.adjust($color-grey-light, $lightness: -5);
 $html-background-color: hsl(240, 60%, 99%);
 
 $header-color: rgb(32, 18, 59);
@@ -129,7 +131,7 @@ $message-text-color: $color-white;
 $mobile-html-background-color: $color-white;
 
 $secondary-button-background-color: $color-grey-lightest;
-$secondary-button-border-color: lighten($color-grey, 5);
+$secondary-button-border-color: color.adjust($color-grey, $lightness: 5);
 
 $show-password-background-color: $color-white;
 $show-password-focus-label-color: $color-white;
diff --git a/packages/fxa-content-server/app/styles/photon-colors.scss b/packages/fxa-content-server/app/styles/photon-colors.scss
new file mode 100644
index 0000000000..c5b32e976d
--- /dev/null
+++ b/packages/fxa-content-server/app/styles/photon-colors.scss
@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* AUTOGENERATED Photon Colors SCSS Variables v3.3.2 */
+// These colors are from the former Firefox design system that is now deprecated and will no longer be updated.
+// Source: https://github.com/FirefoxUX/photon-colors
+
+$magenta-50: #ff1ad9;
+$magenta-60: #ed00b5;
+$magenta-70: #b5007f;
+$magenta-80: #7d004f;
+$magenta-90: #440027;
+
+$purple-30: #c069ff;
+$purple-40: #ad3bff;
+$purple-50: #9400ff;
+$purple-60: #8000d7;
+$purple-70: #6200a4;
+$purple-80: #440071;
+$purple-90: #25003e;
+
+$blue-40: #45a1ff;
+$blue-50: #0a84ff;
+$blue-50-a30: rgba(10, 132, 255, 0.3);
+$blue-60: #0060df;
+$blue-70: #003eaa;
+$blue-80: #002275;
+$blue-90: #000f40;
+
+$teal-50: #00feff;
+$teal-60: #00c8d7;
+$teal-70: #008ea4;
+$teal-80: #005a71;
+$teal-90: #002d3e;
+
+$green-50: #30e60b;
+$green-60: #12bc00;
+$green-70: #058b00;
+$green-80: #006504;
+$green-90: #003706;
+
+$yellow-50: #ffe900;
+$yellow-60: #d7b600;
+$yellow-60-a30: rgba(215, 182, 0, 0.3);
+$yellow-70: #a47f00;
+$yellow-80: #715100;
+$yellow-90: #3e2800;
+
+$red-50: #ff0039;
+$red-60: #d70022;
+$red-60-a30: rgba(215, 0, 34, 0.3);
+$red-70: #a4000f;
+$red-80: #5a0002;
+$red-90: #3e0200;
+
+$orange-50: #ff9400;
+$orange-60: #d76e00;
+$orange-70: #a44900;
+$orange-80: #712b00;
+$orange-90: #3e1300;
+
+$grey-10: #f9f9fa;
+$grey-10-a10: rgba(249, 249, 250, 0.1);
+$grey-10-a20: rgba(249, 249, 250, 0.2);
+$grey-10-a40: rgba(249, 249, 250, 0.4);
+$grey-10-a60: rgba(249, 249, 250, 0.6);
+$grey-10-a80: rgba(249, 249, 250, 0.8);
+$grey-20: #ededf0;
+$grey-30: #d7d7db;
+$grey-40: #b1b1b3;
+$grey-50: #737373;
+$grey-60: #4a4a4f;
+$grey-70: #38383d;
+$grey-80: #2a2a2e;
+$grey-90: #0c0c0d;
+$grey-90-a05: rgba(12, 12, 13, 0.05);
+$grey-90-a10: rgba(12, 12, 13, 0.1);
+$grey-90-a20: rgba(12, 12, 13, 0.2);
+$grey-90-a30: rgba(12, 12, 13, 0.3);
+$grey-90-a40: rgba(12, 12, 13, 0.4);
+$grey-90-a50: rgba(12, 12, 13, 0.5);
+$grey-90-a60: rgba(12, 12, 13, 0.6);
+$grey-90-a70: rgba(12, 12, 13, 0.7);
+$grey-90-a80: rgba(12, 12, 13, 0.8);
+$grey-90-a90: rgba(12, 12, 13, 0.9);
+
+$ink-40: #7175A8;
+$ink-50: #595E91;
+$ink-60: #464B76;
+$ink-70: #363959;
+$ink-80: #202340;
+$ink-90: #0f1126;
+
+$white-100: #ffffff;
diff --git a/packages/fxa-content-server/package.json b/packages/fxa-content-server/package.json
index e3d4d44e19..2d40e0b1ad 100644
--- a/packages/fxa-content-server/package.json
+++ b/packages/fxa-content-server/package.json
@@ -122,7 +122,6 @@
     "node-vat": "0.0.9",
     "normalize.css": "8.0.1",
     "on-headers": "1.0.2",
-    "photon-colors": "1.0.3",
     "postcss-cli": "7.1.1",
     "postcss-loader": "4.2.0",
     "sass-loader": "^13.3.2",
diff --git a/packages/fxa-payments-server/package.json b/packages/fxa-payments-server/package.json
index ec02301bea..eaa3afb56d 100644
--- a/packages/fxa-payments-server/package.json
+++ b/packages/fxa-payments-server/package.json
@@ -149,7 +149,6 @@
     "node-fetch": "^2.6.7",
     "normalize.css": "8.0.1",
     "on-headers": "^1.0.2",
-    "photon-colors": "1.0.3",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
diff --git a/yarn.lock b/yarn.lock
index 692dc9a49c..e817177a8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34861,7 +34861,6 @@ fsevents@~2.1.1:
     normalize.css: 8.0.1
     on-headers: 1.0.2
     otplib: ^11.0.1
-    photon-colors: 1.0.3
     pm2: ^5.3.0
     postcss-assets: ^6.0.0
     postcss-cli: 7.1.1
@@ -35230,7 +35229,6 @@ fsevents@~2.1.1:
     node-fetch: ^2.6.7
     normalize.css: 8.0.1
     on-headers: ^1.0.2
-    photon-colors: 1.0.3
     pm2: ^5.3.0
     postcss-import: 15.1.0
     prettier: ^2.3.1
@@ -50025,13 +50023,6 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
-"photon-colors@npm:1.0.3":
-  version: 1.0.3
-  resolution: "photon-colors@npm:1.0.3"
-  checksum: a1634d97086475222eed5639ea1eac8babfeeea8f2f1d4fe266662e5646c414fa5aff1f2fd744d8cc99a87afbc231ae2e6b8081136985cb455aa1049e638ccc1
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"