Skip to content

Commit 16d7881

Browse files
InneiInnei
committed
chore(landing): update landing
Signed-off-by: Innei <tukon479@gmail.com>
1 parent 2665778 commit 16d7881

19 files changed

+1824
-1511
lines changed

‎apps/landing/DESIGN_SYSTEM.md‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
# 设计系统使用指南
2+
3+
## 🎨 颜色系统
4+
5+
### Pastel Palette Token（自动适配暗色模式）
6+
7+
```tsx
8+
// ✅ 推荐：使用语义化 token
9+
bg-background // 主背景
10+
bg-background-secondary // 次级背景
11+
bg-fill // 填充色
12+
bg-fill-secondary // 次级填充
13+
bg-material-medium // 材质：中等透明度
14+
bg-accent // 强调色
15+
16+
text-text // 主文本
17+
text-text-secondary // 次级文本
18+
text-text-tertiary // 三级文本（最淡）
19+
20+
border-border // 边框色
21+
```
22+
23+
### 自定义 Accent 混合色
24+
25+
```tsx
26+
// 10% ~ 80% 的 accent 混合色
27+
bg-accent-10 // 极淡强调色背景
28+
bg-accent-20
29+
bg-accent-30
30+
...
31+
bg-accent-80 // 强烈强调色
32+
```
33+
34+
### ❌ 避免硬编码
35+
36+
```tsx
37+
// ❌ 不要这样
38+
className="bg-blue-500 text-white shadow-xl"
39+
40+
// ✅ 应该这样
41+
className="bg-accent text-background shadow-medium"
42+
```
43+
44+
## 📐 阴影系统
45+
46+
从 `lib/design-tokens.ts` 导入统一阴影：
47+
48+
```tsx
49+
import { shadows } from '~/lib/design-tokens'
50+
51+
// 5 个标准层级
52+
shadows.subtle // 轻微阴影 - 用于悬停效果
53+
shadows.light // 轻度阴影 - 普通卡片
54+
shadows.medium // 中度阴影 - 浮动面板
55+
shadows.strong // 强阴影 - 模态框
56+
shadows.heavy // 重阴影 - 全屏/Hero
57+
```
58+
59+
### 使用示例
60+
61+
```tsx
62+
// 普通卡片
63+
<div className={clsxm('bg-background', shadows.light)}>...</div>
64+
65+
// 浮动面板
66+
<div className={clsxm('bg-background/80 backdrop-blur-xl', shadows.medium)}>
67+
...
68+
</div>
69+
70+
// Hero 区块
71+
<div className={shadows.heavy}>...</div>
72+
```
73+
74+
## 🔲 圆角系统
75+
76+
```tsx
77+
import { radius } from '~/lib/design-tokens'
78+
79+
radius.sm // rounded-xl (12px) - 小元素
80+
radius.md // rounded-2xl (16px) - 按钮、输入框
81+
radius.lg // rounded-3xl (24px) - 卡片
82+
radius.xl // rounded-[28px] - 大卡片
83+
radius['2xl'] // rounded-[32px] - Section 容器
84+
radius['3xl'] // rounded-[40px] - Hero 级别
85+
```
86+
87+
## 💨 模糊度系统
88+
89+
```tsx
90+
import { blur } from '~/lib/design-tokens'
91+
92+
blur.sm // backdrop-blur-sm (4px)
93+
blur.md // backdrop-blur-md (12px)
94+
blur.lg // backdrop-blur-lg (16px)
95+
blur.xl // backdrop-blur-xl (24px)
96+
blur['2xl'] // backdrop-blur-2xl (40px)
97+
blur['3xl'] // backdrop-blur-[60px]
98+
```
99+
100+
## 🎴 Glassmorphic 卡片
101+
102+
### 预设变体
103+
104+
```tsx
105+
import { glassCard } from '~/lib/design-tokens'
106+
107+
// 4 种预设风格
108+
glassCard.default // bg-background/60 + border + backdrop-blur-xl
109+
glassCard.elevated // bg-background/80 + backdrop-blur-2xl (更实)
110+
glassCard.floating // bg-background/50 + backdrop-blur-[30px] (更透)
111+
glassCard.gradient // border-white/15 + backdrop-blur-2xl (配合渐变)
112+
```
113+
114+
### 组合使用
115+
116+
```tsx
117+
import { glassCard, radius, shadows } from '~/lib/design-tokens'
118+
119+
<div className={clsxm(
120+
glassCard.floating,
121+
radius.lg,
122+
shadows.medium,
123+
'p-6'
124+
)}>
125+
内容
126+
</div>
127+
```
128+
129+
## 📏 Typography
130+
131+
```tsx
132+
import { typography } from '~/lib/design-tokens'
133+
134+
typography.hero // text-4xl sm:text-5xl lg:text-6xl font-semibold
135+
typography.h1 // text-3xl lg:text-4xl font-semibold
136+
typography.h2 // text-2xl lg:text-3xl font-semibold
137+
typography.h3 // text-xl lg:text-2xl font-semibold
138+
typography.body // text-base
139+
typography.small // text-sm
140+
typography.tiny // text-xs
141+
typography.label // text-xs tracking-[0.3em] uppercase font-semibold
142+
```
143+
144+
### 使用示例
145+
146+
```tsx
147+
<h1 className={clsxm(typography.hero, 'text-white')}>
148+
标题文字
149+
</h1>
150+
151+
<p className={clsxm(typography.label, 'text-text-secondary')}>
152+
Section Label
153+
</p>
154+
```
155+
156+
## 📦 间距系统
157+
158+
```tsx
159+
import { spacing } from '~/lib/design-tokens'
160+
161+
spacing.section // space-y-20 - Section 之间
162+
spacing.content // space-y-12 - 内容组之间
163+
spacing.group // space-y-6 - 组内元素
164+
spacing.tight // space-y-3 - 紧密元素
165+
```
166+
167+
## 🎯 图标容器
168+
169+
```tsx
170+
import { iconBox } from '~/lib/design-tokens'
171+
172+
// 3 种尺寸，自带圆角、背景、居中
173+
iconBox.sm // size-8 + rounded-xl
174+
iconBox.md // size-10 + rounded-2xl
175+
iconBox.lg // size-12 + rounded-2xl
176+
177+
// 使用示例
178+
<span className={iconBox.lg}>
179+
<i className="i-lucide-sparkles size-5" />
180+
</span>
181+
```
182+
183+
## ⚡ 过渡动画
184+
185+
```tsx
186+
import { transition } from '~/lib/design-tokens'
187+
188+
transition.fast // duration-200
189+
transition.normal // duration-300
190+
transition.slow // duration-500
191+
192+
// 使用示例
193+
<button className={clsxm('hover:bg-accent/90', transition.normal)}>
194+
按钮
195+
</button>
196+
```
197+
198+
## 🎭 Hover 效果
199+
200+
```tsx
201+
import { hover } from '~/lib/design-tokens'
202+
203+
hover.card // border 和 bg 变化
204+
hover.lift // 轻微放大 + 阴影加强
205+
hover.glow // 发光效果
206+
```
207+
208+
## 🧩 组件使用模式
209+
210+
### 标准卡片模式
211+
212+
```tsx
213+
import { Card } from '~/components/landing'
214+
import { shadows } from '~/lib/design-tokens'
215+
216+
<Card variant="floating" size="lg" hoverable>
217+
<div className="flex items-center gap-3">
218+
{/* 内容 */}
219+
</div>
220+
</Card>
221+
```
222+
223+
### Section 标准布局
224+
225+
```tsx
226+
import { spacing, typography } from '~/lib/design-tokens'
227+
228+
<section className={spacing.content}>
229+
<header className={spacing.tight}>
230+
<p className={clsxm(typography.label, 'text-text-secondary')}>
231+
Section Label
232+
</p>
233+
<h2 className={clsxm(typography.h1, 'text-white')}>
234+
主标题
235+
</h2>
236+
<p className="text-base text-text-secondary">
237+
描述文字
238+
</p>
239+
</header>
240+
241+
{/* Section 内容 */}
242+
</section>
243+
```
244+
245+
## 🌈 渐变组合
246+
247+
```tsx
248+
// Hero 渐变背景
249+
<div className="bg-gradient-to-br from-accent/40 via-purple-600/40 to-slate-900/70">
250+
...
251+
</div>
252+
253+
// 文字渐变
254+
<span className="bg-gradient-to-r from-sky-300 via-accent to-purple-400 bg-clip-text text-transparent">
255+
渐变文字
256+
</span>
257+
```
258+
259+
## 📋 完整示例
260+
261+
### 功能卡片
262+
263+
```tsx
264+
import { Card } from '~/components/landing'
265+
import { shadows, radius, spacing, typography, iconBox } from '~/lib/design-tokens'
266+
import { clsxm } from '~/lib/helper'
267+
268+
const FeatureCard = () => (
269+
<Card variant="floating" size="lg" className={spacing.group}>
270+
<div className="flex items-center gap-3">
271+
<span className={clsxm(iconBox.lg, 'bg-accent/15 text-accent')}>
272+
<i className="i-lucide-cpu size-5" />
273+
</span>
274+
<div>
275+
<p className={clsxm(typography.h3, 'text-white')}>
276+
性能与体验
277+
</p>
278+
<p className={clsxm(typography.small, 'text-text-secondary')}>
279+
描述文字
280+
</p>
281+
</div>
282+
</div>
283+
<ul className={clsxm(spacing.tight, typography.small, 'text-text-secondary')}>
284+
<li className="flex items-start gap-2">
285+
<i className="i-lucide-check size-4 text-accent" />
286+
<span>功能点 1</span>
287+
</li>
288+
</ul>
289+
</Card>
290+
)
291+
```
292+
293+
## 🎨 颜色使用场景指南
294+
295+
| 场景 | 推荐颜色 | 示例 |
296+
|------|----------|------|
297+
| 页面背景 | `bg-background` | `<div className="bg-background">` |
298+
| 卡片背景 | `bg-background/60` ~ `bg-background/80` | 玻璃态透明度 |
299+
| 按钮主色 | `bg-accent text-background` | CTA 按钮 |
300+
| 按钮次级 | `bg-fill text-text` | 次要操作 |
301+
| 强调文字 | `text-accent` | 重要信息 |
302+
| 边框 | `border-border` 或 `border-white/10` | 分隔线 |
303+
| 悬浮蒙层 | `bg-background/50 backdrop-blur-xl` | Modal 背景 |
304+
305+
## 🚫 反模式（避免）
306+
307+
```tsx
308+
// ❌ 硬编码阴影
309+
className="shadow-[0_20px_60px_rgba(0,0,0,0.35)]"
310+
311+
// ✅ 使用 token
312+
className={shadows.heavy}
313+
314+
// ❌ 重复的圆角定义
315+
className="rounded-[32px]"
316+
className="rounded-[32px]"
317+
318+
// ✅ 统一使用
319+
className={radius['2xl']}
320+
321+
// ❌ 分散的透明度值
322+
className="bg-white/5"
323+
className="bg-white/8"
324+
className="bg-white/12"
325+
326+
// ✅ 语义化背景
327+
className={glassCard.floating}
328+
```
329+
330+
## 📚 参考资源
331+
332+
- **Pastel Palette**: 颜色系统基础
333+
- **Tailwind CSS v4**: 工具类参考
334+
- **Glassmorphic Design**: UI 设计理念
335+
- **Motion/Framer Motion**: 动画系统
336+
337+
---
338+
339+
**最后更新**: 2025-11-11
340+
**维护者**: Design System Team
341+

0 commit comments

Comments
 (0)