From 3217ee2614a44839d24513b25c04d889e0bab456 Mon Sep 17 00:00:00 2001 From: kasiazjc Date: Mon, 6 Jul 2026 14:37:36 +0000 Subject: [PATCH 1/3] refactor(agor-ui): refresh primary brand color to deep ink-teal #34767A Moves colorPrimary/colorInfo/colorLink and all matching literal accents (logo gradient start, terminal cursor/cyan, particle background, theme editor defaults, marketing screenshot theme) from #2e9a92 to #34767A. The old teal reads too close to generic BI-tool teal/cyan; the new value keeps the logo's hue family but is darker/less saturated and improves light-mode text contrast (5.23:1 vs 3.41:1 against white) since colorLink reuses the same token. Co-Authored-By: Claude --- apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx | 2 +- .../src/components/EmbeddedTerminal/EmbeddedTerminal.tsx | 2 +- apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx | 4 ++-- .../src/components/ThemeEditorModal/ThemeEditorModal.tsx | 6 +++--- apps/agor-ui/src/contexts/ThemeContext.tsx | 6 +++--- apps/agor-ui/src/pages/MarketingScreenshotPage.tsx | 2 +- apps/agor-ui/src/utils/particleConfig.ts | 4 ++-- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx b/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx index 8e4cdbab4..a1d528779 100644 --- a/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx +++ b/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx @@ -36,7 +36,7 @@ export const BrandLogo: React.FC = ({ level = 3, style, classNam margin: 0, fontSize: LEVEL_SIZES[level], lineHeight: 1.35, - background: 'linear-gradient(90deg, #2e9a92 0%, #7fe8df 50%, #a8f5ed 100%)', + background: 'linear-gradient(90deg, #34767A 0%, #7fe8df 50%, #a8f5ed 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', diff --git a/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx b/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx index 542afa8c8..c5a1c4673 100644 --- a/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx +++ b/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx @@ -130,7 +130,7 @@ export const EmbeddedTerminal: React.FC = ({ theme: { background: '#141414', foreground: '#ffffff', - cursor: '#2e9a92', + cursor: '#34767A', cursorAccent: '#141414', }, }); diff --git a/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx b/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx index 9681f40e5..1e10f7806 100644 --- a/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx +++ b/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx @@ -168,7 +168,7 @@ export const TerminalModal: React.FC = ({ // Ant Design dark theme colors background: '#141414', // colorBgContainer foreground: '#ffffff', // colorText - cursor: '#2e9a92', // Agor teal + cursor: '#34767A', // Agor deep ink-teal cursorAccent: '#141414', // ANSI colors matching Ant Design palette @@ -178,7 +178,7 @@ export const TerminalModal: React.FC = ({ yellow: '#faad14', // colorWarning blue: '#1890ff', // colorInfo magenta: '#eb2f96', - cyan: '#2e9a92', // Agor teal (colorPrimary) + cyan: '#34767A', // Agor deep ink-teal (colorPrimary) white: '#f0f0f0', // Bright colors diff --git a/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx b/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx index 3f71502b5..a3edc0db6 100644 --- a/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx +++ b/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx @@ -103,12 +103,12 @@ function getDefaultCustomTheme(): string { return JSON.stringify( { token: { - colorPrimary: '#2e9a92', + colorPrimary: '#34767A', colorSuccess: '#52c41a', colorWarning: '#faad14', colorError: '#ff4d4f', - colorInfo: '#2e9a92', - colorLink: '#2e9a92', + colorInfo: '#34767A', + colorLink: '#34767A', borderRadius: 8, }, // Note: algorithm (dark/light) should be set via the theme switcher dropdown diff --git a/apps/agor-ui/src/contexts/ThemeContext.tsx b/apps/agor-ui/src/contexts/ThemeContext.tsx index b105b3ea4..4f27f8b87 100644 --- a/apps/agor-ui/src/contexts/ThemeContext.tsx +++ b/apps/agor-ui/src/contexts/ThemeContext.tsx @@ -77,12 +77,12 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre const baseTheme: ThemeConfig = { // CSS variables are enabled by default in antd v6 token: { - colorPrimary: '#2e9a92', // Agor teal + colorPrimary: '#34767A', // Agor deep ink-teal colorSuccess: '#52c41a', colorWarning: '#faad14', colorError: '#ff4d4f', - colorInfo: '#2e9a92', - colorLink: '#2e9a92', + colorInfo: '#34767A', + colorLink: '#34767A', borderRadius: 8, // Use Inter font from Bunny Fonts CDN with system font fallbacks fontFamily: diff --git a/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx b/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx index 8436b23d6..31b8ea3ba 100644 --- a/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx +++ b/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx @@ -648,7 +648,7 @@ export const MarketingScreenshotPage = () => { theme={{ algorithm: theme.darkAlgorithm, token: { - colorPrimary: '#14b8a6', + colorPrimary: '#34767A', borderRadius: 12, fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', diff --git a/apps/agor-ui/src/utils/particleConfig.ts b/apps/agor-ui/src/utils/particleConfig.ts index 09e3d0275..757f7c880 100644 --- a/apps/agor-ui/src/utils/particleConfig.ts +++ b/apps/agor-ui/src/utils/particleConfig.ts @@ -31,10 +31,10 @@ export const mellowParticleOptions = { }, particles: { color: { - value: '#2e9a92', // Agor teal brand color + value: '#34767A', // Agor deep ink-teal brand color }, links: { - color: '#2e9a92', + color: '#34767A', distance: 150, enable: true, opacity: 0.2, From b654905ae7b2ed015ce51cb18ff58b196b94315a Mon Sep 17 00:00:00 2001 From: kasiazjc Date: Tue, 7 Jul 2026 10:14:46 +0000 Subject: [PATCH 2/3] fix(agor-ui): swap brand primary to designer's original pick #539D9F MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The prior commit landed #34767A (ink-teal) as a stand-in; the designer's intended pick is #539D9F — same ~181° teal hue family as the logo but lighter/less saturated (47% light / 31% sat vs 34%/40%). Same set of tokens/accents as before: theme colorPrimary/colorInfo/ colorLink, theme editor default, terminal cursor/cyan, logo gradient start, particle background, and marketing screenshot theme. Co-Authored-By: Claude --- apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx | 2 +- .../src/components/EmbeddedTerminal/EmbeddedTerminal.tsx | 2 +- apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx | 4 ++-- .../src/components/ThemeEditorModal/ThemeEditorModal.tsx | 6 +++--- apps/agor-ui/src/contexts/ThemeContext.tsx | 6 +++--- apps/agor-ui/src/pages/MarketingScreenshotPage.tsx | 2 +- apps/agor-ui/src/utils/particleConfig.ts | 4 ++-- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx b/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx index a1d528779..9fb72048f 100644 --- a/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx +++ b/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx @@ -36,7 +36,7 @@ export const BrandLogo: React.FC = ({ level = 3, style, classNam margin: 0, fontSize: LEVEL_SIZES[level], lineHeight: 1.35, - background: 'linear-gradient(90deg, #34767A 0%, #7fe8df 50%, #a8f5ed 100%)', + background: 'linear-gradient(90deg, #539D9F 0%, #7fe8df 50%, #a8f5ed 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', diff --git a/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx b/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx index c5a1c4673..1bdf6abd5 100644 --- a/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx +++ b/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx @@ -130,7 +130,7 @@ export const EmbeddedTerminal: React.FC = ({ theme: { background: '#141414', foreground: '#ffffff', - cursor: '#34767A', + cursor: '#539D9F', cursorAccent: '#141414', }, }); diff --git a/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx b/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx index 1e10f7806..b7b41d5df 100644 --- a/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx +++ b/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx @@ -168,7 +168,7 @@ export const TerminalModal: React.FC = ({ // Ant Design dark theme colors background: '#141414', // colorBgContainer foreground: '#ffffff', // colorText - cursor: '#34767A', // Agor deep ink-teal + cursor: '#539D9F', // Agor teal cursorAccent: '#141414', // ANSI colors matching Ant Design palette @@ -178,7 +178,7 @@ export const TerminalModal: React.FC = ({ yellow: '#faad14', // colorWarning blue: '#1890ff', // colorInfo magenta: '#eb2f96', - cyan: '#34767A', // Agor deep ink-teal (colorPrimary) + cyan: '#539D9F', // Agor teal (colorPrimary) white: '#f0f0f0', // Bright colors diff --git a/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx b/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx index a3edc0db6..f5c7a7082 100644 --- a/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx +++ b/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx @@ -103,12 +103,12 @@ function getDefaultCustomTheme(): string { return JSON.stringify( { token: { - colorPrimary: '#34767A', + colorPrimary: '#539D9F', colorSuccess: '#52c41a', colorWarning: '#faad14', colorError: '#ff4d4f', - colorInfo: '#34767A', - colorLink: '#34767A', + colorInfo: '#539D9F', + colorLink: '#539D9F', borderRadius: 8, }, // Note: algorithm (dark/light) should be set via the theme switcher dropdown diff --git a/apps/agor-ui/src/contexts/ThemeContext.tsx b/apps/agor-ui/src/contexts/ThemeContext.tsx index 4f27f8b87..7f509e291 100644 --- a/apps/agor-ui/src/contexts/ThemeContext.tsx +++ b/apps/agor-ui/src/contexts/ThemeContext.tsx @@ -77,12 +77,12 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre const baseTheme: ThemeConfig = { // CSS variables are enabled by default in antd v6 token: { - colorPrimary: '#34767A', // Agor deep ink-teal + colorPrimary: '#539D9F', // Agor teal colorSuccess: '#52c41a', colorWarning: '#faad14', colorError: '#ff4d4f', - colorInfo: '#34767A', - colorLink: '#34767A', + colorInfo: '#539D9F', + colorLink: '#539D9F', borderRadius: 8, // Use Inter font from Bunny Fonts CDN with system font fallbacks fontFamily: diff --git a/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx b/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx index 31b8ea3ba..fa35f3c99 100644 --- a/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx +++ b/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx @@ -648,7 +648,7 @@ export const MarketingScreenshotPage = () => { theme={{ algorithm: theme.darkAlgorithm, token: { - colorPrimary: '#34767A', + colorPrimary: '#539D9F', borderRadius: 12, fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', diff --git a/apps/agor-ui/src/utils/particleConfig.ts b/apps/agor-ui/src/utils/particleConfig.ts index 757f7c880..fe6b4efab 100644 --- a/apps/agor-ui/src/utils/particleConfig.ts +++ b/apps/agor-ui/src/utils/particleConfig.ts @@ -31,10 +31,10 @@ export const mellowParticleOptions = { }, particles: { color: { - value: '#34767A', // Agor deep ink-teal brand color + value: '#539D9F', // Agor teal brand color }, links: { - color: '#34767A', + color: '#539D9F', distance: 150, enable: true, opacity: 0.2, From ed6bf91244836c9b3270d9ae0aaf452e6747069c Mon Sep 17 00:00:00 2001 From: kasiazjc Date: Tue, 7 Jul 2026 10:31:09 +0000 Subject: [PATCH 3/3] trial(agor-ui): test punchier #339699 brand teal in dev preview MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Live A/B trial, not necessarily final. Designer found #539D9F too washed out/flat against the mostly-gray dark UI when viewed live — technically correct but doesn't read as a brand accent. Trying #339699 (~182deg hue, same family, but 50% sat / 40% light instead of 31% sat / 47% light) for a punchier read. Same set of tokens/accents as the prior two commits: theme colorPrimary/colorInfo/colorLink, theme editor default, terminal cursor/cyan, logo gradient start, particle background, and marketing screenshot theme. Easy to revert to #539D9F (previous commit) if she prefers that after comparing both live. Co-Authored-By: Claude --- apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx | 2 +- .../src/components/EmbeddedTerminal/EmbeddedTerminal.tsx | 2 +- apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx | 4 ++-- .../src/components/ThemeEditorModal/ThemeEditorModal.tsx | 6 +++--- apps/agor-ui/src/contexts/ThemeContext.tsx | 6 +++--- apps/agor-ui/src/pages/MarketingScreenshotPage.tsx | 2 +- apps/agor-ui/src/utils/particleConfig.ts | 4 ++-- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx b/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx index 9fb72048f..c7025cfd0 100644 --- a/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx +++ b/apps/agor-ui/src/components/BrandLogo/BrandLogo.tsx @@ -36,7 +36,7 @@ export const BrandLogo: React.FC = ({ level = 3, style, classNam margin: 0, fontSize: LEVEL_SIZES[level], lineHeight: 1.35, - background: 'linear-gradient(90deg, #539D9F 0%, #7fe8df 50%, #a8f5ed 100%)', + background: 'linear-gradient(90deg, #339699 0%, #7fe8df 50%, #a8f5ed 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', diff --git a/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx b/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx index 1bdf6abd5..0cfe8081d 100644 --- a/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx +++ b/apps/agor-ui/src/components/EmbeddedTerminal/EmbeddedTerminal.tsx @@ -130,7 +130,7 @@ export const EmbeddedTerminal: React.FC = ({ theme: { background: '#141414', foreground: '#ffffff', - cursor: '#539D9F', + cursor: '#339699', cursorAccent: '#141414', }, }); diff --git a/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx b/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx index b7b41d5df..6e0b7a5bf 100644 --- a/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx +++ b/apps/agor-ui/src/components/TerminalModal/TerminalModal.tsx @@ -168,7 +168,7 @@ export const TerminalModal: React.FC = ({ // Ant Design dark theme colors background: '#141414', // colorBgContainer foreground: '#ffffff', // colorText - cursor: '#539D9F', // Agor teal + cursor: '#339699', // Agor teal cursorAccent: '#141414', // ANSI colors matching Ant Design palette @@ -178,7 +178,7 @@ export const TerminalModal: React.FC = ({ yellow: '#faad14', // colorWarning blue: '#1890ff', // colorInfo magenta: '#eb2f96', - cyan: '#539D9F', // Agor teal (colorPrimary) + cyan: '#339699', // Agor teal (colorPrimary) white: '#f0f0f0', // Bright colors diff --git a/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx b/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx index f5c7a7082..3e894d30e 100644 --- a/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx +++ b/apps/agor-ui/src/components/ThemeEditorModal/ThemeEditorModal.tsx @@ -103,12 +103,12 @@ function getDefaultCustomTheme(): string { return JSON.stringify( { token: { - colorPrimary: '#539D9F', + colorPrimary: '#339699', colorSuccess: '#52c41a', colorWarning: '#faad14', colorError: '#ff4d4f', - colorInfo: '#539D9F', - colorLink: '#539D9F', + colorInfo: '#339699', + colorLink: '#339699', borderRadius: 8, }, // Note: algorithm (dark/light) should be set via the theme switcher dropdown diff --git a/apps/agor-ui/src/contexts/ThemeContext.tsx b/apps/agor-ui/src/contexts/ThemeContext.tsx index 7f509e291..3d744d6a4 100644 --- a/apps/agor-ui/src/contexts/ThemeContext.tsx +++ b/apps/agor-ui/src/contexts/ThemeContext.tsx @@ -77,12 +77,12 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre const baseTheme: ThemeConfig = { // CSS variables are enabled by default in antd v6 token: { - colorPrimary: '#539D9F', // Agor teal + colorPrimary: '#339699', // Agor teal colorSuccess: '#52c41a', colorWarning: '#faad14', colorError: '#ff4d4f', - colorInfo: '#539D9F', - colorLink: '#539D9F', + colorInfo: '#339699', + colorLink: '#339699', borderRadius: 8, // Use Inter font from Bunny Fonts CDN with system font fallbacks fontFamily: diff --git a/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx b/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx index fa35f3c99..c60c57018 100644 --- a/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx +++ b/apps/agor-ui/src/pages/MarketingScreenshotPage.tsx @@ -648,7 +648,7 @@ export const MarketingScreenshotPage = () => { theme={{ algorithm: theme.darkAlgorithm, token: { - colorPrimary: '#539D9F', + colorPrimary: '#339699', borderRadius: 12, fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', diff --git a/apps/agor-ui/src/utils/particleConfig.ts b/apps/agor-ui/src/utils/particleConfig.ts index fe6b4efab..eb48ec33e 100644 --- a/apps/agor-ui/src/utils/particleConfig.ts +++ b/apps/agor-ui/src/utils/particleConfig.ts @@ -31,10 +31,10 @@ export const mellowParticleOptions = { }, particles: { color: { - value: '#539D9F', // Agor teal brand color + value: '#339699', // Agor teal brand color }, links: { - color: '#539D9F', + color: '#339699', distance: 150, enable: true, opacity: 0.2,