feat(frontend): rebrand color palette to OpsMill Blue

[fatih-acar]

Summary

Aligns the Infrahub color palette — web interface and documentation — with the current brand color, OpsMill Blue #426DB1, replacing the previous teal/cyan accent. Stacked on top of the logo PR (#9812); this PR targets that branch so the two brand changes land together.

Approach

Every color ramp was re-hued to OpsMill Blue while preserving each stop's lightness and every gradient's structure, so contrast ratios and component treatments (button gradients, focus rings, meters) are unchanged in form — only the hue moves from teal to blue. This is what keeps the look consistent rather than swapping in an unrelated blue.

Key Changes

• App palette (tailwind.config.js): the custom-blue scale is re-anchored on #426DB1 at stop 500; the custom-blue-green/custom-blue-gray siblings are rotated into the blue family.
• Design-system accent (@infrahub/ui): the components standardized on Tailwind's cyan scale as their single accent token (buttons, focus rings, checkboxes, meters, spinners). That scale is remapped to OpsMill Blue in both the app's Tailwind config and the package's own @theme, so all cyan-* usages recolor at once with their from-…/to-… gradients intact.
• Docs (custom.css): the Infima --ifm-color-primary scale (light + dark) is re-hued; the Enterprise badge and the code-line/hover tints are updated to match.

Screenshots

Palette before/after (both scales — tonal ramp preserved):

Web UI — login (primary button + focus ring now OpsMill Blue):

Docs — light mode:

Docs — dark mode:

Notes / follow-ups

• The cyan scale is intentionally remapped to the brand blue (documented with a comment in both tailwind.config.js and @infrahub/ui's index.css). A cyan-* class now renders OpsMill Blue by design; this matches how the codebase already used cyan as its brand token.
• Out of scope (separate repo): the schema-visualizer submodule still uses the old teal #087895 as its node accent — that needs its own PR in opsmill/infrahub-schema-visualizer plus a submodule bump.
• Left untouched intentionally: the categorical data-viz palette in get-kind-color.ts (its #06b6d4 is one of several distinct category hues, not brand).

Test Plan

• pnpm build (frontend) and npm run build (docs) both pass; biome ci passes on the app.
• Verified visually against a preview build: login button, focus ring, and docs navbar/links/buttons all render OpsMill Blue in light and dark themes (screenshots above).

🤖 Generated with Claude Code

---

Summary by cubic

Rebrands the app and docs to OpsMill Blue (#426DB1), replacing the teal accent. Keeps contrast and gradients by re-huing existing ramps.

• Refactors

  • Remapped Tailwind cyan scale to OpsMill Blue in tailwind.config.js and @infrahub/ui theme. Updates buttons, focus rings, checkboxes, meters, and spinners.
  • Re-anchored custom-blue ramp on #426DB1; shifted custom-blue-green and custom-blue-gray into the blue family.
  • Updated docs Infima primary colors (light and dark). Adjusted Enterprise badge and code/hover tints.
  • Swapped hardcoded accents in ResourcePoolUtilization and sortable list drop indicator to new blue shades.
  • Added changelog entry.

• Migration

  • No code changes required. Note: cyan-* classes now render OpsMill Blue.

^{Written for commit 8d2cf5d. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found across 7 files

Confidence score: 5/5

• In frontend/packages/ui/src/index.css, the color palette is duplicated with the app Tailwind config, which creates a drift risk where brand/accent colors can diverge over time and produce inconsistent UI styling after future updates—move these values to a shared design-token source (or single import path) before or soon after merging.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/packages/ui/src/index.css">

<violation number="1" location="frontend/packages/ui/src/index.css:18">
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.</violation>
</file>

<sub>Shadow auto-approve: would not auto-approve because issues were found.

Re-trigger cubic</sub>

[cubic-dev-ai]

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>