什么是设计系统

设计系统不仅仅是一组 UI 组件，它是一套 完整的设计语言，包含了颜色、排版、间距、动效等各个维度的规范。

CSS Custom Properties 的力量

使用 CSS 变量作为设计 Token 是最灵活的方式：

:root {
  --c-accent: #6d28d9;
  --c-accent-light: #8b5cf6;
  --f-sans: 'Inter', sans-serif;
  --space-4: 1rem;
  --radius-md: 10px;
}

暗色模式支持

[data-theme='dark'] {
  --c-bg: #0c0a09;
  --c-text: #fafaf9;
  --c-accent: #a78bfa;
}

只需要切换 data-theme 属性，所有使用变量的地方都会自动更新。

排版系统

好的排版是阅读体验的基础：

  • 正文：使用衬线字体，提升中文阅读舒适度
  • 标题：使用无衬线字体，增强视觉层次
  • 代码：使用等宽字体，保证代码对齐

间距系统

采用 4px 基础单位的倍数系统：

--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-4: 1rem;     /* 16px */
--space-8: 2rem;     /* 32px */

微动画

适当的动画能提升用户体验，但过多的动画会造成干扰。我们遵循以下原则：

  1. 目的性：每个动画都有明确的目的
  2. 克制：持续时间控制在 150-500ms
  3. 一致性：统一的缓动函数

好的设计系统应该是隐形的——用户不会注意到它的存在，但会感受到它带来的和谐与一致。

总结

一套好的设计系统能极大提升开发效率和产品一致性。从 CSS Custom Properties 开始，逐步建立你自己的设计语言吧。