Skip to content

feat(frontend): rebrand color palette to OpsMill Blue #9843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
fatih-acar wants to merge 1 commit into
base: fac/solve-outdated-logo-4ubwb
Choose a base branch
from
+69 −34
Draft

feat(frontend): rebrand color palette to OpsMill Blue #9843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog/+rebrand-opsmill-blue-palette.changed.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion docs/src/components/EnterpriseBadge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
32 changes: 16 additions & 16 deletions docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/src/entities/resource-manager/ui/ResourcePoolUtilization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ResourcePoolUtilization = ({
description="Utilization of pool within the default branch"
/>
),
color: "#0987a8",
color: "#304F81",
},
{
value: utilizationOtherBranches,
Expand All @@ -42,7 +42,7 @@ const ResourcePoolUtilization = ({
description="Utilization of pool within other branches"
/>
),
color: "#54b6cf",
color: "#5F86C4",
},
]}
{...props}
Expand Down
46 changes: 32 additions & 14 deletions frontend/app/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion frontend/packages/ui/src/components/sortable-list/sortable-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
);
}
Expand Down
16 changes: 16 additions & 0 deletions frontend/packages/ui/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,22 @@

@cubic-dev-ai cubic-dev-ai Bot Jul 8, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3: This palette is duplicated between the UI package CSS and the app Tailwind config, so future brand tweaks need to be edited in two places and can drift. A shared token source would keep the accent ramp aligned.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At frontend/packages/ui/src/index.css, line 18:

<comment>This palette is duplicated between the UI package CSS and the app Tailwind config, so future brand tweaks need to be edited in two places and can drift. A shared token source would keep the accent ramp aligned.</comment>

<file context>
@@ -10,6 +10,22 @@
+     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;
</file context>

@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 {
Expand Down
Loading