From 6b844a52100e87f0fafbf5b098e872f71450b219 Mon Sep 17 00:00:00 2001
From: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
Date: Wed, 1 Jul 2026 14:37:00 +0300
Subject: [PATCH] fix(branding): update CloudCLI wordmark styling

---
 src/components/auth/view/AuthLoadingScreen.tsx       |  9 ++++++++-
 src/components/settings/view/tabs/AboutTab.tsx       | 12 +++++++++---
 .../api-settings/sections/VersionInfoSection.tsx     |  9 ++++++++-
 .../sidebar/view/subcomponents/SidebarHeader.tsx     |  8 +++++++-
 src/constants/branding.ts                            |  2 ++
 5 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 src/constants/branding.ts

diff --git a/src/components/auth/view/AuthLoadingScreen.tsx b/src/components/auth/view/AuthLoadingScreen.tsx
index 5855e56a..86a80ce2 100644
--- a/src/components/auth/view/AuthLoadingScreen.tsx
+++ b/src/components/auth/view/AuthLoadingScreen.tsx
@@ -1,3 +1,5 @@
+import { CLOUDCLI_WORDMARK_FONT_FAMILY } from '../../../constants/branding';
+
 const loadingDotAnimationDelays = ['0s', '0.15s', '0.3s'];
 
 export default function AuthLoadingScreen() {
@@ -14,7 +16,12 @@ export default function AuthLoadingScreen() {
           </div>
         </div>
 
-        <h1 className="mb-4 font-serif text-2xl font-bold tracking-tight text-foreground">CloudCLI</h1>
+        <h1
+          className="mb-4 text-2xl font-bold tracking-tight text-foreground"
+          style={{ fontFamily: CLOUDCLI_WORDMARK_FONT_FAMILY }}
+        >
+          CloudCLI
+        </h1>
         <p className="sr-only">Loading authentication state…</p>
         <div aria-hidden className="flex items-center justify-center gap-2">
           {loadingDotAnimationDelays.map((delay) => (
diff --git a/src/components/settings/view/tabs/AboutTab.tsx b/src/components/settings/view/tabs/AboutTab.tsx
index 027af75e..0216f17d 100644
--- a/src/components/settings/view/tabs/AboutTab.tsx
+++ b/src/components/settings/view/tabs/AboutTab.tsx
@@ -1,9 +1,10 @@
-import { ExternalLink, MessageSquare, Star } from 'lucide-react';
+import { Cloud, ExternalLink, MessageSquare, Star, Users } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+
+import { CLOUDCLI_WORDMARK_FONT_FAMILY } from '../../../../constants/branding';
 import { IS_PLATFORM } from '../../../../constants/config';
 import { useVersionCheck } from '../../../../hooks/useVersionCheck';
 import PremiumFeatureCard from '../PremiumFeatureCard';
-import { Cloud, Users } from 'lucide-react';
 
 const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
 const DISCORD_URL = 'https://discord.gg/buxwujPNRE';
@@ -40,7 +41,12 @@ export default function AboutTab() {
         </div>
         <div>
           <div className="flex items-center gap-2">
-            <span className="text-base font-semibold text-foreground">CloudCLI</span>
+            <span
+              className="text-base font-semibold text-foreground"
+              style={{ fontFamily: CLOUDCLI_WORDMARK_FONT_FAMILY }}
+            >
+              CloudCLI
+            </span>
             <a
               href={releasesUrl}
               target="_blank"
diff --git a/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx b/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx
index a7d5f83b..5bd02932 100644
--- a/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx
+++ b/src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx
@@ -1,5 +1,7 @@
 import { ExternalLink, Star, MessageSquare } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+
+import { CLOUDCLI_WORDMARK_FONT_FAMILY } from '../../../../../../constants/branding';
 import { IS_PLATFORM } from '../../../../../../constants/config';
 import type { ReleaseInfo } from '../../../../../../types/sharedTypes';
 
@@ -51,7 +53,12 @@ export default function VersionInfoSection({
           </div>
           <div>
             <div className="flex items-center gap-2">
-              <span className="text-sm font-semibold text-foreground">CloudCLI</span>
+              <span
+                className="text-sm font-semibold text-foreground"
+                style={{ fontFamily: CLOUDCLI_WORDMARK_FONT_FAMILY }}
+              >
+                CloudCLI
+              </span>
               <a
                 href={releasesUrl}
                 target="_blank"
diff --git a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
index f72d6347..f3839a06 100644
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -2,6 +2,7 @@ import { Activity, Archive, Folder, FolderPlus, MessageSquare, Plus, RefreshCw,
 import type { TFunction } from 'i18next';
 
 import { Button, Input, Tooltip } from '../../../../shared/view/ui';
+import { CLOUDCLI_WORDMARK_FONT_FAMILY } from '../../../../constants/branding';
 import { IS_PLATFORM } from '../../../../constants/config';
 import { cn } from '../../../../lib/utils';
 import type { SidebarSearchMode } from '../../types/types';
@@ -67,7 +68,12 @@ export default function SidebarHeader({
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
         </svg>
       </div>
-      <h1 className="truncate text-sm font-normal tracking-tight text-foreground">{t('app.title')}</h1>
+      <h1
+        className="truncate text-sm font-bold tracking-tight text-foreground"
+        style={{ fontFamily: CLOUDCLI_WORDMARK_FONT_FAMILY }}
+      >
+        {t('app.title')}
+      </h1>
     </div>
   );
 
diff --git a/src/constants/branding.ts b/src/constants/branding.ts
new file mode 100644
index 00000000..4d7cc88e
--- /dev/null
+++ b/src/constants/branding.ts
@@ -0,0 +1,2 @@
+export const CLOUDCLI_WORDMARK_FONT_FAMILY =
+  'ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji';