fix(frontend): UI polish - fix CSS typo, dark mode border, and hardcoded colors (#1942)

- Fix `font-norma` typo to `font-normal` in message-list subtask count
- Fix dark mode `--border` using reddish hue (22.216) instead of neutral
- Replace hardcoded `rgb(184,184,192)` in hero with `text-muted-foreground`
- Replace hardcoded `bg-[#a3a1a1]` in streaming indicator with `bg-muted-foreground`
- Add missing `font-sans` to welcome description `<pre>` for consistency
- Make case-study-section padding responsive (`px-4 md:px-20`)

Closes #1940

frontend/src/components/landing/hero.tsx

@@ -69,10 +69,7 @@ export function Hero({ className }: { className?: string }) {
             </div>
           </a>
         )}
-        <p
-          className="mt-8 scale-105 text-center text-2xl text-shadow-sm"
-          style={{ color: "rgb(184,184,192)" }}
-        >
+        <p className="text-muted-foreground mt-8 scale-105 text-center text-2xl text-shadow-sm">
           An open-source SuperAgent harness that researches, codes, and creates.
           With
           <br />

frontend/src/components/landing/sections/case-study-section.tsx

@@ -51,7 +51,7 @@ export function CaseStudySection({ className }: { className?: string }) {
       title="Case Studies"
       subtitle="See how DeerFlow is used in the wild"
     >
-      <div className="container-md mt-8 grid grid-cols-1 gap-4 px-20 md:grid-cols-2 lg:grid-cols-3">
+      <div className="container-md mt-8 grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:px-20 lg:grid-cols-3">
         {caseStudies.map((caseStudy) => (
           <Link
             key={caseStudy.title}

frontend/src/components/workspace/messages/message-list.tsx

@@ -166,7 +166,7 @@ export function MessageList({
               results.push(
                 <div
                   key="subtask-count"
-                  className="text-muted-foreground font-norma pt-2 text-sm"
+                  className="text-muted-foreground pt-2 text-sm font-normal"
                 >
                   {t.subtasks.executing(tasks.size)}
                 </div>,

frontend/src/components/workspace/streaming-indicator.tsx

@@ -14,19 +14,19 @@ export function StreamingIndicator({
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100",
+          "animate-bouncing bg-muted-foreground rounded-full opacity-100",
         )}
       />
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.2s]",
+          "animate-bouncing bg-muted-foreground rounded-full opacity-100 [animation-delay:0.2s]",
         )}
       />
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.4s]",
+          "animate-bouncing bg-muted-foreground rounded-full opacity-100 [animation-delay:0.4s]",
         )}
       />
     </div>

frontend/src/components/workspace/welcome.tsx

@@ -61,7 +61,9 @@ export function Welcome({
       ) : (
         <div className="text-muted-foreground text-sm">
           {t.welcome.description.includes("\n") ? (
-            <pre className="whitespace-pre">{t.welcome.description}</pre>
+            <pre className="font-sans whitespace-pre">
+              {t.welcome.description}
+            </pre>
           ) : (
             <p>{t.welcome.description}</p>
           )}

frontend/src/styles/globals.css

@@ -273,7 +273,7 @@
   --accent: oklch(0.32 0.0036 106.64);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0.191 22.216 / 10%);
+  --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: transparent;
   --chart-1: oklch(0.488 0.243 264.376);