独特设计系统

创建用户会记住的、具有个性的设计系统。超越通用模板，构建具有凝聚力、能引起情感共鸣的视觉语言。

使用时机

• - 构建需要独特视觉标识的新产品
• 为 Tailwind + CSS 变量创建设计令牌
• 记录美学决策以确保一致实现
• 希望超越默认的 Bootstrap/Tailwind 美学

核心理念

一个独特的设计系统始于美学文档，而非颜色选择器。

1. 1. 定义氛围 → 这看起来和感觉像什么？
2. 收集参考 → 情绪板、灵感、示例
3. 记录情感 → 用户应该感受到什么？
4. 提取令牌 → 颜色、排版、间距、动效
5. 构建组件 → 实现已记录的愿景

模式 1：美学基础

在编写 CSS 之前先记录氛围：

示例：复古未来主义

氛围：水晶般、发光、略带忧郁——被柔和渐变、锐利排版和 CRT 纹理所调和的希望色调。一切皆参考主色调水晶青色。

灵感来源：

• - 复古游戏机启动序列 — 未来主义有序菜单
• JRPG 用户界面面板 — 发光数据显示、叠加 HUD
• 科幻终端界面 — 优雅的衰败感、等宽读数

示例：温暖中性赛博朋克

氛围：带有终端感的温暖中性赛博朋克。不同于刺眼的黑底绿字黑客美学，它以温暖的棕褐色/米色为基础，营造出平易近人且具有技术感的氛围。

关键差异化：大多数深色 UI 采用冷色调搭配霓虹点缀。这种方法将温暖作为秘密武器——中性米色底色营造视觉舒适感，而翡翠绿点缀则保持了未来主义美学。

模式 2：颜色令牌架构

三层系统

CSS 变量（事实来源）
↓
Tailwind 配置（工具类）
↓
TypeScript 令牌（运行时访问）

CSS 变量

css
:root {
/ 基础色调（在 rgba() 中使用） /
--tone-void: 2, 7, 18;
--tone-midnight: 6, 12, 32;
--tone-cyan: 76, 204, 255;

/ 语义颜色（HSL） /
--primary: 216 90% 68%;
--success: 154 80% 60%;
--destructive: 346 80% 62%;

/ 效果变量 /
--glow-primary: 216 90% 68%;
--glass-bg: 33 18% 71% / 0.8;
}

Tailwind 配置

typescript
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
background: hsl(var(--background)),
foreground: hsl(var(--foreground)),
primary: {
DEFAULT: hsl(var(--primary)),
foreground: hsl(var(--primary-foreground)),
},
// 用于 rgba 的色调调色板
tone: {
void: rgb(var(--tone-void)),
cyan: rgb(var(--tone-cyan)),
},
},
},
},
};

TypeScript 令牌

typescript
// styles/design-tokens.ts
export const colors = {
primary: hsl(var(--primary)),
success: hsl(var(--success)),
// 用于 rgba 使用
toneCyan: rgb(var(--tone-cyan)),
};

export const withOpacity = (token: string, opacity: number) =>
token.replace(rgb(, rgba().replace(), , ${opacity}));

模式 3：排版系统

字体堆栈

typescript
fonts: {
display: [Orbitron, system-ui], // 标题、标签
mono: [Share Tech Mono, monospace], // 指标、代码
sans: [Inter, system-ui], // 正文后备
}

带乘数的字号比例

css
:root {
--typo-scale: 0.88; / 响应式乘数 /

--typo-page-title: calc(1.75rem * var(--typo-scale));
--typo-section-title: calc(1rem * var(--typo-scale));
--typo-metric-lg: calc(1.75rem * var(--typo-scale));
--typo-metric-md: calc(0.96rem * var(--typo-scale));
--typo-body: calc(0.9rem * var(--typo-scale));
}

@media (min-width: 640px) {
:root { --typo-scale: 1; }
}

排版模式

杂志风格数字：
css
.metric {
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}

标签：
css
.label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
font-size: 0.72rem;
}

模式 4：分层表面系统

图层层级

表面组件

tsx
interface SurfaceProps {
layer?: panel | tile | chip | deep | metric;
children: React.ReactNode;
}

export function Surface({ layer = tile, children }: SurfaceProps) {
return (

const layerStyles = {
panel: bg-tone-cadet/40 border border-tone-jordy/10,
tile: bg-tone-midnight/60 border border-tone-jordy/5,
chip: bg-tone-cyan/10 border border-tone-cyan/20,
deep: bg-tone-void/80,
metric: bg-tone-cadet/20,
};

模式 5：动效令牌

时间尺度

css
:root {
--transition-fast: 0.15s;
--transition-default: 0.2s;
--transition-medium: 0.25s;
--transition-slow: 0.3s;
}

动画模式

javascript
// tailwind.config.ts
keyframes: {
shimmer: {
0%: { backgroundPosition: 200% 0 },
100%: { backgroundPosition: -200% 0 },
},
pulse-glow: {
0%, 100%: { opacity: 1, transform: scale(1) },
50%: { opacity: 0.5, transform: scale(1.05) },
},
slide-in: {
0%: { opacity: 0, transform: translateY(10px) },
100%: { opacity: 1, transform: translateY(0) },
},
value-flash: {
0%: { textShadow: 0 0 8px currentColor },
100%: { textShadow: none },
},
},
animation: {
shimmer: shimmer 1.5s ease-in-out infinite,
pulse-glow: pulse-glow 1.8s ease-in-out infinite,
slide-in: slide-in 0