Logo × 5 主题联动矩阵

切主题时 Logo 一并切换。规则分三类:暗 teal 主题用 CSS filter 把品牌蓝 PNG 着色为 teal;暗蓝主题用原蓝 PNG;亮色主题用深描边 PNG。文字色与 “X” 强调色全部走主题 token,杜绝白底白字。

// 每格独立渲染对应主题底色 + Logo 变体 + wordmark 配色

LumenXStudio
Full Atelier
atelier-dark · ★默认
暖石墨底。蓝 PNG 经 hue-rotate(−64°)+saturate 着色为 teal,与主色一致。
CSS FILTER → TEAL
LumenXStudio
Warm Bridge
bridge-dark · 暗
暖中性底。原品牌蓝 Logo,无 filter,“X” 取蓝主色。
原蓝 · NATIVE
LumenXStudio
Brand-True
brand-dark · 暗
冷黑底(现有基线)。原品牌蓝 Logo,hot pink 仅做强调,不染 Logo。
原蓝 · NATIVE
LumenXStudio
暖亮 Atelier
atelier-light · 亮
暖陶白底。同形 Logo 重着色:深墨描边 + teal 棱形核心(透明底,与背景协调)。
深描边 teal PNG
LumenXStudio
品牌亮色
brand-light · 亮
复用现有 html.light 配色。同形 Logo 重着色:深墨描边 + 品牌蓝棱形核心(透明底)。
深描边 蓝 PNG

落地规则(接 LumenXBranding.tsx)