From da3acbbb6ee6b123ed4f17aebaa24a995211e733 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Wed, 15 Apr 2026 23:08:56 +0800
Subject: [PATCH] feat: initialize project dashboard layout and global design
 system with Tailwind CSS

---
 frontend/app/globals.css                      | 219 ++++++++---
 frontend/app/layout.tsx                       |  12 +-
 frontend/components/dashboard/CitySidebar.tsx |  44 ++-
 .../components/dashboard/Dashboard.module.css | 349 ++++++++++--------
 frontend/components/dashboard/HeaderBar.tsx   |  35 +-
 frontend/tailwind.config.ts                   |  54 ++-
 6 files changed, 489 insertions(+), 224 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 6e1481cb..501c14d9 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,13 +2,101 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ══════════════════════════════════════════════════════════════
+   PolyWeather — Unified Design Token System
+   ══════════════════════════════════════════════════════════════ */
+
 @layer base {
   :root {
+    /* ── Background Scale ── */
+    --color-bg-base: #080c14;
+    --color-bg-raised: #0d1321;
+    --color-bg-overlay: #111827;
+    --color-bg-card: rgba(15, 23, 42, 0.72);
+    --color-bg-input: rgba(255, 255, 255, 0.04);
+
+    /* ── Text Scale ── */
+    --color-text-primary: #f1f5f9;
+    --color-text-secondary: #94a3b8;
+    --color-text-muted: #64748b;
+    --color-text-disabled: #475569;
+
+    /* ── Accent Colors ── */
+    --color-accent-primary: #00e5ff;
+    --color-accent-secondary: #6366f1;
+    --color-accent-tertiary: #a78bfa;
+
+    /* ── Signal / Semantic Colors ── */
+    --color-signal-success: #22c55e;
+    --color-signal-warning: #f59e0b;
+    --color-signal-danger: #ef4444;
+    --color-signal-info: #3b82f6;
+
+    /* ── Risk Colors (aliased from signal) ── */
+    --color-risk-high: var(--color-signal-danger);
+    --color-risk-medium: var(--color-signal-warning);
+    --color-risk-low: var(--color-signal-success);
+
+    /* ── Border ── */
+    --color-border-default: rgba(99, 102, 241, 0.12);
+    --color-border-hover: rgba(99, 102, 241, 0.28);
+    --color-border-subtle: rgba(255, 255, 255, 0.06);
+
+    /* ── Shadow / Elevation ── */
+    --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.45);
+    --shadow-elevation-3: 0 20px 60px rgba(0, 0, 0, 0.6);
+    --shadow-glow-accent: 0 0 20px rgba(0, 229, 255, 0.2);
+    --shadow-glow-secondary: 0 0 20px rgba(99, 102, 241, 0.25);
+
+    /* ── Typography ── */
+    --font-data:
+      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-display: "Geist", "Inter", -apple-system, sans-serif;
+    --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+
+    /* ── Spacing (4px grid) ── */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --space-10: 40px;
+    --space-12: 48px;
+
+    /* ── Border Radius ── */
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* ── Glass / Blur ── */
+    --glass-blur-1: blur(10px);
+    --glass-blur-2: blur(16px);
+    --glass-blur-3: blur(24px);
+    --glass-opacity-1: 0.72;
+    --glass-opacity-2: 0.85;
+    --glass-opacity-3: 0.92;
+
+    /* ── Layout ── */
+    --header-height: 52px;
+    --sidebar-width: 260px;
+    --panel-width: 560px;
+
+    /* ── Motion ── */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
+
+    /* ── Legacy Compatibility (shadcn/ui HSL tokens) ── */
     --background: 223 53% 4%;
     --foreground: 210 40% 98%;
     --card: 223 46% 8%;
     --card-foreground: 210 40% 98%;
-    --primary: 190 95% 56%;
+    --primary: 187 100% 50%;
     --primary-foreground: 222 47% 8%;
     --secondary: 224 30% 14%;
     --secondary-foreground: 210 40% 98%;
@@ -22,28 +110,32 @@
   }
 
   body {
-    font-family: "Sora", "Avenir Next", "Segoe UI", sans-serif;
+    font-family: var(--font-data);
     background:
       radial-gradient(
         circle at 10% -10%,
-        rgba(34, 211, 238, 0.2),
+        rgba(0, 229, 255, 0.12),
         transparent 40%
       ),
       radial-gradient(
         circle at 90% 0%,
-        rgba(59, 130, 246, 0.14),
+        rgba(99, 102, 241, 0.1),
         transparent 36%
       ),
       radial-gradient(
         circle at 80% 100%,
-        rgba(8, 47, 73, 0.5),
+        rgba(8, 47, 73, 0.4),
         transparent 48%
       ),
-      hsl(var(--background));
-    color: hsl(var(--foreground));
+      var(--color-bg-base);
+    color: var(--color-text-primary);
   }
 }
 
+/* ══════════════════════════════════════════════════════════════
+   Map Components (Leaflet overrides + map markers)
+   ══════════════════════════════════════════════════════════════ */
+
 @layer components {
   .leaflet-container {
     width: 100%;
@@ -52,38 +144,41 @@
   }
 
   .leaflet-control-zoom a {
-    background: rgba(2, 6, 23, 0.82) !important;
-    border-color: rgba(71, 85, 105, 0.5) !important;
-    color: #e2e8f0 !important;
+    background: rgba(8, 12, 20, 0.85) !important;
+    border-color: var(--color-border-default) !important;
+    color: var(--color-text-primary) !important;
   }
 
   .leaflet-control-zoom a:hover {
-    background: rgba(15, 23, 42, 0.95) !important;
+    background: rgba(13, 19, 33, 0.95) !important;
+    border-color: var(--color-border-hover) !important;
   }
 
+  /* ── Map Pill (temperature labels on map) ── */
   .map-pill {
     min-width: 52px;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     border: 1px solid rgba(255, 255, 255, 0.2);
     padding: 5px 10px;
-    color: #f8fafc;
+    color: var(--color-text-primary);
     font-size: 11px;
     font-weight: 700;
+    font-variant-numeric: tabular-nums;
     line-height: 1;
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    backdrop-filter: blur(8px);
+    backdrop-filter: var(--glass-blur-1);
     box-shadow:
       0 2px 14px rgba(2, 6, 23, 0.45),
       inset 0 1px 0 rgba(255, 255, 255, 0.2);
   }
 
   .map-pill.high {
-    background: linear-gradient(135deg, #ef4444, #b91c1c);
+    background: linear-gradient(135deg, var(--color-signal-danger), #b91c1c);
   }
 
   .map-pill.medium {
-    background: linear-gradient(135deg, #f59e0b, #b45309);
+    background: linear-gradient(135deg, var(--color-signal-warning), #b45309);
   }
 
   .map-pill.low {
@@ -93,21 +188,23 @@
   .map-pill.active {
     transform: translateY(-2px) scale(1.05);
     box-shadow:
-      0 8px 24px rgba(34, 211, 238, 0.4),
+      0 8px 24px rgba(0, 229, 255, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.35);
   }
 
+  /* ── Glass utility ── */
   .glass {
     background: linear-gradient(
       180deg,
-      rgba(15, 23, 42, 0.9) 0%,
-      rgba(2, 6, 23, 0.75) 100%
+      rgba(13, 19, 33, 0.88) 0%,
+      rgba(8, 12, 20, 0.75) 100%
     );
-    backdrop-filter: blur(10px);
+    backdrop-filter: var(--glass-blur-1);
   }
 
+  /* ── Fade-up entrance ── */
   .fade-up {
-    animation: fadeUp 450ms ease-out;
+    animation: fadeUp 400ms var(--transition-slow);
   }
 }
 
@@ -124,47 +221,52 @@
   }
 }
 
+/* ══════════════════════════════════════════════════════════════
+   Map Marker Components (nearby stations, city bubbles)
+   ══════════════════════════════════════════════════════════════ */
 
 @layer components {
   .nearby-marker {
     display: flex;
     align-items: center;
-    gap: 6px;
-    background: rgba(15, 23, 42, 0.9);
-    color: rgba(226, 232, 240, 0.92);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    padding: 4px 10px;
+    gap: var(--space-2);
+    background: rgba(13, 19, 33, 0.9);
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--space-1) var(--space-3);
     font-size: 11px;
     font-weight: 600;
-    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
-    backdrop-filter: blur(10px);
+    box-shadow: var(--shadow-elevation-2);
+    backdrop-filter: var(--glass-blur-1);
     white-space: nowrap;
   }
 
   .nearby-name {
-    color: rgba(148, 163, 184, 0.95);
+    color: var(--color-text-secondary);
   }
 
   .nearby-temp {
     color: #fff;
     font-weight: 800;
+    font-variant-numeric: tabular-nums;
   }
 
   .nearby-unit {
-    color: rgba(148, 163, 184, 0.85);
+    color: var(--color-text-muted);
     font-size: 9px;
   }
 
   .wind-info {
     display: flex;
     align-items: center;
-    gap: 4px;
-    margin-left: 4px;
-    padding-left: 6px;
-    border-left: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(34, 211, 238, 0.9);
+    gap: var(--space-1);
+    margin-left: var(--space-1);
+    padding-left: var(--space-2);
+    border-left: 1px solid var(--color-border-subtle);
+    color: var(--color-accent-primary);
     font-size: 10px;
+    opacity: 0.9;
   }
 
   .wind-arrow {
@@ -172,6 +274,7 @@
     transform-origin: center;
   }
 
+  /* ── City Marker (bubble on map) ── */
   .city-marker {
     position: relative;
     display: flex;
@@ -184,13 +287,14 @@
     position: relative;
     min-width: 46px;
     padding: 5px 10px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     font-size: 13px;
     font-weight: 800;
+    font-variant-numeric: tabular-nums;
     text-align: center;
     color: white;
     border: 1px solid transparent;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    box-shadow: var(--shadow-elevation-2);
   }
 
   .marker-bubble::after {
@@ -207,48 +311,63 @@
   }
 
   .marker-bubble.risk-high {
-    background: linear-gradient(135deg, #dc2626, #ef4444);
+    background: linear-gradient(135deg, #dc2626, var(--color-signal-danger));
     border-color: rgba(239, 68, 68, 0.5);
   }
 
-  .marker-bubble.risk-high::after { border-top-color: #ef4444; }
+  .marker-bubble.risk-high::after {
+    border-top-color: var(--color-signal-danger);
+  }
 
   .marker-bubble.risk-medium {
-    background: linear-gradient(135deg, #d97706, #f59e0b);
+    background: linear-gradient(135deg, #d97706, var(--color-signal-warning));
     border-color: rgba(245, 158, 11, 0.5);
   }
 
-  .marker-bubble.risk-medium::after { border-top-color: #f59e0b; }
+  .marker-bubble.risk-medium::after {
+    border-top-color: var(--color-signal-warning);
+  }
 
   .marker-bubble.risk-low {
     background: linear-gradient(135deg, #059669, #10b981);
     border-color: rgba(16, 185, 129, 0.5);
   }
 
-  .marker-bubble.risk-low::after { border-top-color: #10b981; }
+  .marker-bubble.risk-low::after {
+    border-top-color: #10b981;
+  }
 
   .marker-name {
-    margin-top: 8px;
+    margin-top: var(--space-2);
     font-size: 10px;
     font-weight: 700;
     color: rgba(255, 255, 255, 0.88);
-    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
   }
 
   .city-marker.selected .marker-bubble {
     animation: markerGlow 2s ease-in-out infinite;
   }
 
+  /* ── Scrollbar ── */
   .custom-scrollbar::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
   }
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(51, 65, 85, 0.75);
-    border-radius: 9999px;
+    background: rgba(99, 102, 241, 0.2);
+    border-radius: var(--radius-full);
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(99, 102, 241, 0.35);
   }
 }
 
 @keyframes markerGlow {
-  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
-  50% { box-shadow: 0 10px 26px rgba(34,211,238,0.35); }
+  0%,
+  100% {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+  }
+  50% {
+    box-shadow: 0 10px 26px rgba(0, 229, 255, 0.3);
+  }
 }
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index ba441495..b3c20006 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -12,7 +12,9 @@ export const metadata: Metadata = {
       { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
       { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
     ],
-    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
+    apple: [
+      { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
+    ],
     shortcut: ["/favicon.ico"],
   },
 };
@@ -24,9 +26,13 @@ export default function RootLayout({
     <html lang="zh-CN" className="dark">
       <head>
         <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=Inter:wght@300;400;500;600;700;800&display=swap"
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin=""
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
           rel="stylesheet"
         />
       </head>
diff --git a/frontend/components/dashboard/CitySidebar.tsx b/frontend/components/dashboard/CitySidebar.tsx
index 2b942bfa..d0f61993 100644
--- a/frontend/components/dashboard/CitySidebar.tsx
+++ b/frontend/components/dashboard/CitySidebar.tsx
@@ -2,6 +2,7 @@
 
 import { startTransition, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
+import { Clock } from "lucide-react";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
 import { CityListItem, DeviationMonitor } from "@/lib/dashboard-types";
@@ -71,8 +72,7 @@ export function CitySidebar() {
         const aSamples = Number(a.deb_recent_sample_count ?? 0);
         const bSamples = Number(b.deb_recent_sample_count ?? 0);
         return (
-          (riskOrder[aGroup] ?? 3) -
-            (riskOrder[bGroup] ?? 3) ||
+          (riskOrder[aGroup] ?? 3) - (riskOrder[bGroup] ?? 3) ||
           bHitRate - aHitRate ||
           bSamples - aSamples ||
           a.display_name.localeCompare(b.display_name)
@@ -126,8 +126,7 @@ export function CitySidebar() {
 
   const formatDeviationText = (monitor?: DeviationMonitor | null) => {
     if (!monitor?.available) return "";
-    const label =
-      locale === "en-US" ? monitor.label_en : monitor.label_zh;
+    const label = locale === "en-US" ? monitor.label_en : monitor.label_zh;
     const trendLabel =
       locale === "en-US" ? monitor.trend_label_en : monitor.trend_label_zh;
     if (!label) return "";
@@ -170,10 +169,20 @@ export function CitySidebar() {
                   }))
                 }
               >
-                <span className="city-group-title">{group.label}</span>
+                <span className="city-group-title">
+                  <span
+                    className={clsx("city-group-indicator", group.key)}
+                    aria-hidden="true"
+                  />
+                  {group.label}
+                </span>
                 <span className="city-group-meta">
-                  <span className="city-group-count">{citiesInGroup.length}</span>
-                  <span className={clsx("city-group-arrow", expanded && "expanded")}>
+                  <span className="city-group-count">
+                    {citiesInGroup.length}
+                  </span>
+                  <span
+                    className={clsx("city-group-arrow", expanded && "expanded")}
+                  >
                     ▾
                   </span>
                 </span>
@@ -203,7 +212,9 @@ export function CitySidebar() {
                           time: detail.current.max_temp_time,
                         })
                       : detail?.current?.max_temp_time
-                        ? t("sidebar.peakAt", { time: detail.current.max_temp_time })
+                        ? t("sidebar.peakAt", {
+                            time: detail.current.max_temp_time,
+                          })
                         : "";
                   const deviationDirection =
                     snapshot?.deviation_monitor?.direction || "normal";
@@ -225,7 +236,9 @@ export function CitySidebar() {
                     >
                       <div className="city-item-main">
                         <span className={clsx("risk-dot", performanceTier)} />
-                        <span className="city-name-text">{city.display_name}</span>
+                        <span className="city-name-text">
+                          {city.display_name}
+                        </span>
                         <span
                           className={clsx(
                             "city-temp",
@@ -238,7 +251,18 @@ export function CitySidebar() {
 
                       <div className="city-item-info">
                         <span className="city-local-time">
-                          {snapshot?.local_time ? `🕒 ${snapshot.local_time}` : ""}
+                          {snapshot?.local_time ? (
+                            <>
+                              <Clock
+                                size={10}
+                                strokeWidth={2}
+                                className="city-clock-icon"
+                              />
+                              {snapshot.local_time}
+                            </>
+                          ) : (
+                            ""
+                          )}
                         </span>
                         <span
                           className={clsx(
diff --git a/frontend/components/dashboard/Dashboard.module.css b/frontend/components/dashboard/Dashboard.module.css
index 6f7db601..bc2140d9 100644
--- a/frontend/components/dashboard/Dashboard.module.css
+++ b/frontend/components/dashboard/Dashboard.module.css
@@ -3,44 +3,44 @@
    ────────────────────────────────────────────────────────── */
 
 .root {
-  /* Core palette */
-  --bg-primary: #0a0e1a;
-  --bg-secondary: #111827;
-  --bg-card: rgba(17, 24, 39, 0.85);
-  --bg-glass: rgba(15, 23, 42, 0.75);
-  --border-glass: rgba(99, 102, 241, 0.15);
-  --border-subtle: rgba(255, 255, 255, 0.06);
+  /* ── Palette (bridged from globals.css unified tokens) ── */
+  --bg-primary: var(--color-bg-base);
+  --bg-secondary: var(--color-bg-raised);
+  --bg-card: var(--color-bg-card);
+  --bg-glass: rgba(13, 19, 33, 0.75);
+  --border-glass: var(--color-border-default);
+  --border-subtle: var(--color-border-subtle);
 
   /* Text */
-  --text-primary: #f1f5f9;
-  --text-secondary: #94a3b8;
-  --text-muted: #64748b;
+  --text-primary: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --text-muted: var(--color-text-muted);
 
-  /* Accents */
-  --accent-cyan: #22d3ee;
-  --accent-blue: #6366f1;
+  /* Accents — upgraded primary cyan to match new token */
+  --accent-cyan: var(--color-accent-primary);
+  --accent-blue: var(--color-accent-secondary);
   --accent-green: #34d399;
   --accent-orange: #fb923c;
   --accent-red: #f87171;
   --accent-yellow: #fbbf24;
-  --accent-purple: #a78bfa;
+  --accent-purple: var(--color-accent-tertiary);
 
   /* Risk colors */
-  --risk-high: #ef4444;
-  --risk-medium: #f59e0b;
-  --risk-low: #22c55e;
+  --risk-high: var(--color-risk-high);
+  --risk-medium: var(--color-risk-medium);
+  --risk-low: var(--color-risk-low);
 
-  /* Spacing */
+  /* Spacing — aligned with global layout tokens */
   --panel-width: 560px;
-  --header-height: 56px;
+  --header-height: 52px;
   --sidebar-width: 260px;
 
-  /* Effects */
+  /* Effects — using global elevation tokens */
   --glass-blur: 20px;
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
-  --shadow-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.3);
-  --shadow-glow-blue: 0 0 20px rgba(99, 102, 241, 0.3);
-  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --shadow-lg: var(--shadow-elevation-3);
+  --shadow-glow-cyan: var(--shadow-glow-accent);
+  --shadow-glow-blue: var(--shadow-glow-secondary);
+  --transition: all var(--transition-base);
 }
 
 /* ── Reset & Base ── */
@@ -174,44 +174,46 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
+  padding: 0 20px;
   background: linear-gradient(
     180deg,
-    rgba(10, 14, 26, 0.95) 0%,
-    rgba(10, 14, 26, 0.7) 100%
+    rgba(8, 12, 20, 0.96) 0%,
+    rgba(8, 12, 20, 0.82) 100%
   );
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border-glass);
 }
 
 .root :global(.brand) {
   display: flex;
   align-items: baseline;
-  gap: 12px;
+  gap: 10px;
 }
 
 .root :global(.brand h1) {
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .root :global(.subtitle) {
-  font-size: 12px;
-  font-weight: 400;
+  font-size: 11px;
+  font-weight: 500;
   color: var(--text-muted);
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
   text-transform: uppercase;
+  opacity: 0.8;
 }
 
 .root :global(.header-right) {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
 .root :global(.lang-switch) {
@@ -244,27 +246,28 @@
 
 .root :global(.lang-btn.active) {
   color: var(--text-primary);
-  background: rgba(34, 211, 238, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.26);
+  background: rgba(0, 229, 255, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.2);
 }
 
 .root :global(.live-badge) {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 20px;
-  background: rgba(34, 197, 94, 0.1);
-  border: 1px solid rgba(34, 197, 94, 0.3);
-  font-size: 11px;
-  font-weight: 600;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  background: rgba(34, 197, 94, 0.08);
+  border: 1px solid rgba(34, 197, 94, 0.22);
+  font-size: 10px;
+  font-weight: 700;
   color: var(--accent-green);
-  letter-spacing: 1px;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
 }
 
 .root :global(.pulse-dot) {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   background: var(--accent-green);
   animation: pulse 2s ease-in-out infinite;
@@ -283,23 +286,22 @@
 }
 
 .root :global(.refresh-btn) {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   border-radius: 8px;
   border: 1px solid var(--border-glass);
-  background: var(--bg-glass);
+  background: rgba(13, 19, 33, 0.6);
   color: var(--text-secondary);
-  font-size: 18px;
   cursor: pointer;
-  transition: var(--transition);
+  transition: all 150ms ease;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .root :global(.refresh-btn:hover) {
-  background: rgba(99, 102, 241, 0.15);
-  border-color: var(--accent-blue);
-  color: var(--text-primary);
+  background: rgba(0, 229, 255, 0.1);
+  border-color: rgba(0, 229, 255, 0.3);
+  color: var(--accent-cyan);
 }
 .root :global(.refresh-btn.spinning) {
   animation: spin 1s linear infinite;
@@ -335,20 +337,23 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 18px;
+  padding: 14px 16px;
   border-bottom: 1px solid var(--border-subtle);
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 700;
   color: var(--text-primary);
+  letter-spacing: -0.01em;
 }
 
 .root :global(.city-count) {
-  background: var(--accent-blue);
-  color: white;
-  font-size: 12px;
+  background: rgba(99, 102, 241, 0.2);
+  color: var(--accent-blue);
+  font-size: 11px;
   font-weight: 700;
-  padding: 3px 10px;
-  border-radius: 12px;
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  border: 1px solid rgba(99, 102, 241, 0.15);
 }
 
 .root :global(.city-list-items) {
@@ -382,20 +387,52 @@
 .root :global(.city-group-header) {
   width: 100%;
   border: none;
-  background: rgba(99, 102, 241, 0.08);
+  background: rgba(99, 102, 241, 0.06);
   color: var(--text-secondary);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 10px;
+  padding: 7px 10px;
   cursor: pointer;
   font-family: inherit;
+  transition: background 150ms ease;
+}
+
+.root :global(.city-group-header:hover) {
+  background: rgba(99, 102, 241, 0.1);
 }
 
 .root :global(.city-group-title) {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+}
+
+.root :global(.city-group-indicator) {
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+.root :global(.city-group-indicator.high) {
+  background: var(--risk-high);
+  box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
+}
+.root :global(.city-group-indicator.medium) {
+  background: var(--risk-medium);
+  box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
+}
+.root :global(.city-group-indicator.low) {
+  background: var(--risk-low);
+  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
+}
+.root :global(.city-group-indicator.other) {
+  background: var(--text-muted);
+  opacity: 0.5;
 }
 
 .root :global(.city-group-meta) {
@@ -457,8 +494,9 @@
   border-color: var(--border-glass);
 }
 .root :global(.city-item.active) {
-  background: rgba(99, 102, 241, 0.15);
-  border-color: var(--accent-blue);
+  background: rgba(0, 229, 255, 0.08);
+  border-color: rgba(0, 229, 255, 0.3);
+  box-shadow: 0 0 16px rgba(0, 229, 255, 0.06), inset 0 0 0 1px rgba(0, 229, 255, 0.08);
 }
 
 .root :global(.city-item-main) {
@@ -531,13 +569,21 @@
   box-shadow: 0 0 6px var(--risk-low);
 }
 
+.root :global(.city-clock-icon) {
+  display: inline-block;
+  vertical-align: -1px;
+  margin-right: 3px;
+  opacity: 0.6;
+}
+
 .root :global(.city-item .city-temp) {
   margin-left: auto;
   font-size: 13px;
   font-weight: 700;
+  font-variant-numeric: tabular-nums;
   color: var(--accent-cyan);
   opacity: 0;
-  transition: var(--transition);
+  transition: opacity 200ms ease;
 }
 .root :global(.city-item .city-temp.loaded) {
   opacity: 1;
@@ -1319,13 +1365,12 @@
   position: fixed;
   inset: 0;
   z-index: 2000;
-  background:
-    radial-gradient(
-      circle at 50% 50%,
-      rgba(8, 14, 32, 0.76) 0%,
-      rgba(4, 8, 22, 0.9) 44%,
-      rgba(2, 6, 20, 0.96) 100%
-    );
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(8, 14, 32, 0.76) 0%,
+    rgba(4, 8, 22, 0.9) 44%,
+    rgba(2, 6, 20, 0.96) 100%
+  );
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1340,12 +1385,11 @@
   min-width: 240px;
   padding: 28px 32px;
   border-radius: 28px;
-  background:
-    linear-gradient(
-      180deg,
-      rgba(10, 18, 36, 0.78) 0%,
-      rgba(8, 14, 30, 0.62) 100%
-    );
+  background: linear-gradient(
+    180deg,
+    rgba(10, 18, 36, 0.78) 0%,
+    rgba(8, 14, 30, 0.62) 100%
+  );
   border: 1px solid rgba(92, 142, 255, 0.16);
   box-shadow:
     0 24px 90px rgba(0, 0, 0, 0.42),
@@ -1365,7 +1409,11 @@
   height: 18px;
   border-radius: 999px;
   background:
-    radial-gradient(circle at 30% 50%, rgba(186, 230, 253, 0.22), transparent 54%),
+    radial-gradient(
+      circle at 30% 50%,
+      rgba(186, 230, 253, 0.22),
+      transparent 54%
+    ),
     linear-gradient(
       180deg,
       rgba(148, 163, 184, 0.28) 0%,
@@ -1463,14 +1511,13 @@
   width: 108px;
   height: 108px;
   border-radius: 50%;
-  background:
-    radial-gradient(
-      circle,
-      rgba(22, 78, 99, 0.16) 0%,
-      rgba(7, 18, 36, 0.08) 48%,
-      rgba(5, 10, 22, 0.02) 76%,
-      transparent 100%
-    );
+  background: radial-gradient(
+    circle,
+    rgba(22, 78, 99, 0.16) 0%,
+    rgba(7, 18, 36, 0.08) 48%,
+    rgba(5, 10, 22, 0.02) 76%,
+    transparent 100%
+  );
   box-shadow:
     inset 0 0 0 1px rgba(56, 189, 248, 0.12),
     0 0 40px rgba(34, 211, 238, 0.08);
@@ -2281,7 +2328,8 @@
   scrollbar-width: none;
 }
 
-.root :global(.modal-content.large.future-modal .modal-body::-webkit-scrollbar) {
+.root
+  :global(.modal-content.large.future-modal .modal-body::-webkit-scrollbar) {
   width: 0;
   height: 0;
 }
@@ -2390,12 +2438,11 @@
   padding: 24px 26px;
   border-radius: 24px;
   border: 1px solid rgba(96, 165, 250, 0.16);
-  background:
-    linear-gradient(
-      180deg,
-      rgba(10, 18, 36, 0.72) 0%,
-      rgba(8, 14, 30, 0.5) 100%
-    );
+  background: linear-gradient(
+    180deg,
+    rgba(10, 18, 36, 0.72) 0%,
+    rgba(8, 14, 30, 0.5) 100%
+  );
   box-shadow:
     0 18px 48px rgba(0, 0, 0, 0.28),
     inset 0 1px 0 rgba(255, 255, 255, 0.03);
@@ -2406,7 +2453,12 @@
   width: 84px;
   height: 84px;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.02) 62%, transparent 100%);
+  background: radial-gradient(
+    circle,
+    rgba(14, 165, 233, 0.08) 0%,
+    rgba(14, 165, 233, 0.02) 62%,
+    transparent 100%
+  );
 }
 
 .root :global(.history-modal .history-fetch-ring) {
@@ -2604,16 +2656,23 @@
   scrollbar-color: rgba(96, 165, 250, 0.5) rgba(15, 23, 42, 0.32);
 }
 
-.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar) {
+.root
+  :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar) {
   width: 8px;
 }
 
-.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-track) {
+.root
+  :global(
+    .history-modal .history-peak-reference-scroll::-webkit-scrollbar-track
+  ) {
   background: rgba(15, 23, 42, 0.32);
   border-radius: 999px;
 }
 
-.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-thumb) {
+.root
+  :global(
+    .history-modal .history-peak-reference-scroll::-webkit-scrollbar-thumb
+  ) {
   background: linear-gradient(
     180deg,
     rgba(56, 189, 248, 0.72) 0%,
@@ -2962,21 +3021,19 @@
 }
 
 .root :global(.future-v2-focus-card) {
-  background:
-    linear-gradient(
-      180deg,
-      rgba(34, 211, 238, 0.08) 0%,
-      rgba(255, 255, 255, 0.02) 100%
-    );
+  background: linear-gradient(
+    180deg,
+    rgba(34, 211, 238, 0.08) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
 }
 
 .root :global(.future-v2-support-card) {
-  background:
-    linear-gradient(
-      180deg,
-      rgba(148, 163, 184, 0.08) 0%,
-      rgba(255, 255, 255, 0.02) 100%
-    );
+  background: linear-gradient(
+    180deg,
+    rgba(148, 163, 184, 0.08) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
 }
 
 .root :global(.future-v2-hero-card) {
@@ -3075,15 +3132,14 @@
   position: relative;
   height: 12px;
   border-radius: 999px;
-  background:
-    linear-gradient(
-      90deg,
-      rgba(15, 23, 42, 0.85) 0%,
-      rgba(56, 189, 248, 0.18) 15%,
-      rgba(250, 204, 21, 0.24) 50%,
-      rgba(56, 189, 248, 0.16) 85%,
-      rgba(15, 23, 42, 0.85) 100%
-    );
+  background: linear-gradient(
+    90deg,
+    rgba(15, 23, 42, 0.85) 0%,
+    rgba(56, 189, 248, 0.18) 15%,
+    rgba(250, 204, 21, 0.24) 50%,
+    rgba(56, 189, 248, 0.16) 85%,
+    rgba(15, 23, 42, 0.85) 100%
+  );
   overflow: hidden;
 }
 
@@ -3309,14 +3365,13 @@
   margin-top: 12px;
   border-radius: 999px;
   overflow: hidden;
-  background:
-    linear-gradient(
-      90deg,
-      rgba(34, 211, 238, 0.12) 0%,
-      rgba(255, 255, 255, 0.06) 46%,
-      rgba(255, 255, 255, 0.06) 54%,
-      rgba(251, 191, 36, 0.12) 100%
-    );
+  background: linear-gradient(
+    90deg,
+    rgba(34, 211, 238, 0.12) 0%,
+    rgba(255, 255, 255, 0.06) 46%,
+    rgba(255, 255, 255, 0.06) 54%,
+    rgba(251, 191, 36, 0.12) 100%
+  );
 }
 
 .root :global(.future-v2-pace-meter-midline) {
@@ -3356,13 +3411,12 @@
   margin-bottom: 10px;
   border-radius: 14px;
   border: 1px solid rgba(99, 102, 241, 0.14);
-  background:
-    radial-gradient(
-      circle at 50% 18%,
-      rgba(34, 211, 238, 0.14) 0%,
-      rgba(255, 255, 255, 0.02) 48%,
-      rgba(255, 255, 255, 0.015) 100%
-    );
+  background: radial-gradient(
+    circle at 50% 18%,
+    rgba(34, 211, 238, 0.14) 0%,
+    rgba(255, 255, 255, 0.02) 48%,
+    rgba(255, 255, 255, 0.015) 100%
+  );
   overflow: hidden;
 }
 
@@ -3717,14 +3771,13 @@
 }
 
 .root :global(.future-trend-meter.center) {
-  background:
-    linear-gradient(
-      90deg,
-      rgba(56, 189, 248, 0.1) 0%,
-      rgba(255, 255, 255, 0.05) 48%,
-      rgba(255, 255, 255, 0.05) 52%,
-      rgba(245, 158, 11, 0.1) 100%
-    );
+  background: linear-gradient(
+    90deg,
+    rgba(56, 189, 248, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 48%,
+    rgba(255, 255, 255, 0.05) 52%,
+    rgba(245, 158, 11, 0.1) 100%
+  );
 }
 
 .root :global(.future-trend-meter-midline) {
diff --git a/frontend/components/dashboard/HeaderBar.tsx b/frontend/components/dashboard/HeaderBar.tsx
index 6c9a9d27..9e3e92d3 100644
--- a/frontend/components/dashboard/HeaderBar.tsx
+++ b/frontend/components/dashboard/HeaderBar.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
-import { LogIn, UserRound } from "lucide-react";
+import { LogIn, UserRound, RotateCw, BookOpen, Sparkles } from "lucide-react";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
 
@@ -29,12 +29,16 @@ export function HeaderBar() {
   const docsHref = "/docs/intro";
   const docsActive = pathname?.startsWith("/docs");
   const trialPromoLabel =
-    locale === "en-US" ? "New users get 3-day Pro trial" : "新用户可免费体验 3 天 Pro";
+    locale === "en-US"
+      ? "New users get 3-day Pro trial"
+      : "新用户可免费体验 3 天 Pro";
 
   const accountHref = isAuthenticated
     ? "/account"
     : "/auth/login?next=%2Faccount";
-  const accountLabel = isAuthenticated ? t("header.account") : t("header.signIn");
+  const accountLabel = isAuthenticated
+    ? t("header.account")
+    : t("header.signIn");
   const accountAria = isAuthenticated
     ? t("header.accountAria")
     : t("header.signInAria");
@@ -49,12 +53,10 @@ export function HeaderBar() {
   const showRenewReminder =
     isAuthenticated &&
     !store.proAccess.loading &&
-    (
-      (store.proAccess.subscriptionActive &&
-        expiryInfo &&
-        expiryInfo.daysLeft <= 3) ||
-      (!store.proAccess.subscriptionActive && Boolean(expiryInfo))
-    );
+    ((store.proAccess.subscriptionActive &&
+      expiryInfo &&
+      expiryInfo.daysLeft <= 3) ||
+      (!store.proAccess.subscriptionActive && Boolean(expiryInfo)));
   const renewReminderLabel = !showRenewReminder
     ? ""
     : !store.proAccess.subscriptionActive
@@ -81,7 +83,11 @@ export function HeaderBar() {
       </div>
 
       <div className="header-right">
-        <div className="lang-switch" role="group" aria-label={t("header.langAria")}>
+        <div
+          className="lang-switch"
+          role="group"
+          aria-label={t("header.langAria")}
+        >
           <button
             type="button"
             className={clsx("lang-btn", locale === "zh-CN" && "active")}
@@ -104,6 +110,7 @@ export function HeaderBar() {
           title={t("header.docsAria")}
           aria-label={t("header.docsAria")}
         >
+          <BookOpen size={14} strokeWidth={2} />
           {t("header.docs")}
         </Link>
 
@@ -113,6 +120,7 @@ export function HeaderBar() {
           title={trialPromoLabel}
           aria-label={trialPromoLabel}
         >
+          <Sparkles size={12} strokeWidth={2} />
           <span>{trialPromoLabel}</span>
         </Link>
 
@@ -147,12 +155,15 @@ export function HeaderBar() {
 
         <button
           type="button"
-          className={clsx("refresh-btn", store.loadingState.refresh && "spinning")}
+          className={clsx(
+            "refresh-btn",
+            store.loadingState.refresh && "spinning",
+          )}
           title={t("header.refreshAria")}
           aria-label={t("header.refreshAria")}
           onClick={() => void store.refreshAll()}
         >
-          ↻
+          <RotateCw size={16} strokeWidth={2} />
         </button>
       </div>
     </header>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 3a63a12e..a3b450c9 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -10,6 +10,7 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
+        /* Legacy shadcn/ui HSL tokens */
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         card: "hsl(var(--card))",
@@ -21,9 +22,60 @@ const config: Config = {
         accent: "hsl(var(--accent))",
         "accent-foreground": "hsl(var(--accent-foreground))",
         border: "hsl(var(--border))",
+
+        /* PolyWeather Design Tokens — direct CSS var refs */
+        "pw-bg": {
+          base: "var(--color-bg-base)",
+          raised: "var(--color-bg-raised)",
+          overlay: "var(--color-bg-overlay)",
+          card: "var(--color-bg-card)",
+          input: "var(--color-bg-input)",
+        },
+        "pw-text": {
+          primary: "var(--color-text-primary)",
+          secondary: "var(--color-text-secondary)",
+          muted: "var(--color-text-muted)",
+          disabled: "var(--color-text-disabled)",
+        },
+        "pw-accent": {
+          primary: "var(--color-accent-primary)",
+          secondary: "var(--color-accent-secondary)",
+          tertiary: "var(--color-accent-tertiary)",
+        },
+        "pw-signal": {
+          success: "var(--color-signal-success)",
+          warning: "var(--color-signal-warning)",
+          danger: "var(--color-signal-danger)",
+          info: "var(--color-signal-info)",
+        },
+      },
+      fontFamily: {
+        data: ["var(--font-data)"],
+        display: ["var(--font-display)"],
+        mono: ["var(--font-mono)"],
+      },
+      spacing: {
+        "pw-1": "var(--space-1)",
+        "pw-2": "var(--space-2)",
+        "pw-3": "var(--space-3)",
+        "pw-4": "var(--space-4)",
+        "pw-5": "var(--space-5)",
+        "pw-6": "var(--space-6)",
+        "pw-8": "var(--space-8)",
+      },
+      borderRadius: {
+        "pw-sm": "var(--radius-sm)",
+        "pw-md": "var(--radius-md)",
+        "pw-lg": "var(--radius-lg)",
+        "pw-xl": "var(--radius-xl)",
       },
       boxShadow: {
-        glow: "0 0 0 1px rgba(34, 211, 238, 0.2), 0 8px 32px rgba(8, 47, 73, 0.5)",
+        glow: "0 0 0 1px rgba(0, 229, 255, 0.15), 0 8px 32px rgba(8, 47, 73, 0.5)",
+        "glow-accent": "var(--shadow-glow-accent)",
+        "glow-secondary": "var(--shadow-glow-secondary)",
+        "elevation-1": "var(--shadow-elevation-1)",
+        "elevation-2": "var(--shadow-elevation-2)",
+        "elevation-3": "var(--shadow-elevation-3)",
       },
     },
   },