Web Design System v4.0
Plaud Design System
A design system built for Plaud Web 4.0, based on Shadcn/ui and Radix UI.
Powered by Tailwind CSS v4 and Design Tokens, with strict alignment to the Figma specification.
Principles
Brand character, design values, and core principles that guide consistent decisions.
→Guide
A complete guide to color, typography, component usage, and auto layout.
→Components
Ready-to-use React components with 100% Shadcn/ui API compatibility.
→System Layers
Token Layer
Color, typography, spacing, and radius tokens that keep implementation aligned with design files.
Component Layer
Accessible components built on Radix UI for buttons, forms, dialogs, navigation, and more.
Theme Layer
Light and dark themes powered by CSS variables for dynamic theme switching.
Core Traits
TastefulRestrainedComposedProfessional
Amplify, don't distract - The purpose of Plaud design is not to showcase design itself, but to help users focus on thinking, judgment, and decisions.
Tech Stack
| Layer | Technology | Description |
|---|---|---|
| UI Foundation | Radix UI | Accessible, unstyled primitive components |
| Component Styling | Shadcn/ui | Component patterns and API design |
| Styling Engine | Tailwind CSS v4 | Utility-first styling driven by design tokens |
| Tokens | @plaud/design-tokens | Shared variables for color, spacing, and radius |
| Documentation | Docusaurus | Component docs with a live playground |