什么是设计系统？

很多人把设计系统等同于组件库（Component Library），但这只是冰山一角。

一个好的设计系统包含：

  • 🎨 设计 Token — 颜色、间距、字体、圆角等基础变量
  • 🧩 组件库 — 可复用的 UI 组件
  • 📐 布局规则 — 网格系统、响应式策略
  • 📖 设计语言 — 视觉风格指南
  • 🤝 协作流程 — 设计与开发的协作方式

最小可行设计系统

刚起步时，我建议从以下几个核心 Token 开始：

1. 颜色系统

定义语义化的颜色变量，而不是直接用色值：

:root {
  /* 不要这样 */
  /* --blue: #3b82f6; */

  /* 而要这样 */
  --color-brand: #81D8D0;
  --color-text-primary: #1c1c1c;
  --color-text-secondary: #6b6b6b;
  --color-surface: #ffffff;
  --color-border: rgba(0, 0, 0, 0.06);
}

这样做的好处是：当你想支持深色模式时，只需要改变变量的值，组件代码不需要任何修改。

2. 间距系统

选择一个基准单位，所有间距都是它的倍数：

:root {
  --space-unit: 4px;
  --space-1: calc(var(--space-unit) * 1);  /* 4px */
  --space-2: calc(var(--space-unit) * 2);  /* 8px */
  --space-4: calc(var(--space-unit) * 4);  /* 16px */
  --space-6: calc(var(--space-unit) * 6);  /* 24px */
  --space-8: calc(var(--space-unit) * 8);  /* 32px */
}

3. 排版系统

限制字体大小、行高的组合数量：

层级大小行高字重用途
h136px1.2700页面标题
h224px1.3600区块标题
h320px1.4600小节标题
body16px1.6400正文
small14px1.5400辅助文字

深色模式的设计策略

深色模式不是简单的反色。关键是：

  1. 不要纯黑背景 — 用深灰 (#0a0a0b) 更舒适
  2. 降低文字对比度 — 纯白文字在深色背景上太刺眼
  3. 阴影变成了光晕 — 深色模式下用边框代替阴影来分层
  4. 品牌色需要调整 — 同样的颜色在深色背景下感知不同

付诸实践

构建这个博客时，我应用了上述原则：

/* 设计 Token 驱动整个视觉系统 */
:root {
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --radius-card: 16px;
}

.dark {
  --color-bg: #0a0a0b;
  --color-surface: #141415;
}

所有组件都引用这些变量，因此主题切换只涉及变量值的替换，组件本身不需要改动。

最后

设计系统不是一蹴而就的。从最小的 Token 开始，随着项目的发展逐步完善。一致性比完美更重要。

一个好的设计系统让产品看起来像是一个团队做的 — 即使团队只有你一个人。