---
title: "CSS 设计系统"
type: concept
tags: [UX, CSS, 设计规范]
---

## 定义
通过 CSS 变量（Custom Properties）定义颜色、字体、间距、布局的系统化方法，为项目提供一致性的视觉语言和可维护的样式基础。

## 核心要素
- **颜色变量**：语义化命名（--bg-primary, --text-primary, --accent-color）
- **字体系统**：层级化字号（--text-xs 到 --text-3xl）
- **间距系统**：基于 4px 网格的间距变量（--space-1 到 --space-16）
- **布局系统**：容器尺寸（--container-sm 到 --container-xl）

## 主题支持
- Light Theme：浅色背景和深色文字
- Dark Theme：深色背景和浅色文字
- System Theme：通过 prefers-color-scheme 自动匹配系统偏好

## 实践
- 使用语义化命名而非具体颜色值
- 建立设计 tokens 供组件复用
- 通过 CSS 变量实现主题动态切换

## 相关概念
- [[主题切换]]
- [[组件架构]]
- [[响应式断点策略]]