# Design Tokens v3 · 生产环境真实值 > **来源**：`https://www.autocava.com.mx` **生产环境真实渲染 DOM + CDN CSS** > **采集方式**： > - 浏览器实测 DOM class（`bg-ffcf20` / `text-8c7212` 等 utility class） > - CDN CSS 9 个文件（334 KB）解析 `--color-*` 自定义属性定义 > **采集时间**：2026-09-29 · Desktop + 移动 viewport · `ac_ab=stable` > **技术栈**：Nuxt UI v3 底座 + **Tailwind utility class 直写 hex**（不走 oklch 色板） --- ## ⚠️ v1 / v2 修订说明 | 版本 | 内容 | 状态 | |------|------|------| | v1 | Yellow 品牌期推测值（60 色） | ⚠️ 主色对，但**中性色和语义色是推测的**，命名与生产站不一致 | | v2 | 误判为 Green primary（Nuxt UI 默认色板） | ❌ **已废弃** — 把框架未启用的默认色板当成了品牌色 | | **v3** | **生产 DOM class + CSS 变量实测** | ✅ **权威** | **v2 错在哪**：Nuxt UI 框架预置了完整的 `--color-green-*` / `--color-slate-*` 色板，但 Autocava 实际用 Tailwind utility class 直写 hex（`bg-ffcf20`），**根本没启用那套色板**。我看到变量定义就断定主色，犯了一个基础错误。 **v3 原则**：只看**真实渲染 DOM 的 class** 和**CSS 里的实际定义**，不看框架默认。 --- ## 🎨 真实色板（15 色 · 全部实测） > 这些是生产站 CSS 里**真实定义且被实际使用**的颜色，按使用频次排序。 ### 🟡 Yellow · 品牌主色（7 色） | CSS 变量 | Hex | 频次 | 用途 | |----------|-----|------|------| | `--color-ffcf20` | **`#FFCF20`** | **bg × 26** | **品牌主色** · 导航底 · 主 CTA · Buscar 按钮 | | `--color-8c7212` | **`#8C7212`** | **text × 66** | **黄底上的强调文字**（白底上 4.63:1 ✅）| | `--color-e0a504` | `#E0A504` | text × 19 | 黄底 hover / 强调文字 | | `--color-b59317` | `#B59317` | text × 19 | 黄底次要文字 | | `--color-744500` | `#744500` | 备用 | 深黄（黄底上的强对比）| | `--color-ffc422` | `#FFC422` | 1 | `--color-primary` 的 fallback 值 | | `--color-fffaed` | `#FFFAE9` | 备用 | 极浅黄底 | | `--color-fff6dc` | `#FFF6DC` | 备用 | 浅黄底（提示区）| | `--color-ffd04e` | `#FFD04E` | 备用 | 中浅黄装饰 | ### ⚪ Neutral · 中性色（6 色） | CSS 变量 | Hex | 频次 | 用途 | |----------|-----|------|------| | `--color-222` | **`#222222`** | **text × 114** | **正文主色**（全站最高频）| | `--color-666` | `#666666` | text × 62 | 次要正文 | | `--color-999` | `#999999` | text × 51 | 辅助 / 占位文字 | | `--color-ddd` | `#DDDDDD` | bg × 1 / text × 4 | 边框 / 分割线 | | `--color-fff` | **`#FFFFFF`** | **bg × 13** | 卡片 / 内容区背景 | | `--color-000` | `#000000` | 备用 | 纯黑（极少用）| > 📌 **没有 `#F8F8F8` 页面灰底**。生产站页面底色直接用 `#FFF`，靠卡片阴影/边框分层。 --- ## 🔤 字体系统（生产真实值） ```css /* 来自 CSS 的 --font-sans / --font-mono 实际定义 */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; ``` **字重**（CSS 实测）： ``` 400 normal · 500 medium · 600 semibold · 700 bold · 800 extrabold · 900 black ``` **生产站实际用到的字号**（从 DOM class 反查 Tailwind scale）： | 类名 | px | 用途 | |------|-----|------| | `text-xs` | 12 | 标签 / 辅助 | | `text-sm` | 14 | **正文主力** | | `text-base` | 16 | 强调正文 | | `text-lg` | 18 | 卡片标题 | | `text-xl` | 20 | 区块标题 | | `text-2xl` | 24 | 大标题 | | `text-3xl` | 30 | Hero 标题 | **导航高度**（实测）：移动 `h-14` = 56px · 桌面 `h-16.5` = 66px --- ## 📐 尺度（CSS 实测） ```css --spacing: .25rem; /* 4px 基准 */ --ui-radius: .25rem; /* 4px 基准圆角 */ ``` **圆角**（生产站实际 class）：`rounded-md`（6px）· `rounded-lg`（8px）· `rounded-full`（胶囊） --- ## 🎯 语义映射（对齐生产站实际用法） ### 导航栏（实测 `bg-ffcf20` + `text-222`） ```css .topnav { background: var(--color-ffcf20); /* #FFCF20 */ color: var(--color-222); /* #222222 */ } .topnav-link { color: #222; font-weight: 400; } .topnav-link[data-active] { font-weight: 700; } .topnav-link::after { background: #FFCF20; } /* 激活下划线 */ ``` ### 主 CTA（实测 `bg-ffcf20` + `text-222`） ```css .btn-primary { background: #FFCF20; color: #222222; font-weight: 600; } .btn-primary:hover { background: #E0A504; } /* 生产站 hover 用这个 */ .btn-primary:active { background: #B59317; } ``` > ⚠️ **关键**：黄底配的是 **#222 深字**，不是白字。白字在 `#FFCF20` 上只有 **1.6:1**，完全不达标。 ### 文字层级 | 用途 | Token | Hex | 频次 | |------|-------|-----|------| | **正文** | `--color-222` | `#222222` | 114 | | 次要正文 | `--color-666` | `#666666` | 62 | | 辅助 / 占位 | `--color-999` | `#999999` | 51 | | 黄底正文 | `--color-8c7212` | `#8C7212` | 66 | | 黄底强调 | `--color-e0a504` | `#E0A504` | 19 | ### 表面 | 用途 | Token | Hex | |------|-------|-----| | 卡片 / 内容底 | `--color-fff` | `#FFFFFF` | | 品牌底 | `--color-ffcf20` | `#FFCF20` | | 边框 / 分割 | `--color-ddd` | `#DDDDDD` | | 浅黄提示底 | `--color-fff6dc` | `#FFF6DC` | | 极浅黄底 | `--color-fffaed` | `#FFFAE9` | --- ## 📋 WCAG AA 对比度速查（精确计算） | 组合 | 对比度 | 达标 | |------|--------|------| | **`#222` on `#FFCF20`（生产站主 CTA）** | **10.76:1** | ✅ AAA | | **`#222` on `#FFCF20`（黄底正文 · 实际方案）** | **10.76:1** | ✅ AAA | | `#744500` on `#FFCF20` | 5.47:1 | ✅ AA | | `#8C7212` on `#FFFFFF` | 4.63:1 | ✅ AA | | `#222` on `#FFF6DC` | 14.75:1 | ✅ AAA | | `#222` on `#FFFFFF` | 15.91:1 | ✅ AAA | | `#666` on `#FFFFFF` | 5.74:1 | ✅ AA | | `#8C7212` on `#FFCF20` | 3.13:1 | ⚠️ 仅大字 | | `#999` on `#FFFFFF` | 2.85:1 | ⚠️ 仅占位/大字 | | `#B59317` on `#FFCF20` | 1.99:1 | ❌ 装饰专用 | | `#E0A504` on `#FFCF20` | 1.49:1 | ❌ 装饰专用 | | **`#FFFFFF` on `#FFCF20`** | **1.48:1** | ❌ **绝对禁用** | > 🚨 **黄底绝对不能用白字**（1.48:1）。这是本设计系统最容易翻车的点。 > ✅ **正确做法**：黄底一律配 `#222222`（10.76:1），这是生产站实际方案。 --- ## 🧩 直接可用的 CSS 变量块 ```css :root { /* 🟡 Yellow 品牌主色（生产真实值）*/ --yellow-500:#FFCF20; /* 品牌主色 · 导航底 · 主 CTA */ --yellow-600:#E0A504; /* hover */ --yellow-700:#B59317; /* active / 黄底次要文字 */ --yellow-800:#8C7212; /* 黄底正文色 */ --yellow-900:#744500; /* 深黄 */ --yellow-400:#FFD04E; /* 浅黄装饰 */ --yellow-100:#FFF6DC; /* 浅黄底 */ --yellow-50:#FFFAED; /* 极浅黄底 */ --primary-fallback:#FFC422; /* --color-primary 的 fallback */ /* ⚪ Neutral（生产真实值）*/ --text:#222222; /* 正文主色 · 最高频 */ --text-secondary:#666666; --text-hint:#999999; --border:#DDDDDD; --bg:#FFFFFF; --black:#000000; /* 语义别名 */ --text-important:var(--text); --text-regular:var(--text-secondary); --text-aux:var(--text-hint); --text-on-yellow:var(--text); /* 黄底上的正文 = #222（10.76:1）*/ --bg-page:var(--bg); --bg-card:var(--bg); --border-divider:var(--border); --border-line:var(--border); --btn-primary:var(--yellow-500); --btn-primary-press:var(--yellow-700); --primary-500:var(--yellow-500); --primary-600:var(--yellow-600); --primary-700:var(--yellow-700); --primary-800:var(--yellow-800); --neutral-50:var(--bg); --neutral-200:var(--border); --neutral-400:var(--text-hint); --neutral-600:var(--text-secondary); --neutral-900:var(--text); /* 字体 */ --font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; /* 尺度 */ --spacing:.25rem; --ui-radius:.25rem; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-full:9999px; --shadow-card:0 1px 3px rgba(0,0,0,.08); --header-h:56px; /* 移动 56px / 桌面 66px */ } ``` --- ## 🔗 采集产物（可复核） | 文件 | 内容 | |------|------| | `_source/production-snapshot/nuxt-ui-colors.css` | `