Colors
HSL 设计令牌驱动，亮 / 暗模式随 .dark 类自动响应。
tokens
background
--background
foreground
--foreground
primary
--primary
secondary
--secondary
muted
--muted
accent
--accent
destructive
--destructive
border
--border
Components · Tokens · Motion
Design System.
所有组件样式与交互效果的预览页面。基于 shadcn/ui 设计语言、Tailwind 令牌系统与 motion.dev 动效规范。
Radius
基于 --radius=0.75rem，派生 sm / md / lg / full 四档。
scale
sm .rounded-sm
md .rounded-md
lg .rounded-lg
full .rounded-full
Typography
Inter (Sans) + JetBrains Mono
type
Display
text-5xl · 700
Heading
text-3xl · 700
Body 文本样例 · The quick brown fox
text-base · 400
辅助文字 / Caption
text-xs · muted
0123456789 · const x = () => true
JetBrains Mono
Buttons
Primary / Outline / Ghost / Destructive · 三档尺寸 · 弹性 press 反馈
interactive
Form
Label / Input / Textarea / Select · focus-ring · 占位文淡化
fields
Badge & Chip
圆角胶囊 · 默认 / 激活两态 · hover lift + active scale
pills
DefaultSolidDestructiveStatus
Card
基础容器 · 可叠加 header / content / footer · hover 抬升
container
Hover Lift
悬停时 -4px 抬升 + 边框变深。常用于可点击卡片。
STATIC
不带 hover 的静态卡片，用于纯信息展示。
Icons
CSS mask + currentColor · 颜色随主题自动反转
.icon-brand
h-6
h-10
h-16
h-24
muted
destructive
Motion Playground
点击按钮，对比 spring vs ease；触发 stagger 序列；体验 hover/press 反馈
motion.dev
缓动对比 · Spring vs Ease
spring: stiffness 380 / damping 26 · ease: cubic-bezier(.22,1,.36,1) duration 0.6s
Stagger 序列动画
stagger(0.05s) · y[20→0] · opacity[0→1] · scale[0.8→1]
交互反馈
Hover
-4px lift
idle floating