云白为底 · Navy 为骨 · 紫为锋芒 · 四季潮汐
以潘通 2026 年度色 PANTONE 11-4201 Cloud Dancer 为结构底色，Cloud 家族承担 60% 基座。 稳定核心长期不变，季节趋势层年度可替换——一套为核心稳定性与品牌延展性同时设计的色彩架构。
色板、语义、组件各司其职：Primitive 层提供全量原料，Semantic 层按 light / dark 双套映射意图，Component 层只引用语义。 换季节层或扩展家族时只动一层，上层零改动——这是本系统延展性的结构来源。
8 个家族色板（Sand 为 legacy 6 阶）+ 季节趋势色 + 状态色。主题不变（theme-invariant），任何模式下值固定。
按用途命名，light / dark 双套映射。在 shadcn 标准约定之上扩展 gold / teal / season 语义槽位。
组件只引用语义层，dark 自动跟随。换季改槽位即可全局生效，不触碰任何组件代码。
年度替换季节趋势色时，仅需替换 Primitive 层 12 个 token 与 4 个语义槽；引用 --trending-badge-bg 的组件自动更新。
色彩家族扩展落在 Primitive 层；语义映射不变，线上界面零回归风险。
组件别名不直接引用色板，light / dark 切换由语义层一次完成，组件层无感知。
稳定核心：Cloud / Sand / Navy / Purple 四大家族 + Teal / Gold / Rose / Azure 四支次要色。全部色值经 OKLCH 感知均匀空间计算生成，点击任意色块复制 HEX。
以 PANTONE 11-4201 为锚点（cloud-100），OKLCH 等距亮度推导：50 更亮，200→950 过渡至暖墨黑。全阶恒定暖白色相 H≈88.6°，中段最暖、两端趋中性。cloud-50 / 100 承担 60% 基座。
暖调中性色家族（50–500），用于比 Cloud 更灰一档的过渡与分区场景；需要更深中性色请使用 Cloud 600–950。
正文 navy-700、标题 navy-900、dark 底色 navy-900 / 卡片 navy-800。navy 文字在 cloud-50 / cloud-100 / white 上全部达到 WCAG AAA。
品牌唯一主强调色，仅用于链接、徽标、焦点与主操作。purple-600 在四类浅底上均达 AA；dark 模式主色提亮为 purple-400。
清爽的功能性辅助色，用于正向反馈与数据系列。每视图至多出现一个次要色。
权益与高级感的载体。gold-500 上置 navy-900 文字达 AAA（7.41），VIP 徽标配对组合。
温度与情绪的载体，用于数据系列、插画与落日渐变端点。
开阔与可信赖的辅助色，用于数据系列与插画，与 Navy 同族不同温。
取自潘通 2026 时装周色，与核心家族一一配对，作为该家族的「季节变体槽位」。 锚色在潘通建议值基础上向配对家族锚点做 15–20% 环形色相混合——保持潘通识别度，提升族内和谐。
灰调薰衣草紫，柔焦收敛的高级感，Purple 家族的雾面变体。
港湾深处的灰蓝，冷静可靠，介于 Azure 与 Teal 之间的季节锚点。
奶油质感的浅黄，轻盈通透，为 Gold 家族注入春日亮度。
果肉般的暖橘，亲和有温度，Rose 家族的暖阳变体。
季节色通过语义槽 --season-1…4 与文字色 --on-season 暴露给组件层（如 --trending-badge-bg）。
2027 年换色时，只需替换 Primitive 层 12 个 token 并重指 4 个语义槽：核心家族、shadcn 语义映射、全部组件代码零改动。
趋势色上统一使用 navy-900 文字，四季通用且全部达到 AA 以上（最低 Marina 4.92）。
同一组语义 token，light / dark 两套取值。点击右上角开关，整页实时换肤——你正在阅读的这份文档本身就是语义层的消费者。
| Token | 色块 | 引用 | HEX |
|---|---|---|---|
| --background | cloud-50 | #F8F6F3 | |
| --foreground | navy-700 | #393951 | |
| --card | white | #FFFFFF | |
| --primary | purple-600 | #6352CE | |
| --primary-hover | purple-700 | #4A3EA8 | |
| --secondary / --muted | cloud-100 | #F0EEE9 | |
| --muted-foreground | navy-500 | #6E6E87 | |
| --accent | purple-100 | #EEEBFB | |
| --accent-foreground | purple-700 | #4A3EA8 | |
| --destructive | danger-600 | #DC2626 | |
| --border / --input | navy-200 | #DCDCE3 | |
| --ring | purple-500 | #7C6FDB | |
| --gold | gold-500 | #D4A43A | |
| --teal | teal-500 | #0FB5A7 |
| Token | 色块 | 引用 | HEX |
|---|---|---|---|
| --background | navy-900 | #1B1B2A | |
| --foreground | navy-100 | #EDEDF1 | |
| --card | navy-800 | #2A2A3F | |
| --primary | purple-400 | #9F94E8 | |
| --primary-hover | purple-300 | #C2BBF1 | |
| --secondary / --muted | navy-700 | #393951 | |
| --muted-foreground | navy-300 | #BDBDCA | |
| --accent | purple-900 | #231E4C | |
| --accent-foreground | purple-300 | #C2BBF1 | |
| --destructive | danger-500 | #EF4444 | |
| --border / --input | navy-600 | #4F4F6B | |
| --ring | purple-500 | #7C6FDB | |
| --gold | gold-300 | #E7C258 | |
| --teal | teal-400 | #35C8B5 |
四层趋势渐变体系：12 条渐变，全部 135deg linear。 趋势依据：Atmospheric Hues 大气氛围、Bio-Luminescence 生物夜光、New Nostalgia 新怀旧，以及珠光漫射式的低对比多停过渡； 色停全部取自现有家族 token 或相邻两阶的 OKLCH 中点，经 OKLCH 空间插值校验，中途不发灰。 叠字定级为程序沿渐变全程采样 41 点的最差实测对比度（AAA ≥ 7 · AA ≥ 4.5 · 仅大字号 ≥ 3）。 点击色条复制完整 CSS，点击色停复制 HEX；有 dark 变体的渐变在深色模式下自动切换为变体值。
品牌核心资产，值长期冻结，light / dark 同值。可信优先，不因趋势轮换而改变。
Cloud 阶起底的低对比漫射多停，像光穿过云层；dark 变体为深底同族微光（色条右下角小窗预览 dark 值）。light 上 navy-900 文字全部 AAA。
深 navy 底 + 一束辉光，dark Hero / 仪表盘专用——深色模式下渐变成为一等公民。卡片以深底呈现，即其真实使用环境。
陶土、秋日金、奶油白的新怀旧暖调；dark 变体为深底暖光。Gilded 为长期冻结的 VIP 品牌资产。
八套开箱即用的场景配方：左侧为迷你界面实拍（纯 HTML/CSS 渲染，直接引用 token 变量，随明暗模式换肤），右侧为配方——适用场景、色票与配比。点击色票复制 HEX。
默认产品 UI · 仪表盘 / 结算 / 账户页 —— 全系统的基础配方
VIP / 权益页 / 会员卡片 —— 深底金缀的稀缺感
营销落地页 / 活动报名 / 增长投放 —— 暖意渐层上的行动召唤
B 端后台 / 合规 / 报表 —— 低饱和沙底上的可信信息密度
产品发布 / 大屏 KV / 品牌亮点带 —— 紫→青极光上的白色宣言
深色监控 / 数据大屏 / 实时行情 —— 深渊底上的青色辉光数据
季节活动 / 快闪店 / 运营横幅 —— 云白底上的季节双色层
白皮书 / 报告页 / 数据长文 —— 云纱衬底上的完整图表序列
三套取色逻辑覆盖全部图表场景：分类用 Categorical 序列、数值映射用 Sequential 色阶、涨跌对照用 Diverging 色阶。全部色值取自 token；示例图表直接引用语义变量，dark 模式自动换色。
Purple → Teal → Gold → Azure → Rose 固定顺序：light 取 500–600 阶保白底饱和，dark 提亮至 300/400 阶保深底可读。点击色条复制 HEX。
第一系列永远 chart-1（Purple），其后按 chart-2 → 5 依次分配；不跳号、不凭喜好调换，保证跨页面的一致联想。
单图类别不超过 5 个——超过后人眼无法稳定区分色块，图例也会挤压数据区。先考虑聚合或换图表类型。
第 6 类起合并为「其他」，以中性灰 navy-300 #BDBDCA（dark 用 navy-500 #6E6E87）呈现，不占用品牌序列。
热力图 / Choropleth / 密度图的数值映射：同一家族 100 → 900 亮度递进，数值越大色越深。purple 与 teal 两族备选，单图只用一族，不与分类序列混用。
以中性点为锚向两端发散：涨 #059669 → 中性 cloud-200 → 跌 #DC2626。涨跌为金融专用语义，独立于 Status 状态色体系——状态色表达操作结果（成功 / 失败），发散色阶表达数值方向与幅度。中性档可换 sand-200 #E3E2DE；dark 端点提亮为 #34D399 / #F87171，中性档用 navy-600。
系列色 var(--chart-*)；网格线 --viz-grid（navy-200 / dark navy-600）、次级网格 --viz-grid-soft（navy-100 / dark navy-700）、标签 --viz-label（navy-500 / dark navy-300）——全部随主题切换。
次级网格 navy-100（dark navy-700）虚线 3 5；主网格 navy-200（dark navy-600）。网格是背景，永远弱于数据。
navy-300（dark navy-500）实线 1–1.2px，是全图唯一允许加重的参考线；发散图 0 轴必须用它锚定。
刻度与图例 navy-500（dark navy-300），图表标题 navy-900（dark navy-50）；字号 ≥9px，不与网格争对比。
顺序与系列严格一致（chart-1 → 5），置于图上或右侧；图例色块引用同一 token，禁止手调近似色。
悬停系列保持 100% 不透明度，其余降至 .35；焦点元素加 var(--ring) 焦点环，键盘可达。
图上文字浅底用 navy-700（全底 AAA），深底用 white / navy-100；dark 卡片上的系列色全部 ≥ AA（gold-300 达 8.16 AAA）。
状态色沿用 Tailwind 标准值保证跨系统一致性。500 阶在浅底上对比度天然偏低，语义文字场景请使用对应 600/700 阶；图标与色块不受限。
文字用 600/700（#16A34A / #15803D）；500 仅限图标与色块。
文字用 600/700（#D97706 / #B45309）；500 仅限图标与色块。
danger-600 为 --destructive 语义值（light）；500 白底仅可用于大字号与图标。
文字用 600/700（#0891B2 / #0E7490）；500 仅限图标与色块。
全部 53 组数据由生成器按 WCAG 2.x 相对亮度公式实算得出，与 tokens.json 中 contrast 字段一致。 判定标准：AAA ≥ 7.0 · AA ≥ 4.5 · 仅大字号 ≥ 3.0（AA Large）· < 3.0 禁用。
| 前景 | 背景 | 对比度 | 判定 | |
|---|---|---|---|---|
| navy-700 | on | cloud-50 | 10.37 | AAA |
| navy-700 | on | cloud-100 | 9.64 | AAA |
| navy-700 | on | white | 11.18 | AAA |
| navy-700 | on | sand-100 | 9.63 | AAA |
| navy-900 | on | cloud-50 | 15.74 | AAA |
| navy-900 | on | cloud-100 | 14.64 | AAA |
| navy-900 | on | white | 16.98 | AAA |
| navy-900 | on | sand-100 | 14.62 | AAA |
| purple-600 | on | cloud-50 | 5.36 | AA |
| purple-600 | on | cloud-100 | 4.99 | AA |
| purple-600 | on | white | 5.79 | AA |
| purple-600 | on | sand-100 | 4.98 | AA |
| white | on | cloud-50 | 1.08 | 禁用 |
| white | on | cloud-100 | 1.16 | 禁用 |
| white | on | white | 1.00 | 禁用 |
| white | on | sand-100 | 1.16 | 禁用 |
| 前景 | 背景 | 对比度 | 判定 | |
|---|---|---|---|---|
| white | on | purple-600 · 主按钮 | 5.79 | AA |
| white | on | purple-700 · 主按钮 hover | 8.25 | AAA |
| purple-700 | on | purple-100 · accent | 7.04 | AAA |
| navy-500 · muted | on | cloud-50 | 4.59 | AA |
| navy-900 | on | gold-500 · VIP 徽标 | 7.41 | AAA |
| navy-900 | on | season-lilac-500 | 7.74 | AAA |
| navy-900 | on | season-marina-500 | 4.92 | AA |
| navy-900 | on | season-banana-500 | 13.15 | AAA |
| navy-900 | on | season-melon-500 | 8.34 | AAA |
| cloud-950 | on | cloud-50 | 16.43 | AAA |
| cloud-950 | on | white | 17.73 | AAA |
| navy-700 | on | sand-50 | 10.34 | AAA |
| 前景 | 背景 | 对比度 | 判定 | |
|---|---|---|---|---|
| navy-100 · 正文 | on | navy-900 · 页面底 | 14.54 | AAA |
| navy-100 | on | navy-800 · 卡片 | 11.98 | AAA |
| navy-200 · 次要文字 | on | navy-900 | 12.44 | AAA |
| navy-300 · muted | on | navy-900 | 9.13 | AAA |
| navy-300 · 卡片 muted | on | navy-800 | 7.52 | AAA |
| purple-400 · primary | on | navy-900 | 6.37 | AA |
| purple-950 · 主按钮文字 | on | purple-400 · 主按钮 | 6.69 | AA |
| purple-300 | on | purple-900 · accent | 8.57 | AAA |
| navy-950 | on | gold-300 · VIP 徽标 | 11.34 | AAA |
| teal-400 · chart | on | navy-800 · 卡片 | 6.71 | AA |
| gold-300 · chart | on | navy-800 · 卡片 | 8.16 | AAA |
| azure-300 · chart | on | navy-800 · 卡片 | 5.78 | AA |
| rose-300 · chart | on | navy-800 · 卡片 | 6.35 | AA |
| 前景 | 背景 | 对比度 | 判定 | |
|---|---|---|---|---|
| success-500 | on | white | 2.28 | 禁用 |
| success-500 | on | cloud-50 | 2.11 | 禁用 |
| warning-500 | on | white | 2.15 | 禁用 |
| warning-500 | on | cloud-50 | 1.99 | 禁用 |
| danger-500 | on | white | 3.76 | 仅大字号 |
| danger-500 | on | cloud-50 | 3.49 | 仅大字号 |
| info-500 | on | white | 2.43 | 禁用 |
| info-500 | on | cloud-50 | 2.25 | 禁用 |
| up · 涨 | on | white | 3.77 | 仅大字号 |
| up · 涨 | on | cloud-50 | 3.49 | 仅大字号 |
| down · 跌 | on | white | 4.83 | AA |
| down · 跌 | on | cloud-50 | 4.48 | 仅大字号 |
结论：navy-700 / navy-900 文字在 cloud-50、cloud-100、white、sand-100 上全部 AAA，Cloud 基座在任何浅底组合下均无可读性风险； 「仅大字号」组合可用于 ≥18pt 标题、图标与图表色块，禁止正文小字。