Auto-sync: 2026-04-20 07:08

wiki/concepts/CSS-设计系统.md

@@ -0,0 +1,29 @@
+---
+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 变量实现主题动态切换
+
+## 相关概念
+- [[主题切换]]
+- [[组件架构]]
+- [[响应式断点策略]]