From c0b1e408bf52c80a1321036c1b4e71ab9ceadabe Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Mon, 23 Mar 2026 16:38:51 -0600
Subject: [PATCH] seafoam color migration started

---
 assets/css/app.css                            |  37 +--
 assets/css/markdown.css                       |  46 ++--
 assets/tailwind.config.js                     | 104 --------
 config/config.exs                             |   2 +-
 lib/elixir_ai/ai_tools.ex                     |   2 +-
 lib/elixir_ai_web/admin/admin_live.ex         |  34 +--
 lib/elixir_ai_web/chat/chat_live.ex           |   6 +-
 lib/elixir_ai_web/chat/chat_message.ex        | 233 +++++++++++++++---
 .../chat/chat_provider_display.ex             |  22 +-
 .../components/form_components.ex             |   6 +-
 .../components/layouts/root.html.heex         |   2 +-
 lib/elixir_ai_web/home/ai_providers_live.ex   |  22 +-
 lib/elixir_ai_web/home/home_live.ex           |  10 +-
 lib/elixir_ai_web/voice/voice_live.ex         |  36 +--
 14 files changed, 309 insertions(+), 253 deletions(-)
 delete mode 100644 assets/tailwind.config.js

diff --git a/assets/css/app.css b/assets/css/app.css
index 98fdfe7..53d9dae 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -3,10 +3,24 @@
 @source "../js/**/*.js";
 @source "../../lib/elixir_ai_web.ex";
 @source "../../lib/elixir_ai_web/**/*.*ex";
+@source inline("{bg-seafoam-950/30,bg-red-950/30,bg-green-950/30,bg-blue-950/30,bg-yellow-950/30,bg-purple-950/30,bg-pink-950/30}");
 @plugin "@tailwindcss/forms";
 @plugin "../heroicons_plugin.js";
 
 @theme {
+  --color-brand: #fd4f00;
+
+  --color-seafoam-50: #ecfeff;
+  --color-seafoam-100: #cffafe;
+  --color-seafoam-200: #a5f3fc;
+  --color-seafoam-300: #67e8f9;
+  --color-seafoam-400: #22d3ee;
+  --color-seafoam-500: #06b6d4;
+  --color-seafoam-600: #0891b2;
+  --color-seafoam-700: #0e7490;
+  --color-seafoam-800: #155e75;
+  --color-seafoam-900: #164e63;
+  --color-seafoam-950: #083344;
 }
 
 @variant phx-click-loading (&.phx-click-loading, .phx-click-loading &);
@@ -17,7 +31,7 @@
 
 /* Form Elements */
 label {
-  @apply block text-sm font-medium text-cyan-300 mb-1;
+  @apply block text-sm font-medium text-seafoam-300 mb-1;
 }
 
 input[type="text"],
@@ -29,11 +43,11 @@ input[type="url"],
 textarea,
 select {
   @apply w-full rounded-md px-3 py-2 text-sm
-         bg-cyan-950 text-cyan-50 placeholder-cyan-600
-         border border-cyan-800
+         bg-seafoam-950 text-seafoam-50 placeholder-seafoam-600
+         border border-seafoam-800
          outline-none
          transition-colors duration-150
-         focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500;
+         focus:border-seafoam-500 focus:ring-1 focus:ring-seafoam-500;
 }
 
 textarea {
@@ -43,19 +57,19 @@ textarea {
 button[type="submit"],
 input[type="submit"] {
   @apply px-4 py-2 rounded-md text-sm font-medium
-         bg-cyan-600 text-white
-         border border-cyan-500
+         bg-seafoam-600 text-white
+         border border-seafoam-500
          transition-colors duration-150
-         hover:bg-cyan-500
+         hover:bg-seafoam-500
          disabled:opacity-40 disabled:cursor-not-allowed;
 }
 
 fieldset {
-  @apply border border-cyan-800 rounded-md px-4 py-3;
+  @apply border border-seafoam-800 rounded-md px-4 py-3;
 }
 
 legend {
-  @apply text-sm font-semibold text-cyan-400 px-1;
+  @apply text-sm font-semibold text-seafoam-400 px-1;
 }
 
 button {
@@ -72,8 +86,3 @@ button {
 .reasoning-content.collapsed {
   @apply opacity-0 max-h-0 pt-0 pb-0 mb-0;
 }
-
-
-
-
-
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index 024f539..9857315 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -1,7 +1,7 @@
 /* Rendered Markdown */
 
 .markdown {
-  @apply text-cyan-50 leading-7 text-base;
+  @apply text-seafoam-50 leading-7 text-base;
 }
 
 /* Headings */
@@ -11,26 +11,26 @@
 .markdown h4,
 .markdown h5,
 .markdown h6 {
-  @apply font-semibold text-cyan-300 mt-6 mb-2 leading-tight;
+  @apply font-semibold text-seafoam-300 mt-6 mb-2 leading-tight;
 }
 
 .markdown h1 {
-  @apply text-3xl border-b border-cyan-900 pb-1;
+  @apply text-3xl border-b border-seafoam-900 pb-1;
 }
 .markdown h2 {
-  @apply text-2xl border-b border-cyan-900 pb-1;
+  @apply text-2xl border-b border-seafoam-900 pb-1;
 }
 .markdown h3 {
-  @apply text-xl text-cyan-200;
+  @apply text-xl text-seafoam-200;
 }
 .markdown h4 {
-  @apply text-lg text-cyan-200;
+  @apply text-lg text-seafoam-200;
 }
 .markdown h5 {
-  @apply text-base text-cyan-100;
+  @apply text-base text-seafoam-100;
 }
 .markdown h6 {
-  @apply text-sm text-cyan-100;
+  @apply text-sm text-seafoam-100;
 }
 
 .markdown p {
@@ -38,33 +38,33 @@
 }
 
 .markdown a {
-  @apply text-cyan-400 underline underline-offset-2 transition-colors duration-150 hover:text-cyan-300;
+  @apply text-seafoam-400 underline underline-offset-2 transition-colors duration-150 hover:text-seafoam-300;
 }
 
 .markdown strong {
-  @apply font-bold text-cyan-100;
+  @apply font-bold text-seafoam-100;
 }
 .markdown em {
-  @apply italic text-cyan-200;
+  @apply italic text-seafoam-200;
 }
 
 .markdown code {
-  @apply font-mono text-sm bg-cyan-950 text-cyan-300 px-1 py-0.5 rounded border border-cyan-900;
+  @apply font-mono text-sm bg-seafoam-950 text-seafoam-300 px-1 py-0.5 rounded border border-seafoam-900;
 }
 
 .markdown pre {
-  @apply bg-cyan-950 border border-cyan-900 rounded-lg px-5 py-4 overflow-x-auto my-4;
+  @apply bg-seafoam-950 border border-seafoam-900 rounded-lg px-5 py-4 overflow-x-auto my-4;
 }
 .markdown pre code {
-  @apply bg-transparent border-0 p-0 text-sm text-cyan-100;
+  @apply bg-transparent border-0 p-0 text-sm text-seafoam-100;
 }
 
 .markdown blockquote {
-  @apply border-l-2 border-cyan-700 my-4 px-4 py-2 bg-cyan-950 text-cyan-200 rounded-r italic;
+  @apply border-l-2 border-seafoam-700 my-4 px-4 py-2 bg-seafoam-950 text-seafoam-200 rounded-r italic;
 }
 
 .markdown hr {
-  @apply border-0 border-t border-cyan-900 my-6;
+  @apply border-0 border-t border-seafoam-900 my-6;
 }
 .markdown ul,
 .markdown ol {
@@ -80,7 +80,7 @@
   @apply my-1;
 }
 .markdown li::marker {
-  @apply text-cyan-700;
+  @apply text-seafoam-700;
 }
 
 .markdown ul ul,
@@ -95,22 +95,22 @@
   @apply block w-full border-collapse my-4 text-sm overflow-x-auto;
 }
 .markdown thead {
-  @apply bg-cyan-950;
+  @apply bg-seafoam-950;
 }
 .markdown th {
-  @apply text-left px-3 py-2 text-cyan-300 font-semibold border-b-2 border-cyan-700;
+  @apply text-left px-3 py-2 text-seafoam-300 font-semibold border-b-2 border-seafoam-700;
 }
 .markdown td {
-  @apply px-3 py-2 border-b border-cyan-900 text-cyan-100;
+  @apply px-3 py-2 border-b border-seafoam-900 text-seafoam-100;
 }
 .markdown tbody tr:hover {
-  @apply bg-cyan-950;
+  @apply bg-seafoam-950;
 }
 
 .markdown img {
-  @apply max-w-full rounded-md border border-cyan-900 my-2;
+  @apply max-w-full rounded-md border border-seafoam-900 my-2;
 }
 
 .markdown input[type="checkbox"] {
-  @apply accent-cyan-700 mr-1;
+  @apply accent-seafoam-700 mr-1;
 }
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
deleted file mode 100644
index ce8719a..0000000
--- a/assets/tailwind.config.js
+++ /dev/null
@@ -1,104 +0,0 @@
-// See the Tailwind configuration guide for advanced usage
-// https://tailwindcss.com/docs/configuration
-
-const plugin = require("tailwindcss/plugin");
-const fs = require("fs");
-const path = require("path");
-
-module.exports = {
-  content: [
-    "./js/**/*.js",
-    "../lib/elixir_ai_web.ex",
-    "../lib/elixir_ai_web/**/*.*ex",
-  ],
-  safelist: [
-    "bg-cyan-950/30",
-    "bg-red-950/30",
-    "bg-green-950/30",
-    "bg-blue-950/30",
-    "bg-yellow-950/30",
-    "bg-purple-950/30",
-    "bg-pink-950/30",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        brand: "#FD4F00",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/forms"),
-    // Allows prefixing tailwind classes with LiveView classes to add rules
-    // only when LiveView classes are applied, for example:
-    //
-    //     <div class="phx-click-loading:animate-ping">
-    //
-    plugin(({ addVariant }) =>
-      addVariant("phx-click-loading", [
-        ".phx-click-loading&",
-        ".phx-click-loading &",
-      ]),
-    ),
-    plugin(({ addVariant }) =>
-      addVariant("phx-submit-loading", [
-        ".phx-submit-loading&",
-        ".phx-submit-loading &",
-      ]),
-    ),
-    plugin(({ addVariant }) =>
-      addVariant("phx-change-loading", [
-        ".phx-change-loading&",
-        ".phx-change-loading &",
-      ]),
-    ),
-
-    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
-    // See your `CoreComponents.icon/1` for more information.
-    //
-    plugin(function ({ matchComponents, theme }) {
-      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized");
-      let values = {};
-      let icons = [
-        ["", "/24/outline"],
-        ["-solid", "/24/solid"],
-        ["-mini", "/20/solid"],
-        ["-micro", "/16/solid"],
-      ];
-      icons.forEach(([suffix, dir]) => {
-        fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
-          let name = path.basename(file, ".svg") + suffix;
-          values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
-        });
-      });
-      matchComponents(
-        {
-          hero: ({ name, fullPath }) => {
-            let content = fs
-              .readFileSync(fullPath)
-              .toString()
-              .replace(/\r?\n|\r/g, "");
-            let size = theme("spacing.6");
-            if (name.endsWith("-mini")) {
-              size = theme("spacing.5");
-            } else if (name.endsWith("-micro")) {
-              size = theme("spacing.4");
-            }
-            return {
-              [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
-              "-webkit-mask": `var(--hero-${name})`,
-              mask: `var(--hero-${name})`,
-              "mask-repeat": "no-repeat",
-              "background-color": "currentColor",
-              "vertical-align": "middle",
-              display: "inline-block",
-              width: size,
-              height: size,
-            };
-          },
-        },
-        { values },
-      );
-    }),
-  ],
-};
diff --git a/config/config.exs b/config/config.exs
index b145435..8729216 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -25,7 +25,7 @@ config :esbuild,
   ]
 
 config :tailwind,
-  version: "4.0.9",
+  version: "4.2.2",
   elixir_ai: [
     args: ~w(
       --input=css/app.css
diff --git a/lib/elixir_ai/ai_tools.ex b/lib/elixir_ai/ai_tools.ex
index 4e0bbc5..e477aea 100644
--- a/lib/elixir_ai/ai_tools.ex
+++ b/lib/elixir_ai/ai_tools.ex
@@ -83,7 +83,7 @@ defmodule ElixirAi.AiTools do
           "color" => %{
             "type" => "string",
             "enum" => [
-              "bg-cyan-950/30",
+              "bg-seafoam-950/30",
               "bg-red-950/30",
               "bg-green-950/30",
               "bg-blue-950/30",
diff --git a/lib/elixir_ai_web/admin/admin_live.ex b/lib/elixir_ai_web/admin/admin_live.ex
index 285d614..c8df99a 100644
--- a/lib/elixir_ai_web/admin/admin_live.ex
+++ b/lib/elixir_ai_web/admin/admin_live.ex
@@ -108,7 +108,7 @@ defmodule ElixirAiWeb.AdminLive do
   def render(assigns) do
     ~H"""
     <div class="p-6 space-y-4">
-      <h1 class="text-lg font-semibold text-cyan-200 tracking-wide">Cluster Admin</h1>
+      <h1 class="text-lg font-semibold text-seafoam-200 tracking-wide">Cluster Admin</h1>
 
       <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
         <%= for {node, status} <- @cluster_info.nodes do %>
@@ -121,12 +121,12 @@ defmodule ElixirAiWeb.AdminLive do
             |> Enum.filter(fn {_, n} -> n == node end)
             |> Enum.group_by(fn {view, _} -> view end) %>
 
-          <div class="rounded-lg border border-cyan-800/50 bg-cyan-950/30 overflow-hidden">
-            <div class="flex items-center justify-between px-4 py-3 bg-cyan-900/40 border-b border-cyan-800/50">
+          <div class="rounded-lg border border-seafoam-800/50 bg-seafoam-950/30 overflow-hidden">
+            <div class="flex items-center justify-between px-4 py-3 bg-seafoam-900/40 border-b border-seafoam-800/50">
               <div class="flex items-center gap-2">
-                <span class="font-mono text-sm font-semibold text-cyan-200">{node}</span>
+                <span class="font-mono text-sm font-semibold text-seafoam-200">{node}</span>
                 <%= if node == Node.self() do %>
-                  <span class="text-xs bg-cyan-800/50 text-cyan-400 px-1.5 py-0.5 rounded">self</span>
+                  <span class="text-xs bg-seafoam-800/50 text-seafoam-400 px-1.5 py-0.5 rounded">self</span>
                 <% end %>
               </div>
               <.status_badge status={status} />
@@ -135,12 +135,12 @@ defmodule ElixirAiWeb.AdminLive do
             <div class="p-4 space-y-4">
               <%= if node_singletons != [] do %>
                 <div>
-                  <p class="text-xs font-semibold uppercase tracking-widest text-cyan-600 mb-1.5">
+                  <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
                     Singletons
                   </p>
                   <div class="space-y-1">
                     <%= for {module, _} <- node_singletons do %>
-                      <div class="px-2 py-1.5 rounded bg-cyan-900/30 font-mono text-xs text-cyan-300">
+                      <div class="px-2 py-1.5 rounded bg-seafoam-900/30 font-mono text-xs text-seafoam-300">
                         {inspect(module)}
                       </div>
                     <% end %>
@@ -150,15 +150,15 @@ defmodule ElixirAiWeb.AdminLive do
 
               <%= if node_runners != [] do %>
                 <div>
-                  <p class="text-xs font-semibold uppercase tracking-widest text-cyan-600 mb-1.5">
+                  <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
                     Chat Runners
-                    <span class="normal-case font-normal text-cyan-700 ml-1">
+                    <span class="normal-case font-normal text-seafoam-700 ml-1">
                       {length(node_runners)}
                     </span>
                   </p>
                   <div class="space-y-1">
                     <%= for {name, _, _} <- node_runners do %>
-                      <div class="px-2 py-1.5 rounded bg-cyan-900/30 font-mono text-xs text-cyan-200">
+                      <div class="px-2 py-1.5 rounded bg-seafoam-900/30 font-mono text-xs text-seafoam-200">
                         {name}
                       </div>
                     <% end %>
@@ -168,14 +168,14 @@ defmodule ElixirAiWeb.AdminLive do
 
               <%= if node_liveviews != %{} do %>
                 <div>
-                  <p class="text-xs font-semibold uppercase tracking-widest text-cyan-600 mb-1.5">
+                  <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
                     LiveViews
                   </p>
                   <div class="space-y-1">
                     <%= for {view, instances} <- node_liveviews do %>
-                      <div class="px-2 py-1.5 rounded bg-cyan-900/30 flex justify-between items-center gap-2">
-                        <span class="font-mono text-xs text-cyan-200">{short_module(view)}</span>
-                        <span class="text-xs text-cyan-600">×{length(instances)}</span>
+                      <div class="px-2 py-1.5 rounded bg-seafoam-900/30 flex justify-between items-center gap-2">
+                        <span class="font-mono text-xs text-seafoam-200">{short_module(view)}</span>
+                        <span class="text-xs text-seafoam-600">×{length(instances)}</span>
                       </div>
                     <% end %>
                   </div>
@@ -183,7 +183,7 @@ defmodule ElixirAiWeb.AdminLive do
               <% end %>
 
               <%= if node_singletons == [] and node_runners == [] and node_liveviews == %{} do %>
-                <p class="text-xs text-cyan-700 italic">No active processes</p>
+                <p class="text-xs text-seafoam-700 italic">No active processes</p>
               <% end %>
             </div>
           </div>
@@ -207,7 +207,7 @@ defmodule ElixirAiWeb.AdminLive do
         </section>
       <% end %>
 
-      <p class="text-xs text-cyan-800">Refreshes every 1s or on node events.</p>
+      <p class="text-xs text-seafoam-800">Refreshes every 1s or on node events.</p>
     </div>
     """
   end
@@ -236,7 +236,7 @@ defmodule ElixirAiWeb.AdminLive do
           unreachable
         </span>
       <% other -> %>
-        <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-cyan-900 text-cyan-300">
+        <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-seafoam-900 text-seafoam-300">
           {inspect(other)}
         </span>
     <% end %>
diff --git a/lib/elixir_ai_web/chat/chat_live.ex b/lib/elixir_ai_web/chat/chat_live.ex
index b82d3bd..94ec723 100644
--- a/lib/elixir_ai_web/chat/chat_live.ex
+++ b/lib/elixir_ai_web/chat/chat_live.ex
@@ -24,7 +24,7 @@ defmodule ElixirAiWeb.ChatLive do
          |> assign(user_input: "")
          |> assign(messages: conversation.messages)
          |> assign(streaming_response: conversation.streaming_response)
-         |> assign(background_color: "bg-cyan-950/30")
+         |> assign(background_color: "bg-seafoam-950/30")
          |> assign(provider: conversation.provider)
          |> assign(providers: AiProvider.all())
          |> assign(db_error: nil)
@@ -42,7 +42,7 @@ defmodule ElixirAiWeb.ChatLive do
          |> assign(user_input: "")
          |> assign(messages: [])
          |> assign(streaming_response: nil)
-         |> assign(background_color: "bg-cyan-950/30")
+         |> assign(background_color: "bg-seafoam-950/30")
          |> assign(provider: nil)
          |> assign(providers: AiProvider.all())
          |> assign(db_error: Exception.format(:error, reason))
@@ -54,7 +54,7 @@ defmodule ElixirAiWeb.ChatLive do
     ~H"""
     <div class="flex flex-col h-full  rounded-lg">
       <div class="px-4 py-3 font-semibold flex items-center gap-3">
-        <.link navigate={~p"/"} class="text-cyan-700 hover:text-cyan-400 transition-colors">
+        <.link navigate={~p"/"} class="text-seafoam-700 hover:text-seafoam-400 transition-colors">
           ←
         </.link>
         <span class="flex-1">{@conversation_name}</span>
diff --git a/lib/elixir_ai_web/chat/chat_message.ex b/lib/elixir_ai_web/chat/chat_message.ex
index a8a6f39..33cf701 100644
--- a/lib/elixir_ai_web/chat/chat_message.ex
+++ b/lib/elixir_ai_web/chat/chat_message.ex
@@ -9,8 +9,8 @@ defmodule ElixirAiWeb.ChatMessage do
 
   def tool_result_message(assigns) do
     ~H"""
-    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-xs font-mono overflow-hidden"}>
-      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900/40 bg-cyan-900/10 text-cyan-600">
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900/40 bg-seafoam-950/20 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900/40 bg-seafoam-900/10 text-seafoam-600">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
@@ -23,11 +23,11 @@ defmodule ElixirAiWeb.ChatMessage do
             clip-rule="evenodd"
           />
         </svg>
-        <span class="text-cyan-600/70 flex-1 truncate">tool result</span>
-        <span class="text-cyan-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
+        <span class="text-seafoam-600/70 flex-1 truncate">tool result</span>
+        <span class="text-seafoam-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
       </div>
       <div class="px-3 py-2">
-        <pre class="text-cyan-500/70 whitespace-pre-wrap break-all">{@content}</pre>
+        <pre class="text-seafoam-500/70 whitespace-pre-wrap break-all">{@content}</pre>
       </div>
     </div>
     """
@@ -38,7 +38,7 @@ defmodule ElixirAiWeb.ChatMessage do
   def user_message(assigns) do
     ~H"""
     <div class="mb-2 text-sm text-right">
-      <div class={"inline-block px-3 py-2 rounded-lg  bg-cyan-950 text-cyan-50 #{max_width_class()} text-left"}>
+      <div class={"inline-block px-3 py-2 rounded-lg  bg-seafoam-950 text-seafoam-50 #{max_width_class()} text-left"}>
         {@content}
       </div>
     </div>
@@ -85,14 +85,14 @@ defmodule ElixirAiWeb.ChatMessage do
         <%= if @reasoning_content && @reasoning_content != "" do %>
           <button
             type="button"
-            class="flex items-center text-cyan-500/60 hover:text-cyan-300 transition-colors duration-150 cursor-pointer"
+            class="flex items-center text-seafoam-500/60 hover:text-seafoam-300 transition-colors duration-150 cursor-pointer"
             phx-click={
               JS.toggle_class("collapsed", to: "#reasoning-stream")
               |> JS.toggle_class("rotate-180", to: "#reasoning-stream-chevron")
             }
             aria-label="Toggle reasoning"
           >
-            <div class="flex items-center gap-1 text-cyan-100/40 ps-2 mb-1">
+            <div class="flex items-center gap-1 text-seafoam-100/40 ps-2 mb-1">
               <span class="text-xs">reasoning</span>
               <svg
                 id="reasoning-stream-chevron"
@@ -115,7 +115,7 @@ defmodule ElixirAiWeb.ChatMessage do
           phx-hook="MarkdownStream"
           phx-update="ignore"
           data-event="reasoning_chunk"
-          class={"reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs #{max_width_class()} mb-1 markdown"}
+          class={"reasoning-content block px-3 py-2 rounded-lg bg-seafoam-950/50 text-seafoam-400 italic text-xs #{max_width_class()} mb-1 markdown"}
         >
         </div>
       </div>
@@ -127,7 +127,7 @@ defmodule ElixirAiWeb.ChatMessage do
         phx-hook="MarkdownStream"
         phx-update="ignore"
         data-event="md_chunk"
-        class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-cyan-950/50"}
+        class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50"}
       >
       </div>
     </div>
@@ -146,14 +146,14 @@ defmodule ElixirAiWeb.ChatMessage do
       <%= if @reasoning_content && @reasoning_content != "" do %>
         <button
           type="button"
-          class="flex items-center text-cyan-500/60 hover:text-cyan-300 transition-colors duration-150 cursor-pointer"
+          class="flex items-center text-seafoam-500/60 hover:text-seafoam-300 transition-colors duration-150 cursor-pointer"
           phx-click={
             JS.toggle_class("collapsed", to: "##{@reasoning_id}")
             |> JS.toggle_class("rotate-180", to: "##{@reasoning_id}-chevron")
           }
           aria-label="Toggle reasoning"
         >
-          <div class="flex items-center gap-1 text-cyan-100/40 ps-2 mb-1">
+          <div class="flex items-center gap-1 text-seafoam-100/40 ps-2 mb-1">
             <span class="text-xs">reasoning</span>
             <svg
               id={"#{@reasoning_id}-chevron"}
@@ -176,7 +176,7 @@ defmodule ElixirAiWeb.ChatMessage do
           phx-update="ignore"
           data-md={@reasoning_content}
           class={[
-            "reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs #{max_width_class()} mb-1 markdown",
+            "reasoning-content block px-3 py-2 rounded-lg bg-seafoam-950/50 text-seafoam-400 italic text-xs #{max_width_class()} mb-1 markdown",
             !@expanded && "collapsed"
           ]}
         >
@@ -191,7 +191,7 @@ defmodule ElixirAiWeb.ChatMessage do
           phx-hook="MarkdownRender"
           phx-update="ignore"
           data-md={@content}
-          class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-cyan-950/50"}
+          class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50"}
         >
         </div>
       <% end %>
@@ -249,12 +249,44 @@ defmodule ElixirAiWeb.ChatMessage do
   attr :arguments, :any, default: nil
 
   defp called_tool_call(assigns) do
+    assigns =
+      assigns
+      |> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
+      |> assign(:_truncated, truncate_args(assigns.arguments))
+
     ~H"""
-    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900/60 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
-      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900/60 bg-cyan-900/20 text-cyan-400">
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900/60 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900/60 bg-seafoam-900/20 text-seafoam-400">
         <.tool_call_icon />
-        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
-        <span class="flex items-center gap-1 text-cyan-500/50">
+        <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
+        <span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
+          {@_truncated}
+        </span>
+        <span :if={!@_truncated} class="flex-1" />
+        <button
+          :if={@_truncated}
+          type="button"
+          phx-click={
+            JS.toggle_class("hidden", to: "##{@_id}-args")
+            |> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
+          }
+          class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
+        >
+          <svg
+            id={"#{@_id}-chevron"}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3 transition-transform duration-200"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span class="flex items-center gap-1 text-seafoam-500/50 shrink-0">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"
@@ -270,7 +302,9 @@ defmodule ElixirAiWeb.ChatMessage do
           <span class="text-[10px]">called</span>
         </span>
       </div>
-      <.tool_call_args arguments={@arguments} />
+      <div id={"#{@_id}-args"} class="hidden">
+        <.tool_call_args arguments={@arguments} />
+      </div>
     </div>
     """
   end
@@ -279,17 +313,51 @@ defmodule ElixirAiWeb.ChatMessage do
   attr :arguments, :any, default: nil
 
   defp pending_tool_call(assigns) do
+    assigns =
+      assigns
+      |> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
+      |> assign(:_truncated, truncate_args(assigns.arguments))
+
     ~H"""
-    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
-      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900 bg-seafoam-900/30 text-seafoam-400">
         <.tool_call_icon />
-        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
-        <span class="flex items-center gap-1 text-cyan-600">
-          <span class="w-1.5 h-1.5 rounded-full bg-cyan-600 animate-pulse inline-block"></span>
+        <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
+        <span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
+          {@_truncated}
+        </span>
+        <span :if={!@_truncated} class="flex-1" />
+        <button
+          :if={@_truncated}
+          type="button"
+          phx-click={
+            JS.toggle_class("hidden", to: "##{@_id}-args")
+            |> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
+          }
+          class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
+        >
+          <svg
+            id={"#{@_id}-chevron"}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3 transition-transform duration-200"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span class="flex items-center gap-1 text-seafoam-600 shrink-0">
+          <span class="w-1.5 h-1.5 rounded-full bg-seafoam-600 animate-pulse inline-block"></span>
           <span class="text-[10px]">running</span>
         </span>
       </div>
-      <.tool_call_args arguments={@arguments} />
+      <div id={"#{@_id}-args"} class="hidden">
+        <.tool_call_args arguments={@arguments} />
+      </div>
     </div>
     """
   end
@@ -300,21 +368,50 @@ defmodule ElixirAiWeb.ChatMessage do
 
   defp success_tool_call(assigns) do
     assigns =
-      assign(
-        assigns,
+      assigns
+      |> assign(
         :result_str,
         case assigns.result do
           s when is_binary(s) -> s
           other -> inspect(other, pretty: true, limit: :infinity)
         end
       )
+      |> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
+      |> assign(:_truncated, truncate_args(assigns.arguments))
 
     ~H"""
-    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
-      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900 bg-seafoam-900/30 text-seafoam-400">
         <.tool_call_icon />
-        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
-        <span class="flex items-center gap-1 text-emerald-500">
+        <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
+        <span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
+          {@_truncated}
+        </span>
+        <span :if={!@_truncated} class="flex-1" />
+        <button
+          :if={@_truncated}
+          type="button"
+          phx-click={
+            JS.toggle_class("hidden", to: "##{@_id}-args")
+            |> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
+          }
+          class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
+        >
+          <svg
+            id={"#{@_id}-chevron"}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3 transition-transform duration-200"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span class="flex items-center gap-1 text-emerald-500 shrink-0">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"
@@ -330,9 +427,11 @@ defmodule ElixirAiWeb.ChatMessage do
           <span class="text-[10px]">done</span>
         </span>
       </div>
-      <.tool_call_args arguments={@arguments} />
+      <div id={"#{@_id}-args"} class="hidden">
+        <.tool_call_args arguments={@arguments} />
+      </div>
       <div class="px-3 py-2">
-        <div class="text-cyan-700 mb-1 uppercase tracking-wider text-[10px]">result</div>
+        <div class="text-seafoam-700 mb-1 uppercase tracking-wider text-[10px]">result</div>
         <pre class="text-emerald-300/80 whitespace-pre-wrap break-all">{@result_str}</pre>
       </div>
     </div>
@@ -344,12 +443,44 @@ defmodule ElixirAiWeb.ChatMessage do
   attr :error, :string, required: true
 
   defp error_tool_call(assigns) do
+    assigns =
+      assigns
+      |> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
+      |> assign(:_truncated, truncate_args(assigns.arguments))
+
     ~H"""
-    <div class={"mb-1 #{max_width_class()} rounded-lg border border-red-900/50 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
-      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-red-900/50 bg-red-900/20 text-cyan-400">
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-red-900/50 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-red-900/50 bg-red-900/20 text-seafoam-400">
         <.tool_call_icon />
-        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
-        <span class="flex items-center gap-1 text-red-500">
+        <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
+        <span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
+          {@_truncated}
+        </span>
+        <span :if={!@_truncated} class="flex-1" />
+        <button
+          :if={@_truncated}
+          type="button"
+          phx-click={
+            JS.toggle_class("hidden", to: "##{@_id}-args")
+            |> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
+          }
+          class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
+        >
+          <svg
+            id={"#{@_id}-chevron"}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3 transition-transform duration-200"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span class="flex items-center gap-1 text-red-500 shrink-0">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"
@@ -361,7 +492,9 @@ defmodule ElixirAiWeb.ChatMessage do
           <span class="text-[10px]">error</span>
         </span>
       </div>
-      <.tool_call_args arguments={@arguments} />
+      <div id={"#{@_id}-args"} class="hidden">
+        <.tool_call_args arguments={@arguments} />
+      </div>
       <div class="px-3 py-2 bg-red-950/20">
         <div class="text-red-700 mb-1 uppercase tracking-wider text-[10px]">error</div>
         <pre class="text-red-400 whitespace-pre-wrap break-all">{@error}</pre>
@@ -370,6 +503,24 @@ defmodule ElixirAiWeb.ChatMessage do
     """
   end
 
+  defp truncate_args(nil), do: nil
+  defp truncate_args(""), do: nil
+
+  defp truncate_args(args) when is_binary(args) do
+    compact =
+      case Jason.decode(args) do
+        {:ok, decoded} -> Jason.encode!(decoded)
+        _ -> args
+      end
+
+    if String.length(compact) > 72, do: String.slice(compact, 0, 69) <> "\u2026", else: compact
+  end
+
+  defp truncate_args(args) do
+    compact = Jason.encode!(args)
+    if String.length(compact) > 72, do: String.slice(compact, 0, 69) <> "\u2026", else: compact
+  end
+
   attr :arguments, :any, default: nil
 
   defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do
@@ -390,9 +541,9 @@ defmodule ElixirAiWeb.ChatMessage do
       )
 
     ~H"""
-    <div class="px-3 py-2 border-b border-cyan-900/50">
-      <div class="text-cyan-700 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
-      <pre class="text-cyan-400 whitespace-pre-wrap break-all">{@pretty_args}</pre>
+    <div class="px-3 py-2 border-b border-seafoam-900/50">
+      <div class="text-seafoam-700 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
+      <pre class="text-seafoam-400 whitespace-pre-wrap break-all">{@pretty_args}</pre>
     </div>
     """
   end
diff --git a/lib/elixir_ai_web/chat/chat_provider_display.ex b/lib/elixir_ai_web/chat/chat_provider_display.ex
index 00745c1..50f701e 100644
--- a/lib/elixir_ai_web/chat/chat_provider_display.ex
+++ b/lib/elixir_ai_web/chat/chat_provider_display.ex
@@ -13,27 +13,27 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
         phx-click={JS.toggle(to: "#provider-dropdown")}
         class="flex items-center gap-2 text-xs min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
       >
-        <div class="flex items-center gap-1.5 px-2 py-1 rounded bg-cyan-950/50 border border-cyan-900/40 min-w-0 select-none">
+        <div class="flex items-center gap-1.5 px-2 py-1 rounded bg-seafoam-950/50 border border-seafoam-900/40 min-w-0 select-none">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
-            class="w-3 h-3 shrink-0 text-cyan-600"
+            class="w-3 h-3 shrink-0 text-seafoam-600"
           >
             <path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM1.49 15.326a.78.78 0 0 1-.358-.442 3 3 0 0 1 4.308-3.516 6.484 6.484 0 0 0-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 0 1-2.07-.655ZM16.44 15.98a4.97 4.97 0 0 0 2.07-.654.78.78 0 0 0 .357-.442 3 3 0 0 0-4.308-3.516 6.484 6.484 0 0 1 1.907 3.96 2.32 2.32 0 0 1-.026.654ZM18 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM5.304 16.19a.844.844 0 0 1-.277-.71 5 5 0 0 1 9.947 0 .843.843 0 0 1-.277.71A6.975 6.975 0 0 1 10 18a6.974 6.974 0 0 1-4.696-1.81Z" />
           </svg>
           <%= if @provider do %>
-            <span class="text-cyan-400 font-medium truncate">{@provider.name}</span>
-            <span class="text-cyan-800">·</span>
-            <span class="text-cyan-600 truncate">{@provider.model_name}</span>
+            <span class="text-seafoam-400 font-medium truncate">{@provider.name}</span>
+            <span class="text-seafoam-800">·</span>
+            <span class="text-seafoam-600 truncate">{@provider.model_name}</span>
           <% else %>
-            <span class="text-cyan-800 italic">No provider</span>
+            <span class="text-seafoam-800 italic">No provider</span>
           <% end %>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
-            class="w-2.5 h-2.5 text-cyan-700 ml-0.5 shrink-0"
+            class="w-2.5 h-2.5 text-seafoam-700 ml-0.5 shrink-0"
           >
             <path
               fill-rule="evenodd"
@@ -45,7 +45,7 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
       </button>
       <div
         id="provider-dropdown"
-        class="hidden absolute right-0 top-full mt-1 z-50 min-w-max bg-gray-950 border border-cyan-900/40 rounded shadow-xl overflow-hidden"
+        class="hidden absolute right-0 top-full mt-1 z-50 min-w-max bg-gray-950 border border-seafoam-900/40 rounded shadow-xl overflow-hidden"
         phx-click-away={JS.hide(to: "#provider-dropdown")}
       >
         <%= if @providers == [] do %>
@@ -59,9 +59,9 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
                 |> JS.push("change_provider", value: %{id: p.id})
               }
               class={[
-                "flex flex-col px-3 py-2 text-left w-full text-xs hover:bg-cyan-950/60 transition-colors",
+                "flex flex-col px-3 py-2 text-left w-full text-xs hover:bg-seafoam-950/60 transition-colors",
                 if(@provider && @provider.name == p.name,
-                  do: "text-cyan-400",
+                  do: "text-seafoam-400",
                   else: "text-gray-300"
                 )
               ]}
@@ -69,7 +69,7 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
               <span class="font-medium">{p.name}</span>
               <span class={
                 if @provider && @provider.name == p.name,
-                  do: "text-cyan-700",
+                  do: "text-seafoam-700",
                   else: "text-gray-500"
               }>
                 {p.model_name}
diff --git a/lib/elixir_ai_web/components/form_components.ex b/lib/elixir_ai_web/components/form_components.ex
index 0b105a7..fb19c06 100644
--- a/lib/elixir_ai_web/components/form_components.ex
+++ b/lib/elixir_ai_web/components/form_components.ex
@@ -19,14 +19,14 @@ defmodule ElixirAiWeb.FormComponents do
   def input(assigns) do
     ~H"""
     <div>
-      <label for={@name} class="block text-sm text-cyan-300 mb-1">{@label}</label>
+      <label for={@name} class="block text-sm text-seafoam-300 mb-1">{@label}</label>
       <input
         type={@type}
         name={@name}
         id={@name}
         value={@value}
         autocomplete={@autocomplete}
-        class="w-full rounded px-3 py-2 text-sm bg-cyan-950/20 border border-cyan-900/40 text-cyan-100 focus:outline-none focus:ring-1 focus:ring-cyan-700"
+        class="w-full rounded px-3 py-2 text-sm bg-seafoam-950/20 border border-seafoam-900/40 text-seafoam-100 focus:outline-none focus:ring-1 focus:ring-seafoam-700"
         {@rest}
       />
     </div>
@@ -47,7 +47,7 @@ defmodule ElixirAiWeb.FormComponents do
   def modal(assigns) do
     ~H"""
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
-      <div class="w-full max-w-sm rounded-lg border border-cyan-900/40 bg-cyan-950 p-6 shadow-xl">
+      <div class="w-full max-w-sm rounded-lg border border-seafoam-900/40 bg-seafoam-950 p-6 shadow-xl">
         {render_slot(@inner_block)}
       </div>
     </div>
diff --git a/lib/elixir_ai_web/components/layouts/root.html.heex b/lib/elixir_ai_web/components/layouts/root.html.heex
index 7c423d8..ce668ef 100644
--- a/lib/elixir_ai_web/components/layouts/root.html.heex
+++ b/lib/elixir_ai_web/components/layouts/root.html.heex
@@ -17,7 +17,7 @@
       window.DOMPurify = DOMPurify
     </script>
   </head>
-  <body class="bg-cyan-900 text-cyan-50">
+  <body class="bg-seafoam-900 text-seafoam-50">
     {live_render(@conn, ElixirAiWeb.VoiceLive, id: "voice-control")}
     {@inner_content}
   </body>
diff --git a/lib/elixir_ai_web/home/ai_providers_live.ex b/lib/elixir_ai_web/home/ai_providers_live.ex
index 1d55299..dc0d294 100644
--- a/lib/elixir_ai_web/home/ai_providers_live.ex
+++ b/lib/elixir_ai_web/home/ai_providers_live.ex
@@ -27,11 +27,11 @@ defmodule ElixirAiWeb.AiProvidersLive do
     ~H"""
     <div>
       <div class="flex items-center justify-between mb-8">
-        <h1 class="text-lg font-semibold text-cyan-300">AI Providers</h1>
+        <h1 class="text-lg font-semibold text-seafoam-300">AI Providers</h1>
         <button
           phx-click="toggle_form"
           phx-target={@myself}
-          class="px-3 py-1 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors"
+          class="px-3 py-1 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
         >
           {if @show_form, do: "Cancel", else: "Add Provider"}
         </button>
@@ -41,7 +41,7 @@ defmodule ElixirAiWeb.AiProvidersLive do
         <form
           phx-submit="create_provider"
           phx-target={@myself}
-          class="mb-8 space-y-2 p-4 rounded-lg border border-cyan-900/40 bg-cyan-950/10"
+          class="mb-8 space-y-2 p-4 rounded-lg border border-seafoam-900/40 bg-seafoam-950/10"
         >
           <.input type="text" name="name" value={@form_data["name"]} label="Provider Name" />
           <.input type="text" name="model_name" value={@form_data["model_name"]} label="Model Name" />
@@ -54,7 +54,7 @@ defmodule ElixirAiWeb.AiProvidersLive do
           />
           <button
             type="submit"
-            class="w-full px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors"
+            class="w-full px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
           >
             Create Provider
           </button>r
@@ -67,14 +67,14 @@ defmodule ElixirAiWeb.AiProvidersLive do
 
       <ul class="space-y-2">
         <%= if @providers == [] do %>
-          <li class="text-sm text-cyan-700">No providers configured yet.</li>
+          <li class="text-sm text-seafoam-700">No providers configured yet.</li>
         <% end %>
         <%= for provider <- @providers do %>
-          <li class="p-4 rounded-lg border border-cyan-900/40 bg-cyan-950/20">
+          <li class="p-4 rounded-lg border border-seafoam-900/40 bg-seafoam-950/20">
             <div class="flex items-start justify-between">
               <div class="flex-1">
-                <h3 class="text-sm font-medium text-cyan-300">{provider.name}</h3>
-                <p class="text-xs text-cyan-500 mt-1">Model: {provider.model_name}</p>
+                <h3 class="text-sm font-medium text-seafoam-300">{provider.name}</h3>
+                <p class="text-xs text-seafoam-500 mt-1">Model: {provider.model_name}</p>
               </div>
               <button
                 phx-click="delete_provider"
@@ -91,15 +91,15 @@ defmodule ElixirAiWeb.AiProvidersLive do
 
       <%= if @confirm_delete_id do %>
         <.modal>
-          <h2 class="text-sm font-semibold text-cyan-300 mb-2">Delete Provider</h2>
-          <p class="text-sm text-cyan-500 mb-6">
+          <h2 class="text-sm font-semibold text-seafoam-300 mb-2">Delete Provider</h2>
+          <p class="text-sm text-seafoam-500 mb-6">
             Are you sure you want to delete this provider? This action cannot be undone.
           </p>
           <div class="flex gap-3 justify-end">
             <button
               phx-click="cancel_delete"
               phx-target={@myself}
-              class="px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors"
+              class="px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
             >
               Cancel
             </button>
diff --git a/lib/elixir_ai_web/home/home_live.ex b/lib/elixir_ai_web/home/home_live.ex
index fa49937..2124c96 100644
--- a/lib/elixir_ai_web/home/home_live.ex
+++ b/lib/elixir_ai_web/home/home_live.ex
@@ -24,7 +24,7 @@ defmodule ElixirAiWeb.HomeLive do
     ~H"""
     <div class="max-w-lg mx-auto mt-16 px-4 space-y-16">
       <div>
-        <h1 class="text-lg font-semibold text-cyan-300 mb-8">Conversations</h1>
+        <h1 class="text-lg font-semibold text-seafoam-300 mb-8">Conversations</h1>
 
         <.conversation_list conversations={@conversations} />
 
@@ -50,13 +50,13 @@ defmodule ElixirAiWeb.HomeLive do
     ~H"""
     <ul class="mb-8 space-y-2">
       <%= if @conversations == [] do %>
-        <li class="text-sm text-cyan-700">No conversations yet.</li>
+        <li class="text-sm text-seafoam-700">No conversations yet.</li>
       <% end %>
       <%= for name <- @conversations do %>
         <li>
           <.link
             navigate={~p"/chat/#{name}"}
-            class="block px-4 py-2 rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors text-sm"
+            class="block px-4 py-2 rounded-lg border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors text-sm"
           >
             {name}
           </.link>
@@ -72,7 +72,7 @@ defmodule ElixirAiWeb.HomeLive do
       <.input type="text" name="name" value={@new_name} label="Conversation Name" />
       <select
         name="ai_provider_id"
-        class="w-full rounded px-3 py-2 text-sm bg-cyan-950/20 border border-cyan-900/40 text-cyan-100 focus:outline-none focus:ring-1 focus:ring-cyan-700"
+        class="w-full rounded px-3 py-2 text-sm bg-seafoam-950/20 border border-seafoam-900/40 text-seafoam-100 focus:outline-none focus:ring-1 focus:ring-seafoam-700"
       >
         <%= for {provider, index} <- Enum.with_index(@ai_providers) do %>
           <option value={provider.id} selected={index == 0}>
@@ -82,7 +82,7 @@ defmodule ElixirAiWeb.HomeLive do
       </select>
       <button
         type="submit"
-        class="w-full px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors"
+        class="w-full px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
       >
         Create
       </button>
diff --git a/lib/elixir_ai_web/voice/voice_live.ex b/lib/elixir_ai_web/voice/voice_live.ex
index 7ec9806..4ebe9ba 100644
--- a/lib/elixir_ai_web/voice/voice_live.ex
+++ b/lib/elixir_ai_web/voice/voice_live.ex
@@ -14,7 +14,7 @@ defmodule ElixirAiWeb.VoiceLive do
         <button
           phx-click="expand"
           title="Voice input (Ctrl+Space)"
-          class="fixed top-4 right-4 z-50 p-2.5 rounded-full bg-cyan-900/50 hover:bg-cyan-800/80 border border-cyan-700/50 hover:border-cyan-600 text-cyan-500/70 hover:text-cyan-300 transition-all duration-200 opacity-50 hover:opacity-100"
+          class="fixed top-4 right-4 z-50 p-2.5 rounded-full bg-seafoam-900/50 hover:bg-seafoam-800/80 border border-seafoam-700/50 hover:border-seafoam-600 text-seafoam-500/70 hover:text-seafoam-300 transition-all duration-200 opacity-50 hover:opacity-100"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -27,19 +27,19 @@ defmodule ElixirAiWeb.VoiceLive do
         </button>
       <% else %>
         <%!-- Expanded panel --%>
-        <div class="fixed top-4 right-4 w-72 bg-cyan-950/95 border border-cyan-800 rounded-2xl shadow-2xl z-50 p-4 flex flex-col gap-3 backdrop-blur">
+        <div class="fixed top-4 right-4 w-72 bg-seafoam-950/95 border border-seafoam-800 rounded-2xl shadow-2xl z-50 p-4 flex flex-col gap-3 backdrop-blur">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-3">
               <%= if @state == :idle do %>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4 text-cyan-500 shrink-0"
+                  class="h-4 w-4 text-seafoam-500 shrink-0"
                   viewBox="0 0 24 24"
                   fill="currentColor"
                 >
                   <path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
                 </svg>
-                <span class="text-cyan-400 font-semibold text-sm">Voice Input</span>
+                <span class="text-seafoam-400 font-semibold text-sm">Voice Input</span>
               <% end %>
               <%= if @state == :recording do %>
                 <span class="relative flex h-3 w-3 shrink-0">
@@ -47,25 +47,25 @@ defmodule ElixirAiWeb.VoiceLive do
                   </span>
                   <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                 </span>
-                <span class="text-cyan-50 font-semibold text-sm">Recording</span>
+                <span class="text-seafoam-50 font-semibold text-sm">Recording</span>
               <% end %>
               <%= if @state == :processing do %>
                 <span class="relative flex h-3 w-3 shrink-0">
-                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75">
                   </span>
-                  <span class="relative inline-flex rounded-full h-3 w-3 bg-cyan-400"></span>
+                  <span class="relative inline-flex rounded-full h-3 w-3 bg-seafoam-400"></span>
                 </span>
-                <span class="text-cyan-50 font-semibold text-sm">Processing…</span>
+                <span class="text-seafoam-50 font-semibold text-sm">Processing…</span>
               <% end %>
               <%= if @state == :transcribed do %>
-                <span class="text-cyan-300 font-semibold text-sm">Transcription</span>
+                <span class="text-seafoam-300 font-semibold text-sm">Transcription</span>
               <% end %>
             </div>
             <%!-- Minimize button --%>
             <button
               phx-click="minimize"
               title="Minimize"
-              class="p-1 rounded-lg text-cyan-600 hover:text-cyan-300 hover:bg-cyan-800/50 transition-colors"
+              class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -83,7 +83,7 @@ defmodule ElixirAiWeb.VoiceLive do
           </div>
           <%= if @state in [:recording, :processing] do %>
             <div id="voice-viz-wrapper" phx-update="ignore">
-              <canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-cyan-950 block">
+              <canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-seafoam-950 block">
               </canvas>
             </div>
           <% end %>
@@ -93,10 +93,10 @@ defmodule ElixirAiWeb.VoiceLive do
           <%= if @state == :idle do %>
             <button
               phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
-              class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-cyan-700 hover:bg-cyan-600 text-cyan-50 text-xs font-medium transition-colors"
+              class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
             >
               <span>Start Recording</span>
-              <kbd class="text-cyan-300 bg-cyan-800 border border-cyan-600 px-1.5 py-0.5 rounded font-mono">
+              <kbd class="text-seafoam-300 bg-seafoam-800 border border-seafoam-600 px-1.5 py-0.5 rounded font-mono">
                 Ctrl+Space
               </kbd>
             </button>
@@ -104,10 +104,10 @@ defmodule ElixirAiWeb.VoiceLive do
           <%= if @state == :recording do %>
             <button
               phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")}
-              class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-cyan-800 hover:bg-cyan-700 text-cyan-50 text-xs font-medium transition-colors border border-cyan-700"
+              class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-800 hover:bg-seafoam-700 text-seafoam-50 text-xs font-medium transition-colors border border-seafoam-700"
             >
               <span>Stop Recording</span>
-              <kbd class="text-cyan-300 bg-cyan-900 border border-cyan-700 px-1.5 py-0.5 rounded font-mono">
+              <kbd class="text-seafoam-300 bg-seafoam-900 border border-seafoam-700 px-1.5 py-0.5 rounded font-mono">
                 Space
               </kbd>
             </button>
@@ -115,7 +115,7 @@ defmodule ElixirAiWeb.VoiceLive do
           <%= if @state == :transcribed do %>
             <button
               phx-click="dismiss_transcription"
-              class="text-xs text-cyan-500 hover:text-cyan-300 transition-colors text-center w-full"
+              class="text-xs text-seafoam-500 hover:text-seafoam-300 transition-colors text-center w-full"
             >
               Dismiss
             </button>
@@ -128,8 +128,8 @@ defmodule ElixirAiWeb.VoiceLive do
 
   defp transcription_display(assigns) do
     ~H"""
-    <div class="rounded-xl bg-cyan-900/60 border border-cyan-700 px-3 py-2">
-      <p class="text-sm text-cyan-50 leading-relaxed">{@transcription}</p>
+    <div class="rounded-xl bg-seafoam-900/60 border border-seafoam-700 px-3 py-2">
+      <p class="text-sm text-seafoam-50 leading-relaxed">{@transcription}</p>
     </div>
     """
   end