From 57982461356e1bb2f3ee511fd45708fe574f5ca0 Mon Sep 17 00:00:00 2001
From: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
Date: Tue, 30 Jun 2026 00:22:33 +0300
Subject: [PATCH] style(ui): use Merriweather serif for chat text and Encode
 Sans for the rest of the UI

---
 index.html                                             | 10 +++++++++-
 .../chat/view/subcomponents/MessageComponent.tsx       | 10 +++++-----
 src/index.css                                          |  2 +-
 tailwind.config.js                                     |  4 ++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 37d2217d..1fdfcc7c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,15 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
     <title>CloudCLI UI</title>
-    
+
+    <!-- Fonts: Encode Sans (UI) + Merriweather (chat) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials"  />
     
diff --git a/src/components/chat/view/subcomponents/MessageComponent.tsx b/src/components/chat/view/subcomponents/MessageComponent.tsx
index 552b31cb..cfe852fe 100644
--- a/src/components/chat/view/subcomponents/MessageComponent.tsx
+++ b/src/components/chat/view/subcomponents/MessageComponent.tsx
@@ -115,7 +115,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
         /* User message bubble on the right */
         <div className="flex w-full items-end space-x-0 sm:w-auto sm:max-w-[85%] sm:space-x-3 md:max-w-md lg:max-w-lg xl:max-w-xl">
           <div className="group flex-1 rounded-2xl rounded-br-md bg-blue-600 px-3 py-2 text-white shadow-sm sm:flex-initial sm:px-4">
-            <div dir="auto" className="whitespace-pre-wrap break-words text-sm">
+            <div dir="auto" className="whitespace-pre-wrap break-words font-serif text-sm">
               {message.content}
             </div>
             {message.images && message.images.length > 0 && (
@@ -194,7 +194,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
               <>
                 <div className="flex flex-col">
                   <div className="flex flex-col">
-                    <Markdown className="prose prose-sm max-w-none dark:prose-invert">
+                    <Markdown className="prose prose-sm max-w-none font-serif dark:prose-invert">
                       {String(message.displayText || '')}
                     </Markdown>
                   </div>
@@ -233,7 +233,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
                         <span className="text-xs font-medium text-red-700 dark:text-red-300">{t('messageTypes.error')}</span>
                       </div>
                       <div className="relative text-sm text-red-900 dark:text-red-100">
-                        <Markdown className="prose prose-sm prose-red max-w-none dark:prose-invert">
+                        <Markdown className="prose prose-sm prose-red max-w-none font-serif dark:prose-invert">
                           {String(message.toolResult.content || '')}
                         </Markdown>
                       </div>
@@ -342,7 +342,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
               <Reasoning defaultOpen={false}>
                 <ReasoningTrigger />
                 <ReasoningContent>
-                  <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
+                  <Markdown className="prose prose-sm prose-gray max-w-none font-serif dark:prose-invert">
                     {message.content}
                   </Markdown>
                   <div className="mt-3 flex items-center text-[11px]">
@@ -399,7 +399,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
 
                   // Normal rendering for non-JSON content
                   return message.type === 'assistant' ? (
-                    <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
+                    <Markdown className="prose prose-sm prose-gray max-w-none font-serif dark:prose-invert">
                       {content}
                     </Markdown>
                   ) : (
diff --git a/src/index.css b/src/index.css
index ed7f4f5a..195ae1d3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -128,7 +128,7 @@
   
   body {
     @apply bg-background text-foreground;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: "Encode Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin: 0;
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b2517d0..5d67ef83 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,10 @@ export default {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['"Encode Sans"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
+        serif: ['Merriweather', 'Georgia', 'Cambria', '"Times New Roman"', 'serif'],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",