feat: re-aligned colour scheme with hermes

Author: jahilldev

api/src/chat/chat.prompts.ts

@@ -33,7 +33,7 @@ export function buildChatPrompt(p: {
 export function buildTitlePrompt(firstMessage: string): string {
   return [
     `Generate a short, descriptive title for a chat conversation that opens with the message below.`,
-    `Rules:\n- Output ONLY the title — no quotes, no markdown, no trailing punctuation, no preamble.\n- 3 to 6 words, Title Case.\n- Do NOT use any tools; just reply with the title.`,
+    `Rules:\n- Output ONLY the title — no quotes, no markdown, no trailing punctuation, no preamble.\n- 4 to 8 words, Title Case.\n- Do NOT use any tools; just reply with the title.`,
     `--- FIRST MESSAGE ---\n${firstMessage}\n--- END ---`,
   ].join('\n\n');
 }

app/src/components/Chat.tsx

@@ -221,14 +221,14 @@ export default function Chat() {
             session.messages.map((m) =>
               m.role === 'user' ? (
                 <div key={m.id} class="flex justify-end">
-                  <div class="max-w-[85%] rounded-2xl rounded-br-sm bg-indigo-600/90 px-4 py-2.5 text-sm text-white whitespace-pre-wrap">
+                  <div class="max-w-[85%] rounded-2xl rounded-br-sm border border-zinc-700 bg-zinc-800 px-4 py-2.5 text-sm text-zinc-100 whitespace-pre-wrap">
                     {m.content}
                   </div>
                 </div>
               ) : (
                 <div key={m.id} class="flex flex-col gap-2">
                   {m.agentRunId && activity[m.agentRunId]?.length ? (
-                    <details open class="space-y-2">
+                    <details class="space-y-2">
                       <summary class="cursor-pointer select-none text-xs text-zinc-500 hover:text-zinc-400">
                         Activity · {activity[m.agentRunId].length} steps
                       </summary>
@@ -297,7 +297,7 @@ export default function Chat() {
           <button
             type="submit"
             disabled={sending || !!activeRunId || input.trim().length === 0}
-            class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+            class="rounded-xl bg-hermes-400 px-4 py-2.5 text-sm font-medium text-zinc-950 hover:bg-hermes-500 disabled:opacity-50 transition-colors"
           >
             Send
           </button>

app/src/components/ChatList.tsx

@@ -68,7 +68,7 @@ export default function ChatList() {
         <button
           disabled={creating}
           onClick={() => void newChat()}
-          class="ml-auto rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+          class="ml-auto rounded-lg bg-hermes-400 px-3 py-1.5 text-xs font-medium text-zinc-950 hover:bg-hermes-500 disabled:opacity-50 transition-colors"
         >
           {creating ? 'Starting…' : 'New chat'}
         </button>

app/src/components/CreateJob.tsx

@@ -136,7 +136,7 @@ export default function CreateJob() {
             <button
               type="submit"
               disabled={!canSubmit}
-              class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+              class="rounded-lg bg-hermes-400 px-4 py-2 text-sm font-medium text-zinc-950 hover:bg-hermes-500 disabled:opacity-50 transition-colors"
             >
               {submitting ? 'Creating…' : 'Create & plan'}
             </button>

app/src/components/JobDetail.tsx

@@ -272,7 +272,7 @@ export default function JobDetail() {
                   <button
                     disabled={actionPending}
                     onClick={() => act('approve')}
-                    class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+                    class="rounded-lg bg-hermes-400 px-3 py-1.5 text-xs font-medium text-zinc-950 hover:bg-hermes-500 disabled:opacity-50 transition-colors"
                   >
                     {actionPending ? 'Approving…' : 'Approve plan'}
                   </button>
@@ -282,7 +282,7 @@ export default function JobDetail() {
                     <button
                       disabled={actionPending}
                       onClick={() => act('retry')}
-                      class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+                      class="rounded-lg bg-hermes-400 px-3 py-1.5 text-xs font-medium text-zinc-950 hover:bg-hermes-500 disabled:opacity-50 transition-colors"
                     >
                       {actionPending ? 'Working…' : 'Retry'}
                     </button>

app/src/components/JobList.tsx

@@ -229,7 +229,7 @@ export default function JobList() {
         <div class="ml-auto flex items-center gap-2">
           <button
             onClick={() => navigate('/create')}
-            class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 transition-colors"
+            class="rounded-lg bg-hermes-400 px-3 py-1.5 text-xs font-medium text-zinc-950 hover:bg-hermes-500 transition-colors"
           >
             Create
           </button>

app/src/components/RepoControl.tsx

@@ -87,7 +87,7 @@ export default function RepoControl({
         <button
           disabled={pending || invalid}
           onClick={() => void save()}
-          class="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50 transition-colors"
+          class="rounded-lg bg-hermes-400 px-3 py-1.5 text-xs font-medium text-zinc-950 hover:bg-hermes-500 disabled:opacity-50 transition-colors"
         >
           {pending ? 'Saving…' : 'Save'}
         </button>

app/tailwind.config.mjs

@@ -8,6 +8,14 @@ export default {
       fontFamily: {
         mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
       },
+      // Hermes Agent brand gold (from the app icon's gradient): light → core → deep.
+      colors: {
+        hermes: {
+          300: '#FFF27A',
+          400: '#FFD229',
+          500: '#F4A900',
+        },
+      },
     },
   },
   plugins: [typography],