设计系统搭建：颜色、字体与间距

· 阅读时间约 6 分钟
设计系统 CSS 前端

在创业公司做前端架构的那两年，我负责从零搭建了公司的设计系统。这篇文章是设计系统系列的第一篇，聚焦于最基础的三个要素：颜色、字体和间距。它们看似简单，但做好了能让整个产品的视觉品质提升一个档次。

颜色体系

一套好的颜色体系至少需要以下层级：

基础色板（Primitive Tokens）

从品牌主色出发，生成一个完整的色阶。我推荐使用 HSLuv 色彩空间来生成色阶——它能保持人眼感知的亮度一致性，普通的 HSL 做不到这一点。

/* 基础色阶：从品牌蓝 #0071e3 延伸 */
:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  /* ... 以此类推到 --neutral-900 */
}

语义令牌（Semantic Tokens）

基础色阶是原材料，语义令牌定义颜色的"用途"：

:root {
  --color-bg-primary: var(--neutral-50);
  --color-bg-surface: #ffffff;
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-500);
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-700);
  --color-border: var(--neutral-200);
  --color-success: var(--green-600);
  --color-warning: var(--amber-500);
  --color-error: var(--red-600);
}

这种两层架构的好处是：当你需要做暗色模式时，只需要修改语义令牌的映射关系，基础色阶保持不变。

字体排版

排版系统包含三个关键维度：字体栈、字号体系和行高。

字体栈

一个好的字体栈要有明确的回退策略：

:root {
  --font-sans: -apple-system, BlinkMacSystemFont,
    'SF Pro Display', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans SC', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code',
    'Cascadia Code', Menlo, monospace;
}

字号体系

我推荐使用模块化比例（Modular Scale）来定义字号，而不是随意选择数值。最常见的比例是 1.25（Major Third）和 1.333（Perfect Fourth）：

:root {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
}

关键原则：少即是多。一个设计系统中通常只需要 6-8 个字号层级。太多层级会让视觉混乱，也会让开发者困惑该用哪个。

行高

行高应该与字号成反比——标题的行高更紧凑，正文的行高更宽松：

  • 正文（16px）：line-height: 1.6
  • 标题（24-36px）：line-height: 1.25
  • 大标题（48px+）：line-height: 1.1

间距系统

间距系统是设计系统中最容易被忽视但效果最明显的部分。核心原则：所有间距都应该是基础单位的整数倍。

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

我选择了4px 为基础单位，这与大多数操作系统的默认像素对齐一致。选择 4px 而非 8px 的好处是提供了更细的粒度——当你需要在"稍微紧一点"和"稍微松一点"之间调整时，4px 的步进比 8px 更有弹性。

间距的使用规则

  1. 组件内间距使用较小的值（--space-1 到 --space-4）
  2. 组件间间距使用中等值（--space-4 到 --space-8）
  3. 区块间间距使用较大值（--space-12 到 --space-24）
  4. 永远不要使用任意的 padding: 13px 或 margin: 7px

在 CSS 中落地

最终，所有这些设计 token 通过 CSS 自定义属性串联起来：

/* 语义化——组件只引用语义令牌 */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-6);
}

.card h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: 1.25;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

这样一来，当你需要做暗色模式、响应式调整或整体换肤时，只需要改动自定义属性的值，而不需要修改任何组件的 CSS。

总结

颜色、字体和间距是设计系统的地基。把它们做好，你就有了一套可以信赖的"设计语言"。后续的组件设计、布局系统和交互规范，都将建立在这个基础之上。

这个系列的下一篇将讨论阴影、圆角和动效——另外三个能够在无形中提升产品质感的视觉要素。Stay tuned ⚡

← 返回文章列表