Foundation Design System 核心

Design Tokens

设计系统的原子单位,连接设计与开发

🎨 什么是Design Tokens

Design Tokens是设计系统中的「原子」——不再直接使用颜色值#FFF,而是使用--color-bg-primary这样的变量。

🔤 命名规范

/* 语义化命名 */ --color-bg-primary --color-bg-secondary --color-text-default --color-text-muted /* 功能化命名 */ --color-surface-raised --color-surface-overlay --color-border-default /* 组合式 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05) --shadow-md: 0 4px 6px rgba(0,0,0,0.1) --shadow-lg: 0 10px 15px rgba(0,0,0,0.1)

📐 间距系统

space-1
space-2
space-3
space-4
space-5
space-6

📝 使用工具