From 8d2cf5d9abb847a41bb779498d5810dc95a56361 Mon Sep 17 00:00:00 2001
From: Fatih Acar <fatih@opsmill.com>
Date: Wed, 8 Jul 2026 08:06:18 +0000
Subject: [PATCH] feat(frontend): rebrand color palette to OpsMill Blue

Replace the previous teal accent with OpsMill Blue (#426DB1) across the
web interface and documentation. Each color ramp is re-hued while its
per-stop lightness (and therefore contrast) and every gradient structure
are preserved, so component treatments are unchanged in form:

- app custom-blue scale (tailwind.config.js) re-anchored on #426DB1
- @infrahub/ui design-system accent: the cyan-* token scale is remapped
  to OpsMill Blue (buttons, focus rings, checkboxes, meters, spinners),
  keeping every from-/to- gradient intact
- docs Infima primary scale (light + dark) re-hued; Enterprise badge and
  code-line/hover tints updated to match

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../+rebrand-opsmill-blue-palette.changed.md  |  1 +
 docs/src/components/EnterpriseBadge.jsx       |  2 +-
 docs/src/css/custom.css                       | 32 ++++++-------
 .../ui/ResourcePoolUtilization.tsx            |  4 +-
 frontend/app/tailwind.config.js               | 46 +++++++++++++------
 .../sortable-list/sortable-list.tsx           |  2 +-
 frontend/packages/ui/src/index.css            | 16 +++++++
 7 files changed, 69 insertions(+), 34 deletions(-)
 create mode 100644 changelog/+rebrand-opsmill-blue-palette.changed.md

diff --git a/changelog/+rebrand-opsmill-blue-palette.changed.md b/changelog/+rebrand-opsmill-blue-palette.changed.md
new file mode 100644
index 00000000000..e11f681c00e
--- /dev/null
+++ b/changelog/+rebrand-opsmill-blue-palette.changed.md
@@ -0,0 +1 @@
+Updated the Infrahub color palette across the web interface and documentation to the current OpsMill Blue brand (`#426DB1`), replacing the previous teal accent.
diff --git a/docs/src/components/EnterpriseBadge.jsx b/docs/src/components/EnterpriseBadge.jsx
index 2f8c88d1abf..9cee28aa13f 100644
--- a/docs/src/components/EnterpriseBadge.jsx
+++ b/docs/src/components/EnterpriseBadge.jsx
@@ -4,7 +4,7 @@ import { translate } from '@docusaurus/Translate';
 export default function EnterpriseBadge() {
   return (
     <span style={{
-      backgroundColor: "#0a95ba",
+      backgroundColor: "#426DB1",
       color: "white",
       padding: "4px 8px",
       borderRadius: "12px",
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 1fe7c4aa549..80fe3467ea1 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -9,16 +9,16 @@
 /* You can override the default Infima variables here. */
 :root {
   --ifm-font-family-base: "Inter", system-ui, -apple-system, sans-serif;
-  --ifm-color-primary: #08738f;
-  --ifm-color-primary-dark: #076781;
-  --ifm-color-primary-darker: #07627a;
-  --ifm-color-primary-darkest: #065064;
-  --ifm-color-primary-light: #097e9d;
-  --ifm-color-primary-lighter: #0984a4;
-  --ifm-color-primary-lightest: #0a95ba;
+  --ifm-color-primary: #426DB1;
+  --ifm-color-primary-dark: #3E66A6;
+  --ifm-color-primary-darker: #3C63A1;
+  --ifm-color-primary-darkest: #365990;
+  --ifm-color-primary-light: #4774BB;
+  --ifm-color-primary-lighter: #4D78BC;
+  --ifm-color-primary-lightest: #5D85C3;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgb(24 65 100 / 0.85);
-  --ifm-hover-overlay: rgb(242, 252, 255);
+  --docusaurus-highlighted-code-line-bg: rgb(24 53 100 / 0.85);
+  --ifm-hover-overlay: rgb(242, 247, 255);
   --main-bg-color: #f9f9f9;
   --layout-bg-color: #fff;
   --border-color: #e5e7eb;
@@ -30,13 +30,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #0a95ba;
-  --ifm-color-primary-dark: #0986a7;
-  --ifm-color-primary-darker: #087f9e;
-  --ifm-color-primary-darkest: #076882;
-  --ifm-color-primary-light: #0ba4cd;
-  --ifm-color-primary-lighter: #0babd6;
-  --ifm-color-primary-lightest: #0dc2f2;
+  --ifm-color-primary: #5D85C3;
+  --ifm-color-primary-dark: #4F7ABD;
+  --ifm-color-primary-darker: #4774BB;
+  --ifm-color-primary-darkest: #3E67A7;
+  --ifm-color-primary-light: #6C90C8;
+  --ifm-color-primary-lighter: #7295CB;
+  --ifm-color-primary-lightest: #88A5D3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --main-bg-color: #1e2327;
   --layout-bg-color: #151a1c;
diff --git a/frontend/app/src/entities/resource-manager/ui/ResourcePoolUtilization.tsx b/frontend/app/src/entities/resource-manager/ui/ResourcePoolUtilization.tsx
index af09762e880..d318ca8c220 100644
--- a/frontend/app/src/entities/resource-manager/ui/ResourcePoolUtilization.tsx
+++ b/frontend/app/src/entities/resource-manager/ui/ResourcePoolUtilization.tsx
@@ -32,7 +32,7 @@ const ResourcePoolUtilization = ({
                 description="Utilization of pool within the default branch"
               />
             ),
-            color: "#0987a8",
+            color: "#304F81",
           },
           {
             value: utilizationOtherBranches,
@@ -42,7 +42,7 @@ const ResourcePoolUtilization = ({
                 description="Utilization of pool within other branches"
               />
             ),
-            color: "#54b6cf",
+            color: "#5F86C4",
           },
         ]}
         {...props}
diff --git a/frontend/app/tailwind.config.js b/frontend/app/tailwind.config.js
index dffd8df5861..4852183784d 100644
--- a/frontend/app/tailwind.config.js
+++ b/frontend/app/tailwind.config.js
@@ -10,22 +10,40 @@ export default {
         xxs: "0.625rem",
       },
       colors: {
+        // Design-system accent hue. The @infrahub/ui components standardized on
+        // Tailwind's `cyan` scale as the single brand-accent token; we remap that
+        // scale to OpsMill Blue (#426DB1) so every cyan-* usage (buttons, focus
+        // rings, checkboxes, meters, spinners) matches current branding while
+        // keeping each component's existing gradient/contrast structure intact.
+        cyan: {
+          50: "#f1f5fa",
+          100: "#dbe4f2",
+          200: "#bbcce6",
+          300: "#8ca8d4",
+          400: "#527cbe",
+          500: "#3b629f",
+          600: "#335387",
+          700: "#2b4773",
+          800: "#253e65",
+          900: "#213658",
+          950: "#152237",
+        },
         "custom-blue": {
-          1: "#E4F3F7",
-          10: "#a7d9e6",
-          50: "#23a1c1",
-          100: "#3babc8",
-          200: "#54b6cf",
-          300: "#6cc0d6",
-          400: "#85cbdd",
-          500: "#0B97BB",
-          600: "#0987a8",
-          700: "#087895",
-          800: "#076982",
-          900: "#065a70",
+          1: "#E6ECF5",
+          10: "#ADC1E0",
+          50: "#3E66A6",
+          100: "#4875BB",
+          200: "#5F86C4",
+          300: "#7697CC",
+          400: "#8DA9D5",
+          500: "#426DB1",
+          600: "#304F81",
+          700: "#2B4672",
+          800: "#253D64",
+          900: "#203556",
         },
-        "custom-blue-green": "#0B6581",
-        "custom-blue-gray": "#0D3F54",
+        "custom-blue-green": "#0B3981",
+        "custom-blue-gray": "#0D2954",
         "custom-gray": "#0B1829",
         "custom-black": "#000000",
         "custom-white": "#FFFFFF",
diff --git a/frontend/packages/ui/src/components/sortable-list/sortable-list.tsx b/frontend/packages/ui/src/components/sortable-list/sortable-list.tsx
index d06f3980f6f..8d402b373ce 100644
--- a/frontend/packages/ui/src/components/sortable-list/sortable-list.tsx
+++ b/frontend/packages/ui/src/components/sortable-list/sortable-list.tsx
@@ -50,7 +50,7 @@ function SortableDropIndicator({ target }: { target: DropTarget }) {
     // -mt-px offsets the line's own height so this in-flow row adds no space, keeping siblings put.
     <DropIndicator
       target={target}
-      className="-mt-px mx-2 h-px rounded-full bg-cyan-600 shadow-[0_0_6px_1px_rgba(6,182,212,0.55)] outline-hidden"
+      className="-mt-px mx-2 h-px rounded-full bg-cyan-600 shadow-[0_0_6px_1px_rgba(59,98,159,0.55)] outline-hidden"
     />
   );
 }
diff --git a/frontend/packages/ui/src/index.css b/frontend/packages/ui/src/index.css
index deeaafb9219..d46866a46af 100644
--- a/frontend/packages/ui/src/index.css
+++ b/frontend/packages/ui/src/index.css
@@ -10,6 +10,22 @@
 
 @theme {
   --font-sans: InterVariable, sans-serif;
+
+  /* Brand-accent hue: the design system uses Tailwind's `cyan` scale as its
+     single accent token; remap it to OpsMill Blue (#426DB1) so every cyan-*
+     usage matches current branding. Kept in sync with the consuming app's
+     tailwind.config.js override. */
+  --color-cyan-50: #f1f5fa;
+  --color-cyan-100: #dbe4f2;
+  --color-cyan-200: #bbcce6;
+  --color-cyan-300: #8ca8d4;
+  --color-cyan-400: #527cbe;
+  --color-cyan-500: #3b629f;
+  --color-cyan-600: #335387;
+  --color-cyan-700: #2b4773;
+  --color-cyan-800: #253e65;
+  --color-cyan-900: #213658;
+  --color-cyan-950: #152237;
 }
 
 body {