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