Design System
A collection of reusable UI components, design tokens, and guidelines that keep your application visually consistent.
A design system is the single source of truth for how your product looks and feels. It includes reusable components (buttons, inputs, cards, modals), design tokens (colors, spacing, typography), and guidelines for when and how to use each element.
Popular open-source design systems include shadcn/ui, Radix, Chakra UI, and Material UI. They give you pre-built, accessible components that you customize with your brand's colors and fonts. Design tokens are usually stored as CSS custom properties or Tailwind theme values.
For vibe coders, a design system accelerates AI-assisted UI work. When you tell AI "build a settings page using our design system," it can reuse existing components instead of inventing new ones. This keeps the entire app consistent without manual enforcement.