Design System Guide
Atomic Design Hierarchy
| Level | Description | Examples |
|---|---|---|
| 1. Atoms | Smallest UI elements, single purpose | Button, Input, Icon, Label, Color |
| 2. Molecules | Simple groups of atoms | Search bar (input + button), Form field (label + input + error) |
| 3. Organisms | Complex UI sections | Header, Product card, Comment thread |
| 4. Templates | Page-level structure | Blog post layout, Dashboard layout |
| 5. Pages | Instances with real content | Actual rendered product page |
Design Token Examples
/* Design Tokens — CSS Custom Properties */
:root {
/* Color tokens */
--color-primary-500: #6c63ff;
--color-primary-600: #5b52e8;
--color-neutral-0: #ffffff;
--color-neutral-900: #0f1117;
/* Spacing scale (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
--space-16: 64px;
/* Typography */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--shadow-md: 0 4px 12px rgba(0,0,0,0.24);
}
Popular Component Libraries
| Library | Framework | Style Approach | Best For |
|---|---|---|---|
| shadcn/ui | React | Copy-paste, Tailwind | Custom design systems |
| Radix UI | React | Headless (unstyled) | Accessible primitives |
| MUI (Material UI) | React | Material Design | Enterprise, rapid dev |
| Ant Design | React | Opinionated, rich | Admin dashboards, B2B |
| Vuetify | Vue | Material Design | Vue Material apps |
| Element Plus | Vue 3 | Clean, customizable | Chinese enterprise apps |
| Tailwind UI | Any | Tailwind CSS | Marketing, landing pages |
Design System Checklist
- ☐ Define color palette with semantic tokens (primary, secondary, error, success)
- ☐ Establish 4px or 8px spacing scale
- ☐ Choose 1–2 font families and define type scale
- ☐ Document component states: default, hover, focus, active, disabled, error
- ☐ Ensure WCAG 2.1 AA contrast ratios (4.5:1 text, 3:1 UI)
- ☐ Publish to Storybook or similar documentation site