---
title: "CSS Design System"
type: concept
tags: [css, design-system, frontend, architecture]
sources: [design-ux-architect.md]
last_updated: 2026-04-24
---

## Definition

CSS Design System 是一套结构化的 CSS 架构规范，通过 CSS Custom Properties（CSS 变量）定义颜色、排版、间距等基础设计 Token，供整个项目复用，确保视觉一致性和主题切换能力。

## Core Components

### Color System
```css
:root {
  /* Light Theme Colors */
  --bg-primary: [spec-light-bg];
  --bg-secondary: [spec-light-secondary];
  --text-primary: [spec-light-text];
  --text-secondary: [spec-light-text-muted];
  --border-color: [spec-light-border];

  /* Brand Colors */
  --primary-color: [spec-primary];
  --secondary-color: [spec-secondary];
  --accent-color: [spec-accent];
}
```

### Typography Scale
```css
: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 */
}
```

### Spacing System
```css
:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}
```

## Theme Support

CSS Design System 必须原生支持三种主题模式：

- **Light Theme**：浅色背景，深色文字
- **Dark Theme**：深色背景，浅色文字
- **System Theme**：`prefers-color-scheme` 检测系统偏好

```css
[data-theme="dark"] {
  --bg-primary: [spec-dark-bg];
  --bg-secondary: [spec-dark-secondary];
  --text-primary: [spec-dark-text];
  --text-secondary: [spec-dark-text-muted];
  --border-color: [spec-dark-border];
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: [spec-dark-bg];
    /* ... */
  }
}
```

## Related Concepts

- [[Theme-Toggle]]：主题切换交互组件
- [[Theme-Manager]]：JavaScript 主题管理类
- [[Layout-Framework]]：基于此系统的布局架构
- [[Component-Architecture]]：组件样式规范

## Sources

- [[design-ux-architect]] — CSS Design System 的完整定义和示例代码