渐变系统与令牌
令牌化渐变停止点与预设使渐变保品牌一致。
视觉设计进阶
为什么
每渐变手选 hex 对偏离品牌、与调色板冲突、不能适配暗模式。令牌化渐变系统（停止点 + 预设）保持一致可主题化。
Google 研究显示用户在 50ms 内形成第一印象，75% 的网站可信度判断基于视觉美学。一致的间距比例（8px 网格）可测量地降低认知负荷。
何时使用
任何用 3+ 渐变的应用（hero 背景、按钮、徽章）。一次性营销渐变可内联；产品渐变应为令牌。
如何做
1. 停止点 — 定义色停为令牌：--grad-brand-1: var(--color-brand-500)、--grad-brand-2: var(--color-brand-700)
2. 预设 — 将停止点组合为命名渐变：--grad-brand: linear-gradient(135deg, var(--grad-brand-1), var(--grad-brand-2))
3. 角度为令牌 — --grad-angle-hero: 135deg; 跨 hero 变体复用
4. 暗模式 — [data-theme="dark"] 中重定义停止点；预设自动继承
5. 径向/锥 — 径向（聚光）和锥（色轮）分预设；勿强一种
6. 网格渐变 — 多停线性近似；真网格渐变重（SVG/滤镜）
7. 渐变上文本 — 始终查对比；渐变背景需高对比模式实色回退
示例
:root {
/* 停止点 — 引色令牌非原始 hex */
--grad-brand-1: var(--color-brand-500);
--grad-brand-2: var(--color-brand-700);
--grad-surface-1: var(--color-gray-50);
--grad-surface-2: var(--color-gray-200);
--grad-angle: 135deg;
/* 预设 — 将停止点组合为命名渐变 */
--grad-brand: linear-gradient(var(--grad-angle), var(--grad-brand-1), var(--grad-brand-2));
--grad-surface: linear-gradient(180deg, var(--grad-surface-1), var(--grad-surface-2));
--grad-spotlight: radial-gradient(circle at 30% 20%, var(--color-brand-300), transparent 60%);
}
[data-theme="dark"] {
--grad-surface-1: var(--color-gray-800); /* 预设继承 */
--grad-surface-2: var(--color-gray-900);
}
/* 用法 */
.hero { background: var(--grad-brand); }
.card { background: var(--grad-surface); }
.badge { background: var(--grad-spotlight); }
/* 高对比回退 */
@media (prefers-contrast: more) {
.hero { background: var(--color-brand-600); } /* 实色，无渐变 */
}
常见问题
- ⚠每渐变原始 hex — 偏品牌、不重声明不能适配暗模式
- ⚠无高对比回退 — 强制色模式下渐变文本不可读
- ⚠停止点过多 — 5 停 '网格' 渐变渲染重且显泥
最佳实践
- ✓令牌化停止点（引色令牌）+ 预设（组合停止点）— 可主题、一致
- ✓为 prefers-contrast: more 提供实色回退 — 渐变在强制色可能失败
- ✓保 2–3 停止点 — 更多显泥；真多色效果用径向或 SVG 网格