feat: 品牌改版 v2 — 跟随霓虹数据流 logo

- logo 矢量化：青→蓝→紫渐变 S 数据流（logo.tsx + favicon.svg，web/admin 共用）
- 全站配色跟随 logo：强调色青瓷绿 → 青蓝（浅 #0284C7 / 暗 #38BDF8），中性色转冷蓝，终端窗深岩蓝底
- 紫色克制使用：仅 logo 与 .text-brand-gradient（Hero 标题"AI Agent 工作台"渐变字）
- 导航/页脚/admin 顶栏/登录页挂载 logo 标记
- 终端窗与代码块的提示符、光标、事件标签同步换色

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

admin/public/favicon.svg

@@ -1,5 +1,27 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="32" height="32" rx="7" fill="#10201b"/>
+  <defs>
-  <path d="M9 20.5 15 10l3.2 5.6L21 11l2.5 4.3" fill="none" stroke="#3ecdad" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-  <circle cx="23.5" cy="15.3" r="1.6" fill="#3ecdad"/>
+      <stop offset="0" stop-color="#34E5E0"/>
+      <stop offset="0.5" stop-color="#3B82F6"/>
+      <stop offset="1" stop-color="#A855F7"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="#0B1117"/>
+  <g fill="none" stroke-linecap="round">
+    <path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="9" opacity="0.22"/>
+    <path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="6" opacity="0.45"/>
+    <path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="3.6"/>
+  </g>
+  <g fill="#34E5E0">
+    <circle cx="15" cy="13" r="1.4"/>
+    <circle cx="10" cy="17" r="1"/>
+    <circle cx="14" cy="20" r="0.8"/>
+  </g>
+  <g stroke="#A855F7" stroke-width="0.9" opacity="0.75">
+    <path d="M42 49 L50 46 M42 49 L53 51 M50 46 L53 51" fill="none"/>
+  </g>
+  <g fill="#C084FC">
+    <circle cx="50" cy="46" r="1.5"/>
+    <circle cx="53" cy="51" r="1.2"/>
+  </g>
 </svg>

admin/src/components/admin-layout.tsx

@@ -2,6 +2,7 @@ import { Link, Outlet, useNavigate } from 'react-router-dom'
 import { LogOut, Moon, Sun } from 'lucide-react'
 import { logout } from '@/api/auth'
 import { useTheme } from '@/components/theme-provider'
+import { LogoMark } from '@/components/logo'
 
 export function AdminLayout() {
   const navigate = useNavigate()
@@ -11,7 +12,8 @@ export function AdminLayout() {
     <div className="flex min-h-screen flex-col">
       <header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
         <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
-          <Link to="/" className="font-mono text-[14px] font-semibold">
+          <Link to="/" className="flex items-center gap-2.5 font-mono text-[14px] font-semibold">
+            <LogoMark size={24} />
             sundynix <em className="not-italic text-accent">admin</em>
           </Link>
           <div className="flex items-center gap-3">

admin/src/components/logo.tsx

@@ -0,0 +1,57 @@
+interface LogoMarkProps {
+  size?: number
+  className?: string
+}
+
+/** 品牌 Logo：霓虹数据流 S（青→蓝→紫），深岩底方形 */
+export function LogoMark({ size = 28, className }: LogoMarkProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      className={className}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="logo-g" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#34E5E0" />
+          <stop offset="0.5" stopColor="#3B82F6" />
+          <stop offset="1" stopColor="#A855F7" />
+        </linearGradient>
+      </defs>
+      <rect width="64" height="64" rx="14" fill="#0B1117" />
+      <g fill="none" strokeLinecap="round">
+        <path
+          d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
+          stroke="url(#logo-g)"
+          strokeWidth="9"
+          opacity="0.22"
+        />
+        <path
+          d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
+          stroke="url(#logo-g)"
+          strokeWidth="6"
+          opacity="0.45"
+        />
+        <path
+          d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
+          stroke="url(#logo-g)"
+          strokeWidth="3.6"
+        />
+      </g>
+      <g fill="#34E5E0">
+        <circle cx="15" cy="13" r="1.4" />
+        <circle cx="10" cy="17" r="1" />
+        <circle cx="14" cy="20" r="0.8" />
+      </g>
+      <g stroke="#A855F7" strokeWidth="0.9" opacity="0.75">
+        <path d="M42 49 L50 46 M42 49 L53 51 M50 46 L53 51" fill="none" />
+      </g>
+      <g fill="#C084FC">
+        <circle cx="50" cy="46" r="1.5" />
+        <circle cx="53" cy="51" r="1.2" />
+      </g>
+    </svg>
+  )
+}

admin/src/index.css

@@ -2,39 +2,37 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* ── 设计 token（设计稿 v0.2）────────────────────────────
+/* ── 设计 token（品牌改版 v2：跟随 logo，与 web 保持一致）── */
-   青瓷绿单强调色；中性色整体向青绿偏移；
-   终端窗双主题共用深色。 */
 :root {
-  --ground: #f6f8f7;
+  --ground: #f5f7f9;
   --surface: #ffffff;
-  --ink: #16211d;
+  --ink: #151c24;
-  --ink-2: #55665f;
+  --ink-2: #526069;
-  --ink-3: #8a9891;
+  --ink-3: #8595a0;
-  --hairline: #e1e8e4;
+  --hairline: #e0e7ec;
-  --hairline-strong: #c9d4cf;
+  --hairline-strong: #c6d2da;
-  --accent: #0e7c6b;
+  --accent: #0284c7;
-  --accent-ink: #0a5a4e;
+  --accent-ink: #075985;
-  --accent-soft: #e3f1ec;
+  --accent-soft: #e0f2fe;
-  --code-bg: #edf2f0;
+  --code-bg: #ebf1f5;
-  --term-bg: #10201b;
+  --term-bg: #0e1620;
-  --term-ink: #c7e8de;
+  --term-ink: #c9e4f5;
 }
 
 .dark {
-  --ground: #0d1311;
+  --ground: #0b1117;
-  --surface: #131b18;
+  --surface: #111925;
-  --ink: #e7efeb;
+  --ink: #e6edf3;
-  --ink-2: #93a69f;
+  --ink-2: #93a6b4;
-  --ink-3: #64756e;
+  --ink-3: #62737f;
-  --hairline: #22302b;
+  --hairline: #1f2c38;
-  --hairline-strong: #35453f;
+  --hairline-strong: #32434f;
-  --accent: #3ecdad;
+  --accent: #38bdf8;
-  --accent-ink: #6fdfc6;
+  --accent-ink: #7dd3fc;
-  --accent-soft: #12352d;
+  --accent-soft: #0b3049;
-  --code-bg: #182420;
+  --code-bg: #14202b;
-  --term-bg: #0a1512;
+  --term-bg: #0a121b;
-  --term-ink: #a9d8cb;
+  --term-ink: #bfe3f7;
 }
 
 @theme inline {
@@ -73,18 +71,3 @@ body {
   background: var(--accent-soft);
   color: var(--accent-ink);
 }
-
-/* 终端光标 */
-@keyframes caret-blink {
-  50% {
-    opacity: 0;
-  }
-}
-.caret-blink {
-  animation: caret-blink 1.1s steps(1) infinite;
-}
-@media (prefers-reduced-motion: reduce) {
-  .caret-blink {
-    animation: none;
-  }
-}

admin/src/pages/login.tsx

@@ -2,6 +2,7 @@ import { useState, type FormEvent } from 'react'
 import { Navigate, useNavigate } from 'react-router-dom'
 import { getToken } from '@/api/client'
 import { login } from '@/api/auth'
+import { LogoMark } from '@/components/logo'
 
 export default function LoginPage() {
   const navigate = useNavigate()
@@ -32,7 +33,8 @@ export default function LoginPage() {
         onSubmit={onSubmit}
         className="w-full max-w-[360px] rounded-xl border border-hairline bg-surface p-8"
       >
-        <p className="mb-1 font-mono text-[13px] font-semibold">
+        <p className="mb-1 flex items-center gap-2 font-mono text-[13px] font-semibold">
+          <LogoMark size={22} />
           sundynix <em className="not-italic text-accent">admin</em>
         </p>
         <h1 className="mb-6 text-[20px] font-[650] tracking-[-0.01em]">

web/public/favicon.svg

@@ -1,5 +1,27 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="32" height="32" rx="7" fill="#10201b"/>
+  <defs>
-  <path d="M9 20.5 15 10l3.2 5.6L21 11l2.5 4.3" fill="none" stroke="#3ecdad" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-  <circle cx="23.5" cy="15.3" r="1.6" fill="#3ecdad"/>
+      <stop offset="0" stop-color="#34E5E0"/>
+      <stop offset="0.5" stop-color="#3B82F6"/>
+      <stop offset="1" stop-color="#A855F7"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="#0B1117"/>
+  <g fill="none" stroke-linecap="round">
+    <path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="9" opacity="0.22"/>
+    <path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="6" opacity="0.45"/>
+    <path d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49" stroke="url(#g)" stroke-width="3.6"/>
+  </g>
+  <g fill="#34E5E0">
+    <circle cx="15" cy="13" r="1.4"/>
+    <circle cx="10" cy="17" r="1"/>
+    <circle cx="14" cy="20" r="0.8"/>
+  </g>
+  <g stroke="#A855F7" stroke-width="0.9" opacity="0.75">
+    <path d="M42 49 L50 46 M42 49 L53 51 M50 46 L53 51" fill="none"/>
+  </g>
+  <g fill="#C084FC">
+    <circle cx="50" cy="46" r="1.5"/>
+    <circle cx="53" cy="51" r="1.2"/>
+  </g>
 </svg>

web/src/components/layout/site-footer.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { SITE } from '@/content/site'
+import { LogoMark } from '@/components/logo'
 
 const COLUMNS = [
   {
@@ -25,7 +26,8 @@ export function SiteFooter() {
     <footer className="border-t border-hairline">
       <div className="mx-auto grid max-w-6xl gap-10 px-6 py-12 md:grid-cols-[1.5fr_1fr_1fr] lg:px-10">
         <div>
-          <p className="font-mono text-[15px] font-semibold">
+          <p className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
+            <LogoMark size={30} />
             sundynix <em className="not-italic text-accent">agentix</em>
           </p>
           <p className="mt-2 text-[14px] text-ink-2">{SITE.tagline}</p>

web/src/components/layout/site-header.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Link, NavLink } from 'react-router-dom'
 import { Menu, Moon, Sun, X } from 'lucide-react'
 import { useTheme } from '@/components/theme-provider'
+import { LogoMark } from '@/components/logo'
 import { cn } from '@/lib/utils'
 
 const NAV_ITEMS = [
@@ -63,7 +64,8 @@ export function SiteHeader() {
   return (
     <header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
       <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 lg:px-10">
-        <Link to="/" className="font-mono text-[15px] font-semibold">
+        <Link to="/" className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
+          <LogoMark size={26} />
           sundynix <em className="not-italic text-accent">agentix</em>
         </Link>
 

web/src/components/logo.tsx

@@ -0,0 +1,57 @@
+interface LogoMarkProps {
+  size?: number
+  className?: string
+}
+
+/** 品牌 Logo：霓虹数据流 S（青→蓝→紫），深岩底方形 */
+export function LogoMark({ size = 28, className }: LogoMarkProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      className={className}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="logo-g" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#34E5E0" />
+          <stop offset="0.5" stopColor="#3B82F6" />
+          <stop offset="1" stopColor="#A855F7" />
+        </linearGradient>
+      </defs>
+      <rect width="64" height="64" rx="14" fill="#0B1117" />
+      <g fill="none" strokeLinecap="round">
+        <path
+          d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
+          stroke="url(#logo-g)"
+          strokeWidth="9"
+          opacity="0.22"
+        />
+        <path
+          d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
+          stroke="url(#logo-g)"
+          strokeWidth="6"
+          opacity="0.45"
+        />
+        <path
+          d="M22 15 C41 15 41 31 32 32 C23 33 23 49 42 49"
+          stroke="url(#logo-g)"
+          strokeWidth="3.6"
+        />
+      </g>
+      <g fill="#34E5E0">
+        <circle cx="15" cy="13" r="1.4" />
+        <circle cx="10" cy="17" r="1" />
+        <circle cx="14" cy="20" r="0.8" />
+      </g>
+      <g stroke="#A855F7" strokeWidth="0.9" opacity="0.75">
+        <path d="M42 49 L50 46 M42 49 L53 51 M50 46 L53 51" fill="none" />
+      </g>
+      <g fill="#C084FC">
+        <circle cx="50" cy="46" r="1.5" />
+        <circle cx="53" cy="51" r="1.2" />
+      </g>
+    </svg>
+  )
+}

web/src/components/terminal-demo.tsx

@@ -14,7 +14,7 @@ export function TerminalDemo() {
       </div>
       <div className="overflow-x-auto px-5 pb-6 pt-5 font-mono text-[13.5px] leading-[2.05] text-term-ink">
         <div className="term-line">
-          <span className="font-semibold text-[#3ecdad]">› </span>
+          <span className="font-semibold text-[#22d3ee]">› </span>
           {TERMINAL_DEMO.prompt}
         </div>
         <div className="term-line text-white/35" style={{ animationDelay: '0.35s' }}>
@@ -26,12 +26,12 @@ export function TerminalDemo() {
             className="term-line whitespace-nowrap"
             style={{ animationDelay: `${0.7 + i * 0.45}s` }}
           >
-            <span className={ev.ok ? 'text-[#a6d96a]' : 'text-[#7fb8e8]'}>
+            <span className={ev.ok ? 'text-[#a6d96a]' : 'text-[#60a5fa]'}>
               [{ev.tag}]
             </span>{' '}
             {ev.text}
             {i === TERMINAL_DEMO.events.length - 1 && (
-              <span className="caret-blink ml-1 inline-block h-[15px] w-2 translate-y-0.5 bg-[#3ecdad]" />
+              <span className="caret-blink ml-1 inline-block h-[15px] w-2 translate-y-0.5 bg-[#22d3ee]" />
             )}
           </div>
         ))}

web/src/index.css

@@ -3,39 +3,46 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* ── 设计 token（设计稿 v0.2）────────────────────────────
+/* ── 设计 token（品牌改版 v2：跟随 logo）────────────────
-   青瓷绿单强调色；中性色整体向青绿偏移；
+   霓虹数据流 logo：青 #34E5E0 → 蓝 #3B82F6 → 紫 #A855F7；
-   终端窗双主题共用深色。 */
+   强调色取青蓝段，紫色只在 logo 与品牌渐变里出现；
+   中性色向冷蓝偏移，终端窗为深岩蓝底。 */
 :root {
-  --ground: #f6f8f7;
+  --ground: #f5f7f9;
   --surface: #ffffff;
-  --ink: #16211d;
+  --ink: #151c24;
-  --ink-2: #55665f;
+  --ink-2: #526069;
-  --ink-3: #8a9891;
+  --ink-3: #8595a0;
-  --hairline: #e1e8e4;
+  --hairline: #e0e7ec;
-  --hairline-strong: #c9d4cf;
+  --hairline-strong: #c6d2da;
-  --accent: #0e7c6b;
+  --accent: #0284c7;
-  --accent-ink: #0a5a4e;
+  --accent-ink: #075985;
-  --accent-soft: #e3f1ec;
+  --accent-soft: #e0f2fe;
-  --code-bg: #edf2f0;
+  --code-bg: #ebf1f5;
-  --term-bg: #10201b;
+  --term-bg: #0e1620;
-  --term-ink: #c7e8de;
+  --term-ink: #c9e4f5;
+  --brand-g1: #0891b2;
+  --brand-g2: #2563eb;
+  --brand-g3: #9333ea;
 }
 
 .dark {
-  --ground: #0d1311;
+  --ground: #0b1117;
-  --surface: #131b18;
+  --surface: #111925;
-  --ink: #e7efeb;
+  --ink: #e6edf3;
-  --ink-2: #93a69f;
+  --ink-2: #93a6b4;
-  --ink-3: #64756e;
+  --ink-3: #62737f;
-  --hairline: #22302b;
+  --hairline: #1f2c38;
-  --hairline-strong: #35453f;
+  --hairline-strong: #32434f;
-  --accent: #3ecdad;
+  --accent: #38bdf8;
-  --accent-ink: #6fdfc6;
+  --accent-ink: #7dd3fc;
-  --accent-soft: #12352d;
+  --accent-soft: #0b3049;
-  --code-bg: #182420;
+  --code-bg: #14202b;
-  --term-bg: #0a1512;
+  --term-bg: #0a121b;
-  --term-ink: #a9d8cb;
+  --term-ink: #bfe3f7;
+  --brand-g1: #22d3ee;
+  --brand-g2: #60a5fa;
+  --brand-g3: #c084fc;
 }
 
 @theme inline {
@@ -75,6 +82,19 @@ body {
   color: var(--accent-ink);
 }
 
+/* 品牌渐变文字（logo 同源：青→蓝→紫），克制使用 */
+.text-brand-gradient {
+  background: linear-gradient(
+    92deg,
+    var(--brand-g1),
+    var(--brand-g2) 55%,
+    var(--brand-g3)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 /* 文章排版 — prose 对齐设计 token */
 .prose-site {
   --tw-prose-body: var(--ink-2);

web/src/pages/home/hero.tsx

@@ -18,7 +18,8 @@ export function Hero() {
         <h1 className="mx-auto max-w-[17em] text-balance text-4xl font-[650] leading-[1.18] tracking-[-0.028em] md:text-[52px] lg:text-[58px]">
           事件驱动的
           <br />
-          AI Agent 工作台<span className="text-ink-3">。</span>
+          <span className="text-brand-gradient">AI Agent 工作台</span>
+          <span className="text-ink-3">。</span>
         </h1>
       </Reveal>
 

web/src/pages/home/quickstart.tsx

@@ -23,13 +23,13 @@ export function Quickstart() {
             <code>
               <span className="text-white/35"># 内嵌 NATS，零配置体验</span>
               {'\n'}
-              <span className="text-[#3ecdad]">$</span> git clone
+              <span className="text-[#22d3ee]">$</span> git clone
               https://github.com/sundynix/agentix{'\n'}
-              <span className="text-[#3ecdad]">$</span> make demo{'\n'}
+              <span className="text-[#22d3ee]">$</span> make demo{'\n'}
               {'\n'}
               <span className="text-white/35"># 或一条命令私有化部署</span>
               {'\n'}
-              <span className="text-[#3ecdad]">$</span> docker compose up -d
+              <span className="text-[#22d3ee]">$</span> docker compose up -d
             </code>
           </pre>