Which direction fits your commit philosophy better?

services/frontend/src/features/live/components/ActiveSpeakers.tsx

@@ -1,5 +1,6 @@
 import type { ActiveSpeaker } from "../../../shared/api/client";
 import { Skeleton } from "../../../shared/ui";
+import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
 
 interface ActiveSpeakersProps {
   speakers: ActiveSpeaker[];
@@ -8,9 +9,7 @@ interface ActiveSpeakersProps {
 export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
   if (speakers.length === 0) {
     return (
-      <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
-        No active speakers.
-      </div>
+      <EmptyStateMascot variant="sleeping" message="No active speakers~" />
     );
   }
 
@@ -22,16 +21,18 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
         return (
           <div
             key={key}
-            className="flex items-center gap-3 rounded-xl border border-border bg-background/60 p-3"
+            className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
           >
             <img
               src={s.avatar}
               alt=""
-              className="h-8 w-8 rounded-full object-cover"
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
             />
             <div className="min-w-0">
               <div className="truncate text-sm font-medium">{s.username}</div>
-              <div className="text-xs text-emerald-300">Speaking</div>
+              <div className="text-xs font-medium text-emerald-700">
+                Speaking
+              </div>
             </div>
           </div>
         );

services/frontend/src/features/live/components/AudioVisualizer.tsx

@@ -21,20 +21,21 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
     const barWidth = width / levels.length;
     const maxBarHeight = height * 0.85;
 
+    // Sky-blue to pink gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, "#7EC8E3");
+    gradient.addColorStop(1, "#FFB7C5");
+
     for (let i = 0; i < levels.length; i++) {
       const level = levels[i];
       const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
       const x = i * barWidth;
       const y = height - barHeight;
 
-      // Gradient color based on level
-      const hue = 199 - level * 199;
-      const saturation = 89;
-      const lightness = 48 + level * 20;
-      ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+      ctx.fillStyle = gradient;
 
-      // Rounded bar
-      const radius = barWidth * 0.3;
+      // More rounded bar
+      const radius = barWidth * 0.4;
       ctx.beginPath();
       ctx.moveTo(x + radius, y);
       ctx.lineTo(x + barWidth - radius, y);
@@ -53,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
         ref={canvasRef}
         width={512}
         height={128}
-        className="w-full rounded-xl bg-muted/30"
+        className="w-full rounded-xl bg-sky-50/30"
         style={{ height: "128px" }}
       />
     </div>

services/frontend/src/features/live/components/VoiceConnectionCard.tsx

@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
   onStreamingToggle,
 }: VoiceConnectionCardProps) {
   return (
-    <div className="rounded-2xl border border-border bg-card shadow-sm">
+    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
       <div className="p-6">
         <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5" /> Voice Bridge
+          <Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
         </h3>
         <p className="mt-1 text-sm text-muted-foreground">
           Join a Discord voice channel, listen, and transmit audio.
@@ -47,7 +47,7 @@ export function VoiceConnectionCard({
 
         <div className="mt-4 grid gap-4 md:grid-cols-2">
           <div className="space-y-2">
-            <label className="text-sm font-medium">Guild</label>
+            <label className="text-sm font-medium text-foreground">Guild</label>
             <Select
               value={selectedGuild}
               onChange={(e) => onGuildChange(e.target.value)}
@@ -56,7 +56,7 @@ export function VoiceConnectionCard({
             />
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium">Voice Channel</label>
+            <label className="text-sm font-medium text-foreground">Voice Channel</label>
             <Select
               value={selectedChannel}
               onChange={(e) => onChannelChange(e.target.value)}
@@ -73,6 +73,7 @@ export function VoiceConnectionCard({
           <Button
             disabled={!selectedGuild || !selectedChannel || voiceLoading}
             onClick={onJoin}
+            className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
           >
             {status.connected ? "Reconnect" : "Join Voice"}
           </Button>
@@ -91,7 +92,7 @@ export function VoiceConnectionCard({
             {isListening ? "Stop Listening" : "Listen"}
           </Button>
           <Button
-            variant={isStreaming ? "destructive" : "default"}
+            variant={isStreaming ? "secondary" : "outline"}
             onClick={onStreamingToggle}
           >
             <Radio className="mr-1.5 h-4 w-4" />{" "}