Web Design System v4.0
Plaud Design System
为 Plaud Web 4.0 打造的设计系统。基于 Shadcn/ui + Radix UI 构建
采用 Tailwind CSS v4 与 Design Tokens，与 Figma 设计规范严格对齐
设计原则
品牌气质、设计价值观与核心原则，指导一致的设计决策。
→使用指南
颜色、字体、组件用法与自动布局的完整使用指南。
→组件
开箱即用的 React 组件，100% API 兼容 Shadcn/ui。
→设计系统组成
Token 层
颜色变量、字体、间距、圆角，确保视觉风格与设计稿完全一致
组件层
基于 Radix UI 的无障碍组件，涵盖按钮、表单、弹窗、导航等
主题层
支持 Light / Dark 双主题，通过 CSS 变量动态切换
核心气质
品味克制从容专业
Amplify, don't distract - Plaud 的设计存在意义，不是展示设计本身，而是让用户更专注思考、判断与决策。
技术栈
| 层级 | 技术 | 说明 |
|---|---|---|
| UI 基础 | Radix UI | 无障碍、无样式原语组件 |
| 样式封装 | Shadcn/ui | 组件模式与 API 设计 |
| 样式引擎 | Tailwind CSS v4 | 原子化样式，Design Token 驱动 |
| Token | @plaud/design-tokens | 统一的颜色、间距、圆角变量 |
| 文档 | Docusaurus | 组件文档与 Live Playground |