style(website): align site theme colour with the logo brand blue

[pomelo-nwu]

Background

#321 swapped the docs site's logo, favicons, OG cards and PWA theme_color to the current brand mark (QwenLM/qwen-code#14052), and explicitly left one thing out:

Out of scope intentionally: the violet Tailwind accent colors across site components are the design system, not the logo.

So today the site ships a blue logo inside a purple UI. The brand mark is #082DFF, but every accent in the components — buttons, links, hover/focus states, hero glows, gradient text, the Nextra docs hue — is still the old violet (#7C3AED / #8B5CF6), and app/layout.tsx still drives Nextra with hue: 248.

This PR is that deferred second half: it makes the site's theme colour follow the logo.

Changes

1. A brand colour ramp in @theme (globals.css)

#082DFF is not a Tailwind colour, so blue-600 (#2563EB) would have been a visibly different blue. Instead the ramp is anchored so that brand-600 is exactly #082DFF, derived from Tailwind's own violet lightness/chroma curve, re-hued to the brand hue (oklch(… … 264.64)) and gamut-clipped:

50 #EFF4FF · 100 #E1EBFF · 200 #C6D8FF · 300 #98B9FF · 400 #5F8FFF · 500 #265DFF
600 #082DFF · 700 #060EE9 · 800 #0405C1 · 900 #03079C · 950 #010061

Because it reuses violet's curve, the existing 500/600/700 accent weights map 1:1 and the light tints stay light — this is a re-hue, not a re-design.

2. Repointed the theme accent (83 usages, 16 files)

violet-* / purple-* → brand-* across the landing page and docs chrome (hero, CTA, features, comparison table, blog feed, showcase + video cards, mobile menu, theme toggle), plus the hero's inline hsl(262 75% 50% / 0.15) radial glow → hsl(231 100% 52% / 0.15).

Hardcoded purples in globals.css follow: .gradient-text, .gradient-border, .hero-glow, .terminal-glow, .hero-gradient, .btn-primary-gradient, .feature-badge-qwen, .scanlines.

3. Nextra docs accent + tile colour

Head color hue 248 / saturation 74 → hue 231 / saturation 100 — the HSL of #082DFF itself. msapplication-TileColor #fff → #082DFF.

What is deliberately not changed

Where the hue encodes which item it is rather than the brand, the multi-hue set is kept — flattening these would cost real information:

Location	Set
features-section.tsx	4 card accents (violet / blue / green / purple)
usage-examples.tsx	3 scenario colours (blue / violet / green)
showcase-videos-data.ts	4 difficulty levels (amber / emerald / blue / violet)
integration-section.tsx	3 tab accents (violet / blue / emerald)
showcase-detail.tsx, video-showcase-index.tsx	role/model and category/model pill pairs

11 such lines remain on violet/purple. Docs body text under content/ is untouched — its 37 purple/violet hits are product theme names (Shades Of Purple, AccentPurple), colour enumerations and translated prose, not site styling.

Verification

• Every brand-* utility actually compiles. This is the failure mode that matters: a token typo in @theme makes Tailwind silently emit no rule, so the accent would quietly fall back to inherited colour rather than error. Compiled globals.css through @tailwindcss/postcss and diffed against the class list in src/ + app/: 58 used, 63 selectors emitted, 0 missing — including variant forms (dark:hover:text-brand-400, data-[state=active]:bg-brand-600, selection:bg-brand-500/30, focus-visible:ring-brand-500).
• Anchor is exact: brand-600 round-trips to #082DFF; the ramp is monotonically darkening and monotonically rising in chroma toward 600.
• Contrast: #082DFF on white is 7.42:1 (AA for normal text, AAA for large), so white-on-brand buttons and links pass.
• tsc --noEmit clean; npm test 4/4 pass.
• No purple left in the theme layer: zero #8b5cf6 / #7c3aed / #6d28d9 / #a78bfa / #615ced / hsl(262…) in app/, src/, public/, scripts/ outside the 11 categorical lines above.

Risk & Scope

• Main risk is taste-level, not functional: #082DFF is more saturated than #7C3AED, so large soft glows read slightly stronger. They are all used at 5–15% alpha, which is why the curve was kept identical and only the hue moved.
• brand-50–brand-200 are noticeably bluer than the old violet-50–200 (which were near-white lilac). If you'd rather keep the palest tints neutral I can desaturate those three steps.
• Nothing builds this branch in CI. tests.yml runs unit tests only, and the static export lives in deploy-docs.yml, which triggers on push to main — so the export first runs after merge, not here. The checks above are CSS-compile, type and unit level.
• For what it's worth, a local npm run build died with V8 JavaScript heap out of memory (exit 134, ~4 GB heap after 954 s) on this 16 GB machine while compiling 1541 pages × 8 locales. It aborted inside "Creating an optimized production build" with no compile error before it, and the diff is CSS tokens plus class renames — so this reads as a machine limit rather than the change, but I have not proven that either way. A rerun with --max-old-space-size=8192 was still compiling when this was posted.

中文说明

背景

#321 已经把 favicon、OG 卡片和 PWA theme_color 换成了新品牌标（#082DFF），但当时明确写了一句「violet 强调色属于设计系统，不在本次范围内」。结果是现在站点顶着蓝色 logo、穿着紫色 UI：按钮、链接、hover、光晕、渐变文字、Nextra 色相全都还是旧的 #7C3AED/#8B5CF6，app/layout.tsx 仍是 hue: 248。这个 PR 就是补上被推迟的后一半。

改动

1. 新建 brand 色阶（@theme）。#082DFF 不是 Tailwind 内置色，直接套 blue-600 会得到明显偏色的蓝。这里让 brand-600 精确等于 #082DFF，曲线沿用 Tailwind violet 的明度/彩度、只换色相并做 gamut 钳制，所以原有 500/600/700 的权重 1:1 平移，浅色档也不会变暗——是换色相，不是重设计。
2. 83 处强调色改指 brand-*（16 文件），含 hero 里用任意值语法写的 hsl(262…) 光晕；globals.css 里硬编码的紫色（渐变文字/描边、光晕、终端辉光、主按钮、Qwen 徽章、扫描线）一并跟上。
3. Nextra 主色相 hue 248/sat 74 → hue 231/sat 100（即 #082DFF 的 HSL）；msapplication-TileColor #fff → #082DFF。

刻意不动的地方

凡是颜色用来区分条目本身、而不是表达品牌的多色组合，全部保留原样，压平会丢失信息：features 四张卡片、usage 三个场景、视频四档难度、integration 三个 Tab、role/model 与 category/model 成对药丸标签——共 11 行仍是 violet/purple。content/ 正文一行没改，那 37 处命中是产品主题名（Shades Of Purple、AccentPurple）、颜色枚举和翻译正文，与站点主题无关。

验证

• 每个 brand-* 类都真的编译出来了。这是本次唯一会静默失败的点：@theme 里 token 写错，Tailwind 不会报错，只是不生成规则，强调色会悄悄回退。用 @tailwindcss/postcss 编译后与 src/+app/ 的类名清单比对：用到 58 个、生成 63 个选择器、缺失 0，含 dark:hover:、data-[state=active]:、selection:、focus-visible: 等变体。
• 锚点精确：brand-600 回推等于 #082DFF；色阶明度单调递减、向 600 彩度单调递增。
• 对比度：#082DFF 对白 7.42:1，白字按钮与链接达 AA（大字 AAA）。
• tsc --noEmit 无错；npm test 4/4 通过。
• 主题层无紫色残留：除上述 11 行分类色外，app/、src/、public/、scripts/ 中已无 #8b5cf6 / #7c3aed / #6d28d9 / #a78bfa / #615ced / hsl(262…)。

风险

• 风险偏审美而非功能：#082DFF 比 #7C3AED 更饱和，大面积柔光会略强；它们都只以 5–15% alpha 使用，且曲线完全沿用，只动了色相。
• brand-50–200 会比原来的近白淡紫更蓝一点，如果你希望最浅三档保持中性，我可以单独降饱和。
• CI 不会构建这个分支。 tests.yml 只跑单测，静态导出在 deploy-docs.yml 里、只在 push 到 main 时触发——所以导出是合并后才第一次跑，不是这里。上面是 CSS 编译、类型与单测层面的验证。
• 补充一个情况：本地 npm run build 在这台 16GB 机器上以 V8 JavaScript heap out of memory 挂掉（exit 134，954 秒时堆约 4GB），编译 1541 页 × 8 语言。它死在 "Creating an optimized production build" 阶段、之前没有任何编译错误，而本次改动只是 CSS token 和类名替换——所以看起来是机器限制而非改动引起，但这一点我没能证实。用 --max-old-space-size=8192 重跑时发这条还在编译中。

[yiliang114]

Approved at head 934057afbe.

The sweep is complete and the layering is right: the Nextra driver moves from hue: 248 (violet) to hue: 231 at full saturation, msapplication-TileColor follows the brand mark, and every component accent — gradient text, gradient borders, hero glows, terminal glow, primary buttons — is re-anchored on the #082DFF family. A grep over the added lines finds zero occurrences of the old violet hexes (#7C3AED, #8B5CF6, #a78bfa, #6d28d9), so no component is left straddling two palettes.

This correctly closes the deferred half #321 scoped out: logo was already brand blue; now the design system follows it.

中文

在 head 934057afbe 上 approve。清扫完整且分层正确：Nextra 驱动从 hue 248（紫）转到 231 满饱和，msapplication-TileColor 跟随品牌色，所有组件 accent（渐变文字/边框、hero 光晕、终端 glow、主按钮）都重新锚到 #082DFF 家族。对新增行 grep 旧紫色 hex 零命中，没有组件骑跨两套色板。这正是 #321 明确 defer 的另一半：logo 已是品牌蓝，现在设计系统跟上了。